From f0abc4642969587039909d5f50adb7d4592f48ba Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 30 Aug 2018 22:10:29 +0900
Subject: 開発モードで警告を表示するようにするなど
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/config.ts                              |  2 ++
 src/client/app/desktop/views/components/ui.header.vue | 19 ++++++++++++++++++-
 src/client/app/mobile/views/components/ui.header.vue  | 18 +++++++++++++++---
 src/client/app/mobile/views/components/ui.vue         |  7 +++++++
 4 files changed, 42 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index 74b9ea21c8..a326c521db 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -4,6 +4,7 @@ declare const _THEME_COLOR_: string;
 declare const _COPYRIGHT_: string;
 declare const _VERSION_: string;
 declare const _CODENAME_: string;
+declare const _ENV_: string;
 
 const address = new URL(location.href);
 
@@ -18,3 +19,4 @@ export const themeColor = _THEME_COLOR_;
 export const copyright = _COPYRIGHT_;
 export const version = _VERSION_;
 export const codename = _CODENAME_;
+export const env = _ENV_;
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 6de4eaf744..ac8a6c7765 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -1,5 +1,6 @@
 <template>
 <div class="header">
+	<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
@@ -28,6 +29,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
+import { env } from '../../../config';
 
 import XNav from './ui.header.nav.vue';
 import XSearch from './ui.header.search.vue';
@@ -43,7 +45,13 @@ export default Vue.extend({
 		XAccount,
 		XNotifications,
 		XPost,
-		XClock,
+		XClock
+	},
+
+	data() {
+		return {
+			env: env
+		};
 	},
 
 	mounted() {
@@ -119,6 +127,15 @@ root(isDark)
 	width 100%
 	box-shadow 0 1px 1px rgba(#000, 0.075)
 
+	> .warn
+		display block
+		margin 0
+		padding 4px
+		text-align center
+		font-size 12px
+		background #f00
+		color #fff
+
 	> .main
 		height 48px
 
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index a616586c56..c9b3ab51ae 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -1,5 +1,6 @@
 <template>
-<div class="header">
+<div class="header" ref="root">
+	<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
@@ -20,6 +21,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import * as anime from 'animejs';
+import { env } from '../../../config';
 
 export default Vue.extend({
 	props: ['func'],
@@ -27,7 +29,8 @@ export default Vue.extend({
 		return {
 			hasGameInvitation: false,
 			connection: null,
-			connectionId: null
+			connectionId: null,
+			env: env
 		};
 	},
 	computed: {
@@ -39,7 +42,7 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.$store.commit('setUiHeaderHeight', 48);
+		this.$store.commit('setUiHeaderHeight', this.$refs.root.offsetHeight);
 
 		if (this.$store.getters.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
@@ -133,6 +136,15 @@ root(isDark)
 		height 3px
 		background $theme-color
 
+	> .warn
+		display block
+		margin 0
+		padding 4px
+		text-align center
+		font-size 12px
+		background #f00
+		color #fff
+
 	> .main
 		color rgba(#fff, 0.9)
 
diff --git a/src/client/app/mobile/views/components/ui.vue b/src/client/app/mobile/views/components/ui.vue
index 7e2d39f259..d2af15d235 100644
--- a/src/client/app/mobile/views/components/ui.vue
+++ b/src/client/app/mobile/views/components/ui.vue
@@ -31,7 +31,14 @@ export default Vue.extend({
 			connectionId: null
 		};
 	},
+	watch: {
+		'$store.state.uiHeaderHeight'() {
+			this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+		}
+	},
 	mounted() {
+		this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+
 		if (this.$store.getters.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
-- 
cgit v1.2.3-freya


From 6434dac04d899ee1344c895d015da2a03adf71b6 Mon Sep 17 00:00:00 2001
From: Nasha Hiramiya <git@hiramiya.me>
Date: Thu, 30 Aug 2018 21:04:20 +0100
Subject: Add return for invalid filetypes, fixes wrong behaviour

---
 src/client/app/desktop/api/update-avatar.ts | 2 +-
 src/client/app/desktop/api/update-banner.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/api/update-avatar.ts b/src/client/app/desktop/api/update-avatar.ts
index e9d92d1eb1..f08e8a2b4e 100644
--- a/src/client/app/desktop/api/update-avatar.ts
+++ b/src/client/app/desktop/api/update-avatar.ts
@@ -16,7 +16,7 @@ export default (os: OS) => {
 					text: '%i18n:common.got-it%'
 				}]
 			});
-			reject();
+			return reject('invalid-filetype');
 		}
 
 		const w = os.new(CropWindow, {
diff --git a/src/client/app/desktop/api/update-banner.ts b/src/client/app/desktop/api/update-banner.ts
index e8fa35149b..42c9d69349 100644
--- a/src/client/app/desktop/api/update-banner.ts
+++ b/src/client/app/desktop/api/update-banner.ts
@@ -16,7 +16,7 @@ export default (os: OS) => {
 					text: '%i18n:common.got-it%'
 				}]
 			});
-			reject();
+			return reject('invalid-filetype');
 		}
 
 		const w = os.new(CropWindow, {
-- 
cgit v1.2.3-freya


From 63b8af453178a8586c08f999948890d1719f670d Mon Sep 17 00:00:00 2001
From: Nasha Hiramiya <git@hiramiya.me>
Date: Fri, 31 Aug 2018 20:42:20 +0100
Subject: Fix darkmode on followers-you-may-know

---
 src/client/app/desktop/views/pages/user/user.followers-you-know.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/client')

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 e4a771910a..f1abaf7fc2 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
@@ -36,8 +36,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+root(isDark)
 .followers-you-know
-	background #fff
+	background isDark ? #282C37 : #fff
 	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
 
@@ -48,7 +49,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(#000, 0.07)
 
 		> i
-- 
cgit v1.2.3-freya


From bffb9a5c451260b9b6b67df4972e28b895319825 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 08:09:21 +0900
Subject: #2447 #1958

---
 .../app/desktop/views/pages/deck/deck.column.vue   | 35 +++++++++++++++-------
 1 file changed, 25 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index d59d430da6..239b1b0447 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -3,18 +3,20 @@
 		@dragover.prevent.stop="onDragover"
 		@dragenter.prevent="onDragenter"
 		@dragleave="onDragleave"
-		@drop.prevent.stop="onDrop"
->
+		@drop.prevent.stop="onDrop">
 	<header :class="{ indicate: count > 0 }"
 			draggable="true"
-			@click="toggleActive"
+			@click="goTop"
 			@dragstart="onDragstart"
 			@dragend="onDragend"
-			@contextmenu.prevent.stop="onContextmenu"
-		>
+			@contextmenu.prevent.stop="onContextmenu">
+		<button class="toggleActive" @click="toggleActive" v-if="isStacked">
+			<template v-if="active">%fa:angle-up%</template>
+			<template v-else>%fa:angle-down%</template>
+		</button>
 		<slot name="header"></slot>
 		<span class="count" v-if="count > 0">({{ count }})</span>
-		<button ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
+		<button class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
 	</header>
 	<div ref="body" v-show="active">
 		<slot></slot>
@@ -211,6 +213,13 @@ export default Vue.extend({
 			});
 		},
 
+		goTop() {
+			this.$refs.body.scrollTo({
+				top: 0,
+				behavior: 'smooth'
+			});
+		},
+
 		onDragstart(e) {
 			e.dataTransfer.effectAllowed = 'move';
 			e.dataTransfer.setData('mk-deck-column', this.column.id);
@@ -302,6 +311,7 @@ root(isDark)
 					color #bbb
 
 	> header
+		display flex
 		z-index 1
 		line-height $header-height
 		padding 0 16px
@@ -328,10 +338,8 @@ root(isDark)
 			margin-left 4px
 			opacity 0.5
 
-		> button
-			position absolute
-			top 0
-			right 0
+		> .toggleActive
+		> .menu
 			width $header-height
 			line-height $header-height
 			font-size 16px
@@ -343,6 +351,13 @@ root(isDark)
 			&:active
 				color isDark ? #b2c1d5 : #999
 
+		> .toggleActive
+			margin-left -16px
+
+		> .menu
+			margin-left auto
+			margin-right -16px
+
 	> div
 		height "calc(100% - %s)" % $header-height
 		overflow auto
-- 
cgit v1.2.3-freya


From 6819eb3b4da43665de8e159d774b3f2325ddfe0b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 09:16:25 +0900
Subject: Improve usability

---
 package.json                                       |  1 +
 src/client/app/app.vue                             |  5 +++-
 src/client/app/init.ts                             |  5 ++++
 src/client/app/mobile/api/post.ts                  | 24 -----------------
 src/client/app/mobile/script.ts                    |  3 +--
 src/client/app/mobile/style.styl                   | 10 ++++++++
 .../mobile/views/components/drive-file-chooser.vue |  2 +-
 .../app/mobile/views/components/note-detail.vue    | 30 +++++++++++++++++-----
 src/client/app/mobile/views/components/note.vue    | 23 ++++++++++++-----
 .../app/mobile/views/components/post-form.vue      |  4 ---
 src/client/app/mobile/views/pages/home.vue         | 10 +++++++-
 11 files changed, 72 insertions(+), 45 deletions(-)
 delete mode 100644 src/client/app/mobile/api/post.ts

(limited to 'src/client')

diff --git a/package.json b/package.json
index a461d8076a..31e60260ba 100644
--- a/package.json
+++ b/package.json
@@ -216,6 +216,7 @@
 		"vue-router": "3.0.1",
 		"vue-style-loader": "4.1.2",
 		"vue-template-compiler": "2.5.17",
+		"vue-thin-modal": "1.1.1",
 		"vuedraggable": "2.16.0",
 		"vuex": "3.0.1",
 		"vuex-persistedstate": "2.5.4",
diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index 7a46e7dea0..011eb14661 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -1,3 +1,6 @@
 <template>
-<router-view id="app"></router-view>
+<div>
+	<router-view id="app"></router-view>
+	<modal-portal/>
+</div>
 </template>
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index cf97957400..dd31f07475 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -11,6 +11,8 @@ import VAnimateCss from 'v-animate-css';
 import Element from 'element-ui';
 import ElementLocaleEn from 'element-ui/lib/locale/lang/en';
 import ElementLocaleJa from 'element-ui/lib/locale/lang/ja';
+import VueThinModal from 'vue-thin-modal';
+import 'vue-thin-modal/dist/vue-thin-modal.css';
 
 import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
@@ -30,6 +32,9 @@ Vue.use(VModal);
 Vue.use(TreeView);
 Vue.use(VAnimateCss);
 Vue.use(Element, { locale: elementLocale });
+Vue.use(VueThinModal, {
+	autoMountPortal: false
+});
 
 // Register global directives
 require('./common/views/directives');
diff --git a/src/client/app/mobile/api/post.ts b/src/client/app/mobile/api/post.ts
deleted file mode 100644
index 15b2f6b691..0000000000
--- a/src/client/app/mobile/api/post.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import PostForm from '../views/components/post-form.vue';
-
-export default (os) => (opts) => {
-	const o = opts || {};
-
-	const app = document.getElementById('app');
-	app.style.display = 'none';
-
-	function recover() {
-		app.style.display = 'block';
-	}
-
-	const vm = new PostForm({
-		parent: os.app,
-		propsData: {
-			reply: o.reply,
-			renote: o.renote
-		}
-	}).$mount();
-	vm.$once('cancel', recover);
-	vm.$once('posted', recover);
-	document.body.appendChild(vm.$el);
-	(vm as any).focus();
-};
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 5b9d45462a..edc2b35529 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -14,7 +14,6 @@ import chooseDriveFolder from './api/choose-drive-folder';
 import chooseDriveFile from './api/choose-drive-file';
 import dialog from './api/dialog';
 import input from './api/input';
-import post from './api/post';
 import notify from './api/notify';
 
 import MkIndex from './views/pages/index.vue';
@@ -91,7 +90,7 @@ init((launch) => {
 		chooseDriveFile,
 		dialog: dialog(os),
 		input,
-		post: post(os),
+		post: () => alert('deprecated'),
 		notify
 	}));
 }, true);
diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl
index df8f4a8fae..f78146f8b8 100644
--- a/src/client/app/mobile/style.styl
+++ b/src/client/app/mobile/style.styl
@@ -17,3 +17,13 @@ body
 	display flex
 	flex-direction column
 	min-height 100%
+
+.modal-backdrop
+	z-index 10000 !important
+
+.modal-content-wrapper
+	z-index 10001 !important
+
+.modal-content
+	padding 0 !important
+	background-color transparent !important
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 d95d5fa223..56e41e31d8 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -48,7 +48,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .mk-drive-file-chooser
 	position fixed
-	z-index 2048
+	z-index 20000
 	top 0
 	left 0
 	width 100%
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index f9996f9da6..02ef3845d3 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -75,6 +75,13 @@
 	<div class="replies" v-if="!compact">
 		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
+
+	<modal name="replyForm">
+		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
+	</modal>
+	<modal name="renoteForm">
+		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
+	</modal>
 </div>
 </template>
 
@@ -116,9 +123,11 @@ export default Vue.extend({
 				this.note.mediaIds.length == 0 &&
 				this.note.poll == null);
 		},
+
 		p(): any {
 			return this.isRenote ? this.note.renote : this.note;
 		},
+
 		reactionsCount(): number {
 			return this.p.reactionCounts
 				? Object.keys(this.p.reactionCounts)
@@ -126,6 +135,7 @@ export default Vue.extend({
 					.reduce((a, b) => a + b)
 				: 0;
 		},
+
 		urls(): string[] {
 			if (this.p.text) {
 				const ast = parse(this.p.text);
@@ -180,16 +190,23 @@ export default Vue.extend({
 				this.conversation = conversation.reverse();
 			});
 		},
+
 		reply() {
-			(this as any).apis.post({
-				reply: this.p
-			});
+			this.$modal.push('replyForm');
+		},
+
+		replyFormClosed() {
+			this.$modal.pop();
 		},
+
 		renote() {
-			(this as any).apis.post({
-				renote: this.p
-			});
+			this.$modal.push('renoteForm');
 		},
+
+		renoteFormClosed() {
+			this.$modal.pop();
+		},
+
 		react() {
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
@@ -198,6 +215,7 @@ export default Vue.extend({
 				big: true
 			});
 		},
+
 		menu() {
 			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index d0cea135f9..f658686b05 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -60,6 +60,13 @@
 			</footer>
 		</div>
 	</article>
+
+	<modal name="replyForm">
+		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
+	</modal>
+	<modal name="renoteForm">
+		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
+	</modal>
 </div>
 </template>
 
@@ -195,15 +202,19 @@ export default Vue.extend({
 		},
 
 		reply() {
-			(this as any).apis.post({
-				reply: this.p
-			});
+			this.$modal.push('replyForm');
+		},
+
+		replyFormClosed() {
+			this.$modal.pop();
 		},
 
 		renote() {
-			(this as any).apis.post({
-				renote: this.p
-			});
+			this.$modal.push('renoteForm');
+		},
+
+		renoteFormClosed() {
+			this.$modal.pop();
 		},
 
 		react() {
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index a74df67c0a..537bf407dc 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -293,9 +293,6 @@ export default Vue.extend({
 				viaMobile: viaMobile
 			}).then(data => {
 				this.$emit('posted');
-				this.$nextTick(() => {
-					this.$destroy();
-				});
 			}).catch(err => {
 				this.posting = false;
 			});
@@ -309,7 +306,6 @@ export default Vue.extend({
 
 		cancel() {
 			this.$emit('cancel');
-			this.$destroy();
 		},
 
 		kao() {
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 706c9cd28b..a03fa03c5f 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -42,6 +42,10 @@
 			<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 		</div>
 	</main>
+
+	<modal name="postForm">
+		<mk-post-form @posted="postFormClosed" @cancel="postFormClosed"/>
+	</modal>
 </mk-ui>
 </template>
 
@@ -107,7 +111,11 @@ export default Vue.extend({
 
 	methods: {
 		fn() {
-			(this as any).apis.post();
+			this.$modal.push('postForm');
+		},
+
+		postFormClosed() {
+			this.$modal.pop();
 		},
 
 		saveSrc() {
-- 
cgit v1.2.3-freya


From 9e318d5ebc1abd01059d68eacdf42605efdeb334 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 09:29:59 +0900
Subject: Fix bug

---
 .../app/common/views/components/messaging-room.vue | 24 ++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 30143b4f1d..1de41855df 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -3,7 +3,7 @@
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
 >
-	<div class="stream">
+	<div class="body">
 		<p class="init" v-if="init">%fa:spinner .spin%%i18n:common.loading%</p>
 		<p class="empty" v-if="!init && messages.length == 0">%fa:info-circle%%i18n:@empty%</p>
 		<p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages">%fa:flag%%i18n:@no-history%</p>
@@ -77,6 +77,12 @@ export default Vue.extend({
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
 
+		if (this.isNaked) {
+			window.addEventListener('scroll', this.onScroll, { passive: true });
+		} else {
+			this.$el.addEventListener('scroll', this.onScroll, { passive: true });
+		}
+
 		document.addEventListener('visibilitychange', this.onVisibilitychange);
 
 		this.fetchMessages().then(() => {
@@ -90,6 +96,12 @@ export default Vue.extend({
 		this.connection.off('read', this.onRead);
 		this.connection.close();
 
+		if (this.isNaked) {
+			window.removeEventListener('scroll', this.onScroll);
+		} else {
+			this.$el.removeEventListener('scroll', this.onScroll);
+		}
+
 		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 	},
 
@@ -226,6 +238,14 @@ export default Vue.extend({
 			}, 4000);
 		},
 
+		onScroll() {
+			const el = this.isNaked ? window.document.documentElement : this.$el;
+			const current = el.scrollTop + el.clientHeight;
+			if (current > el.scrollHeight - 1) {
+				this.showIndicator = false;
+			}
+		},
+
 		onVisibilitychange() {
 			if (document.hidden) return;
 			this.messages.forEach(message => {
@@ -251,7 +271,7 @@ root(isDark)
 	height 100%
 	background isDark ? #191b22 : #fff
 
-	> .stream
+	> .body
 		width 100%
 		max-width 600px
 		margin 0 auto
-- 
cgit v1.2.3-freya


From 2a235151ed411b657ead0142d14da9a14e2f7105 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 09:42:25 +0900
Subject: #2236 #2237

---
 locales/ja-JP.yml                                  |  2 ++
 .../app/common/views/components/note-menu.vue      | 24 +++++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 6ebd167803..c5a3fc81ff 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -285,6 +285,8 @@ common/views/components/nav.vue:
   feedback: "フィードバック"
 
 common/views/components/note-menu.vue:
+  detail: "詳細"
+  copy-link: "リンクをコピー"
   favorite: "お気に入り"
   pin: "ピン留め"
   delete: "削除"
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index 27a49a6536..0b0609ac4e 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -6,17 +6,27 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { url } from '../../../config';
+import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
 
 export default Vue.extend({
 	props: ['note', 'source', 'compact'],
 	computed: {
 		items() {
-			const items = [];
-			items.push({
+			const items = [{
+				icon: '%fa:info-circle%',
+				text: '%i18n:@detail%',
+				action: this.detail
+			}, {
+				icon: '%fa:link%',
+				text: '%i18n:@copy-link%',
+				action: this.copyLink
+			}, null, {
 				icon: '%fa:star%',
 				text: '%i18n:@favorite%',
 				action: this.favorite
-			});
+			}];
+
 			if (this.note.userId == this.$store.state.i.id) {
 				items.push({
 					icon: '%fa:thumbtack%',
@@ -42,6 +52,14 @@ export default Vue.extend({
 		}
 	},
 	methods: {
+		detail() {
+			this.$router.push(`/notes/${ this.note.id }`);
+		},
+
+		copyLink() {
+			copyToClipboard(`${url}/notes/${ this.note.id }`);
+		},
+
 		pin() {
 			(this as any).api('i/pin', {
 				noteId: this.note.id
-- 
cgit v1.2.3-freya


From 4d6b9f62e5a66171ffcb791904f3e20358d84e78 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 12:05:25 +0900
Subject: モバイルのドライブをダークモード対応した
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/views/components/drive.file-detail.vue  | 49 ++++++++++------------
 .../app/mobile/views/components/drive.file.vue     | 23 +++++-----
 .../app/mobile/views/components/drive.folder.vue   | 12 ++++--
 src/client/app/mobile/views/components/drive.vue   | 35 +++++++++++-----
 src/client/app/mobile/views/pages/drive.vue        |  2 +-
 src/client/app/mobile/views/pages/selectdrive.vue  |  2 +-
 6 files changed, 68 insertions(+), 55 deletions(-)

(limited to 'src/client')

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 deb9941be8..43867211e9 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="file-detail">
+<div class="pyvicwrksnfyhpfgkjwqknuururpaztw">
 	<div class="preview">
 		<img v-if="kind == 'image'" ref="img"
 			:src="file.url"
@@ -25,7 +25,7 @@
 	</div>
 	<div class="info">
 		<div>
-			<span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span>
+			<span class="type"><mk-file-type-icon :type="file.type"/> {{ file.type }}</span>
 			<span class="separator"></span>
 			<span class="data-size">{{ file.datasize | bytes }}</span>
 			<span class="separator"></span>
@@ -134,11 +134,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.file-detail
-
+root(isDark)
 	> .preview
 		padding 8px
-		background #f0f0f0
+		background isDark ? #191b22 : #f0f0f0
 
 		> img
 			display block
@@ -150,7 +149,7 @@ export default Vue.extend({
 		> footer
 			padding 8px 8px 0 8px
 			font-size 0.8em
-			color #888
+			color isDark ? #606984 : #888
 			text-align center
 
 			> .separator
@@ -179,25 +178,17 @@ export default Vue.extend({
 	> .info
 		padding 14px
 		font-size 0.8em
-		border-top solid 1px #dfdfdf
+		border-top solid 1px isDark ? #1c2023 : #dfdfdf
 
 		> div
 			max-width 500px
 			margin 0 auto
+			color isDark ? #9397a2 : #9d9d9d
 
 			> .separator
 				padding 0 4px
-				color #cdcdcd
-
-			> .type
-			> .data-size
-				color #9d9d9d
-
-				> mk-file-type-icon
-					margin-right 4px
 
 			> .created-at
-				color #bdbdbd
 
 				> [data-fa]
 					margin-right 2px
@@ -207,7 +198,7 @@ export default Vue.extend({
 
 	> .menu
 		padding 14px
-		border-top solid 1px #dfdfdf
+		border-top solid 1px isDark ? #1c2023 : #dfdfdf
 
 		> div
 			max-width 500px
@@ -218,14 +209,14 @@ export default Vue.extend({
 				width 100%
 				padding 10px 16px
 				margin 0 0 12px 0
-				color #333
+				color isDark ? #dfe3e8 : #333
 				font-size 0.9em
 				text-align center
 				text-decoration none
-				text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
-				background-image linear-gradient(#fafafa, #eaeaea)
-				border 1px solid #ddd
-				border-bottom-color #cecece
+				text-shadow 0 1px 0 isDark ? rgba(0, 0, 0, 0.9) : rgba(255, 255, 255, 0.9)
+				background-image isDark ? linear-gradient(#292f3c, #1b2025) : linear-gradient(#fafafa, #eaeaea)
+				border 1px solid isDark ? #121417 : #ddd
+				border-bottom-color isDark ? #060606 : #cecece
 				border-radius 3px
 
 				&:last-child
@@ -242,7 +233,7 @@ export default Vue.extend({
 
 	> .hash
 		padding 14px
-		border-top solid 1px #dfdfdf
+		border-top solid 1px isDark ? #1c2023 : #dfdfdf
 
 		> div
 			max-width 500px
@@ -252,7 +243,7 @@ export default Vue.extend({
 				display block
 				margin 0
 				padding 0
-				color #555
+				color isDark ? #a8b7d0 : #555
 				font-size 0.9em
 
 				> [data-fa]
@@ -273,7 +264,7 @@ export default Vue.extend({
 
 	> .exif
 		padding 14px
-		border-top solid 1px #dfdfdf
+		border-top solid 1px isDark ? #1c2023 : #dfdfdf
 
 		> div
 			max-width 500px
@@ -283,7 +274,7 @@ export default Vue.extend({
 				display block
 				margin 0
 				padding 0
-				color #555
+				color isDark ? #a8b7d0 : #555
 				font-size 0.9em
 
 				> [data-fa]
@@ -301,4 +292,10 @@ export default Vue.extend({
 				border-radius 2px
 				background #f5f5f5
 
+.pyvicwrksnfyhpfgkjwqknuururpaztw[data-darkmode]
+	root(true)
+
+.pyvicwrksnfyhpfgkjwqknuururpaztw:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index 6dec4b9f4f..4375cfdd7b 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -1,5 +1,5 @@
 <template>
-<a class="file" @click.prevent="onClick" :href="`/i/drive/file/${ file.id }`" :data-is-selected="isSelected">
+<a class="vupkuhvjnjyqaqhsiogfbywvjxynrgsm" @click.prevent="onClick" :href="`/i/drive/file/${ file.id }`" :data-is-selected="isSelected">
 	<div class="container">
 		<div class="thumbnail" :style="thumbnail"></div>
 		<div class="body">
@@ -7,20 +7,12 @@
 				<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
 				<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
 			</p>
-			<!--
-			if file.tags.length > 0
-				ul.tags
-					each tag in file.tags
-						li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
-			-->
 			<footer>
 				<span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span>
 				<span class="separator"></span>
 				<span class="data-size">{{ file.datasize | bytes }}</span>
 				<span class="separator"></span>
-				<span class="created-at">
-					%fa:R clock%<mk-time :time="file.createdAt"/>
-				</span>
+				<span class="created-at">%fa:R clock%<mk-time :time="file.createdAt"/></span>
 				<template v-if="file.isSensitive">
 					<span class="separator"></span>
 					<span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span>
@@ -73,7 +65,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-.file
+root(isDark)
 	display block
 	text-decoration none !important
 
@@ -111,7 +103,7 @@ export default Vue.extend({
 				padding 0
 				font-size 0.9em
 				font-weight bold
-				color #555
+				color isDark ? #fff : #555
 				text-overflow ellipsis
 				overflow-wrap break-word
 
@@ -138,7 +130,6 @@ export default Vue.extend({
 
 				> .separator
 					padding 0 4px
-					color #CDCDCD
 
 				> .type
 					color #9D9D9D
@@ -164,4 +155,10 @@ export default Vue.extend({
 		&, *
 			color #fff !important
 
+.vupkuhvjnjyqaqhsiogfbywvjxynrgsm[data-darkmode]
+	root(true)
+
+.vupkuhvjnjyqaqhsiogfbywvjxynrgsm:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/components/drive.folder.vue b/src/client/app/mobile/views/components/drive.folder.vue
index 22ff38fecb..f76ecba6ad 100644
--- a/src/client/app/mobile/views/components/drive.folder.vue
+++ b/src/client/app/mobile/views/components/drive.folder.vue
@@ -1,5 +1,5 @@
 <template>
-<a class="root folder" @click.prevent="onClick" :href="`/i/drive/folder/${ folder.id }`">
+<a class="jvwxssxsytqlqvrpiymarjlzlsxskqsr" @click.prevent="onClick" :href="`/i/drive/folder/${ folder.id }`">
 	<div class="container">
 		<p class="name">%fa:folder%{{ folder.name }}</p>%fa:angle-right%
 	</div>
@@ -24,9 +24,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.root.folder
+root(isDark)
 	display block
-	color #777
+	color isDark ? #fff : #777
 	text-decoration none !important
 
 	*
@@ -55,4 +55,10 @@ export default Vue.extend({
 			> *
 				height 100%
 
+.jvwxssxsytqlqvrpiymarjlzlsxskqsr[data-darkmode]
+	root(true)
+
+.jvwxssxsytqlqvrpiymarjlzlsxskqsr:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index c313d225e4..36a6ea2f40 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-drive">
+<div class="kmmwchoexgckptowjmjgfsygeltxfeqs">
 	<nav ref="nav">
 		<a @click.prevent="goRoot()" href="/i/drive">%fa:cloud%%i18n:@drive%</a>
 		<template v-for="folder in hierarchyFolders">
@@ -26,11 +26,11 @@
 			</p>
 		</div>
 		<div class="folders" v-if="folders.length > 0">
-			<x-folder v-for="folder in folders" :key="folder.id" :folder="folder"/>
+			<x-folder class="folder" v-for="folder in folders" :key="folder.id" :folder="folder"/>
 			<p v-if="moreFolders">%i18n:@load-more%</p>
 		</div>
 		<div class="files" v-if="files.length > 0">
-			<x-file v-for="file in files" :key="file.id" :file="file"/>
+			<x-file class="file" v-for="file in files" :key="file.id" :file="file"/>
 			<button class="more" v-if="moreFiles" @click="fetchMoreFiles">
 				{{ fetchingMoreFiles ? '%i18n:common.loading%' : '%i18n:@load-more%' }}
 			</button>
@@ -94,6 +94,13 @@ export default Vue.extend({
 			return this.selectFile;
 		}
 	},
+	watch: {
+		top() {
+			if (this.isNaked) {
+				(this.$refs.nav as any).style.top = `${this.top}px`;
+			}
+		}
+	},
 	mounted() {
 		this.connection = (this as any).os.streams.driveStream.getConnection();
 		this.connectionId = (this as any).os.streams.driveStream.use();
@@ -466,8 +473,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-drive
-	background #fff
+root(isDark)
+	background isDark ? #282c37 : #fff
 
 	> nav
 		display block
@@ -480,10 +487,10 @@ export default Vue.extend({
 		overflow auto
 		white-space nowrap
 		font-size 0.9em
-		color rgba(#000, 0.67)
+		color rgba(isDark ? #fff : #000, 0.67)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		background-color rgba(#fff, 0.75)
+		background-color rgba(isDark ? #313543 : #fff, 0.75)
 		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
@@ -509,7 +516,7 @@ export default Vue.extend({
 			opacity 0.5
 
 		> .info
-			border-bottom solid 1px #eee
+			border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			&:empty
 				display none
@@ -520,15 +527,15 @@ export default Vue.extend({
 				margin 0 auto
 				padding 4px 16px
 				font-size 10px
-				color #777
+				color isDark ? #606984 : #777
 
 		> .folders
 			> .folder
-				border-bottom solid 1px #eee
+				border-bottom solid 1px isDark ? #1c2023 : #eee
 
 		> .files
 			> .file
-				border-bottom solid 1px #eee
+				border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			> .more
 				display block
@@ -584,4 +591,10 @@ export default Vue.extend({
 	> .file
 		display none
 
+.kmmwchoexgckptowjmjgfsygeltxfeqs[data-darkmode]
+	root(true)
+
+.kmmwchoexgckptowjmjgfsygeltxfeqs:not([data-darkmode])
+	root(false)
+
 </style>
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index c7cbe0f72e..657f43c7c3 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -11,7 +11,7 @@
 		:init-folder="initFolder"
 		:init-file="initFile"
 		:is-naked="true"
-		:top="48"
+		:top="$store.state.uiHeaderHeight"
 		@begin-fetch="Progress.start()"
 		@fetched-mid="Progress.set(0.5)"
 		@fetched="Progress.done()"
diff --git a/src/client/app/mobile/views/pages/selectdrive.vue b/src/client/app/mobile/views/pages/selectdrive.vue
index 1a162b346c..c098b8c65e 100644
--- a/src/client/app/mobile/views/pages/selectdrive.vue
+++ b/src/client/app/mobile/views/pages/selectdrive.vue
@@ -5,7 +5,7 @@
 		<button class="upload" @click="upload">%fa:upload%</button>
 		<button v-if="multiple" class="ok" @click="ok">%fa:check%</button>
 	</header>
-	<mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="42"/>
+	<mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="$store.state.uiHeaderHeight"/>
 </div>
 </template>
 
-- 
cgit v1.2.3-freya


From 29b2bdf613efb6e1db10c830012e84270a480fa8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 12:58:04 +0900
Subject: Fix bug

---
 .../app/desktop/views/pages/user/user.followers-you-know.vue     | 9 +++++++--
 src/client/app/desktop/views/pages/user/user.friends.vue         | 7 +++----
 src/client/app/desktop/views/pages/user/user.photos.vue          | 7 +++----
 3 files changed, 13 insertions(+), 10 deletions(-)

(limited to 'src/client')

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 f1abaf7fc2..0e7e3f1d77 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
@@ -1,5 +1,5 @@
 <template>
-<div class="followers-you-know">
+<div class="vahgrswmbzfdlmomxnqftuueyvwaafth">
 	<p class="title">%fa:users%%i18n:@title%</p>
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
 	<div v-if="!fetching && users.length > 0">
@@ -37,7 +37,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-.followers-you-know
 	background isDark ? #282C37 : #fff
 	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
@@ -78,4 +77,10 @@ root(isDark)
 		> i
 			margin-right 4px
 
+.vahgrswmbzfdlmomxnqftuueyvwaafth[data-darkmode]
+	root(true)
+
+.vahgrswmbzfdlmomxnqftuueyvwaafth:not([data-darkmode])
+	root(false)
+
 </style>
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 516eea0288..a238565588 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="friends">
+<div class="hozptpaliadatkehcmcayizwzwwctpbc">
 	<p class="title">%fa:users%%i18n:@title%</p>
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
 	<template v-if="!fetching && users.length != 0">
@@ -41,7 +41,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-.friends
 	background isDark ? #282C37 : #fff
 	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
@@ -113,10 +112,10 @@ root(isDark)
 			top 16px
 			right 16px
 
-.friends[data-darkmode]
+.hozptpaliadatkehcmcayizwzwwctpbc[data-darkmode]
 	root(true)
 
-.friends:not([data-darkmode])
+.hozptpaliadatkehcmcayizwzwwctpbc:not([data-darkmode])
 	root(false)
 
 </style>
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 8397e56484..64c537f1ed 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="photos">
+<div class="dzsuvbsrrrwobdxifudxuefculdfiaxd">
 	<p class="title">%fa:camera%%i18n:@title%</p>
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
 	<div class="stream" v-if="!fetching && images.length > 0">
@@ -40,7 +40,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-.photos
 	background isDark ? #282C37 : #fff
 	border solid 1px rgba(#000, 0.075)
 	border-radius 6px
@@ -88,10 +87,10 @@ root(isDark)
 		> i
 			margin-right 4px
 
-.photos[data-darkmode]
+.dzsuvbsrrrwobdxifudxuefculdfiaxd[data-darkmode]
 	root(true)
 
-.photos:not([data-darkmode])
+.dzsuvbsrrrwobdxifudxuefculdfiaxd:not([data-darkmode])
 	root(false)
 
 </style>
-- 
cgit v1.2.3-freya


From 488bbc96510990afeb9afe3ce5e68e001d514e3e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 13:08:43 +0900
Subject: DeckでもURLプレビュー
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/common/views/components/url-preview.vue    | 31 +++++++++++++++++++++-
 .../app/desktop/views/pages/deck/deck.note.vue     |  1 +
 2 files changed, 31 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index 242d9ba5c6..d5dda0c80a 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -8,7 +8,7 @@
 	</blockquote>
 </div>
 <div v-else class="mk-url-preview">
-	<a :href="url" target="_blank" :title="url" v-if="!fetching">
+	<a :class="{ mini }" :href="url" target="_blank" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
 		<article>
 			<header>
@@ -118,6 +118,12 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+
+		mini: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 
@@ -293,6 +299,29 @@ root(isDark)
 						width 12px
 						height 12px
 
+		&.mini
+			font-size 10px
+
+			> .thumbnail
+				position relative
+				width 100%
+				height 60px
+
+			> article
+				left 0
+				width 100%
+				padding 8px
+
+				> header
+					margin-bottom 4px
+
+				> footer
+					margin-top 4px
+
+					> img
+						width 12px
+						height 12px
+
 .mk-url-preview[data-darkmode]
 	root(true)
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index e6d062eac9..2615c0d090 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -36,6 +36,7 @@
 					<div class="renote" v-if="p.renote">
 						<mk-note-preview :note="p.renote" :mini="true"/>
 					</div>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="false" :mini="true"/>
 				</div>
 				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
 			</div>
-- 
cgit v1.2.3-freya


From 63e2dbbb0d1b9be3aba6afc8ec7ddb5f84c193cf Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 15:22:28 +0900
Subject: Fix bug

---
 src/client/app/mobile/views/components/note-detail.vue | 13 ++++++++-----
 src/client/app/mobile/views/components/note.vue        | 13 ++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 02ef3845d3..8a0305cedd 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -76,10 +76,10 @@
 		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
 
-	<modal name="replyForm">
+	<modal :name="replyFormId">
 		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
 	</modal>
-	<modal name="renoteForm">
+	<modal :name="renoteFormId">
 		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
 	</modal>
 </div>
@@ -87,6 +87,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import * as uuid from 'uuid';
 import parse from '../../../../../mfm/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -112,7 +113,9 @@ export default Vue.extend({
 		return {
 			conversation: [],
 			conversationFetching: false,
-			replies: []
+			replies: [],
+			replyFormId: uuid(),
+			renoteFormId: uuid()
 		};
 	},
 
@@ -192,7 +195,7 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$modal.push('replyForm');
+			this.$modal.push(this.replyFormId);
 		},
 
 		replyFormClosed() {
@@ -200,7 +203,7 @@ export default Vue.extend({
 		},
 
 		renote() {
-			this.$modal.push('renoteForm');
+			this.$modal.push(this.renoteFormId);
 		},
 
 		renoteFormClosed() {
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index f658686b05..4bf4eb34e3 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -61,10 +61,10 @@
 		</div>
 	</article>
 
-	<modal name="replyForm">
+	<modal :name="replyFormId">
 		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
 	</modal>
-	<modal name="renoteForm">
+	<modal :name="renoteFormId">
 		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
 	</modal>
 </div>
@@ -72,6 +72,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import * as uuid from 'uuid';
 import parse from '../../../../../mfm/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -89,7 +90,9 @@ export default Vue.extend({
 		return {
 			showContent: false,
 			connection: null,
-			connectionId: null
+			connectionId: null,
+			replyFormId: uuid(),
+			renoteFormId: uuid()
 		};
 	},
 
@@ -202,7 +205,7 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$modal.push('replyForm');
+			this.$modal.push(this.replyFormId);
 		},
 
 		replyFormClosed() {
@@ -210,7 +213,7 @@ export default Vue.extend({
 		},
 
 		renote() {
-			this.$modal.push('renoteForm');
+			this.$modal.push(this.renoteFormId);
 		},
 
 		renoteFormClosed() {
-- 
cgit v1.2.3-freya


From f1d65a66b465a18d200f922fac03384bee7d6f69 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 15:38:03 +0900
Subject: Fix bug

---
 package.json                                   |  1 -
 src/client/app/app.styl                        | 10 ++++++++++
 src/client/app/desktop/views/pages/welcome.vue | 17 ++++++++++++-----
 src/client/app/init.ts                         |  2 --
 src/client/app/mobile/style.styl               | 10 ----------
 5 files changed, 22 insertions(+), 18 deletions(-)

(limited to 'src/client')

diff --git a/package.json b/package.json
index 401f7d2862..110145366d 100644
--- a/package.json
+++ b/package.json
@@ -210,7 +210,6 @@
 		"vue": "2.5.17",
 		"vue-chartjs": "3.4.0",
 		"vue-cropperjs": "2.2.1",
-		"vue-js-modal": "1.3.24",
 		"vue-json-tree-view": "2.1.4",
 		"vue-loader": "15.4.1",
 		"vue-router": "3.0.1",
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index 431b9daa65..aaa0d34c71 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -126,3 +126,13 @@ pre
 
 [data-fa]
 	display inline-block
+
+.modal-backdrop
+	z-index 10000 !important
+
+.modal-content-wrapper
+	z-index 10001 !important
+
+.modal-content
+	padding 0 !important
+	background-color transparent !important
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index ac2f921a21..37c776130e 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -37,9 +37,12 @@
 	<div class="tl">
 		<mk-welcome-timeline :max="20"/>
 	</div>
-	<modal name="signup" width="500px" height="auto" scrollable>
-		<header :class="$style.signupFormHeader">%i18n:@signup%</header>
-		<mk-signup :class="$style.signupForm"/>
+
+	<modal name="signup">
+		<div :class="$style.modal">
+			<header :class="$style.signupFormHeader">%i18n:@signup%</header>
+			<mk-signup :class="$style.signupForm"/>
+		</div>
 	</modal>
 </div>
 </template>
@@ -88,10 +91,10 @@ export default Vue.extend({
 			this.$refs.pointer.style.left = x.left + 'px';
 		},
 		signup() {
-			this.$modal.show('signup');
+			this.$modal.push('signup');
 		},
 		signin() {
-			this.$modal.show('signin');
+			this.$modal.push('signin');
 		},
 		dark() {
 			this.$store.commit('device/set', {
@@ -265,6 +268,10 @@ root(isDark)
 </style>
 
 <style lang="stylus" module>
+.modal
+	width 500px
+	background #fff !important
+
 .signupForm
 	padding 24px 48px 48px 48px
 
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index dd31f07475..0b22509870 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -5,7 +5,6 @@
 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';
 import VAnimateCss from 'v-animate-css';
 import Element from 'element-ui';
@@ -28,7 +27,6 @@ switch (lang) {
 
 Vue.use(Vuex);
 Vue.use(VueRouter);
-Vue.use(VModal);
 Vue.use(TreeView);
 Vue.use(VAnimateCss);
 Vue.use(Element, { locale: elementLocale });
diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl
index f78146f8b8..df8f4a8fae 100644
--- a/src/client/app/mobile/style.styl
+++ b/src/client/app/mobile/style.styl
@@ -17,13 +17,3 @@ body
 	display flex
 	flex-direction column
 	min-height 100%
-
-.modal-backdrop
-	z-index 10000 !important
-
-.modal-content-wrapper
-	z-index 10001 !important
-
-.modal-content
-	padding 0 !important
-	background-color transparent !important
-- 
cgit v1.2.3-freya


From 7559b8da6c1b3c1bebd0355891d788f11bafa4ea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 16:23:23 +0900
Subject: :v:

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

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 537bf407dc..b076cae26d 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -170,6 +170,8 @@ export default Vue.extend({
 			});
 		}
 
+		this.focus();
+
 		this.$nextTick(() => {
 			this.focus();
 		});
-- 
cgit v1.2.3-freya


From 5209a584a2ed76057ec5edc351cf155154f3f68f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 1 Sep 2018 20:47:49 +0900
Subject: Better post form

---
 package.json                                       |   2 +-
 src/client/app/app.styl                            |  14 +--
 src/client/app/app.vue                             |   5 +-
 src/client/app/desktop/views/pages/welcome.vue     |  16 +--
 src/client/app/init.ts                             |   7 +-
 src/client/app/mobile/api/post.ts                  |  23 ++++
 src/client/app/mobile/script.ts                    |   3 +-
 .../app/mobile/views/components/note-detail.vue    |  28 ++---
 src/client/app/mobile/views/components/note.vue    |  28 ++---
 .../mobile/views/components/post-form-dialog.vue   | 131 +++++++++++++++++++++
 src/client/app/mobile/views/pages/home.vue         |  10 +-
 11 files changed, 184 insertions(+), 83 deletions(-)
 create mode 100644 src/client/app/mobile/api/post.ts
 create mode 100644 src/client/app/mobile/views/components/post-form-dialog.vue

(limited to 'src/client')

diff --git a/package.json b/package.json
index afdd47b3ce..4c88e02a45 100644
--- a/package.json
+++ b/package.json
@@ -210,12 +210,12 @@
 		"vue": "2.5.17",
 		"vue-chartjs": "3.4.0",
 		"vue-cropperjs": "2.2.1",
+		"vue-js-modal": "1.3.25",
 		"vue-json-tree-view": "2.1.4",
 		"vue-loader": "15.4.1",
 		"vue-router": "3.0.1",
 		"vue-style-loader": "4.1.2",
 		"vue-template-compiler": "2.5.17",
-		"vue-thin-modal": "1.1.1",
 		"vuedraggable": "2.16.0",
 		"vuex": "3.0.1",
 		"vuex-persistedstate": "2.5.4",
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index aaa0d34c71..3911f83a61 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -6,6 +6,10 @@ html
 		&, *
 			cursor progress !important
 
+html
+	// iOSのため
+	overflow auto
+
 body
 	overflow-wrap break-word
 
@@ -126,13 +130,3 @@ pre
 
 [data-fa]
 	display inline-block
-
-.modal-backdrop
-	z-index 10000 !important
-
-.modal-content-wrapper
-	z-index 10001 !important
-
-.modal-content
-	padding 0 !important
-	background-color transparent !important
diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index 011eb14661..7a46e7dea0 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -1,6 +1,3 @@
 <template>
-<div>
-	<router-view id="app"></router-view>
-	<modal-portal/>
-</div>
+<router-view id="app"></router-view>
 </template>
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 37c776130e..ae9bf7e678 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -38,11 +38,9 @@
 		<mk-welcome-timeline :max="20"/>
 	</div>
 
-	<modal name="signup">
-		<div :class="$style.modal">
-			<header :class="$style.signupFormHeader">%i18n:@signup%</header>
-			<mk-signup :class="$style.signupForm"/>
-		</div>
+	<modal name="signup" width="500px" height="auto" scrollable>
+		<header :class="$style.signupFormHeader">%i18n:@signup%</header>
+		<mk-signup :class="$style.signupForm"/>
 	</modal>
 </div>
 </template>
@@ -91,10 +89,10 @@ export default Vue.extend({
 			this.$refs.pointer.style.left = x.left + 'px';
 		},
 		signup() {
-			this.$modal.push('signup');
+			this.$modal.show('signup');
 		},
 		signin() {
-			this.$modal.push('signin');
+			this.$modal.show('signin');
 		},
 		dark() {
 			this.$store.commit('device/set', {
@@ -268,10 +266,6 @@ root(isDark)
 </style>
 
 <style lang="stylus" module>
-.modal
-	width 500px
-	background #fff !important
-
 .signupForm
 	padding 24px 48px 48px 48px
 
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 0b22509870..82924e92e3 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -10,8 +10,7 @@ import VAnimateCss from 'v-animate-css';
 import Element from 'element-ui';
 import ElementLocaleEn from 'element-ui/lib/locale/lang/en';
 import ElementLocaleJa from 'element-ui/lib/locale/lang/ja';
-import VueThinModal from 'vue-thin-modal';
-import 'vue-thin-modal/dist/vue-thin-modal.css';
+import VModal from 'vue-js-modal';
 
 import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
@@ -30,9 +29,7 @@ Vue.use(VueRouter);
 Vue.use(TreeView);
 Vue.use(VAnimateCss);
 Vue.use(Element, { locale: elementLocale });
-Vue.use(VueThinModal, {
-	autoMountPortal: false
-});
+Vue.use(VModal);
 
 // Register global directives
 require('./common/views/directives');
diff --git a/src/client/app/mobile/api/post.ts b/src/client/app/mobile/api/post.ts
new file mode 100644
index 0000000000..5c0f0af852
--- /dev/null
+++ b/src/client/app/mobile/api/post.ts
@@ -0,0 +1,23 @@
+import PostForm from '../views/components/post-form-dialog.vue';
+
+export default (os) => (opts) => {
+	const o = opts || {};
+
+	document.documentElement.style.overflow = 'hidden';
+
+	function recover() {
+		document.documentElement.style.overflow = 'auto';
+	}
+
+	const vm = new PostForm({
+		parent: os.app,
+		propsData: {
+			reply: o.reply,
+			renote: o.renote
+		}
+	}).$mount();
+	vm.$once('cancel', recover);
+	vm.$once('posted', recover);
+	document.body.appendChild(vm.$el);
+	(vm as any).focus();
+};
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index edc2b35529..5b9d45462a 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -14,6 +14,7 @@ import chooseDriveFolder from './api/choose-drive-folder';
 import chooseDriveFile from './api/choose-drive-file';
 import dialog from './api/dialog';
 import input from './api/input';
+import post from './api/post';
 import notify from './api/notify';
 
 import MkIndex from './views/pages/index.vue';
@@ -90,7 +91,7 @@ init((launch) => {
 		chooseDriveFile,
 		dialog: dialog(os),
 		input,
-		post: () => alert('deprecated'),
+		post: post(os),
 		notify
 	}));
 }, true);
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 8a0305cedd..786e57bb22 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -75,19 +75,11 @@
 	<div class="replies" v-if="!compact">
 		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
-
-	<modal :name="replyFormId">
-		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
-	</modal>
-	<modal :name="renoteFormId">
-		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
-	</modal>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import * as uuid from 'uuid';
 import parse from '../../../../../mfm/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -113,9 +105,7 @@ export default Vue.extend({
 		return {
 			conversation: [],
 			conversationFetching: false,
-			replies: [],
-			replyFormId: uuid(),
-			renoteFormId: uuid()
+			replies: []
 		};
 	},
 
@@ -195,19 +185,15 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$modal.push(this.replyFormId);
-		},
-
-		replyFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				reply: this.p
+			});
 		},
 
 		renote() {
-			this.$modal.push(this.renoteFormId);
-		},
-
-		renoteFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				renote: this.p
+			});
 		},
 
 		react() {
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 4bf4eb34e3..d0cea135f9 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -60,19 +60,11 @@
 			</footer>
 		</div>
 	</article>
-
-	<modal :name="replyFormId">
-		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
-	</modal>
-	<modal :name="renoteFormId">
-		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
-	</modal>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import * as uuid from 'uuid';
 import parse from '../../../../../mfm/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -90,9 +82,7 @@ export default Vue.extend({
 		return {
 			showContent: false,
 			connection: null,
-			connectionId: null,
-			replyFormId: uuid(),
-			renoteFormId: uuid()
+			connectionId: null
 		};
 	},
 
@@ -205,19 +195,15 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$modal.push(this.replyFormId);
-		},
-
-		replyFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				reply: this.p
+			});
 		},
 
 		renote() {
-			this.$modal.push(this.renoteFormId);
-		},
-
-		renoteFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				renote: this.p
+			});
 		},
 
 		react() {
diff --git a/src/client/app/mobile/views/components/post-form-dialog.vue b/src/client/app/mobile/views/components/post-form-dialog.vue
new file mode 100644
index 0000000000..6fe9249321
--- /dev/null
+++ b/src/client/app/mobile/views/components/post-form-dialog.vue
@@ -0,0 +1,131 @@
+<template>
+<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
+	<div class="bg" ref="bg" @click="onBgClick"></div>
+	<div class="main" ref="main" @click.self="onBgClick">
+		<mk-post-form ref="form"
+			:reply="reply"
+			:renote="renote"
+			:initial-text="initialText"
+			:instant="instant"
+			@posted="onPosted"
+			@cancel="onCanceled"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: {
+		reply: {
+			type: Object,
+			required: false
+		},
+		renote: {
+			type: Object,
+			required: false
+		},
+		initialText: {
+			type: String,
+			required: false
+		},
+		instant: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	mounted() {
+		this.$nextTick(() => {
+			(this.$refs.bg as any).style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				translateY: [-16, 0],
+				duration: 300,
+				easing: 'easeOutQuad'
+			});
+		});
+	},
+
+	methods: {
+		focus() {
+			this.$refs.form.focus();
+		},
+
+		close() {
+			(this.$refs.bg as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear'
+			});
+
+			(this.$refs.main as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				translateY: 16,
+				duration: 300,
+				easing: 'easeOutQuad',
+				complete: () => this.$destroy()
+			});
+		},
+
+		onBgClick() {
+			this.$emit('cancel');
+			this.close();
+		},
+
+		onPosted() {
+			this.$emit('posted');
+			this.close();
+		},
+
+		onCanceled() {
+			this.$emit('cancel');
+			this.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ulveipglmagnxfgvitaxyszerjwiqmwl
+	> .bg
+		display block
+		position fixed
+		z-index 10000
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(#000, 0.7)
+		opacity 0
+		pointer-events none
+
+	> .main
+		display block
+		position fixed
+		z-index 10000
+		top 0
+		left 0
+		right 0
+		height 100%
+		overflow auto
+		margin 0 auto 0 auto
+		opacity 0
+		transform translateY(-16px)
+
+</style>
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index a03fa03c5f..706c9cd28b 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -42,10 +42,6 @@
 			<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 		</div>
 	</main>
-
-	<modal name="postForm">
-		<mk-post-form @posted="postFormClosed" @cancel="postFormClosed"/>
-	</modal>
 </mk-ui>
 </template>
 
@@ -111,11 +107,7 @@ export default Vue.extend({
 
 	methods: {
 		fn() {
-			this.$modal.push('postForm');
-		},
-
-		postFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post();
 		},
 
 		saveSrc() {
-- 
cgit v1.2.3-freya


From 91ebd310b7dd94a98517a6c28228d8da9024983e Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Sat, 1 Sep 2018 22:18:07 +0900
Subject: Refactor reversi game

---
 .../app/common/views/components/games/reversi/reversi.game.vue    | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index b432a2308d..673879a435 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -159,11 +159,9 @@ export default Vue.extend({
 				canPutEverywhere: this.game.settings.canPutEverywhere,
 				loopedBoard: this.game.settings.loopedBoard
 			});
-			this.logs.forEach((log, i) => {
-				if (i < v) {
-					this.o.put(log.color, log.pos);
-				}
-			});
+			for (const log of this.logs.slice(0, v)) {
+				this.o.put(log.color, log.pos);
+			}
 			this.$forceUpdate();
 		}
 	},
-- 
cgit v1.2.3-freya


From acffc3e522c4fd46d2206dc90546268f388a70b7 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Sat, 1 Sep 2018 22:32:51 +0900
Subject: Refactor mfm component

---
 .../common/views/components/misskey-flavored-markdown.ts    | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/misskey-flavored-markdown.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts
index e97da4302c..44680751f7 100644
--- a/src/client/app/common/views/components/misskey-flavored-markdown.ts
+++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts
@@ -205,17 +205,8 @@ export default Vue.component('misskey-flavored-markdown', {
 			}
 		}));
 
-		const _els = [];
-		els.forEach((el, i) => {
-			if (el.tag == 'br') {
-				if (!['div', 'pre'].includes(els[i - 1].tag)) {
-					_els.push(el);
-				}
-			} else {
-				_els.push(el);
-			}
-		});
-
+		// el.tag === 'br' のとき i !== 0 が保証されるため、短絡評価により els[i - 1] は配列外参照しない
+		const _els = els.filter((el, i) => !(el.tag === 'br' && ['div', 'pre'].includes(els[i - 1].tag)));
 		return createElement('span', _els);
 	}
 });
-- 
cgit v1.2.3-freya


From 291beb45fcb7a4c856232b12848ebad8267e2840 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Sat, 1 Sep 2018 23:12:51 +0900
Subject: Use string interpolation

---
 src/client/app/auth/views/index.vue                                 | 2 +-
 src/client/app/boot.js                                              | 2 +-
 src/client/app/common/scripts/streaming/stream.ts                   | 4 ++--
 src/client/app/common/views/components/autocomplete.vue             | 4 ++--
 .../app/common/views/components/connect-failed.troubleshooter.vue   | 2 +-
 src/client/app/common/views/components/url-preview.vue              | 2 +-
 src/client/app/common/views/directives/autocomplete.ts              | 4 ++--
 src/client/app/common/views/filters/note.ts                         | 2 +-
 src/client/app/common/views/filters/user.ts                         | 2 +-
 src/client/app/common/views/pages/follow.vue                        | 2 +-
 src/client/app/desktop/views/components/drive.folder.vue            | 2 +-
 src/client/app/desktop/views/components/drive.vue                   | 4 ++--
 src/client/app/desktop/views/components/media-image.vue             | 2 +-
 src/client/app/desktop/views/components/post-form.vue               | 6 +++---
 src/client/app/desktop/views/pages/drive.vue                        | 2 +-
 src/client/app/desktop/views/pages/games/reversi.vue                | 4 ++--
 src/client/app/desktop/views/pages/messaging-room.vue               | 2 +-
 src/client/app/mobile/views/components/post-form.vue                | 6 +++---
 src/client/app/mobile/views/components/ui.nav.vue                   | 2 +-
 src/client/app/mobile/views/pages/drive.vue                         | 4 ++--
 src/client/app/mobile/views/pages/followers.vue                     | 2 +-
 src/client/app/mobile/views/pages/following.vue                     | 2 +-
 src/client/app/mobile/views/pages/games/reversi.vue                 | 4 ++--
 src/client/app/mobile/views/pages/settings.vue                      | 2 +-
 src/client/app/mobile/views/pages/user-lists.vue                    | 2 +-
 src/client/app/mobile/views/pages/user.vue                          | 2 +-
 src/daemons/notes-stats.ts                                          | 2 +-
 src/daemons/server-stats.ts                                         | 2 +-
 src/mfm/html-to-mfm.ts                                              | 2 +-
 src/mfm/html.ts                                                     | 4 ++--
 src/misc/fa.ts                                                      | 2 +-
 src/remote/activitypub/renderer/hashtag.ts                          | 2 +-
 src/server/activitypub.ts                                           | 2 +-
 src/server/api/endpoints.ts                                         | 2 +-
 src/server/api/stream/notes-stats.ts                                | 2 +-
 src/server/api/stream/server-stats.ts                               | 2 +-
 src/server/web/docs.ts                                              | 2 +-
 src/server/web/views/user.pug                                       | 2 +-
 src/services/drive/add-file.ts                                      | 2 +-
 webpack.config.ts                                                   | 4 ++--
 40 files changed, 53 insertions(+), 53 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/auth/views/index.vue b/src/client/app/auth/views/index.vue
index 609e758994..ba7df911e5 100644
--- a/src/client/app/auth/views/index.vue
+++ b/src/client/app/auth/views/index.vue
@@ -80,7 +80,7 @@ export default Vue.extend({
 		accepted() {
 			this.state = 'accepted';
 			if (this.session.app.callbackUrl) {
-				location.href = this.session.app.callbackUrl + '?token=' + this.session.token;
+				location.href = `${this.session.app.callbackUrl}?token=${this.session.token}`;
 			}
 		}
 	}
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 54397c98c6..dd2cf93a89 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -94,7 +94,7 @@
 
 	// Get salt query
 	const salt = localStorage.getItem('salt')
-		? '?salt=' + localStorage.getItem('salt')
+		? `?salt=${localStorage.getItem('salt')}`
 		: '';
 
 	// Load an app script
diff --git a/src/client/app/common/scripts/streaming/stream.ts b/src/client/app/common/scripts/streaming/stream.ts
index fefa8e5ced..4ab78f1190 100644
--- a/src/client/app/common/scripts/streaming/stream.ts
+++ b/src/client/app/common/scripts/streaming/stream.ts
@@ -44,11 +44,11 @@ export default class Connection extends EventEmitter {
 
 		const query = params
 			? Object.keys(params)
-				.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+				.map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`)
 				.join('&')
 			: null;
 
-		this.socket = new ReconnectingWebsocket(`${wsUrl}/${endpoint}${query ? '?' + query : ''}`);
+		this.socket = new ReconnectingWebsocket(`${wsUrl}/${endpoint}${query ? `?${query}` : ''}`);
 		this.socket.addEventListener('open', this.onOpen);
 		this.socket.addEventListener('close', this.onClose);
 		this.socket.addEventListener('message', this.onMessage);
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index b274eaa0a0..ea05afd6dc 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -125,7 +125,7 @@ export default Vue.extend({
 			}
 
 			if (this.type == 'user') {
-				const cacheKey = 'autocomplete:user:' + this.q;
+				const cacheKey = `autocomplete:user:${this.q}`;
 				const cache = sessionStorage.getItem(cacheKey);
 				if (cache) {
 					const users = JSON.parse(cache);
@@ -148,7 +148,7 @@ export default Vue.extend({
 					this.hashtags = JSON.parse(localStorage.getItem('hashtags') || '[]');
 					this.fetching = false;
 				} else {
-					const cacheKey = 'autocomplete:hashtag:' + this.q;
+					const cacheKey = `autocomplete:hashtag:${this.q}`;
 					const cache = sessionStorage.getItem(cacheKey);
 					if (cache) {
 						const hashtags = JSON.parse(cache);
diff --git a/src/client/app/common/views/components/connect-failed.troubleshooter.vue b/src/client/app/common/views/components/connect-failed.troubleshooter.vue
index 6c23cc7969..f64cae6b4b 100644
--- a/src/client/app/common/views/components/connect-failed.troubleshooter.vue
+++ b/src/client/app/common/views/components/connect-failed.troubleshooter.vue
@@ -57,7 +57,7 @@ export default Vue.extend({
 		}
 
 		// Check internet connection
-		fetch('https://google.com?rand=' + Math.random(), {
+		fetch(`https://google.com?rand=${Math.random()}`, {
 			mode: 'no-cors'
 		}).then(() => {
 			this.internet = true;
diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index d5dda0c80a..e182e7f8cb 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -170,7 +170,7 @@ export default Vue.extend({
 			return;
 		}
 
-		fetch('/url?url=' + encodeURIComponent(this.url)).then(res => {
+		fetch(`/url?url=${encodeURIComponent(this.url)}`).then(res => {
 			res.json().then(info => {
 				if (info.url == null) return;
 				this.title = info.title;
diff --git a/src/client/app/common/views/directives/autocomplete.ts b/src/client/app/common/views/directives/autocomplete.ts
index b252cf5c1f..26bc13871d 100644
--- a/src/client/app/common/views/directives/autocomplete.ts
+++ b/src/client/app/common/views/directives/autocomplete.ts
@@ -191,7 +191,7 @@ class Autocomplete {
 			const acct = renderAcct(value);
 
 			// 挿入
-			this.text = trimmedBefore + '@' + acct + ' ' + after;
+			this.text = `${trimmedBefore}@${acct} ${after}`;
 
 			// キャレットを戻す
 			this.vm.$nextTick(() => {
@@ -207,7 +207,7 @@ class Autocomplete {
 			const after = source.substr(caret);
 
 			// 挿入
-			this.text = trimmedBefore + '#' + value + ' ' + after;
+			this.text = `${trimmedBefore}#${value} ${after}`;
 
 			// キャレットを戻す
 			this.vm.$nextTick(() => {
diff --git a/src/client/app/common/views/filters/note.ts b/src/client/app/common/views/filters/note.ts
index a611dc8685..3c9c8b7485 100644
--- a/src/client/app/common/views/filters/note.ts
+++ b/src/client/app/common/views/filters/note.ts
@@ -1,5 +1,5 @@
 import Vue from 'vue';
 
 Vue.filter('notePage', note => {
-	return '/notes/' + note.id;
+	return `/notes/${note.id}`;
 });
diff --git a/src/client/app/common/views/filters/user.ts b/src/client/app/common/views/filters/user.ts
index ca0910fc53..e5220229b7 100644
--- a/src/client/app/common/views/filters/user.ts
+++ b/src/client/app/common/views/filters/user.ts
@@ -11,5 +11,5 @@ Vue.filter('userName', user => {
 });
 
 Vue.filter('userPage', (user, path?) => {
-	return '/@' + Vue.filter('acct')(user) + (path ? '/' + path : '');
+	return `/@${Vue.filter('acct')(user)}${(path ? `/${path}` : '')}`;
 });
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 13d855d20a..ec74b3a9b9 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
-	<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + myName + '</b>')"></div>
+	<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
 
 	<main>
 		<div class="banner" :style="bannerStyle"></div>
diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index 83880fef5c..e6b71f9426 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -163,7 +163,7 @@ export default Vue.extend({
 							});
 							break;
 						default:
-							alert('%i18n:@unhandled-error% ' + err);
+							alert(`%i18n:@unhandled-error% ${err}`);
 					}
 				});
 			}
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index d919e4a5ea..cb289027d4 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -323,7 +323,7 @@ export default Vue.extend({
 							});
 							break;
 						default:
-							alert('%i18n:@unhandled-error% ' + err);
+							alert(`%i18n:@unhandled-error% ${err}`);
 					}
 				});
 			}
@@ -404,7 +404,7 @@ export default Vue.extend({
 					folder: folder
 				});
 			} else {
-				window.open(url + '/i/drive/folder/' + folder.id,
+				window.open(`${url}/i/drive/folder/${folder.id}`,
 					'drive_window',
 					'height=500, width=800');
 			}
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 8b68f260fa..52d029a269 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -48,7 +48,7 @@ export default Vue.extend({
 			const mouseY = e.clientY - rect.top;
 			const xp = mouseX / this.$el.offsetWidth * 100;
 			const yp = mouseY / this.$el.offsetHeight * 100;
-			this.$el.style.backgroundPosition = xp + '% ' + yp + '%';
+			this.$el.style.backgroundPosition = `${xp}% ${yp}%';
 			this.$el.style.backgroundImage = `url("${this.image.url}")`;
 		},
 
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index bacaea65ee..eb8b40062a 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -110,9 +110,9 @@ export default Vue.extend({
 	computed: {
 		draftId(): string {
 			return this.renote
-				? 'renote:' + this.renote.id
+				? `renote:${this.renote.id}`
 				: this.reply
-					? 'reply:' + this.reply.id
+					? `reply:${this.reply.id}`
 					: 'note';
 		},
 
@@ -313,7 +313,7 @@ export default Vue.extend({
 				this.geo = pos.coords;
 				this.$emit('geo-attached', this.geo);
 			}, err => {
-				alert('%i18n:@error%: ' + err.message);
+				alert(`%i18n:@error%: ${err.message}`);
 			}, {
 					enableHighAccuracy: true
 				});
diff --git a/src/client/app/desktop/views/pages/drive.vue b/src/client/app/desktop/views/pages/drive.vue
index 217dcb7751..dec6c4551a 100644
--- a/src/client/app/desktop/views/pages/drive.vue
+++ b/src/client/app/desktop/views/pages/drive.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
 			const title = folder.name + ' | %i18n:@title%';
 
 			// Rewrite URL
-			history.pushState(null, title, '/i/drive/folder/' + folder.id);
+			history.pushState(null, title, `/i/drive/folder/${folder.id}`);
 
 			document.title = title;
 		}
diff --git a/src/client/app/desktop/views/pages/games/reversi.vue b/src/client/app/desktop/views/pages/games/reversi.vue
index ce9b42c65f..1b0e790a22 100644
--- a/src/client/app/desktop/views/pages/games/reversi.vue
+++ b/src/client/app/desktop/views/pages/games/reversi.vue
@@ -16,10 +16,10 @@ export default Vue.extend({
 	methods: {
 		nav(game, actualNav) {
 			if (actualNav) {
-				this.$router.push('/reversi/' + game.id);
+				this.$router.push(`/reversi/${game.id}`);
 			} else {
 				// TODO: https://github.com/vuejs/vue-router/issues/703
-				this.$router.push('/reversi/' + game.id);
+				this.$router.push(`/reversi/${game.id}`);
 			}
 		}
 	}
diff --git a/src/client/app/desktop/views/pages/messaging-room.vue b/src/client/app/desktop/views/pages/messaging-room.vue
index 1ebd53cef4..4be33dda04 100644
--- a/src/client/app/desktop/views/pages/messaging-room.vue
+++ b/src/client/app/desktop/views/pages/messaging-room.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = 'メッセージ: ' + getUserName(this.user);
+				document.title = `メッセージ: ${getUserName(this.user)}`;
 
 				Progress.done();
 			});
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index b076cae26d..8b1f7b08c8 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -105,9 +105,9 @@ export default Vue.extend({
 	computed: {
 		draftId(): string {
 			return this.renote
-				? 'renote:' + this.renote.id
+				? `renote:${this.renote.id}`
 				: this.reply
-					? 'reply:' + this.reply.id
+					? `reply:${this.reply.id}`
 					: 'note';
 		},
 
@@ -229,7 +229,7 @@ export default Vue.extend({
 			navigator.geolocation.getCurrentPosition(pos => {
 				this.geo = pos.coords;
 			}, err => {
-				alert('%i18n:@error%: ' + err.message);
+				alert(`%i18n:@error%: ${err.message}`);
 			}, {
 					enableHighAccuracy: true
 				});
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 39ea513b76..54eed1b6d4 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -82,7 +82,7 @@ export default Vue.extend({
 		search() {
 			const query = window.prompt('%i18n:@search%');
 			if (query == null || query == '') return;
-			this.$router.push('/search?q=' + encodeURIComponent(query));
+			this.$router.push(`/search?q=${encodeURIComponent(query)}`);
 		},
 		onReversiInvited() {
 			this.hasGameInvitation = true;
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index 657f43c7c3..27ac956043 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -80,7 +80,7 @@ export default Vue.extend({
 
 			if (!silent) {
 				// Rewrite URL
-				history.pushState(null, title, '/i/drive/folder/' + folder.id);
+				history.pushState(null, title, `/i/drive/folder/${folder.id}`);
 			}
 
 			document.title = title;
@@ -93,7 +93,7 @@ export default Vue.extend({
 
 			if (!silent) {
 				// Rewrite URL
-				history.pushState(null, title, '/i/drive/file/' + file.id);
+				history.pushState(null, title, `/i/drive/file/${file.id}`);
 			}
 
 			document.title = title;
diff --git a/src/client/app/mobile/views/pages/followers.vue b/src/client/app/mobile/views/pages/followers.vue
index 421c150856..601f6670c1 100644
--- a/src/client/app/mobile/views/pages/followers.vue
+++ b/src/client/app/mobile/views/pages/followers.vue
@@ -49,7 +49,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = '%i18n:@followers-of%'.replace('{}', this.name) + ' | ' + (this as any).os.instanceName;
+				document.title = `${'%i18n:@followers-of%'.replace('{}', this.name)} | ${(this as any).os.instanceName}`;
 			});
 		},
 		onLoaded() {
diff --git a/src/client/app/mobile/views/pages/following.vue b/src/client/app/mobile/views/pages/following.vue
index ff201ff2bd..0efac6110e 100644
--- a/src/client/app/mobile/views/pages/following.vue
+++ b/src/client/app/mobile/views/pages/following.vue
@@ -48,7 +48,7 @@ export default Vue.extend({
 				this.user = user;
 				this.fetching = false;
 
-				document.title = '%i18n:@followers-of%'.replace('{}', this.name) + ' | ' + (this as any).os.instanceName;
+				document.title = `${'%i18n:@followers-of%'.replace('{}', this.name)} | ${(this as any).os.instanceName}`;
 			});
 		},
 		onLoaded() {
diff --git a/src/client/app/mobile/views/pages/games/reversi.vue b/src/client/app/mobile/views/pages/games/reversi.vue
index d6849a1c11..bdadc88a43 100644
--- a/src/client/app/mobile/views/pages/games/reversi.vue
+++ b/src/client/app/mobile/views/pages/games/reversi.vue
@@ -16,10 +16,10 @@ export default Vue.extend({
 	methods: {
 		nav(game, actualNav) {
 			if (actualNav) {
-				this.$router.push('/reversi/' + game.id);
+				this.$router.push(`/reversi/${game.id}`);
 			} else {
 				// TODO: https://github.com/vuejs/vue-router/issues/703
-				this.$router.push('/reversi/' + game.id);
+				this.$router.push(`/reversi/${game.id}`);
 			}
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 7437eb8b47..838ffd2a6b 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -2,7 +2,7 @@
 <mk-ui>
 	<span slot="header">%fa:cog%%i18n:@settings%</span>
 	<main :data-darkmode="$store.state.device.darkmode">
-		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></div>
+		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
 
 		<div>
 			<x-profile/>
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
index abd04c1496..5ee0636dea 100644
--- a/src/client/app/mobile/views/pages/user-lists.vue
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -43,7 +43,7 @@ export default Vue.extend({
 					title
 				});
 
-				this.$router.push('/i/lists/' + list.id);
+				this.$router.push(`/i/lists/${list.id}`);
 			});
 		}
 	}
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 8918847a8f..ddea43c9f2 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -107,7 +107,7 @@ export default Vue.extend({
 				this.fetching = false;
 
 				Progress.done();
-				document.title = Vue.filter('userName')(this.user) + ' | ' + (this as any).os.instanceName;
+				document.title = `${Vue.filter('userName')(this.user)} | ${(this as any).os.instanceName}`;
 			});
 		}
 	}
diff --git a/src/daemons/notes-stats.ts b/src/daemons/notes-stats.ts
index 3d2c4820a6..bddb54cfa5 100644
--- a/src/daemons/notes-stats.ts
+++ b/src/daemons/notes-stats.ts
@@ -16,7 +16,7 @@ export default function() {
 	});
 
 	ev.on('requestNotesStatsLog', id => {
-		ev.emit('notesStatsLog:' + id, log.toArray());
+		ev.emit(`notesStatsLog:${id}`, log.toArray());
 	});
 
 	process.on('exit', code => {
diff --git a/src/daemons/server-stats.ts b/src/daemons/server-stats.ts
index 4a653f81f4..9bb43fe84e 100644
--- a/src/daemons/server-stats.ts
+++ b/src/daemons/server-stats.ts
@@ -16,7 +16,7 @@ export default function() {
 	const log = new Deque<any>();
 
 	ev.on('requestServerStatsLog', x => {
-		ev.emit('serverStatsLog:' + x.id, log.toArray().slice(0, x.length || 50));
+		ev.emit(`serverStatsLog:${x.id}`, log.toArray().slice(0, x.length || 50));
 	});
 
 	async function tick() {
diff --git a/src/mfm/html-to-mfm.ts b/src/mfm/html-to-mfm.ts
index e2681f5447..b476a9af5c 100644
--- a/src/mfm/html-to-mfm.ts
+++ b/src/mfm/html-to-mfm.ts
@@ -45,7 +45,7 @@ export default function(html: string): string {
 
 					if (part.length == 2) {
 						//#region ホスト名部分が省略されているので復元する
-						const acct = txt + '@' + (new URL(href.value)).hostname;
+						const acct = `${txt}@${(new URL(href.value)).hostname}`;
 						text += acct;
 						break;
 						//#endregion
diff --git a/src/mfm/html.ts b/src/mfm/html.ts
index c798ee410a..2e38fe10a0 100644
--- a/src/mfm/html.ts
+++ b/src/mfm/html.ts
@@ -44,8 +44,8 @@ const handlers: { [key: string]: (window: any, token: any, mentionedRemoteUsers:
 
 	hashtag({ document }, { hashtag }) {
 		const a = document.createElement('a');
-		a.href = config.url + '/tags/' + hashtag;
-		a.textContent = '#' + hashtag;
+		a.href = `${config.url}/tags/${hashtag}`;
+		a.textContent = `#${hashtag}`;
 		a.setAttribute('rel', 'tag');
 		document.body.appendChild(a);
 	},
diff --git a/src/misc/fa.ts b/src/misc/fa.ts
index 8be06362c3..90cdac89b2 100644
--- a/src/misc/fa.ts
+++ b/src/misc/fa.ts
@@ -26,7 +26,7 @@ export const replacement = (match: string, key: string) => {
 				arg == 'B' ? 'fab' :
 				'';
 		} else if (arg.startsWith('.')) {
-			classes.push('fa-' + arg.substr(1));
+			classes.push(`fa-${arg.substr(1)}`);
 		} else if (arg.startsWith('-')) {
 			transform = arg.substr(1).split('|').join(' ');
 		} else {
diff --git a/src/remote/activitypub/renderer/hashtag.ts b/src/remote/activitypub/renderer/hashtag.ts
index a37ba63532..36563c2df5 100644
--- a/src/remote/activitypub/renderer/hashtag.ts
+++ b/src/remote/activitypub/renderer/hashtag.ts
@@ -3,5 +3,5 @@ import config from '../../../config';
 export default (tag: string) => ({
 	type: 'Hashtag',
 	href: `${config.url}/tags/${encodeURIComponent(tag)}`,
-	name: '#' + tag
+	name: `#${tag}`
 });
diff --git a/src/server/activitypub.ts b/src/server/activitypub.ts
index 1007790ca6..f04f9e91e9 100644
--- a/src/server/activitypub.ts
+++ b/src/server/activitypub.ts
@@ -22,7 +22,7 @@ const router = new Router();
 function inbox(ctx: Router.IRouterContext) {
 	let signature;
 
-	ctx.req.headers.authorization = 'Signature ' + ctx.req.headers.signature;
+	ctx.req.headers.authorization = `Signature ${ctx.req.headers.signature}`;
 
 	try {
 		signature = httpSignature.parseRequest(ctx.req, { 'headers': [] });
diff --git a/src/server/api/endpoints.ts b/src/server/api/endpoints.ts
index d4a44070e6..2b00094269 100644
--- a/src/server/api/endpoints.ts
+++ b/src/server/api/endpoints.ts
@@ -79,7 +79,7 @@ const files = glob.sync('**/*.js', {
 });
 
 const endpoints: IEndpoint[] = files.map(f => {
-	const ep = require('./endpoints/' + f);
+	const ep = require(`./endpoints/${f}`);
 
 	return {
 		name: f.replace('.js', ''),
diff --git a/src/server/api/stream/notes-stats.ts b/src/server/api/stream/notes-stats.ts
index ab00620018..ba99403226 100644
--- a/src/server/api/stream/notes-stats.ts
+++ b/src/server/api/stream/notes-stats.ts
@@ -16,7 +16,7 @@ export default function(request: websocket.request, connection: websocket.connec
 
 		switch (msg.type) {
 			case 'requestLog':
-				ev.once('notesStatsLog:' + msg.id, statsLog => {
+				ev.once(`notesStatsLog:${msg.id}`, statsLog => {
 					connection.send(JSON.stringify({
 						type: 'statsLog',
 						body: statsLog
diff --git a/src/server/api/stream/server-stats.ts b/src/server/api/stream/server-stats.ts
index f6c1f14ebe..d4fbeefa04 100644
--- a/src/server/api/stream/server-stats.ts
+++ b/src/server/api/stream/server-stats.ts
@@ -16,7 +16,7 @@ export default function(request: websocket.request, connection: websocket.connec
 
 		switch (msg.type) {
 			case 'requestLog':
-				ev.once('serverStatsLog:' + msg.id, statsLog => {
+				ev.once(`serverStatsLog:${msg.id}`, statsLog => {
 					connection.send(JSON.stringify({
 						type: 'statsLog',
 						body: statsLog
diff --git a/src/server/web/docs.ts b/src/server/web/docs.ts
index 81e5ace3e8..14ccbdd04f 100644
--- a/src/server/web/docs.ts
+++ b/src/server/web/docs.ts
@@ -196,7 +196,7 @@ router.get('/*/api/entities/*', async ctx => {
 	const lang = ctx.params[0];
 	const entity = ctx.params[1];
 
-	const x = yaml.safeLoad(fs.readFileSync(path.resolve(__dirname + '/../../../src/docs/api/entities/' + entity + '.yaml'), 'utf-8')) as any;
+	const x = yaml.safeLoad(fs.readFileSync(path.resolve(`${__dirname}/../../../src/docs/api/entities/${entity}.yaml`), 'utf-8')) as any;
 
 	await ctx.render('../../../../src/docs/api/entities/view', Object.assign(await genVars(lang), {
 		id: `api/entities/${entity}`,
diff --git a/src/server/web/views/user.pug b/src/server/web/views/user.pug
index b5ea2f6eb4..98a53ab549 100644
--- a/src/server/web/views/user.pug
+++ b/src/server/web/views/user.pug
@@ -2,7 +2,7 @@ extends ../../../../src/client/app/base
 
 block vars
 	- const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`;
-	- const url = config.url + '/@' + (user.host ? `${user.username}@${user.host}` : user.username);
+	- const url = `${config.url}/@${(user.host ? `${user.username}@${user.host}` : user.username)}`;
 	- const img = user.avatarId ? `${config.drive_url}/${user.avatarId}` : null;
 
 block title
diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts
index 1da0f49a24..d1c7051ab0 100644
--- a/src/services/drive/add-file.ts
+++ b/src/services/drive/add-file.ts
@@ -40,7 +40,7 @@ async function save(path: string, name: string, type: string, hash: string, size
 		const thumbnailKey = `${config.drive.prefix}/${uuid.v4()}/${name}.thumbnail.jpg`;
 
 		const baseUrl = config.drive.baseUrl
-			|| `${ config.drive.config.useSSL ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? ':' + config.drive.config.port : '' }/${ config.drive.bucket }`;
+			|| `${ config.drive.config.useSSL ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? `:${config.drive.config.port}` : '' }/${ config.drive.bucket }`;
 
 		await minio.putObject(config.drive.bucket, key, fs.createReadStream(path), size, {
 			'Content-Type': type,
diff --git a/webpack.config.ts b/webpack.config.ts
index ad67530f51..341d4c7022 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -20,7 +20,7 @@ const constants = require('./src/const.json');
 
 const locales = require('./locales');
 const meta = require('./package.json');
-const version = meta.clientVersion + '-' + rndstr({ length: 8, chars: '0-9a-z' });
+const version = `${meta.clientVersion}-${rndstr({ length: 8, chars: '0-9a-z' })}`;
 const codename = meta.codename;
 
 declare var global: {
@@ -42,7 +42,7 @@ global['collapseSpacesReplacement'] = (html: string) => {
 };
 
 global['base64replacement'] = (_: any, key: string) => {
-	return fs.readFileSync(__dirname + '/src/client/' + key, 'base64');
+	return fs.readFileSync(`${__dirname}/src/client/${key}`, 'base64');
 };
 
 global['i18nReplacement'] = i18nReplacement;
-- 
cgit v1.2.3-freya


From f24869625ec12deb660f8f6bb8fe681af7ac0b2c Mon Sep 17 00:00:00 2001
From: xps2 <9610872+xps2@users.noreply.github.com>
Date: Sun, 2 Sep 2018 01:09:27 +0900
Subject: fix

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 52d029a269..0284872c68 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -48,7 +48,7 @@ export default Vue.extend({
 			const mouseY = e.clientY - rect.top;
 			const xp = mouseX / this.$el.offsetWidth * 100;
 			const yp = mouseY / this.$el.offsetHeight * 100;
-			this.$el.style.backgroundPosition = `${xp}% ${yp}%';
+			this.$el.style.backgroundPosition = `${xp}% ${yp}%`;
 			this.$el.style.backgroundImage = `url("${this.image.url}")`;
 		},
 
-- 
cgit v1.2.3-freya


From f94992abbe19a58f81d36de28d4f063064684261 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 2 Sep 2018 17:56:20 +0900
Subject: :art:

---
 src/client/app/common/views/components/menu.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index 9b16732b9a..e99bfcbd26 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-menu">
+<div class="onchrpzrvnoruiaenfcqvccjfuupzzwv">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ hukidasi }" ref="popover">
 		<template v-for="item in items">
@@ -119,9 +119,10 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-$border-color = rgba(27, 31, 35, 0.15)
+root(isDark)
+	$bg-color = isDark ? #2c303c : #fff
+	$border-color = rgba(27, 31, 35, 0.15)
 
-.mk-menu
 	position initial
 
 	> .backdrop
@@ -131,14 +132,14 @@ $border-color = rgba(27, 31, 35, 0.15)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(#000, 0.1)
+		background rgba(#000, isDark ? 0.5 : 0.1)
 		opacity 0
 
 	> .popover
 		position absolute
 		z-index 10001
 		padding 8px 0
-		background #fff
+		background $bg-color
 		border 1px solid $border-color
 		border-radius 4px
 		box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
@@ -172,12 +173,13 @@ $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 $bg-color
 
 		> button
 			display block
 			padding 8px 16px
 			width 100%
+			color isDark ? #d6dce2 : #111
 
 			&:hover
 				color $theme-color-foreground
@@ -191,6 +193,12 @@ $border-color = rgba(27, 31, 35, 0.15)
 		> div
 			margin 8px 0
 			height 1px
-			background #eee
+			background isDark ? #1c2023 : #eee
+
+.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
+	root(true)
+
+.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
+	root(false)
 
 </style>
-- 
cgit v1.2.3-freya


From ef630195fa6a86ae54eaf866b38c5379dd79242e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 2 Sep 2018 18:23:47 +0900
Subject: モバイルのドライブダイアログがおかしいのを修正 & ダークモード対応
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/views/components/drive-file-chooser.vue    | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

(limited to 'src/client')

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 56e41e31d8..aaa707d8a7 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="mk-drive-file-chooser">
+<div class="cdxzvcfawjxdyxsekbxbfgtplebnoneb">
 	<div class="body">
 		<header>
 			<h1>%i18n:@select-file%<span class="count" v-if="files.length > 0">({{ files.length }})</span></h1>
 			<button class="close" @click="cancel">%fa:times%</button>
 			<button v-if="multiple" class="ok" @click="ok">%fa:check%</button>
 		</header>
-		<mk-drive ref="browser"
+		<mk-drive class="drive" ref="browser"
 			:select-file="true"
 			:multiple="multiple"
 			@change-selection="onChangeSelection"
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-drive-file-chooser
+root(isDark)
 	position fixed
 	z-index 20000
 	top 0
@@ -59,10 +59,11 @@ export default Vue.extend({
 	> .body
 		width 100%
 		height 100%
-		background #fff
+		background isDark ? #282c37 : #fff
 
 		> header
-			border-bottom solid 1px #eee
+			border-bottom solid 1px isDark ? #1b1f29 : #eee
+			color isDark ? #fff : #111
 
 			> h1
 				margin 0
@@ -90,9 +91,15 @@ export default Vue.extend({
 				line-height 42px
 				width 42px
 
-		> .mk-drive
+		> .drive
 			height calc(100% - 42px)
 			overflow scroll
 			-webkit-overflow-scrolling touch
 
+.cdxzvcfawjxdyxsekbxbfgtplebnoneb[data-darkmode]
+	root(true)
+
+.cdxzvcfawjxdyxsekbxbfgtplebnoneb:not([data-darkmode])
+	root(false)
+
 </style>
-- 
cgit v1.2.3-freya


From d15ebe5732bb4d04a7861f43ab882738b3e4d9ef Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 2 Sep 2018 18:27:43 +0900
Subject: Improve usability

---
 src/client/app/mobile/views/components/note.vue | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index d0cea135f9..258433cb3f 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -471,10 +471,6 @@ root(isDark)
 					&.reacted
 						color $theme-color
 
-					&.menu
-						@media (max-width 350px)
-							display none
-
 .note[data-darkmode]
 	root(true)
 
-- 
cgit v1.2.3-freya


From 99fbd6026591f555f270b826c71c42e9de601267 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 2 Sep 2018 20:19:59 +0900
Subject: Improve url visual (#2591)

* Use string interpolation

* improve url visual

* fix lint
---
 src/client/app/common/views/components/url.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/url.vue b/src/client/app/common/views/components/url.vue
index e6ffe4466d..04a1f30135 100644
--- a/src/client/app/common/views/components/url.vue
+++ b/src/client/app/common/views/components/url.vue
@@ -12,6 +12,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { toUnicode as decodePunycode } from 'punycode';
 export default Vue.extend({
 	props: ['url', 'target'],
 	data() {
@@ -27,11 +28,11 @@ export default Vue.extend({
 	created() {
 		const url = new URL(this.url);
 		this.schema = url.protocol;
-		this.hostname = url.hostname;
+		this.hostname = decodePunycode(url.hostname);
 		this.port = url.port;
-		this.pathname = url.pathname;
-		this.query = url.search;
-		this.hash = url.hash;
+		this.pathname = decodeURIComponent(url.pathname);
+		this.query = decodeURIComponent(url.search);
+		this.hash = decodeURIComponent(url.hash);
 	}
 });
 </script>
-- 
cgit v1.2.3-freya


From c57bf87f525f40e37b88714073e198511406fb44 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Sun, 2 Sep 2018 21:39:47 +0900
Subject: Make poll button togglable (#2592)

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index eb8b40062a..2ca5484610 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -35,7 +35,7 @@
 	<button class="upload" title="%i18n:@attach-media-from-local%" @click="chooseFile">%fa:upload%</button>
 	<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="%i18n:@create-poll%" @click="poll = !poll">%fa:chart-pie%</button>
 	<button class="poll" title="%i18n:@hide-contents%" @click="useCw = !useCw">%fa:eye-slash%</button>
 	<button class="geo" title="%i18n:@attach-location-information%" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
 	<button class="visibility" title="%i18n:@visibility%" @click="setVisibility" ref="visibilityButton">
-- 
cgit v1.2.3-freya


From 66f3a155e6050fc297d2f600e6d619c5dba0f764 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 3 Sep 2018 23:23:50 +0900
Subject: なんかもうめっちゃやった
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/views/components/signin.vue  |   2 +-
 src/client/app/common/views/widgets/broadcast.vue  |  10 +-
 .../views/pages/admin/admin.announcements.vue      |  41 +++
 src/client/app/desktop/views/pages/admin/admin.vue |   6 +
 src/client/app/desktop/views/pages/welcome.vue     | 309 ++++++++++-----------
 src/server/api/endpoints/admin/update-meta.ts      |  12 +-
 6 files changed, 205 insertions(+), 175 deletions(-)
 create mode 100644 src/client/app/desktop/views/pages/admin/admin.announcements.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 5230ac371a..b1c6782e93 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -78,7 +78,7 @@ export default Vue.extend({
 			cursor wait !important
 
 	> .avatar
-		margin 16px auto 0 auto
+		margin 0 auto 0 auto
 		width 64px
 		height 64px
 		background #ddd
diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index 69b2a54fe9..d3a39bd9cc 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -42,15 +42,7 @@ export default define({
 	},
 	mounted() {
 		(this as any).os.getMeta().then(meta => {
-			let broadcasts = [];
-			if (meta.broadcasts) {
-				meta.broadcasts.forEach(broadcast => {
-					if (broadcast[lang]) {
-						broadcasts.push(broadcast[lang]);
-					}
-				});
-			}
-			this.broadcasts = broadcasts;
+			this.broadcasts = meta.broadcasts;
 			this.fetching = false;
 		});
 	},
diff --git a/src/client/app/desktop/views/pages/admin/admin.announcements.vue b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
new file mode 100644
index 0000000000..532400deb2
--- /dev/null
+++ b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
@@ -0,0 +1,41 @@
+<template>
+<div class="qldxjjsrseehkusjuoooapmsprvfrxyl mk-admin-card">
+	<header>%i18n:@announcements%</header>
+	<textarea v-model="broadcasts"></textarea>
+	<button class="ui" @click="save">%i18n:@save%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+	data() {
+		return {
+			broadcasts: '',
+		};
+	},
+	created() {
+		(this as any).os.getMeta().then(meta => {
+			this.broadcasts = JSON.stringify(meta.broadcasts, null, '  ');
+		});
+	},
+	methods: {
+		save() {
+			(this as any).api('admin/update-meta', {
+				broadcasts: JSON.parse(this.broadcasts)
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.qldxjjsrseehkusjuoooapmsprvfrxyl
+	textarea
+		width 100%
+		min-height 300px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index 3438462cd6..a71059c378 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -4,6 +4,7 @@
 		<ul>
 			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:chalkboard .fw%%i18n:@dashboard%</li>
 			<li @click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
+			<li @click="nav('announcements')" :class="{ active: page == 'announcements' }">%fa:broadcast-tower .fw%%i18n:@announcements%</li>
 			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:@drive%</li> -->
 			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
 		</ul>
@@ -13,6 +14,9 @@
 			<x-dashboard/>
 			<x-charts/>
 		</div>
+		<div v-show="page == 'announcements'">
+			<x-announcements/>
+		</div>
 		<div v-if="page == 'users'">
 			<x-suspend-user/>
 			<x-unsuspend-user/>
@@ -28,6 +32,7 @@
 <script lang="ts">
 import Vue from "vue";
 import XDashboard from "./admin.dashboard.vue";
+import XAnnouncements from "./admin.announcements.vue";
 import XSuspendUser from "./admin.suspend-user.vue";
 import XUnsuspendUser from "./admin.unsuspend-user.vue";
 import XVerifyUser from "./admin.verify-user.vue";
@@ -37,6 +42,7 @@ import XCharts from "../../components/charts.vue";
 export default Vue.extend({
 	components: {
 		XDashboard,
+		XAnnouncements,
 		XSuspendUser,
 		XUnsuspendUser,
 		XVerifyUser,
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index ae9bf7e678..e67ef16136 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -1,46 +1,60 @@
 <template>
 <div class="mk-welcome">
-	<img ref="pointer" class="pointer" src="/assets/pointer.png" alt="">
 	<button @click="dark">
 		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
 		<template v-else>%fa:R moon%</template>
 	</button>
+
+	<mk-forkit class="forkit"/>
+
 	<div class="body">
-		<div class="container">
+		<div class="main">
+			<h1 v-if="name != 'Misskey'">{{ name }}</h1>
+			<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
+
 			<div class="info">
-				<span><b>{{ host }}</b></span>
+				<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
 				<span class="stats" v-if="stats">
 					<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
 					<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
 				</span>
 			</div>
-			<main>
-				<div class="about">
-					<h1 v-if="name != 'Misskey'">{{ name }}</h1>
-					<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
-					<p class="powerd-by" v-if="name != 'Misskey'" v-html="'%i18n:@powered-by-misskey%'"></p>
-					<p class="desc" v-html="description || '%i18n:common.about%'"></p>
-					<a ref="signup" @click="signup">📦 %i18n:@signup%</a>
-				</div>
-				<div class="login">
-					<mk-signin/>
-				</div>
-			</main>
+
+			<p class="desc" v-html="description || '%i18n:common.about%'"></p>
+
+			<p class="sign">
+				<span class="signup" @click="signup">%i18n:@signup%</span>
+				<span class="divider">|</span>
+				<span class="signin" @click="signin">%i18n:@signin%</span>
+			</p>
+
 			<div class="hashtags">
 				<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
 			</div>
+		</div>
+
+		<div class="broadcasts">
+			<div v-for="broadcast in broadcasts">
+				<h1 v-html="broadcast.title"></h1>
+				<div v-html="broadcast.text"></div>
+			</div>
+		</div>
+
+		<div class="nav">
 			<mk-nav class="nav"/>
 		</div>
-		<mk-forkit class="forkit"/>
-		<img src="assets/title.dark.svg" :alt="name">
-	</div>
-	<div class="tl">
-		<mk-welcome-timeline :max="20"/>
+
+		<mk-welcome-timeline class="tl" :max="20"/>
 	</div>
 
-	<modal name="signup" width="500px" height="auto" scrollable>
-		<header :class="$style.signupFormHeader">%i18n:@signup%</header>
-		<mk-signup :class="$style.signupForm"/>
+	<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
+		<header class="formHeader">%i18n:@signup%</header>
+		<mk-signup class="form"/>
+	</modal>
+
+	<modal name="signin" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
+		<header class="formHeader">%i18n:@signin%</header>
+		<mk-signin class="form"/>
 	</modal>
 </div>
 </template>
@@ -57,7 +71,7 @@ export default Vue.extend({
 			host,
 			name: 'Misskey',
 			description: '',
-			pointerInterval: null,
+			broadcasts: [],
 			tags: []
 		};
 	},
@@ -65,6 +79,7 @@ export default Vue.extend({
 		(this as any).os.getMeta().then(meta => {
 			this.name = meta.name;
 			this.description = meta.description;
+			this.broadcasts = meta.broadcasts;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -75,19 +90,7 @@ export default Vue.extend({
 			this.tags = stats.map(x => x.tag);
 		});
 	},
-	mounted() {
-		this.point();
-		this.pointerInterval = setInterval(this.point, 100);
-	},
-	beforeDestroy() {
-		clearInterval(this.pointerInterval);
-	},
 	methods: {
-		point() {
-			const x = this.$refs.signup.getBoundingClientRect();
-			this.$refs.pointer.style.top = x.top + x.height + 'px';
-			this.$refs.pointer.style.left = x.left + 'px';
-		},
 		signup() {
 			this.$modal.show('signup');
 		},
@@ -104,11 +107,40 @@ export default Vue.extend({
 });
 </script>
 
-<style>
-#wait {
-	right: auto;
-	left: 15px;
-}
+<style lang="stylus">
+#wait
+	right auto
+	left 15px
+
+.v--modal-overlay
+	background rgba(0, 0, 0, 0.4)
+
+.modal-light
+	.v--modal-box
+		color #777
+
+		.formHeader
+			border-bottom solid 1px #eee
+
+.modal-dark
+	.v--modal-box
+		background #313543
+		color #fff
+
+		.formHeader
+			border-bottom solid 1px rgba(#000, 0.2)
+
+.modal-light
+.modal-dark
+	.form
+		padding 24px 48px 48px 48px
+
+	.formHeader
+		text-align center
+		padding 48px 0 12px 0
+		margin 0 48px
+		font-size 1.5em
+
 </style>
 
 <style lang="stylus" scoped>
@@ -117,122 +149,85 @@ export default Vue.extend({
 root(isDark)
 	display flex
 	min-height 100vh
+	//background-color #00070F
+	//background-image url('/assets/bg.jpg')
+	//background-position center
+	//background-size cover
 
-	> .pointer
-		display block
+	> .forkit
 		position absolute
-		z-index 1
 		top 0
 		right 0
-		width 180px
-		margin 0 0 0 -180px
-		transform rotateY(180deg) translateX(-10px) translateY(-48px)
-		pointer-events none
 
 	> button
 		position fixed
 		z-index 1
-		top 0
-		left 0
+		bottom 64px
+		left 64px
 		padding 16px
 		font-size 18px
-		color #fff
-
-		display none // TODO
+		color isDark ? #fff : #444
 
 	> .body
-		flex 1
-		padding 64px 0 0 0
-		text-align center
-		background #578394
-		background-position center
-		background-size cover
-
-		&:before
-			content ''
-			display block
-			position absolute
-			top 0
-			left 0
-			right 0
-			bottom 0
-			background rgba(#000, 0.5)
-
-		> .forkit
-			position absolute
-			top 0
-			right 0
-
-		> img
-			position absolute
-			bottom 16px
-			right 16px
-			width 150px
-
-		> .container
-			$aboutWidth = 380px
-			$loginWidth = 340px
-			$width = $aboutWidth + $loginWidth
+		display grid
+		grid-template-rows 0.5fr 0.5fr 64px
+		grid-template-columns 1fr 350px
+		gap 16px
+		width 100%
+		max-width 1200px
+		height 100vh
+		margin 0 auto
+		padding 64px
+
+		> *
+			color isDark ? #fff : #444
+			background isDark ? #313543 : #fff
+			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+			//border-radius 8px
+			overflow auto
+
+		> .main
+			grid-row 1
+			grid-column 1
+			padding 32px
+
+			> h1
+				margin 0
+
+				> img
+					margin -8px 0 0 -16px
+					max-width 280px
 
 			> .info
 				margin 0 auto 16px auto
 				width $width
 				font-size 14px
-				color #fff
 
 				> .stats
 					margin-left 16px
 					padding-left 16px
-					border-left solid 1px #fff
+					border-left solid 1px isDark ? #fff : #444
 
 					> *
 						margin-right 16px
 
-			> main
-				display flex
-				margin auto
-				width $width
-				border-radius 8px
-				overflow hidden
-				box-shadow 0 2px 8px rgba(#000, 0.3)
-
-				> .about
-					width $aboutWidth
-					color #444
-					background #fff
-
-					> h1
-						margin 0 0 16px 0
-						padding 32px 32px 0 32px
-						color #444
+			> .sign
+				font-size 120%
 
-						> img
-							width 170px
-							vertical-align bottom
+				> .divider
+					margin 0 16px
 
-					> .powerd-by
-						margin 16px
-						opacity 0.7
+				> .signin
+				> .signup
+					cursor pointer
 
-					> .desc
-						margin 0
-						padding 0 32px 16px 32px
-
-					> a
-						display inline-block
-						margin 0 0 32px 0
-						font-weight bold
-
-				> .login
-					width $loginWidth
-					padding 16px 32px 32px 32px
-					background isDark ? #2e3440 : #f5f5f5
+					&:hover
+						color $theme-color
 
 			> .hashtags
 				margin 16px auto
 				width $width
 				font-size 14px
-				color #fff
 				background rgba(#000, 0.3)
 				border-radius 8px
 
@@ -240,20 +235,32 @@ root(isDark)
 					display inline-block
 					margin 14px
 
-			> .nav
-				display block
-				margin 16px 0
-				font-size 14px
-				color #fff
-
-	> .tl
-		margin 0
-		width 410px
-		height 100vh
-		text-align left
-		background isDark ? #313543 : #fff
-
-		> *
+		> .broadcasts
+			grid-row 2
+			grid-column 1
+			padding 32px
+
+			> div
+				padding 0 0 16px 0
+				margin 0 0 16px 0
+				border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+
+				> h1
+					margin 0
+					font-size 1.5em
+
+		> .nav
+			display flex
+			justify-content center
+			align-items center
+			grid-row 3
+			grid-column 1
+			font-size 14px
+
+		> .tl
+			grid-row 1 / 4
+			grid-column 2
+			text-align left
 			max-height 100%
 			overflow auto
 
@@ -264,29 +271,3 @@ root(isDark)
 	root(false)
 
 </style>
-
-<style lang="stylus" module>
-.signupForm
-	padding 24px 48px 48px 48px
-
-.signupFormHeader
-	padding 48px 0 12px 0
-	margin: 0 48px
-	font-size 1.5em
-	color #777
-	border-bottom solid 1px #eee
-
-.signinForm
-	padding 24px 48px 48px 48px
-
-.signinFormHeader
-	padding 48px 0 12px 0
-	margin: 0 48px
-	font-size 1.5em
-	color #777
-	border-bottom solid 1px #eee
-
-.nav
-	a
-		color #666
-</style>
diff --git a/src/server/api/endpoints/admin/update-meta.ts b/src/server/api/endpoints/admin/update-meta.ts
index 9737a281ed..10ca15d329 100644
--- a/src/server/api/endpoints/admin/update-meta.ts
+++ b/src/server/api/endpoints/admin/update-meta.ts
@@ -11,11 +11,17 @@ export const meta = {
 	requireAdmin: true,
 
 	params: {
+		broadcasts: $.arr($.obj()).optional.nullable.note({
+			desc: {
+				'ja-JP': 'ブロードキャスト'
+			}
+		}),
+
 		disableRegistration: $.bool.optional.nullable.note({
 			desc: {
 				'ja-JP': '招待制か否か'
 			}
-		}),
+		})
 	}
 };
 
@@ -25,6 +31,10 @@ export default (params: any) => new Promise(async (res, rej) => {
 
 	const set = {} as any;
 
+	if (ps.broadcasts) {
+		set.broadcasts = ps.broadcasts;
+	}
+
 	if (typeof ps.disableRegistration === 'boolean') {
 		set.disableRegistration = ps.disableRegistration;
 	}
-- 
cgit v1.2.3-freya


From 3698c679e23c184e897d86e9d75dfe2a110a282c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 4 Sep 2018 02:09:56 +0900
Subject: :pizza:

---
 locales/ja-JP.yml                                  |   6 +-
 src/client/app/common/views/components/index.ts    |   2 +
 .../app/common/views/components/trends.chart.vue   |  89 +++++++++++++++++
 src/client/app/common/views/components/trends.vue  | 105 +++++++++++++++++++++
 .../app/common/views/widgets/hashtags.chart.vue    |  89 -----------------
 src/client/app/common/views/widgets/hashtags.vue   |  94 +-----------------
 src/client/app/desktop/views/pages/welcome.vue     |  52 +++++-----
 7 files changed, 232 insertions(+), 205 deletions(-)
 create mode 100644 src/client/app/common/views/components/trends.chart.vue
 create mode 100644 src/client/app/common/views/components/trends.vue
 delete mode 100644 src/client/app/common/views/widgets/hashtags.chart.vue

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c5a3fc81ff..a57f724a32 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -375,6 +375,10 @@ common/views/components/visibility-chooser.vue:
   specified-desc: "指定したユーザーにのみ公開"
   private: "非公開"
 
+common/views/components/trends.vue:
+  count: "{}人が投稿"
+  empty: "トレンドなし"
+
 common/views/widgets/broadcast.vue:
   fetching: "確認中"
   no-broadcasts: "お知らせはありません"
@@ -403,8 +407,6 @@ common/views/widgets/posts-monitor.vue:
 
 common/views/widgets/hashtags.vue:
   title: "ハッシュタグ"
-  count: "{}人が投稿"
-  empty: "トレンドなし"
 
 common/views/widgets/server.vue:
   title: "サーバー情報"
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 422a3da050..4700b6269e 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import trends from './trends.vue';
 import analogClock from './analog-clock.vue';
 import menu from './menu.vue';
 import noteHeader from './note-header.vue';
@@ -40,6 +41,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-trends', trends);
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
 Vue.component('mk-note-header', noteHeader);
diff --git a/src/client/app/common/views/components/trends.chart.vue b/src/client/app/common/views/components/trends.chart.vue
new file mode 100644
index 0000000000..723a3947f8
--- /dev/null
+++ b/src/client/app/common/views/components/trends.chart.vue
@@ -0,0 +1,89 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
+	<defs>
+		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
+			<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
+			<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
+		</linearGradient>
+		<mask :id="maskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
+			<polygon
+				:points="polygonPoints"
+				fill="#fff"
+				fill-opacity="0.5"/>
+			<polyline
+				:points="polylinePoints"
+				fill="none"
+				stroke="#fff"
+				stroke-width="2"/>
+			<circle
+				:cx="headX"
+				:cy="headY"
+				r="3"
+				fill="#fff"/>
+		</mask>
+	</defs>
+	<rect
+		x="-10" y="-10"
+		:width="viewBoxX + 20" :height="viewBoxY + 20"
+		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"/>
+</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	props: {
+		src: {
+			type: Array,
+			required: true
+		}
+	},
+	data() {
+		return {
+			viewBoxX: 50,
+			viewBoxY: 30,
+			gradientId: uuid(),
+			maskId: uuid(),
+			polylinePoints: '',
+			polygonPoints: '',
+			headX: null,
+			headY: null,
+			clock: null
+		};
+	},
+	watch: {
+		src() {
+			this.draw();
+		}
+	},
+	created() {
+		this.draw();
+
+		// Vueが何故かWatchを発動させない場合があるので
+		this.clock = setInterval(this.draw, 1000);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		draw() {
+			const stats = this.src.slice().reverse();
+			const peak = Math.max.apply(null, stats) || 1;
+
+			const polylinePoints = stats.map((n, i) => [
+				i * (this.viewBoxX / (stats.length - 1)),
+				(1 - (n / peak)) * this.viewBoxY
+			]);
+
+			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+
+			this.polygonPoints = `0,${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+
+			this.headX = polylinePoints[polylinePoints.length - 1][0];
+			this.headY = polylinePoints[polylinePoints.length - 1][1];
+		}
+	}
+});
+</script>
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
new file mode 100644
index 0000000000..627edc3876
--- /dev/null
+++ b/src/client/app/common/views/components/trends.vue
@@ -0,0 +1,105 @@
+<template>
+<div class="csqvmxybqbycalfhkxvyfrgbrdalkaoc">
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
+	<!-- トランジションを有効にするとなぜかメモリリークする -->
+	<!-- <transition-group v-else tag="div" name="chart"> -->
+	<div>
+		<div v-for="stat in stats" :key="stat.tag">
+			<div class="tag">
+				<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
+				<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
+			</div>
+			<x-chart class="chart" :src="stat.chart"/>
+		</div>
+	</div>
+	<!-- </transition-group> -->
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XChart from './trends.chart.vue';
+
+export default Vue.extend({
+	components: {
+		XChart
+	},
+	data() {
+		return {
+			stats: [],
+			fetching: true,
+			clock: null
+		};
+	},
+	mounted() {
+		this.fetch();
+		this.clock = setInterval(this.fetch, 1000 * 60);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		fetch() {
+			(this as any).api('hashtags/trend').then(stats => {
+				this.stats = stats;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	> .fetching
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+	> div
+		.chart-move
+			transition transform 1s ease
+
+		> div
+			display flex
+			align-items center
+			padding 14px 16px
+
+			&:not(:last-child)
+				border-bottom solid 1px isDark ? #393f4f : #eee
+
+			> .tag
+				flex 1
+				overflow hidden
+				font-size 14px
+				color isDark ? #9baec8 : #65727b
+
+				> a
+					display block
+					width 100%
+					white-space nowrap
+					overflow hidden
+					text-overflow ellipsis
+					color inherit
+
+				> p
+					margin 0
+					font-size 75%
+					opacity 0.7
+
+			> .chart
+				height 30px
+
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
+	root(true)
+
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/common/views/widgets/hashtags.chart.vue b/src/client/app/common/views/widgets/hashtags.chart.vue
deleted file mode 100644
index 723a3947f8..0000000000
--- a/src/client/app/common/views/widgets/hashtags.chart.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
-	<defs>
-		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
-			<stop offset="0%" stop-color="hsl(200, 80%, 70%)"></stop>
-			<stop offset="100%" stop-color="hsl(90, 80%, 70%)"></stop>
-		</linearGradient>
-		<mask :id="maskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-			<polygon
-				:points="polygonPoints"
-				fill="#fff"
-				fill-opacity="0.5"/>
-			<polyline
-				:points="polylinePoints"
-				fill="none"
-				stroke="#fff"
-				stroke-width="2"/>
-			<circle
-				:cx="headX"
-				:cy="headY"
-				r="3"
-				fill="#fff"/>
-		</mask>
-	</defs>
-	<rect
-		x="-10" y="-10"
-		:width="viewBoxX + 20" :height="viewBoxY + 20"
-		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"/>
-</svg>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import * as uuid from 'uuid';
-
-export default Vue.extend({
-	props: {
-		src: {
-			type: Array,
-			required: true
-		}
-	},
-	data() {
-		return {
-			viewBoxX: 50,
-			viewBoxY: 30,
-			gradientId: uuid(),
-			maskId: uuid(),
-			polylinePoints: '',
-			polygonPoints: '',
-			headX: null,
-			headY: null,
-			clock: null
-		};
-	},
-	watch: {
-		src() {
-			this.draw();
-		}
-	},
-	created() {
-		this.draw();
-
-		// Vueが何故かWatchを発動させない場合があるので
-		this.clock = setInterval(this.draw, 1000);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
-	methods: {
-		draw() {
-			const stats = this.src.slice().reverse();
-			const peak = Math.max.apply(null, stats) || 1;
-
-			const polylinePoints = stats.map((n, i) => [
-				i * (this.viewBoxX / (stats.length - 1)),
-				(1 - (n / peak)) * this.viewBoxY
-			]);
-
-			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-
-			this.polygonPoints = `0,${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
-
-			this.headX = polylinePoints[polylinePoints.length - 1][0];
-			this.headY = polylinePoints[polylinePoints.length - 1][1];
-		}
-	}
-});
-</script>
diff --git a/src/client/app/common/views/widgets/hashtags.vue b/src/client/app/common/views/widgets/hashtags.vue
index 56520400b6..0cb6b2df10 100644
--- a/src/client/app/common/views/widgets/hashtags.vue
+++ b/src/client/app/common/views/widgets/hashtags.vue
@@ -4,20 +4,7 @@
 		<template slot="header">%fa:hashtag%%i18n:@title%</template>
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
-			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-			<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
-			<!-- トランジションを有効にするとなぜかメモリリークする -->
-			<!-- <transition-group v-else tag="div" name="chart"> -->
-			<div>
-				<div v-for="stat in stats" :key="stat.tag">
-					<div class="tag">
-						<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
-						<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
-					</div>
-					<x-chart class="chart" :src="stat.chart"/>
-				</div>
-			</div>
-			<!-- </transition-group> -->
+			<mk-trends/>
 		</div>
 	</mk-widget-container>
 </div>
@@ -25,7 +12,6 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import XChart from './hashtags.chart.vue';
 
 export default define({
 	name: 'hashtags',
@@ -33,89 +19,11 @@ export default define({
 		compact: false
 	})
 }).extend({
-	components: {
-		XChart
-	},
-	data() {
-		return {
-			stats: [],
-			fetching: true,
-			clock: null
-		};
-	},
-	mounted() {
-		this.fetch();
-		this.clock = setInterval(this.fetch, 1000 * 60);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
 			this.save();
-		},
-		fetch() {
-			(this as any).api('hashtags/trend').then(stats => {
-				this.stats = stats;
-				this.fetching = false;
-			});
 		}
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-root(isDark)
-	.mkw-hashtags--body
-		> .fetching
-		> .empty
-			margin 0
-			padding 16px
-			text-align center
-			color #aaa
-
-			> [data-fa]
-				margin-right 4px
-
-		> div
-			.chart-move
-				transition transform 1s ease
-
-			> div
-				display flex
-				align-items center
-				padding 14px 16px
-
-				&:not(:last-child)
-					border-bottom solid 1px isDark ? #393f4f : #eee
-
-				> .tag
-					flex 1
-					overflow hidden
-					font-size 14px
-					color isDark ? #9baec8 : #65727b
-
-					> a
-						display block
-						width 100%
-						white-space nowrap
-						overflow hidden
-						text-overflow ellipsis
-						color inherit
-
-					> p
-						margin 0
-						font-size 75%
-						opacity 0.7
-
-				> .chart
-					height 30px
-
-.mkw-hashtags[data-darkmode]
-	root(true)
-
-.mkw-hashtags:not([data-darkmode])
-	root(false)
-
-</style>
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index e67ef16136..481441c3c7 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -8,7 +8,7 @@
 	<mk-forkit class="forkit"/>
 
 	<div class="body">
-		<div class="main">
+		<div class="main block">
 			<h1 v-if="name != 'Misskey'">{{ name }}</h1>
 			<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
 
@@ -27,24 +27,24 @@
 				<span class="divider">|</span>
 				<span class="signin" @click="signin">%i18n:@signin%</span>
 			</p>
-
-			<div class="hashtags">
-				<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
-			</div>
 		</div>
 
-		<div class="broadcasts">
+		<div class="broadcasts block">
 			<div v-for="broadcast in broadcasts">
 				<h1 v-html="broadcast.title"></h1>
 				<div v-html="broadcast.text"></div>
 			</div>
 		</div>
 
-		<div class="nav">
+		<div class="nav block">
 			<mk-nav class="nav"/>
 		</div>
 
-		<mk-welcome-timeline class="tl" :max="20"/>
+		<div class="side">
+			<mk-trends class="trends block"/>
+
+			<mk-welcome-timeline class="tl block" :max="20"/>
+		</div>
 	</div>
 
 	<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
@@ -71,8 +71,7 @@ export default Vue.extend({
 			host,
 			name: 'Misskey',
 			description: '',
-			broadcasts: [],
-			tags: []
+			broadcasts: []
 		};
 	},
 	created() {
@@ -86,9 +85,6 @@ export default Vue.extend({
 			this.stats = stats;
 		});
 
-		(this as any).api('hashtags/trend').then(stats => {
-			this.tags = stats.map(x => x.tag);
-		});
 	},
 	methods: {
 		signup() {
@@ -113,7 +109,7 @@ export default Vue.extend({
 	left 15px
 
 .v--modal-overlay
-	background rgba(0, 0, 0, 0.4)
+	background rgba(0, 0, 0, 0.6)
 
 .modal-light
 	.v--modal-box
@@ -162,8 +158,8 @@ root(isDark)
 	> button
 		position fixed
 		z-index 1
-		bottom 64px
-		left 64px
+		bottom 16px
+		left 16px
 		padding 16px
 		font-size 18px
 		color isDark ? #fff : #444
@@ -179,7 +175,7 @@ root(isDark)
 		margin 0 auto
 		padding 64px
 
-		> *
+		.block
 			color isDark ? #fff : #444
 			background isDark ? #313543 : #fff
 			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
@@ -190,6 +186,7 @@ root(isDark)
 			grid-row 1
 			grid-column 1
 			padding 32px
+			border-top solid 5px $theme-color
 
 			> h1
 				margin 0
@@ -257,12 +254,25 @@ root(isDark)
 			grid-column 1
 			font-size 14px
 
-		> .tl
+		> .side
+			display grid
 			grid-row 1 / 4
 			grid-column 2
-			text-align left
-			max-height 100%
-			overflow auto
+			grid-template-rows 1fr 350px
+			grid-template-columns 1fr
+			gap 16px
+
+			> .tl
+				grid-row 1
+				grid-column 1
+				text-align left
+				max-height 100%
+				overflow auto
+
+			> .trends
+				grid-row 2
+				grid-column 1
+				padding 8px
 
 .mk-welcome[data-darkmode]
 	root(true)
-- 
cgit v1.2.3-freya


From a5eb19c878b58a9512f2a034d38ea97dec67a9a9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 4 Sep 2018 11:24:39 +0900
Subject: Support darkmode

---
 src/client/app/common/views/widgets/broadcast.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index d3a39bd9cc..e4e77263e5 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mkw-broadcast"
+<div class="anltbovirfeutcigvwgmgxipejaeozxi"
 	:data-found="broadcasts.length != 0"
 	:data-melt="props.design == 1"
 	:data-mobile="platform == 'mobile'"
@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import { lang } from '../../../config';
 
 export default define({
 	name: 'broadcast',
@@ -67,7 +66,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-.mkw-broadcast
+root(isDark)
 	padding 10px
 	border solid 1px #4078c0
 	border-radius 6px
@@ -134,15 +133,11 @@ export default define({
 		z-index 1
 		margin 0
 		font-size 0.7em
-		color #555
+		color isDark ? #fff : #555
 
 		&.fetching
 			text-align center
 
-		a
-			color #555
-			text-decoration underline
-
 	> a
 		display block
 		font-size 0.7em
@@ -151,4 +146,10 @@ export default define({
 		> p
 			color #fff
 
+.anltbovirfeutcigvwgmgxipejaeozxi[data-darkmode]
+	root(true)
+
+.anltbovirfeutcigvwgmgxipejaeozxi:not([data-darkmode])
+	root(false)
+
 </style>
-- 
cgit v1.2.3-freya


From f42665d4bc65d9a0a5f58d0a62b384b3e670c2f6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 4 Sep 2018 11:34:36 +0900
Subject: :art:

---
 src/client/app/mobile/views/components/notify.vue | 25 ++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/notify.vue b/src/client/app/mobile/views/components/notify.vue
index 6d4a481dbe..1b93ab87a1 100644
--- a/src/client/app/mobile/views/components/notify.vue
+++ b/src/client/app/mobile/views/components/notify.vue
@@ -1,6 +1,8 @@
 <template>
 <div class="mk-notify">
-	<mk-notification-preview :notification="notification"/>
+	<div>
+		<mk-notification-preview :notification="notification"/>
+	</div>
 </div>
 </template>
 
@@ -22,7 +24,7 @@ export default Vue.extend({
 			setTimeout(() => {
 				anime({
 					targets: this.$el,
-					bottom: '-64px',
+					bottom: '-72px',
 					duration: 500,
 					easing: 'easeOutQuad',
 					complete: () => this.$destroy()
@@ -37,13 +39,22 @@ export default Vue.extend({
 .mk-notify
 	position fixed
 	z-index 1024
-	bottom -64px
+	bottom -72px
 	left 0
+	right 0
 	width 100%
-	height 64px
+	max-width 500px
+	height 72px
+	margin 0 auto
+	padding 8px
 	pointer-events none
-	-webkit-backdrop-filter blur(2px)
-	backdrop-filter blur(2px)
-	background-color rgba(#000, 0.5)
+	font-size 80%
+
+	> div
+		height 100%
+		-webkit-backdrop-filter blur(2px)
+		backdrop-filter blur(2px)
+		background-color rgba(#000, 0.5)
+		border-radius 6px
 
 </style>
-- 
cgit v1.2.3-freya


From ba64de334afa9f38ead7285de3193f3b6e58fe75 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 4 Sep 2018 12:58:43 +0900
Subject: Fix bug

---
 .../app/common/scripts/streaming/games/reversi/reversi-game.ts      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/streaming/games/reversi/reversi-game.ts b/src/client/app/common/scripts/streaming/games/reversi/reversi-game.ts
index e6b02fcfdb..adfa75ff3b 100644
--- a/src/client/app/common/scripts/streaming/games/reversi/reversi-game.ts
+++ b/src/client/app/common/scripts/streaming/games/reversi/reversi-game.ts
@@ -3,8 +3,10 @@ import MiOS from '../../../../../mios';
 
 export class ReversiGameStream extends Stream {
 	constructor(os: MiOS, me, game) {
-		super(os, 'games/reversi-game', {
-			i: me ? me.token : null,
+		super(os, 'games/reversi-game', me ? {
+			i: me.token,
+			game: game.id
+		} : {
 			game: game.id
 		});
 	}
-- 
cgit v1.2.3-freya


From 6abff253ea718acc73ba3d1feca53161923319ae Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 4 Sep 2018 12:59:34 +0900
Subject: トップページのタイムラインをリアルタイム更新するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/common/scripts/streaming/local-timeline.ts |  4 +--
 .../common/views/components/welcome-timeline.vue   | 30 +++++++++++++++++++---
 src/client/app/mios.ts                             |  6 ++---
 3 files changed, 31 insertions(+), 9 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/streaming/local-timeline.ts b/src/client/app/common/scripts/streaming/local-timeline.ts
index 2834262bdc..41c36aa14c 100644
--- a/src/client/app/common/scripts/streaming/local-timeline.ts
+++ b/src/client/app/common/scripts/streaming/local-timeline.ts
@@ -7,9 +7,9 @@ import MiOS from '../../../mios';
  */
 export class LocalTimelineStream extends Stream {
 	constructor(os: MiOS, me) {
-		super(os, 'local-timeline', {
+		super(os, 'local-timeline', me ? {
 			i: me.token
-		});
+		} : {});
 	}
 }
 
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 5a8b9df476..d4e7902c7b 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -31,15 +31,30 @@ export default Vue.extend({
 			default: undefined
 		}
 	},
+
 	data() {
 		return {
 			fetching: true,
-			notes: []
+			notes: [],
+			connection: null,
+			connectionId: null
 		};
 	},
+
 	mounted() {
 		this.fetch();
+
+		this.connection = (this as any).os.streams.localTimelineStream.getConnection();
+		this.connectionId = (this as any).os.streams.localTimelineStream.use();
+
+		this.connection.on('note', this.onNote);
+	},
+
+	beforeDestroy() {
+		this.connection.off('note', this.onNote);
+		(this as any).os.streams.localTimelineStream.dispose(this.connectionId);
 	},
+
 	methods: {
 		fetch(cb?) {
 			this.fetching = true;
@@ -49,13 +64,20 @@ export default Vue.extend({
 				reply: false,
 				renote: false,
 				media: false,
-				poll: false,
-				bot: false
+				poll: false
 			}).then(notes => {
 				this.notes = notes;
 				this.fetching = false;
 			});
-		}
+		},
+
+		onNote(note) {
+			if (note.replyId != null) return;
+			if (note.renoteId != null) return;
+			if (note.poll != null) return;
+
+			this.notes.unshift(note);
+		},
 	}
 });
 </script>
diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index 664848b5e7..c2ec7f1750 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -3,7 +3,7 @@ import { EventEmitter } from 'eventemitter3';
 import * as uuid from 'uuid';
 
 import initStore from './store';
-import { apiUrl, swPublickey, version, lang, googleMapsApiKey } from './config';
+import { apiUrl, version, lang } from './config';
 import Progress from './common/scripts/loading';
 import Connection from './common/scripts/streaming/stream';
 import { HomeStreamManager } from './common/scripts/streaming/home';
@@ -230,13 +230,13 @@ export default class MiOS extends EventEmitter {
 		//#region Init stream managers
 		this.streams.serverStatsStream = new ServerStatsStreamManager(this);
 		this.streams.notesStatsStream = new NotesStatsStreamManager(this);
+		this.streams.localTimelineStream = new LocalTimelineStreamManager(this, this.store.state.i);
 
 		this.once('signedin', () => {
 			// Init home stream manager
 			this.stream = new HomeStreamManager(this, this.store.state.i);
 
 			// Init other stream manager
-			this.streams.localTimelineStream = new LocalTimelineStreamManager(this, this.store.state.i);
 			this.streams.hybridTimelineStream = new HybridTimelineStreamManager(this, this.store.state.i);
 			this.streams.globalTimelineStream = new GlobalTimelineStreamManager(this, this.store.state.i);
 			this.streams.driveStream = new DriveStreamManager(this, this.store.state.i);
@@ -361,7 +361,7 @@ export default class MiOS extends EventEmitter {
 
 				// A public key your push server will use to send
 				// messages to client apps via a push server.
-				applicationServerKey: urlBase64ToUint8Array(swPublickey)
+				applicationServerKey: urlBase64ToUint8Array(this.meta.data.swPublickey)
 			};
 
 			// Subscribe push notification
-- 
cgit v1.2.3-freya


From 977200b7cd38191944cf9e078c7bff00314f9d78 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 4 Sep 2018 12:59:40 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 481441c3c7..0bc5c256e0 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -172,6 +172,7 @@ root(isDark)
 		width 100%
 		max-width 1200px
 		height 100vh
+		min-height 800px
 		margin 0 auto
 		padding 64px
 
-- 
cgit v1.2.3-freya


From eaec936fa6a53d0fd1004a613ea09f482198f366 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Tue, 4 Sep 2018 18:33:16 +0900
Subject: Fix remote follow (#2606)

---
 src/client/app/common/views/pages/follow.vue              | 2 +-
 src/client/app/desktop/views/components/follow-button.vue | 8 +++++---
 src/client/app/mobile/views/components/follow-button.vue  | 4 +++-
 src/models/user.ts                                        | 4 ++--
 src/services/following/create.ts                          | 7 +------
 src/services/following/requests/accept.ts                 | 2 ++
 src/services/following/requests/create.ts                 | 2 --
 src/services/following/requests/reject.ts                 | 5 ++++-
 8 files changed, 18 insertions(+), 16 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index ec74b3a9b9..05c1329f6d 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -83,7 +83,7 @@ export default Vue.extend({
 						userId: this.user.id
 					});
 				} else {
-					if (this.user.isLocked && this.user.hasPendingFollowRequestFromYou) {
+					if (this.user.hasPendingFollowRequestFromYou) {
 						this.user = await (this as any).api('following/requests/cancel', {
 							userId: this.user.id
 						});
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 62742a8f39..1db4b0cfa4 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -55,13 +55,15 @@ export default Vue.extend({
 	methods: {
 		onFollow(user) {
 			if (user.id == this.u.id) {
-				this.user.isFollowing = user.isFollowing;
+				this.u.isFollowing = user.isFollowing;
+				this.u.hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
 			}
 		},
 
 		onUnfollow(user) {
 			if (user.id == this.u.id) {
-				this.user.isFollowing = user.isFollowing;
+				this.u.isFollowing = user.isFollowing;
+				this.u.hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
 			}
 		},
 
@@ -74,7 +76,7 @@ export default Vue.extend({
 						userId: this.u.id
 					});
 				} else {
-					if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) {
+					if (this.u.hasPendingFollowRequestFromYou) {
 						this.u = await (this as any).api('following/requests/cancel', {
 							userId: this.u.id
 						});
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index 360ee91d4b..ff7260edb5 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -48,12 +48,14 @@ export default Vue.extend({
 		onFollow(user) {
 			if (user.id == this.u.id) {
 				this.u.isFollowing = user.isFollowing;
+				this.u.hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
 			}
 		},
 
 		onUnfollow(user) {
 			if (user.id == this.u.id) {
 				this.u.isFollowing = user.isFollowing;
+				this.u.hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
 			}
 		},
 
@@ -66,7 +68,7 @@ export default Vue.extend({
 						userId: this.u.id
 					});
 				} else {
-					if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) {
+					if (this.u.hasPendingFollowRequestFromYou) {
 						this.u = await (this as any).api('following/requests/cancel', {
 							userId: this.u.id
 						});
diff --git a/src/models/user.ts b/src/models/user.ts
index 31d09bc8f8..8f3fbbdc8f 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -432,10 +432,10 @@ export const pack = (
 				followerId: _user.id,
 				followeeId: meId
 			}),
-			_user.isLocked ? FollowRequest.findOne({
+			FollowRequest.findOne({
 				followerId: meId,
 				followeeId: _user.id
-			}) : Promise.resolve(null),
+			}),
 			FollowRequest.findOne({
 				followerId: _user.id,
 				followeeId: meId
diff --git a/src/services/following/create.ts b/src/services/following/create.ts
index bd39b8e183..dd2fa544dc 100644
--- a/src/services/following/create.ts
+++ b/src/services/following/create.ts
@@ -11,7 +11,7 @@ import { deliver } from '../../queue';
 import createFollowRequest from './requests/create';
 
 export default async function(follower: IUser, followee: IUser) {
-	if (followee.isLocked) {
+	if (followee.isLocked || isLocalUser(follower) && isRemoteUser(followee)) {
 		await createFollowRequest(follower, followee);
 	} else {
 		const following = await Following.insert({
@@ -72,11 +72,6 @@ export default async function(follower: IUser, followee: IUser) {
 			notify(followee._id, follower._id, 'follow');
 		}
 
-		if (isLocalUser(follower) && isRemoteUser(followee)) {
-			const content = pack(renderFollow(follower, followee));
-			deliver(follower, content, followee.inbox);
-		}
-
 		if (isRemoteUser(follower) && isLocalUser(followee)) {
 			const content = pack(renderAccept(renderFollow(follower, followee)));
 			deliver(followee, content, follower.inbox);
diff --git a/src/services/following/requests/accept.ts b/src/services/following/requests/accept.ts
index bf8ed99e13..5e38879a49 100644
--- a/src/services/following/requests/accept.ts
+++ b/src/services/following/requests/accept.ts
@@ -75,4 +75,6 @@ export default async function(followee: IUser, follower: IUser) {
 	packUser(followee, followee, {
 		detail: true
 	}).then(packed => publishUserStream(followee._id, 'meUpdated', packed));
+
+	packUser(followee, follower).then(packed => publishUserStream(follower._id, 'follow', packed));
 }
diff --git a/src/services/following/requests/create.ts b/src/services/following/requests/create.ts
index 4c7c90cc08..946c22568c 100644
--- a/src/services/following/requests/create.ts
+++ b/src/services/following/requests/create.ts
@@ -7,8 +7,6 @@ import { deliver } from '../../../queue';
 import FollowRequest from '../../../models/follow-request';
 
 export default async function(follower: IUser, followee: IUser) {
-	if (!followee.isLocked) throw '対象のアカウントは鍵アカウントではありません';
-
 	await FollowRequest.insert({
 		createdAt: new Date(),
 		followerId: follower._id,
diff --git a/src/services/following/requests/reject.ts b/src/services/following/requests/reject.ts
index affcd2ef5a..eda6716321 100644
--- a/src/services/following/requests/reject.ts
+++ b/src/services/following/requests/reject.ts
@@ -1,9 +1,10 @@
-import User, { IUser, isRemoteUser, ILocalUser } from '../../../models/user';
+import User, { IUser, isRemoteUser, ILocalUser, pack as packUser } from '../../../models/user';
 import FollowRequest from '../../../models/follow-request';
 import pack from '../../../remote/activitypub/renderer';
 import renderFollow from '../../../remote/activitypub/renderer/follow';
 import renderReject from '../../../remote/activitypub/renderer/reject';
 import { deliver } from '../../../queue';
+import { publishUserStream } from '../../../stream';
 
 export default async function(followee: IUser, follower: IUser) {
 	if (isRemoteUser(follower)) {
@@ -21,4 +22,6 @@ export default async function(followee: IUser, follower: IUser) {
 			pendingReceivedFollowRequestsCount: -1
 		}
 	});
+
+	packUser(followee, follower).then(packed => publishUserStream(follower._id, 'unfollow', packed));
 }
-- 
cgit v1.2.3-freya


From d279f8e9ffa5f192e205fa3b96933155f1cd180a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 4 Sep 2018 19:19:51 +0900
Subject: :art:

---
 src/client/app/mobile/views/components/notify.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/notify.vue b/src/client/app/mobile/views/components/notify.vue
index 1b93ab87a1..4d9b7c0f6b 100644
--- a/src/client/app/mobile/views/components/notify.vue
+++ b/src/client/app/mobile/views/components/notify.vue
@@ -24,7 +24,7 @@ export default Vue.extend({
 			setTimeout(() => {
 				anime({
 					targets: this.$el,
-					bottom: '-72px',
+					bottom: `-${this.$el.offsetHeight}px`,
 					duration: 500,
 					easing: 'easeOutQuad',
 					complete: () => this.$destroy()
@@ -37,14 +37,16 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-notify
+	$height = 78px
+
 	position fixed
 	z-index 1024
-	bottom -72px
+	bottom -($height)
 	left 0
 	right 0
 	width 100%
 	max-width 500px
-	height 72px
+	height $height
 	margin 0 auto
 	padding 8px
 	pointer-events none
@@ -55,6 +57,7 @@ export default Vue.extend({
 		-webkit-backdrop-filter blur(2px)
 		backdrop-filter blur(2px)
 		background-color rgba(#000, 0.5)
-		border-radius 6px
+		border-radius 7px
+		overflow hidden
 
 </style>
-- 
cgit v1.2.3-freya


From 2555e23b107bb2c38e068e5f2f9da568a2adb375 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Sep 2018 20:01:15 +0900
Subject: wip

---
 .../app/common/views/components/media-list.vue     |  1 +
 .../app/desktop/views/components/media-audio.vue   | 68 ++++++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 src/client/app/desktop/views/components/media-audio.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index cdfc2c8d3c..c531f9ac91 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -3,6 +3,7 @@
 	<div :data-count="mediaList.length" ref="grid">
 		<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-audio :video="media" :key="media.id" v-if="media.type.startsWith('audio')" :inline-playable="mediaList.length === 1"/>
 			<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
 		</template>
 	</div>
diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue
new file mode 100644
index 0000000000..4a0c26fb9e
--- /dev/null
+++ b/src/client/app/desktop/views/components/media-audio.vue
@@ -0,0 +1,68 @@
+<template>
+<div class="abunaiaudionankasirankedoichioux" v-if="audio.isSensitive && hide" @click="hide = false">
+	<div>
+		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+</div>
+<div class="komeijiokayusabanomisoniohitashi" v-else>
+	<audio class="audio"
+		:src="audio.url"
+		:title="audio.name"
+		controls
+		ref="audio"
+		v-if="inlinePlayable" />
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		audio: {
+			type: Object,
+			required: true
+		},
+		inlinePlayable: {
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		imageStyle(): any {
+			return {
+				'background-image': `url(${this.audio.url})`
+			};
+		}
+	}
+})
+</script>
+
+<style lang="stylus" scoped>
+.komeijiokayusabanomisoniohitashi
+	.audio
+		display block
+		width 100%
+		height 100%
+		border-radius 4px
+
+.abunaiaudionankasirankedoichioux
+	display flex
+	justify-content center
+	align-items center
+	background #111
+	color #fff
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> b
+			display block
+
+</style>
-- 
cgit v1.2.3-freya


From dd3e3ddcdd69136023cb39a769d7785fac6696be Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Sep 2018 20:21:36 +0900
Subject: wip

---
 locales/ja-JP.yml                                  |  5 ++
 .../app/common/views/components/media-list.vue     |  3 +-
 .../desktop/views/components/media-download.vue    | 79 ++++++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/client/app/desktop/views/components/media-download.vue

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a57f724a32..af1ef601af 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -583,6 +583,11 @@ desktop/views/components/media-video.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+desktop/views/components/media-download.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+  download: "ダウンロード"
+
 desktop/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index cdfc2c8d3c..41b8bf9bb7 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -3,7 +3,8 @@
 	<div :data-count="mediaList.length" ref="grid">
 		<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 :raw="raw"/>
+			<mk-media-image :image="media" :key="media.id" v-if="media.type.startsWith('image')" :raw="raw"/>
+			<mk-media-download :download="media" :key="media.id" v-else :raw="raw"/>
 		</template>
 	</div>
 </div>
diff --git a/src/client/app/desktop/views/components/media-download.vue b/src/client/app/desktop/views/components/media-download.vue
new file mode 100644
index 0000000000..236b065204
--- /dev/null
+++ b/src/client/app/desktop/views/components/media-download.vue
@@ -0,0 +1,79 @@
+<template>
+<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="download.isSensitive && hide" @click="hide = false">
+	<div>
+		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+</div>
+<a class="reiujibreakfastbreadbaconeggnuts" v-else
+	:href="download.url"
+	:style="style"
+	:title="download.name"
+	download="{{ download.name }}{{ download.ext }}"
+>
+	<div>
+		<div>%fa:download%</div>
+		<div>%i18n:@download%</div>
+		<div>{{ download.name }}{{ download.ext }}</div>
+	</div>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		download: {
+			type: Object,
+			required: true
+		},
+		raw: {
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		style(): any {
+			return {
+				'background-color': this.download.properties.avgColor && this.download.properties.avgColor.length == 3 ? `rgb(${this.download.properties.avgColor.join(',')})` : 'transparent',
+				'background-download': this.raw ? `url(${this.download.url})` : `url(${this.download.thumbnailUrl})`
+			};
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.reiujibreakfastbreadbaconeggnuts
+	display flex
+	justify-content center
+	align-items center
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> *
+			display block
+
+.ldwbgwstjsdgcjruamauqdrffetqudry
+	display flex
+	justify-content center
+	align-items center
+	background #111
+	color #fff
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> *
+			display block
+
+</style>
-- 
cgit v1.2.3-freya


From 8bcfa97349b73b3c9759cad7b1678a02bc36e2f9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Sep 2018 21:06:02 +0900
Subject: wip

---
 locales/ja-JP.yml                                       | 4 ++++
 src/client/app/common/views/components/media-list.vue   | 2 +-
 src/client/app/desktop/views/components/index.ts        | 2 ++
 src/client/app/desktop/views/components/media-audio.vue | 3 +--
 4 files changed, 8 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a57f724a32..f04495ed95 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -583,6 +583,10 @@ desktop/views/components/media-video.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+desktop/views/components/media-audio.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+
 desktop/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index c531f9ac91..4408ba2792 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -3,7 +3,7 @@
 	<div :data-count="mediaList.length" ref="grid">
 		<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-audio :video="media" :key="media.id" v-if="media.type.startsWith('audio')" :inline-playable="mediaList.length === 1"/>
+			<mk-media-audio :audio="media" :key="media.id" v-if="media.type.startsWith('audio')" :inline-playable="mediaList.length === 1"/>
 			<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
 		</template>
 	</div>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 7b7a38afa2..159ead4983 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -13,6 +13,7 @@ import ellipsisIcon from './ellipsis-icon.vue';
 import mediaImage from './media-image.vue';
 import mediaImageDialog from './media-image-dialog.vue';
 import mediaVideo from './media-video.vue';
+import mediaAudio from './media-audio.vue';
 import notifications from './notifications.vue';
 import noteForm from './post-form.vue';
 import renoteForm from './renote-form.vue';
@@ -43,6 +44,7 @@ Vue.component('mk-ellipsis-icon', ellipsisIcon);
 Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-media-image-dialog', mediaImageDialog);
 Vue.component('mk-media-video', mediaVideo);
+Vue.component('mk-media-audio', mediaAudio);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', noteForm);
 Vue.component('mk-renote-form', renoteForm);
diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue
index 4a0c26fb9e..5d41947b17 100644
--- a/src/client/app/desktop/views/components/media-audio.vue
+++ b/src/client/app/desktop/views/components/media-audio.vue
@@ -10,8 +10,7 @@
 		:src="audio.url"
 		:title="audio.name"
 		controls
-		ref="audio"
-		v-if="inlinePlayable" />
+		ref="audio" />
 </div>
 </template>
 
-- 
cgit v1.2.3-freya


From ebeaef94e2545098ee81f143503180defa731793 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 5 Sep 2018 01:08:18 +0900
Subject: Improve media list

---
 locales/ja-JP.yml                                  |  13 +--
 src/client/app/common/views/components/index.ts    |   2 +
 .../app/common/views/components/media-banner.vue   |  85 +++++++++++++++
 .../app/common/views/components/media-list.vue     | 121 +++++++++++----------
 src/client/app/desktop/views/components/index.ts   |   2 -
 .../app/desktop/views/components/media-audio.vue   |  67 ------------
 .../desktop/views/components/media-download.vue    |  79 --------------
 .../app/desktop/views/components/media-image.vue   |   2 +-
 .../app/desktop/views/components/media-video.vue   |  21 +---
 .../app/mobile/views/components/media-image.vue    |   2 +-
 10 files changed, 158 insertions(+), 236 deletions(-)
 create mode 100644 src/client/app/common/views/components/media-banner.vue
 delete mode 100644 src/client/app/desktop/views/components/media-audio.vue
 delete mode 100644 src/client/app/desktop/views/components/media-download.vue

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 193c3c5022..de5505e7db 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -250,6 +250,10 @@ common/views/components/connect-failed.troubleshooter.vue:
   flush: "キャッシュの削除"
   set-version: "バージョン指定"
 
+common/views/components/media-banner.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+
 common/views/components/messaging.vue:
   search-user: "ユーザーを探す"
   you: "あなた"
@@ -583,15 +587,6 @@ desktop/views/components/media-video.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
-desktop/views/components/media-audio.vue:
-  sensitive: "閲覧注意"
-  click-to-show: "クリックして表示"
-
-desktop/views/components/media-download.vue:
-  sensitive: "閲覧注意"
-  click-to-show: "クリックして表示"
-  download: "ダウンロード"
-
 desktop/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 4700b6269e..43cde6c54f 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -18,6 +18,7 @@ import reactionsViewer from './reactions-viewer.vue';
 import time from './time.vue';
 import timer from './timer.vue';
 import mediaList from './media-list.vue';
+import mediaBanner from './media-banner.vue';
 import uploader from './uploader.vue';
 import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
@@ -59,6 +60,7 @@ Vue.component('mk-reactions-viewer', reactionsViewer);
 Vue.component('mk-time', time);
 Vue.component('mk-timer', timer);
 Vue.component('mk-media-list', mediaList);
+Vue.component('mk-media-banner', mediaBanner);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
new file mode 100644
index 0000000000..69cd579446
--- /dev/null
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -0,0 +1,85 @@
+<template>
+<div class="mk-media-banner">
+	<div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false">
+		<span class="mk-media-banner-icon">%fa:exclamation-triangle%</span>
+		<b>%i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+	<div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')">
+		<audio class="audio"
+			:src="media.url"
+			:title="media.name"
+			controls
+			ref="audio"
+			preload="metadata" />
+	</div>
+	<a class="mk-media-banner-download" v-else
+		:href="media.url"
+		:title="media.name"
+		:download="media.name"
+	>
+		<span class="mk-media-banner-icon">%fa:download%</span>
+		<b>{{ media.name }}</b>
+	</a>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		media: {
+			type: Object,
+			required: true
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	}
+})
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-banner
+	width 100%
+	border-radius 4px
+	margin-top 4px
+	overflow hidden
+
+	.mk-media-banner-download,
+	.mk-media-banner-sensitive
+		display flex
+		align-items center
+		font-size 12px
+		padding .2em .6em
+		white-space nowrap
+
+		> *
+			display block
+
+		> b
+			flex-shrink 2147483647
+			overflow hidden
+			text-overflow ellipsis
+
+		> *:not(:last-child)
+			margin-right .2em
+
+		> .mk-media-banner-icon
+			font-size 1.6em
+
+	.mk-media-banner-download
+		background #f7f7f7
+
+	.mk-media-banner-sensitive
+		background #111
+		color #fff
+
+	.mk-media-banner-audio
+		.audio
+			display block
+			width 100%
+			height 100%
+</style>
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index 0312c2dfda..e949c063ab 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -1,12 +1,15 @@
 <template>
 <div class="mk-media-list">
-	<div :data-count="mediaList.length" ref="grid">
-		<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-audio :audio="media" :key="media.id" v-else-if="media.type.startsWith('audio')"/>
-			<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
-			<mk-media-download :download="media" :key="media.id" v-else/>
-		</template>
+	<template v-for="media in mediaList">
+		<mk-media-banner :media="media" :key="media.id" v-if="!media.type.startsWith('image') && !media.type.startsWith('video')"/>
+	</template>
+	<div class="mk-media-list-fixed" v-if="mediaList.filter(media => media.type.startsWith('image') || media.type.startsWith('video')).length > 0">
+		<div :data-count="mediaList.filter(media => media.type.startsWith('video') || media.type.startsWith('image')).length" ref="grid">
+			<template v-for="media in mediaList">
+				<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
+				<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+			</template>
+		</div>
 	</div>
 </div>
 </template>
@@ -32,62 +35,64 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-media-list
-	width 100%
-
-	&:before
-		content ''
-		display block
-		padding-top 56.25% // 16:9
-
-	> div
-		position absolute
-		top 0
-		right 0
-		bottom 0
-		left 0
-		display grid
-		grid-gap 4px
-
-		> *
-			overflow hidden
-			border-radius 4px
-
-		&[data-count="1"]
-			grid-template-rows 1fr
-
-		&[data-count="2"]
-			grid-template-columns 1fr 1fr
-			grid-template-rows 1fr
-
-		&[data-count="3"]
-			grid-template-columns 1fr 0.5fr
-			grid-template-rows 1fr 1fr
+	> .mk-media-list-fixed
+		width 100%
+		margin-top 4px
+
+		&:before
+			content ''
+			display block
+			padding-top 56.25% // 16:9
+
+		> div
+			position absolute
+			top 0
+			right 0
+			bottom 0
+			left 0
+			display grid
+			grid-gap 4px
+
+			> *
+				overflow hidden
+				border-radius 4px
+
+			&[data-count="1"]
+				grid-template-rows 1fr
+
+			&[data-count="2"]
+				grid-template-columns 1fr 1fr
+				grid-template-rows 1fr
+
+			&[data-count="3"]
+				grid-template-columns 1fr 0.5fr
+				grid-template-rows 1fr 1fr
+
+				> *:nth-child(1)
+					grid-row 1 / 3
+
+				> *:nth-child(3)
+					grid-column 2 / 3
+					grid-row 2 / 3
+
+			&[data-count="4"]
+				grid-template-columns 1fr 1fr
+				grid-template-rows 1fr 1fr
 
 			> *:nth-child(1)
-				grid-row 1 / 3
+				grid-column 1 / 2
+				grid-row 1 / 2
 
-			> *:nth-child(3)
+			> *:nth-child(2)
 				grid-column 2 / 3
-				grid-row 2 / 3
+				grid-row 1 / 2
 
-		&[data-count="4"]
-			grid-template-columns 1fr 1fr
-			grid-template-rows 1fr 1fr
-
-		> *:nth-child(1)
-			grid-column 1 / 2
-			grid-row 1 / 2
-
-		> *:nth-child(2)
-			grid-column 2 / 3
-			grid-row 1 / 2
-
-		> *:nth-child(3)
-			grid-column 1 / 2
-			grid-row 2 / 3
+			> *:nth-child(3)
+				grid-column 1 / 2
+				grid-row 2 / 3
 
-		> *:nth-child(4)
-			grid-column 2 / 3
-			grid-row 2 / 3
+			> *:nth-child(4)
+				grid-column 2 / 3
+				grid-row 2 / 3
 
 </style>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 159ead4983..7b7a38afa2 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -13,7 +13,6 @@ import ellipsisIcon from './ellipsis-icon.vue';
 import mediaImage from './media-image.vue';
 import mediaImageDialog from './media-image-dialog.vue';
 import mediaVideo from './media-video.vue';
-import mediaAudio from './media-audio.vue';
 import notifications from './notifications.vue';
 import noteForm from './post-form.vue';
 import renoteForm from './renote-form.vue';
@@ -44,7 +43,6 @@ Vue.component('mk-ellipsis-icon', ellipsisIcon);
 Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-media-image-dialog', mediaImageDialog);
 Vue.component('mk-media-video', mediaVideo);
-Vue.component('mk-media-audio', mediaAudio);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', noteForm);
 Vue.component('mk-renote-form', renoteForm);
diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue
deleted file mode 100644
index 5d41947b17..0000000000
--- a/src/client/app/desktop/views/components/media-audio.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-<div class="abunaiaudionankasirankedoichioux" v-if="audio.isSensitive && hide" @click="hide = false">
-	<div>
-		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
-		<span>%i18n:@click-to-show%</span>
-	</div>
-</div>
-<div class="komeijiokayusabanomisoniohitashi" v-else>
-	<audio class="audio"
-		:src="audio.url"
-		:title="audio.name"
-		controls
-		ref="audio" />
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		audio: {
-			type: Object,
-			required: true
-		},
-		inlinePlayable: {
-			default: false
-		},
-		hide: {
-			type: Boolean,
-			default: true
-		}
-	},
-	computed: {
-		imageStyle(): any {
-			return {
-				'background-image': `url(${this.audio.url})`
-			};
-		}
-	}
-})
-</script>
-
-<style lang="stylus" scoped>
-.komeijiokayusabanomisoniohitashi
-	.audio
-		display block
-		width 100%
-		height 100%
-		border-radius 4px
-
-.abunaiaudionankasirankedoichioux
-	display flex
-	justify-content center
-	align-items center
-	background #111
-	color #fff
-
-	> div
-		display table-cell
-		text-align center
-		font-size 12px
-
-		> b
-			display block
-
-</style>
diff --git a/src/client/app/desktop/views/components/media-download.vue b/src/client/app/desktop/views/components/media-download.vue
deleted file mode 100644
index 236b065204..0000000000
--- a/src/client/app/desktop/views/components/media-download.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="download.isSensitive && hide" @click="hide = false">
-	<div>
-		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
-		<span>%i18n:@click-to-show%</span>
-	</div>
-</div>
-<a class="reiujibreakfastbreadbaconeggnuts" v-else
-	:href="download.url"
-	:style="style"
-	:title="download.name"
-	download="{{ download.name }}{{ download.ext }}"
->
-	<div>
-		<div>%fa:download%</div>
-		<div>%i18n:@download%</div>
-		<div>{{ download.name }}{{ download.ext }}</div>
-	</div>
-</a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		download: {
-			type: Object,
-			required: true
-		},
-		raw: {
-			default: false
-		},
-		hide: {
-			type: Boolean,
-			default: true
-		}
-	},
-	computed: {
-		style(): any {
-			return {
-				'background-color': this.download.properties.avgColor && this.download.properties.avgColor.length == 3 ? `rgb(${this.download.properties.avgColor.join(',')})` : 'transparent',
-				'background-download': this.raw ? `url(${this.download.url})` : `url(${this.download.thumbnailUrl})`
-			};
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.reiujibreakfastbreadbaconeggnuts
-	display flex
-	justify-content center
-	align-items center
-
-	> div
-		display table-cell
-		text-align center
-		font-size 12px
-
-		> *
-			display block
-
-.ldwbgwstjsdgcjruamauqdrffetqudry
-	display flex
-	justify-content center
-	align-items center
-	background #111
-	color #fff
-
-	> div
-		display table-cell
-		text-align center
-		font-size 12px
-
-		> *
-			display block
-
-</style>
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 0284872c68..904dc7f832 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -89,7 +89,7 @@ export default Vue.extend({
 		text-align center
 		font-size 12px
 
-		> b
+		> *
 			display block
 
 </style>
diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 6c60f2da96..0a374acb8f 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -6,19 +6,11 @@
 	</div>
 </div>
 <div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else>
-	<video class="video"
-		:src="video.url"
-		:title="video.name"
-		controls
-		@dblclick.prevent="onClick"
-		ref="video"
-		v-if="inlinePlayable" />
 	<a class="thumbnail"
 		:href="video.url"
 		:style="imageStyle"
 		@click.prevent="onClick"
-		:title="video.name"
-		v-else>
+		:title="video.name">
 		%fa:R play-circle%
 	</a>
 </div>
@@ -34,9 +26,6 @@ export default Vue.extend({
 			type: Object,
 			required: true
 		},
-		inlinePlayable: {
-			default: false
-		},
 		hide: {
 			type: Boolean,
 			default: true
@@ -68,12 +57,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .vwxdhznewyashiknzolsoihtlpicqepe
-	.video
-		display block
-		width 100%
-		height 100%
-		border-radius 4px
-
 	.thumbnail
 		display flex
 		justify-content center
@@ -99,7 +82,7 @@ export default Vue.extend({
 		text-align center
 		font-size 12px
 
-		> b
+		> *
 			display block
 
 </style>
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index e40069bbe3..c8766f5464 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
 		text-align center
 		font-size 12px
 
-		> b
+		> *
 			display block
 
 </style>
-- 
cgit v1.2.3-freya


From f77eaaa08ab99533b4d3709ecb104c6974802525 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 5 Sep 2018 13:06:49 +0900
Subject: Improve usability

---
 src/client/app/mobile/views/components/post-form-dialog.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/post-form-dialog.vue b/src/client/app/mobile/views/components/post-form-dialog.vue
index 6fe9249321..ec37386512 100644
--- a/src/client/app/mobile/views/components/post-form-dialog.vue
+++ b/src/client/app/mobile/views/components/post-form-dialog.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
-	<div class="bg" ref="bg" @click="onBgClick"></div>
-	<div class="main" ref="main" @click.self="onBgClick">
+	<div class="bg" ref="bg"></div>
+	<div class="main" ref="main">
 		<mk-post-form ref="form"
 			:reply="reply"
 			:renote="renote"
@@ -83,11 +83,6 @@ export default Vue.extend({
 			});
 		},
 
-		onBgClick() {
-			this.$emit('cancel');
-			this.close();
-		},
-
 		onPosted() {
 			this.$emit('posted');
 			this.close();
-- 
cgit v1.2.3-freya


From 6fea2f52f10f4cb9f6cfb9210917c615a9423307 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 5 Sep 2018 13:47:26 +0900
Subject: nanka iroiro

---
 locales/ja-JP.yml                                  |   3 +
 src/client/app/common/views/components/ui/card.vue |  27 ++++-
 .../app/common/views/components/ui/radio.vue       |   2 +-
 .../app/common/views/components/ui/switch.vue      |   7 ++
 src/client/app/mobile/views/components/notify.vue  |  18 ++-
 src/client/app/mobile/views/pages/settings.vue     | 124 +++++++++++++--------
 .../views/pages/settings/settings.profile.vue      |  84 +++++++-------
 src/client/app/store.ts                            |   3 +-
 8 files changed, 166 insertions(+), 102 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a57f724a32..1b73c825bb 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1355,6 +1355,9 @@ mobile/views/pages/settings.vue:
   post-style: "投稿の表示スタイル"
   post-style-standard: "標準"
   post-style-smart: "スマート"
+  notification-position: "通知の表示"
+  notification-position-bottom: "下"
+  notification-position-top: "上"
   behavior: "動作"
   fetch-on-scroll: "スクロールで自動読み込み"
   disable-via-mobile: "「モバイルからの投稿」フラグを付けない"
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index 05c51bca6b..aa16b557e1 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -24,19 +24,34 @@ export default Vue.extend({
 
 root(isDark)
 	margin 16px
-	padding 16px
 	color isDark ? #fff : #000
 	background isDark ? #282C37 : #fff
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
-	@media (min-width 500px)
-		padding 32px
-
 	> header
-		font-weight normal
-		font-size 24px
+		padding 16px
+		font-weight bold
+		font-size 20px
 		color isDark ? #fff : #444
 
+		@media (min-width 500px)
+			padding 24px 32px
+
+	> section
+		padding 20px 16px
+		border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+
+		@media (min-width 500px)
+			padding 32px
+
+		&.fit-top
+			padding-top 0
+
+		> header
+			margin-bottom 16px
+			font-weight bold
+			color isDark ? #fff : #444
+
 .ui-card[data-darkmode]
 	root(true)
 
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index 04a46c5a96..dcdda1cf0e 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -55,7 +55,7 @@ export default Vue.extend({
 
 root(isDark)
 	display inline-block
-	margin 32px 32px 32px 0
+	margin 0 32px 0 0
 	cursor pointer
 	transition all 0.3s
 
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index a9e00d73d2..e88b867801 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -64,6 +64,12 @@ root(isDark)
 	cursor pointer
 	transition all 0.3s
 
+	&:first-child
+		margin-top 0
+
+	&:last-child
+		margin-bottom 0
+
 	> *
 		user-select none
 
@@ -89,6 +95,7 @@ root(isDark)
 
 	> .button
 		display inline-block
+		flex-shrink 0
 		margin 3px 0 0 0
 		width 34px
 		height 14px
diff --git a/src/client/app/mobile/views/components/notify.vue b/src/client/app/mobile/views/components/notify.vue
index 4d9b7c0f6b..7a2f7bfedc 100644
--- a/src/client/app/mobile/views/components/notify.vue
+++ b/src/client/app/mobile/views/components/notify.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-notify">
+<div class="mk-notify" :class="pos">
 	<div>
 		<mk-notification-preview :notification="notification"/>
 	</div>
@@ -12,11 +12,16 @@ import * as anime from 'animejs';
 
 export default Vue.extend({
 	props: ['notification'],
+	computed: {
+		pos() {
+			return this.$store.state.device.mobileNotificationPosition;
+		}
+	},
 	mounted() {
 		this.$nextTick(() => {
 			anime({
 				targets: this.$el,
-				bottom: '0px',
+				[this.pos]: '0px',
 				duration: 500,
 				easing: 'easeOutQuad'
 			});
@@ -24,7 +29,7 @@ export default Vue.extend({
 			setTimeout(() => {
 				anime({
 					targets: this.$el,
-					bottom: `-${this.$el.offsetHeight}px`,
+					[this.pos]: `-${this.$el.offsetHeight}px`,
 					duration: 500,
 					easing: 'easeOutQuad',
 					complete: () => this.$destroy()
@@ -41,7 +46,6 @@ export default Vue.extend({
 
 	position fixed
 	z-index 1024
-	bottom -($height)
 	left 0
 	right 0
 	width 100%
@@ -52,6 +56,12 @@ export default Vue.extend({
 	pointer-events none
 	font-size 80%
 
+	&.bottom
+		bottom -($height)
+
+	&.top
+		top -($height)
+
 	> div
 		height 100%
 		-webkit-backdrop-filter blur(2px)
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 838ffd2a6b..4a148dc9d2 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -10,80 +10,101 @@
 			<ui-card>
 				<div slot="title">%fa:palette% %i18n:@design%</div>
 
-				<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
-				<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
-				<ui-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi">%i18n:common.i-like-sushi%</ui-switch>
-				<ui-switch v-model="$store.state.settings.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
-				<ui-switch v-model="$store.state.settings.games.reversi.showBoardLabels" @change="onChangeReversiBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
-				<ui-switch v-model="$store.state.settings.games.reversi.useContrastStones" @change="onChangeUseContrastReversiStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
-
-				<div>
-					<div>%i18n:@timeline%</div>
-					<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
-					<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
-					<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
-					<ui-switch v-model="$store.state.settings.showLocalRenotes" @change="onChangeShowLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
-				</div>
-
-				<div>
-					<div>%i18n:@post-style%</div>
+				<section>
+					<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
+					<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
+					<ui-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi">%i18n:common.i-like-sushi%</ui-switch>
+					<ui-switch v-model="$store.state.settings.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
+					<ui-switch v-model="$store.state.settings.games.reversi.showBoardLabels" @change="onChangeReversiBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
+					<ui-switch v-model="$store.state.settings.games.reversi.useContrastStones" @change="onChangeUseContrastReversiStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
+				</section>
+
+				<section>
+					<header>%i18n:@timeline%</header>
+					<div>
+						<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
+						<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
+						<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
+						<ui-switch v-model="$store.state.settings.showLocalRenotes" @change="onChangeShowLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
+					</div>
+				</section>
+
+				<section>
+					<header>%i18n:@post-style%</header>
 					<ui-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</ui-radio>
 					<ui-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</ui-radio>
-				</div>
+				</section>
+
+				<section>
+					<header>%i18n:@notification-position%</header>
+					<ui-radio v-model="mobileNotificationPosition" value="bottom">%i18n:@notification-position-bottom%</ui-radio>
+					<ui-radio v-model="mobileNotificationPosition" value="top">%i18n:@notification-position-top%</ui-radio>
+				</section>
 			</ui-card>
 
 			<ui-card>
 				<div slot="title">%fa:cog% %i18n:@behavior%</div>
-				<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
-				<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
-				<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
-				<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
-				<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
+
+				<section>
+					<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
+					<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
+					<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
+					<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
+					<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
+				</section>
 			</ui-card>
 
 			<ui-card>
 				<div slot="title">%fa:volume-up% %i18n:@sound%</div>
 
-				<ui-switch v-model="enableSounds">%i18n:@enable-sounds%</ui-switch>
+				<section>
+					<ui-switch v-model="enableSounds">%i18n:@enable-sounds%</ui-switch>
+				</section>
 			</ui-card>
 
 			<ui-card>
 				<div slot="title">%fa:language% %i18n:@lang%</div>
 
-				<ui-select v-model="lang" placeholder="%i18n:@auto%">
-					<optgroup label="%i18n:@recommended%">
-						<option value="">%i18n:@auto%</option>
-					</optgroup>
-
-					<optgroup label="%i18n:@specify-language%">
-						<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
-					</optgroup>
-				</ui-select>
-				<span>%fa:info-circle% %i18n:@lang-tip%</span>
+				<section class="fit-top">
+					<ui-select v-model="lang" placeholder="%i18n:@auto%">
+						<optgroup label="%i18n:@recommended%">
+							<option value="">%i18n:@auto%</option>
+						</optgroup>
+
+						<optgroup label="%i18n:@specify-language%">
+							<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+						</optgroup>
+					</ui-select>
+					<span>%fa:info-circle% %i18n:@lang-tip%</span>
+				</section>
 			</ui-card>
 
 			<ui-card>
 				<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
 
-				<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
-				<p>
-					<a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a>
-					<span v-if="$store.state.i.twitter"> or </span>
-					<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
-				</p>
+				<section>
+					<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
+					<p>
+						<a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a>
+						<span v-if="$store.state.i.twitter"> or </span>
+						<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
+					</p>
+				</section>
 			</ui-card>
 
 			<ui-card>
 				<div slot="title">%fa:sync-alt% %i18n:@update%</div>
 
-				<div>%i18n:@version% <i>{{ version }}</i></div>
-				<template v-if="latestVersion !== undefined">
-					<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
-				</template>
-				<ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
-					<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
-					<template v-else>%i18n:@check-for-updates%</template>
-				</ui-button>
+				<section>
+					<div>%i18n:@version% <i>{{ version }}</i></div>
+					<template v-if="latestVersion !== undefined">
+						<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
+					</template>
+					<ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
+						<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
+						<template v-else>%i18n:@check-for-updates%</template>
+					</ui-button>
+				</section>
 			</ui-card>
 		</div>
 
@@ -134,6 +155,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'postStyle', value }); }
 		},
 
+		mobileNotificationPosition: {
+			get() { return this.$store.state.device.mobileNotificationPosition; },
+			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
+		},
+
 		lightmode: {
 			get() { return this.$store.state.device.lightmode; },
 			set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); }
@@ -273,7 +299,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	margin 0 auto
-	max-width 500px
+	max-width 600px
 	width 100%
 
 	> .signin-as
diff --git a/src/client/app/mobile/views/pages/settings/settings.profile.vue b/src/client/app/mobile/views/pages/settings/settings.profile.vue
index 3b797cdde1..3efeac3da5 100644
--- a/src/client/app/mobile/views/pages/settings/settings.profile.vue
+++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue
@@ -2,47 +2,49 @@
 <ui-card>
 	<div slot="title">%fa:user% %i18n:@title%</div>
 
-	<ui-form :disabled="saving">
-		<ui-input v-model="name" :max="30">
-			<span>%i18n:@name%</span>
-		</ui-input>
-
-		<ui-input v-model="username" readonly>
-			<span>%i18n:@account%</span>
-			<span slot="prefix">@</span>
-			<span slot="suffix">@{{ host }}</span>
-		</ui-input>
-
-		<ui-input v-model="location">
-			<span>%i18n:@location%</span>
-			<span slot="prefix">%fa:map-marker-alt%</span>
-		</ui-input>
-
-		<ui-input v-model="birthday" type="date">
-			<span>%i18n:@birthday%</span>
-			<span slot="prefix">%fa:birthday-cake%</span>
-		</ui-input>
-
-		<ui-textarea v-model="description" :max="500">
-			<span>%i18n:@description%</span>
-		</ui-textarea>
-
-		<ui-input type="file" @change="onAvatarChange">
-			<span>%i18n:@avatar%</span>
-			<span slot="icon">%fa:image%</span>
-			<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
-		</ui-input>
-
-		<ui-input type="file" @change="onBannerChange">
-			<span>%i18n:@banner%</span>
-			<span slot="icon">%fa:image%</span>
-			<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
-		</ui-input>
-
-		<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
-
-		<ui-button @click="save">%i18n:@save%</ui-button>
-	</ui-form>
+	<section class="fit-top">
+		<ui-form :disabled="saving">
+			<ui-input v-model="name" :max="30">
+				<span>%i18n:@name%</span>
+			</ui-input>
+
+			<ui-input v-model="username" readonly>
+				<span>%i18n:@account%</span>
+				<span slot="prefix">@</span>
+				<span slot="suffix">@{{ host }}</span>
+			</ui-input>
+
+			<ui-input v-model="location">
+				<span>%i18n:@location%</span>
+				<span slot="prefix">%fa:map-marker-alt%</span>
+			</ui-input>
+
+			<ui-input v-model="birthday" type="date">
+				<span>%i18n:@birthday%</span>
+				<span slot="prefix">%fa:birthday-cake%</span>
+			</ui-input>
+
+			<ui-textarea v-model="description" :max="500">
+				<span>%i18n:@description%</span>
+			</ui-textarea>
+
+			<ui-input type="file" @change="onAvatarChange">
+				<span>%i18n:@avatar%</span>
+				<span slot="icon">%fa:image%</span>
+				<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
+			</ui-input>
+
+			<ui-input type="file" @change="onBannerChange">
+				<span>%i18n:@banner%</span>
+				<span slot="icon">%fa:image%</span>
+				<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
+			</ui-input>
+
+			<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
+
+			<ui-button @click="save">%i18n:@save%</ui-button>
+		</ui-form>
+	</section>
 </ui-card>
 </template>
 
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 469563495f..53f3eefc08 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -43,7 +43,8 @@ const defaultDeviceSettings = {
 	debug: false,
 	lightmode: false,
 	loadRawImages: false,
-	postStyle: 'standard'
+	postStyle: 'standard',
+	mobileNotificationPosition: 'bottom'
 };
 
 export default (os: MiOS) => new Vuex.Store({
-- 
cgit v1.2.3-freya


From ff8d300ea84a5ee4294123768789ddcab13819da Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 5 Sep 2018 17:43:31 +0900
Subject: モバイル版のメニューにお知らせを表示するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/mobile/views/components/ui.nav.vue | 33 ++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 54eed1b6d4..83a8eb4392 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -34,6 +34,12 @@
 					<li @click="dark"><p><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template><span>%i18n:@darkmode%</span></p></li>
 				</ul>
 			</div>
+			<div class="announcements" v-if="announcements.length > 0">
+				<article v-for="announcement in announcements">
+					<span v-html="announcement.title" class="title"></span>
+					<div v-html="announcement.text"></div>
+				</article>
+			</div>
 			<a :href="aboutUrl"><p class="about">%i18n:@about%</p></a>
 		</div>
 	</transition>
@@ -46,23 +52,32 @@ import { lang } from '../../../config';
 
 export default Vue.extend({
 	props: ['isOpen'],
+
 	data() {
 		return {
 			hasGameInvitation: false,
 			connection: null,
 			connectionId: null,
-			aboutUrl: `/docs/${lang}/about`
+			aboutUrl: `/docs/${lang}/about`,
+			announcements: []
 		};
 	},
+
 	computed: {
 		hasUnreadNotification(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
 		},
+
 		hasUnreadMessagingMessage(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
 		}
 	},
+
 	mounted() {
+		(this as any).os.getMeta().then(meta => {
+			this.announcements = meta.broadcasts;
+		});
+
 		if (this.$store.getters.isSignedIn) {
 			this.connection = (this as any).os.stream.getConnection();
 			this.connectionId = (this as any).os.stream.use();
@@ -71,6 +86,7 @@ export default Vue.extend({
 			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 		}
 	},
+
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
 			this.connection.off('reversi_invited', this.onReversiInvited);
@@ -78,18 +94,22 @@ export default Vue.extend({
 			(this as any).os.stream.dispose(this.connectionId);
 		}
 	},
+
 	methods: {
 		search() {
 			const query = window.prompt('%i18n:@search%');
 			if (query == null || query == '') return;
 			this.$router.push(`/search?q=${encodeURIComponent(query)}`);
 		},
+
 		onReversiInvited() {
 			this.hasGameInvitation = true;
 		},
+
 		onReversiNoInvites() {
 			this.hasGameInvitation = false;
 		},
+
 		dark() {
 			this.$store.commit('device/set', {
 				key: 'darkmode',
@@ -204,6 +224,17 @@ root(isDark)
 					color $color
 					opacity 0.5
 
+	.announcements
+		> article
+			background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
+			color isDark ? #fff : #3f4967
+			padding 16px
+			margin 8px 0
+			font-size 12px
+
+			> .title
+				font-weight bold
+
 	.about
 		margin 0 0 8px 0
 		padding 1em 0
-- 
cgit v1.2.3-freya


From 299f83684bbced1cabd36836ca37ccc1684ce750 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 5 Sep 2018 18:01:47 +0900
Subject: media-banner darkmode

---
 src/client/app/common/views/components/media-banner.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 69cd579446..48b0d03d30 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -70,7 +70,10 @@ export default Vue.extend({
 		> .mk-media-banner-icon
 			font-size 1.6em
 
-	.mk-media-banner-download
+	.mk-media-banner-download[data-darkmode]
+		background #21242d
+
+	.mk-media-banner-download:not([data-darkmode])
 		background #f7f7f7
 
 	.mk-media-banner-sensitive
-- 
cgit v1.2.3-freya


From db943df0c8fbded2a2d5a8f56927c173e6aba931 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 5 Sep 2018 18:09:31 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 0bc5c256e0..b7a39fbdb8 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -172,7 +172,7 @@ root(isDark)
 		width 100%
 		max-width 1200px
 		height 100vh
-		min-height 800px
+		min-height 1000px
 		margin 0 auto
 		padding 64px
 
-- 
cgit v1.2.3-freya


From a1b82e97230eab994c06fc7c902e71539664d3d7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 5 Sep 2018 19:32:46 +0900
Subject: #2620

---
 package.json                                       |  2 +-
 .../app/common/scripts/parse-search-query.ts       | 53 ----------------------
 .../common/views/components/welcome-timeline.vue   |  2 +-
 .../app/desktop/views/components/note-detail.vue   |  6 +--
 .../app/desktop/views/components/notes.note.vue    |  6 +--
 src/client/app/desktop/views/components/notes.vue  |  2 +-
 .../desktop/views/components/post-form-window.vue  | 10 ++--
 .../app/desktop/views/components/post-form.vue     | 16 +++----
 .../desktop/views/components/sub-note-content.vue  |  6 +--
 .../app/desktop/views/pages/deck/deck.list-tl.vue  |  6 +--
 .../app/desktop/views/pages/deck/deck.note.vue     | 16 +++----
 .../app/desktop/views/pages/deck/deck.notes.vue    |  2 +-
 .../app/desktop/views/pages/deck/deck.tl.vue       |  6 +--
 .../app/desktop/views/pages/user/user.photos.vue   |  6 +--
 .../app/desktop/views/pages/user/user.timeline.vue |  4 +-
 src/client/app/desktop/views/widgets/trends.vue    |  2 +-
 .../app/mobile/views/components/note-detail.vue    |  8 ++--
 src/client/app/mobile/views/components/note.vue    |  8 ++--
 src/client/app/mobile/views/components/notes.vue   |  2 +-
 .../app/mobile/views/components/post-form.vue      |  8 ++--
 .../mobile/views/components/sub-note-content.vue   |  6 +--
 .../app/mobile/views/components/user-timeline.vue  |  4 +-
 .../app/mobile/views/pages/user/home.photos.vue    |  2 +-
 src/docs/api/entities/note.yaml                    | 12 ++---
 src/misc/get-note-summary.ts                       |  6 +--
 src/misc/is-quote.ts                               |  2 +-
 src/models/drive-file.ts                           |  2 +-
 src/models/note.ts                                 | 26 +++++++++--
 src/remote/activitypub/models/note.ts              |  6 +--
 src/remote/activitypub/renderer/note.ts            |  4 +-
 src/server/activitypub/outbox.ts                   |  2 +-
 src/server/api/endpoints/notes.ts                  | 10 ++--
 src/server/api/endpoints/notes/create.ts           | 23 ++++++----
 src/server/api/endpoints/notes/global-timeline.ts  | 10 ++--
 src/server/api/endpoints/notes/hybrid-timeline.ts  | 12 ++---
 src/server/api/endpoints/notes/local-timeline.ts   | 10 ++--
 src/server/api/endpoints/notes/search_by_tag.ts    |  6 +--
 src/server/api/endpoints/notes/timeline.ts         | 12 ++---
 src/server/api/endpoints/notes/trend.ts            |  2 +-
 .../api/endpoints/notes/user-list-timeline.ts      | 12 ++---
 src/server/api/endpoints/users/notes.ts            | 10 ++--
 src/services/note/create.ts                        | 11 +++--
 src/services/note/delete.ts                        |  2 +-
 43 files changed, 167 insertions(+), 196 deletions(-)
 delete mode 100644 src/client/app/common/scripts/parse-search-query.ts

(limited to 'src/client')

diff --git a/package.json b/package.json
index 70124a0ae4..775c997e55 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "8.26.0",
+	"version": "9.0.0",
 	"clientVersion": "1.0.9358",
 	"codename": "nighthike",
 	"main": "./built/index.js",
diff --git a/src/client/app/common/scripts/parse-search-query.ts b/src/client/app/common/scripts/parse-search-query.ts
deleted file mode 100644
index 5f6ae3320a..0000000000
--- a/src/client/app/common/scripts/parse-search-query.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-export default function(qs: string) {
-	const q = {
-		text: ''
-	};
-
-	qs.split(' ').forEach(x => {
-		if (/^([a-z_]+?):(.+?)$/.test(x)) {
-			const [key, value] = x.split(':');
-			switch (key) {
-				case 'user':
-					q['includeUserUsernames'] = value.split(',');
-					break;
-				case 'exclude_user':
-					q['excludeUserUsernames'] = value.split(',');
-					break;
-				case 'follow':
-					q['following'] = value == 'null' ? null : value == 'true';
-					break;
-				case 'reply':
-					q['reply'] = value == 'null' ? null : value == 'true';
-					break;
-				case 'renote':
-					q['renote'] = value == 'null' ? null : value == 'true';
-					break;
-				case 'media':
-					q['media'] = value == 'null' ? null : value == 'true';
-					break;
-				case 'poll':
-					q['poll'] = value == 'null' ? null : value == 'true';
-					break;
-				case 'until':
-				case 'since':
-					// YYYY-MM-DD
-					if (/^[0-9]+\-[0-9]+\-[0-9]+$/) {
-						const [yyyy, mm, dd] = value.split('-');
-						q[`${key}_date`] = (new Date(parseInt(yyyy, 10), parseInt(mm, 10) - 1, parseInt(dd, 10))).getTime();
-					}
-					break;
-				default:
-					q[key] = value;
-					break;
-			}
-		} else {
-			q.text += x + ' ';
-		}
-	});
-
-	if (q.text) {
-		q.text = q.text.trim();
-	}
-
-	return q;
-}
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index d4e7902c7b..b427721d37 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 				local: true,
 				reply: false,
 				renote: false,
-				media: false,
+				file: false,
 				poll: false
 			}).then(notes => {
 				this.notes = notes;
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 1ba4a9a447..a61a004a85 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -42,8 +42,8 @@
 				<span v-if="p.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
 				<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
 			</div>
-			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media" :raw="true"/>
+			<div class="files" v-if="p.files.length > 0">
+				<mk-media-list :media-list="p.files" :raw="true"/>
 			</div>
 			<mk-poll v-if="p.poll" :note="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
@@ -114,7 +114,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
+				this.note.fileIds.length == 0 &&
 				this.note.poll == null);
 		},
 		p(): any {
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 7592ae3905..1d6b2048ba 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -28,8 +28,8 @@
 						<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.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 class="files" v-if="p.files.length > 0">
+						<mk-media-list :media-list="p.files"/>
 					</div>
 					<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
 					<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
@@ -110,7 +110,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
+				this.note.fileIds.length == 0 &&
 				this.note.poll == null);
 		},
 
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index a1c1207a7b..f19ecf8f9a 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -122,7 +122,7 @@ export default Vue.extend({
 		prepend(note, silent = false) {
 			//#region 弾く
 			const isMyNote = note.userId == this.$store.state.i.id;
-			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
+			const isPureRenote = note.renoteId != null && note.text == null && note.fileIds.length == 0 && note.poll == null;
 
 			if (this.$store.state.settings.showMyRenotes === false) {
 				if (isMyNote && isPureRenote) {
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index 51a416e281..a88c96d1bf 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -4,7 +4,7 @@
 		<span class="icon" v-if="geo">%fa:map-marker-alt%</span>
 		<span v-if="!reply">%i18n:@note%</span>
 		<span v-if="reply">%i18n:@reply%</span>
-		<span class="count" v-if="media.length != 0">{{ '%i18n:@attaches%'.replace('{}', media.length) }}</span>
+		<span class="count" v-if="files.length != 0">{{ '%i18n:@attaches%'.replace('{}', files.length) }}</span>
 		<span class="count" v-if="uploadings.length != 0">{{ '%i18n:@uploading-media%'.replace('{}', uploadings.length) }}<mk-ellipsis/></span>
 	</span>
 
@@ -14,7 +14,7 @@
 			:reply="reply"
 			@posted="onPosted"
 			@change-uploadings="onChangeUploadings"
-			@change-attached-media="onChangeMedia"
+			@change-attached-files="onChangeFiles"
 			@geo-attached="onGeoAttached"
 			@geo-dettached="onGeoDettached"/>
 	</div>
@@ -29,7 +29,7 @@ export default Vue.extend({
 	data() {
 		return {
 			uploadings: [],
-			media: [],
+			files: [],
 			geo: null
 		};
 	},
@@ -42,8 +42,8 @@ export default Vue.extend({
 		onChangeUploadings(files) {
 			this.uploadings = files;
 		},
-		onChangeMedia(media) {
-			this.media = media;
+		onChangeFiles(files) {
+			this.files = files;
 		},
 		onGeoAttached(geo) {
 			this.geo = geo;
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 2ca5484610..f6f52c8f1f 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -20,7 +20,7 @@
 			@keydown="onKeydown" @paste="onPaste" :placeholder="placeholder"
 			v-autocomplete="'text'"
 		></textarea>
-		<div class="medias" :class="{ with: poll }" v-show="files.length != 0">
+		<div class="files" :class="{ with: poll }" v-show="files.length != 0">
 			<x-draggable :list="files" :options="{ animation: 150 }">
 				<div v-for="file in files" :key="file.id">
 					<div class="img" :style="{ backgroundImage: `url(${file.thumbnailUrl})` }" :title="file.name"></div>
@@ -188,7 +188,7 @@ export default Vue.extend({
 							(this.$refs.poll as any).set(draft.data.poll);
 						});
 					}
-					this.$emit('change-attached-media', this.files);
+					this.$emit('change-attached-files', this.files);
 				}
 			}
 
@@ -225,12 +225,12 @@ export default Vue.extend({
 
 		attachMedia(driveFile) {
 			this.files.push(driveFile);
-			this.$emit('change-attached-media', this.files);
+			this.$emit('change-attached-files', this.files);
 		},
 
 		detachMedia(id) {
 			this.files = this.files.filter(x => x.id != id);
-			this.$emit('change-attached-media', this.files);
+			this.$emit('change-attached-files', this.files);
 		},
 
 		onChangeFile() {
@@ -249,7 +249,7 @@ export default Vue.extend({
 			this.text = '';
 			this.files = [];
 			this.poll = false;
-			this.$emit('change-attached-media', this.files);
+			this.$emit('change-attached-files', this.files);
 		},
 
 		onKeydown(e) {
@@ -297,7 +297,7 @@ export default Vue.extend({
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.files.push(file);
-				this.$emit('change-attached-media', this.files);
+				this.$emit('change-attached-files', this.files);
 				e.preventDefault();
 			}
 			//#endregion
@@ -354,7 +354,7 @@ export default Vue.extend({
 
 			(this as any).api('notes/create', {
 				text: this.text == '' ? undefined : this.text,
-				mediaIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
+				fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
 				renoteId: this.renote ? this.renote.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
@@ -514,7 +514,7 @@ root(isDark)
 				margin-right 8px
 				white-space nowrap
 
-		> .medias
+		> .files
 			margin 0
 			padding 0
 			background isDark ? #181b23 : lighten($theme-color, 98%)
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 cb0374b910..6889dc231e 100644
--- a/src/client/app/desktop/views/components/sub-note-content.vue
+++ b/src/client/app/desktop/views/components/sub-note-content.vue
@@ -7,9 +7,9 @@
 		<misskey-flavored-markdown v-if="note.text" :text="note.text" :i="$store.state.i"/>
 		<a class="rp" v-if="note.renoteId" :href="`/notes/${note.renoteId}`">RP: ...</a>
 	</div>
-	<details v-if="note.media.length > 0">
-		<summary>({{ '%i18n:@media-count%'.replace('{}', note.media.length) }})</summary>
-		<mk-media-list :media-list="note.media"/>
+	<details v-if="note.files.length > 0">
+		<summary>({{ '%i18n:@media-count%'.replace('{}', note.files.length) }})</summary>
+		<mk-media-list :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
 		<summary>%i18n:@poll%</summary>
diff --git a/src/client/app/desktop/views/pages/deck/deck.list-tl.vue b/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
index 70048f99e3..e82e76e4d0 100644
--- a/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
@@ -68,7 +68,7 @@ export default Vue.extend({
 				(this as any).api('notes/user-list-timeline', {
 					listId: this.list.id,
 					limit: fetchLimit + 1,
-					mediaOnly: this.mediaOnly,
+					withFiles: this.mediaOnly,
 					includeMyRenotes: this.$store.state.settings.showMyRenotes,
 					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
 					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
@@ -90,7 +90,7 @@ export default Vue.extend({
 				listId: this.list.id,
 				limit: fetchLimit + 1,
 				untilId: (this.$refs.timeline as any).tail().id,
-				mediaOnly: this.mediaOnly,
+				withFiles: this.mediaOnly,
 				includeMyRenotes: this.$store.state.settings.showMyRenotes,
 				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
 				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
@@ -109,7 +109,7 @@ export default Vue.extend({
 			return promise;
 		},
 		onNote(note) {
-			if (this.mediaOnly && note.media.length == 0) return;
+			if (this.mediaOnly && note.files.length == 0) return;
 
 			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 2615c0d090..b42df1f347 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -28,8 +28,8 @@
 						<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
 						<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 class="files" v-if="p.files.length > 0">
+						<mk-media-list :media-list="p.files"/>
 					</div>
 					<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
 					<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
@@ -54,11 +54,11 @@
 	</article>
 </div>
 <div v-else class="srwrkujossgfuhrbnvqkybtzxpblgchi">
-	<div v-if="note.media.length > 0">
-		<mk-media-list :media-list="note.media"/>
+	<div v-if="note.files.length > 0">
+		<mk-media-list :media-list="note.files"/>
 	</div>
-	<div v-if="note.renote && note.renote.media.length > 0">
-		<mk-media-list :media-list="note.renote.media"/>
+	<div v-if="note.renote && note.renote.files.length > 0">
+		<mk-media-list :media-list="note.renote.files"/>
 	</div>
 </div>
 </template>
@@ -100,7 +100,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
+				this.note.fileIds.length == 0 &&
 				this.note.poll == null);
 		},
 
@@ -371,7 +371,7 @@ root(isDark)
 					.mk-url-preview
 						margin-top 8px
 
-					> .media
+					> .files
 						> img
 							display block
 							max-width 100%
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index f7fca5de92..2e7e30f12a 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -127,7 +127,7 @@ export default Vue.extend({
 		prepend(note, silent = false) {
 			//#region 弾く
 			const isMyNote = note.userId == this.$store.state.i.id;
-			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
+			const isPureRenote = note.renoteId != null && note.text == null && note.fileIds.length == 0 && note.poll == null;
 
 			if (this.$store.state.settings.showMyRenotes === false) {
 				if (isMyNote && isPureRenote) {
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl.vue b/src/client/app/desktop/views/pages/deck/deck.tl.vue
index a9e4d489c3..120ceb7fc2 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl.vue
@@ -96,7 +96,7 @@ export default Vue.extend({
 			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
 				(this as any).api(this.endpoint, {
 					limit: fetchLimit + 1,
-					mediaOnly: this.mediaOnly,
+					withFiles: this.mediaOnly,
 					includeMyRenotes: this.$store.state.settings.showMyRenotes,
 					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
 					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
@@ -117,7 +117,7 @@ export default Vue.extend({
 
 			const promise = (this as any).api(this.endpoint, {
 				limit: fetchLimit + 1,
-				mediaOnly: this.mediaOnly,
+				withFiles: this.mediaOnly,
 				untilId: (this.$refs.timeline as any).tail().id,
 				includeMyRenotes: this.$store.state.settings.showMyRenotes,
 				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
@@ -138,7 +138,7 @@ export default Vue.extend({
 		},
 
 		onNote(note) {
-			if (this.mediaOnly && note.media.length == 0) return;
+			if (this.mediaOnly && note.files.length == 0) return;
 
 			// Prepend a note
 			(this.$refs.timeline as any).prepend(note);
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 64c537f1ed..c5cd9e24fe 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -24,12 +24,12 @@ export default Vue.extend({
 	mounted() {
 		(this as any).api('users/notes', {
 			userId: this.user.id,
-			withMedia: true,
+			withFiles: true,
 			limit: 9
 		}).then(notes => {
 			notes.forEach(note => {
-				note.media.forEach(media => {
-					if (this.images.length < 9) this.images.push(media);
+				note.files.forEach(file => {
+					if (this.images.length < 9) this.images.push(file);
 				});
 			});
 			this.fetching = false;
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 67987fcb94..54221380a7 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -66,7 +66,7 @@ export default Vue.extend({
 					limit: fetchLimit + 1,
 					untilDate: this.date ? this.date.getTime() : undefined,
 					includeReplies: this.mode == 'with-replies',
-					withMedia: this.mode == 'with-media'
+					withFiles: this.mode == 'with-media'
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -86,7 +86,7 @@ export default Vue.extend({
 				userId: this.user.id,
 				limit: fetchLimit + 1,
 				includeReplies: this.mode == 'with-replies',
-				withMedia: this.mode == 'with-media',
+				withFiles: this.mode == 'with-media',
 				untilId: (this.$refs.timeline as any).tail().id
 			});
 
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index c33bf2f2f2..aeaab63ac4 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -49,7 +49,7 @@ export default define({
 				offset: this.offset,
 				renote: false,
 				reply: false,
-				media: false,
+				file: false,
 				poll: false
 			}).then(notes => {
 				const note = notes ? notes[0] : null;
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 786e57bb22..10ff3fcc09 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -40,8 +40,8 @@
 				<span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span>
 				<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
 			</div>
-			<div class="media" v-if="p.media.length > 0">
-				<mk-media-list :media-list="p.media" :raw="true"/>
+			<div class="files" v-if="p.files.length > 0">
+				<mk-media-list :media-list="p.files" :raw="true"/>
 			</div>
 			<mk-poll v-if="p.poll" :note="p"/>
 			<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
@@ -113,7 +113,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
+				this.note.fileIds.length == 0 &&
 				this.note.poll == null);
 		},
 
@@ -369,7 +369,7 @@ root(isDark)
 			> .mk-url-preview
 				margin-top 8px
 
-			> .media
+			> .files
 				> img
 					display block
 					max-width 100%
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 258433cb3f..9bd4a83ecb 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -28,8 +28,8 @@
 						<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.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 class="files" v-if="p.files.length > 0">
+						<mk-media-list :media-list="p.files"/>
 					</div>
 					<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
 					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
@@ -90,7 +90,7 @@ export default Vue.extend({
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
-				this.note.mediaIds.length == 0 &&
+				this.note.fileIds.length == 0 &&
 				this.note.poll == null);
 		},
 
@@ -414,7 +414,7 @@ root(isDark)
 					.mk-url-preview
 						margin-top 8px
 
-					> .media
+					> .files
 						> img
 							display block
 							max-width 100%
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 714e521c0f..ce2670dc52 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -125,7 +125,7 @@ export default Vue.extend({
 		prepend(note, silent = false) {
 			//#region 弾く
 			const isMyNote = note.userId == this.$store.state.i.id;
-			const isPureRenote = note.renoteId != null && note.text == null && note.mediaIds.length == 0 && note.poll == null;
+			const isPureRenote = note.renoteId != null && note.text == null && note.fileIds.length == 0 && note.poll == null;
 
 			if (this.$store.state.settings.showMyRenotes === false) {
 				if (isMyNote && isPureRenote) {
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 8b1f7b08c8..644e27cce8 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -200,12 +200,12 @@ export default Vue.extend({
 
 		attachMedia(driveFile) {
 			this.files.push(driveFile);
-			this.$emit('change-attached-media', this.files);
+			this.$emit('change-attached-files', this.files);
 		},
 
 		detachMedia(file) {
 			this.files = this.files.filter(x => x.id != file.id);
-			this.$emit('change-attached-media', this.files);
+			this.$emit('change-attached-files', this.files);
 		},
 
 		onChangeFile() {
@@ -269,7 +269,7 @@ export default Vue.extend({
 			this.text = '';
 			this.files = [];
 			this.poll = false;
-			this.$emit('change-attached-media');
+			this.$emit('change-attached-files');
 		},
 
 		post() {
@@ -277,7 +277,7 @@ export default Vue.extend({
 			const viaMobile = this.$store.state.settings.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,
+				fileIds: this.files.length > 0 ? this.files.map(f => f.id) : undefined,
 				replyId: this.reply ? this.reply.id : undefined,
 				renoteId: this.renote ? this.renote.id : undefined,
 				poll: this.poll ? (this.$refs.poll as any).get() : undefined,
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 a4ce49786e..4d0aa25f34 100644
--- a/src/client/app/mobile/views/components/sub-note-content.vue
+++ b/src/client/app/mobile/views/components/sub-note-content.vue
@@ -7,9 +7,9 @@
 		<misskey-flavored-markdown v-if="note.text" :text="note.text" :i="$store.state.i"/>
 		<a class="rp" v-if="note.renoteId">RP: ...</a>
 	</div>
-	<details v-if="note.media.length > 0">
-		<summary>({{ '%i18n:@media-count%'.replace('{}', note.media.length) }})</summary>
-		<mk-media-list :media-list="note.media"/>
+	<details v-if="note.files.length > 0">
+		<summary>({{ '%i18n:@media-count%'.replace('{}', note.files.length) }})</summary>
+		<mk-media-list :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
 		<summary>%i18n:@poll%</summary>
diff --git a/src/client/app/mobile/views/components/user-timeline.vue b/src/client/app/mobile/views/components/user-timeline.vue
index 6be675c0a7..7cd23d6655 100644
--- a/src/client/app/mobile/views/components/user-timeline.vue
+++ b/src/client/app/mobile/views/components/user-timeline.vue
@@ -41,7 +41,7 @@ export default Vue.extend({
 			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
 				(this as any).api('users/notes', {
 					userId: this.user.id,
-					withMedia: this.withMedia,
+					withFiles: this.withMedia,
 					limit: fetchLimit + 1
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
@@ -62,7 +62,7 @@ export default Vue.extend({
 
 			const promise = (this as any).api('users/notes', {
 				userId: this.user.id,
-				withMedia: this.withMedia,
+				withFiles: this.withMedia,
 				limit: fetchLimit + 1,
 				untilId: (this.$refs.timeline as any).tail().id
 			});
diff --git a/src/client/app/mobile/views/pages/user/home.photos.vue b/src/client/app/mobile/views/pages/user/home.photos.vue
index 73ff1d5173..e9025ec816 100644
--- a/src/client/app/mobile/views/pages/user/home.photos.vue
+++ b/src/client/app/mobile/views/pages/user/home.photos.vue
@@ -26,7 +26,7 @@ export default Vue.extend({
 	mounted() {
 		(this as any).api('users/notes', {
 			userId: this.user.id,
-			withMedia: true,
+			withFiles: true,
 			limit: 6
 		}).then(notes => {
 			notes.forEach(note => {
diff --git a/src/docs/api/entities/note.yaml b/src/docs/api/entities/note.yaml
index cae9a53f82..6654be2b02 100644
--- a/src/docs/api/entities/note.yaml
+++ b/src/docs/api/entities/note.yaml
@@ -33,19 +33,19 @@ props:
       ja-JP: "投稿の本文"
       en-US: "The text of this note"
 
-  mediaIds:
+  fileIds:
     type: "id(DriveFile)[]"
     optional: true
     desc:
-      ja-JP: "添付されているメディアのID (なければレスポンスでは空配列)"
-      en-US: "The IDs of the attached media (empty array for response if no media is attached)"
+      ja-JP: "添付されているファイルのID (なければレスポンスでは空配列)"
+      en-US: "The IDs of the attached files (empty array for response if no files is attached)"
 
-  media:
+  files:
     type: "entity(DriveFile)[]"
     optional: true
     desc:
-      ja-JP: "添付されているメディア"
-      en-US: "The attached media"
+      ja-JP: "添付されているファイル"
+      en-US: "The attached files"
 
   userId:
     type: "id(User)"
diff --git a/src/misc/get-note-summary.ts b/src/misc/get-note-summary.ts
index ec7c74cf9f..3c6f2dd3d6 100644
--- a/src/misc/get-note-summary.ts
+++ b/src/misc/get-note-summary.ts
@@ -16,9 +16,9 @@ const summarize = (note: any): string => {
 	// 本文
 	summary += note.text ? note.text : '';
 
-	// メディアが添付されているとき
-	if (note.media.length != 0) {
-		summary += ` (${note.media.length}つのメディア)`;
+	// ファイルが添付されているとき
+	if (note.files.length != 0) {
+		summary += ` (${note.files.length}つのファイル)`;
 	}
 
 	// 投票が添付されているとき
diff --git a/src/misc/is-quote.ts b/src/misc/is-quote.ts
index 420f03a489..a99b8f6434 100644
--- a/src/misc/is-quote.ts
+++ b/src/misc/is-quote.ts
@@ -1,5 +1,5 @@
 import { INote } from '../models/note';
 
 export default function(note: INote): boolean {
-	return note.renoteId != null && (note.text != null || note.poll != null || (note.mediaIds != null && note.mediaIds.length > 0));
+	return note.renoteId != null && (note.text != null || note.poll != null || (note.fileIds != null && note.fileIds.length > 0));
 }
diff --git a/src/models/drive-file.ts b/src/models/drive-file.ts
index 698ef092a6..215b49b305 100644
--- a/src/models/drive-file.ts
+++ b/src/models/drive-file.ts
@@ -92,7 +92,7 @@ export async function deleteDriveFile(driveFile: string | mongo.ObjectID | IDriv
 
 	// このDriveFileを添付しているNoteをすべて削除
 	await Promise.all((
-		await Note.find({ mediaIds: d._id })
+		await Note.find({ fileIds: d._id })
 	).map(x => deleteNote(x)));
 
 	// このDriveFileを添付しているMessagingMessageをすべて削除
diff --git a/src/models/note.ts b/src/models/note.ts
index 9d2e23d901..98d37caf22 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -6,7 +6,7 @@ import { IUser, pack as packUser } from './user';
 import { pack as packApp } from './app';
 import PollVote, { deletePollVote } from './poll-vote';
 import Reaction, { deleteNoteReaction } from './note-reaction';
-import { pack as packFile } from './drive-file';
+import { pack as packFile, IDriveFile } from './drive-file';
 import NoteWatching, { deleteNoteWatching } from './note-watching';
 import NoteReaction from './note-reaction';
 import Favorite, { deleteFavorite } from './favorite';
@@ -17,9 +17,20 @@ const Note = db.get<INote>('notes');
 Note.createIndex('uri', { sparse: true, unique: true });
 Note.createIndex('userId');
 Note.createIndex('tagsLower');
+Note.createIndex('_files.contentType');
 Note.createIndex({
 	createdAt: -1
 });
+
+// 後方互換性のため
+Note.update({}, {
+	$rename: {
+		mediaIds: 'fileIds'
+	}
+}, {
+	multi: true
+});
+
 export default Note;
 
 export function isValidText(text: string): boolean {
@@ -34,7 +45,7 @@ export type INote = {
 	_id: mongo.ObjectID;
 	createdAt: Date;
 	deletedAt: Date;
-	mediaIds: mongo.ObjectID[];
+	fileIds: mongo.ObjectID[];
 	replyId: mongo.ObjectID;
 	renoteId: mongo.ObjectID;
 	poll: {
@@ -92,6 +103,7 @@ export type INote = {
 		inbox?: string;
 	};
 	_replyIds?: mongo.ObjectID[];
+	_files?: IDriveFile[];
 };
 
 /**
@@ -271,11 +283,15 @@ export const pack = async (
 		_note.app = packApp(_note.appId);
 	}
 
-	// Populate media
-	_note.media = hide ? [] : Promise.all(_note.mediaIds.map((fileId: mongo.ObjectID) =>
+	// Populate files
+	_note.files = hide ? [] : Promise.all(_note.fileIds.map((fileId: mongo.ObjectID) =>
 		packFile(fileId)
 	));
 
+	// 後方互換性のため
+	_note.mediaIds = _note.fileIds;
+	_note.media = _note.files;
+
 	// When requested a detailed note data
 	if (opts.detail) {
 		//#region 重いので廃止
@@ -344,7 +360,7 @@ export const pack = async (
 	}
 
 	if (hide) {
-		_note.mediaIds = [];
+		_note.fileIds = [];
 		_note.text = null;
 		_note.poll = null;
 		_note.cw = null;
diff --git a/src/remote/activitypub/models/note.ts b/src/remote/activitypub/models/note.ts
index 1dfeebfdf7..97188b44a6 100644
--- a/src/remote/activitypub/models/note.ts
+++ b/src/remote/activitypub/models/note.ts
@@ -78,11 +78,11 @@ export async function createNote(value: any, resolver?: Resolver, silent = false
 	}
 	//#endergion
 
-	// 添付メディア
+	// 添付ファイル
 	// TODO: attachmentは必ずしもImageではない
 	// TODO: attachmentは必ずしも配列ではない
 	// Noteがsensitiveなら添付もsensitiveにする
-	const media = note.attachment
+	const files = note.attachment
 		.map(attach => attach.sensitive = note.sensitive)
 		? await Promise.all(note.attachment.map(x => resolveImage(actor, x)))
 		: [];
@@ -100,7 +100,7 @@ export async function createNote(value: any, resolver?: Resolver, silent = false
 
 	return await post(actor, {
 		createdAt: new Date(note.published),
-		media,
+		files: files,
 		reply,
 		renote: undefined,
 		cw: note.summary,
diff --git a/src/remote/activitypub/renderer/note.ts b/src/remote/activitypub/renderer/note.ts
index 1d169d3088..6b30324ae7 100644
--- a/src/remote/activitypub/renderer/note.ts
+++ b/src/remote/activitypub/renderer/note.ts
@@ -8,8 +8,8 @@ import User from '../../../models/user';
 import toHtml from '../misc/get-note-html';
 
 export default async function renderNote(note: INote, dive = true): Promise<any> {
-	const promisedFiles: Promise<IDriveFile[]> = note.mediaIds
-		? DriveFile.find({ _id: { $in: note.mediaIds } })
+	const promisedFiles: Promise<IDriveFile[]> = note.fileIds
+		? DriveFile.find({ _id: { $in: note.fileIds } })
 		: Promise.resolve([]);
 
 	let inReplyTo;
diff --git a/src/server/activitypub/outbox.ts b/src/server/activitypub/outbox.ts
index 37df190880..cc7e55b5df 100644
--- a/src/server/activitypub/outbox.ts
+++ b/src/server/activitypub/outbox.ts
@@ -58,7 +58,7 @@ export default async (ctx: Router.IRouterContext) => {
 				$or: [{
 					text: { $ne: null }
 				}, {
-					mediaIds: { $ne: [] }
+					fileIds: { $ne: [] }
 				}]
 			}]
 		} as any;
diff --git a/src/server/api/endpoints/notes.ts b/src/server/api/endpoints/notes.ts
index 029bc1a95e..4d15e9483f 100644
--- a/src/server/api/endpoints/notes.ts
+++ b/src/server/api/endpoints/notes.ts
@@ -20,9 +20,9 @@ export default (params: any) => new Promise(async (res, rej) => {
 	const [renote, renoteErr] = $.bool.optional.get(params.renote);
 	if (renoteErr) return rej('invalid renote param');
 
-	// Get 'media' parameter
-	const [media, mediaErr] = $.bool.optional.get(params.media);
-	if (mediaErr) return rej('invalid media param');
+	// Get 'files' parameter
+	const [files, filesErr] = $.bool.optional.get(params.files);
+	if (filesErr) return rej('invalid files param');
 
 	// Get 'poll' parameter
 	const [poll, pollErr] = $.bool.optional.get(params.poll);
@@ -79,8 +79,8 @@ export default (params: any) => new Promise(async (res, rej) => {
 		query.renoteId = renote ? { $exists: true, $ne: null } : null;
 	}
 
-	if (media != undefined) {
-		query.mediaIds = media ? { $exists: true, $ne: null } : [];
+	if (files != undefined) {
+		query.fileIds = files ? { $exists: true, $ne: null } : [];
 	}
 
 	if (poll != undefined) {
diff --git a/src/server/api/endpoints/notes/create.ts b/src/server/api/endpoints/notes/create.ts
index 04f5f7562e..47b53c943b 100644
--- a/src/server/api/endpoints/notes/create.ts
+++ b/src/server/api/endpoints/notes/create.ts
@@ -71,9 +71,15 @@ export const meta = {
 			ref: 'geo'
 		}),
 
+		fileIds: $.arr($.type(ID)).optional.unique().range(1, 4).note({
+			desc: {
+				'ja-JP': '添付するファイル'
+			}
+		}),
+
 		mediaIds: $.arr($.type(ID)).optional.unique().range(1, 4).note({
 			desc: {
-				'ja-JP': '添付するメディア'
+				'ja-JP': '添付するファイル (このパラメータは廃止予定です。代わりに fileIds を使ってください。)'
 			}
 		}),
 
@@ -124,15 +130,16 @@ export default (params: any, user: ILocalUser, app: IApp) => new Promise(async (
 	}
 
 	let files: IDriveFile[] = [];
-	if (ps.mediaIds !== undefined) {
+	const fileIds = ps.fileIds != null ? ps.fileIds : ps.mediaIds != null ? ps.mediaIds : null;
+	if (fileIds != null) {
 		// Fetch files
 		// forEach だと途中でエラーなどがあっても return できないので
 		// 敢えて for を使っています。
-		for (const mediaId of ps.mediaIds) {
+		for (const fileId of fileIds) {
 			// Fetch file
 			// SELECT _id
 			const entity = await DriveFile.findOne({
-				_id: mediaId,
+				_id: fileId,
 				'metadata.userId': user._id
 			});
 
@@ -155,7 +162,7 @@ export default (params: any, user: ILocalUser, app: IApp) => new Promise(async (
 
 		if (renote == null) {
 			return rej('renoteee is not found');
-		} else if (renote.renoteId && !renote.text && !renote.mediaIds) {
+		} else if (renote.renoteId && !renote.text && !renote.fileIds) {
 			return rej('cannot renote to renote');
 		}
 	}
@@ -176,7 +183,7 @@ export default (params: any, user: ILocalUser, app: IApp) => new Promise(async (
 		}
 
 		// 返信対象が引用でないRenoteだったらエラー
-		if (reply.renoteId && !reply.text && !reply.mediaIds) {
+		if (reply.renoteId && !reply.text && !reply.fileIds) {
 			return rej('cannot reply to renote');
 		}
 	}
@@ -191,13 +198,13 @@ export default (params: any, user: ILocalUser, app: IApp) => new Promise(async (
 
 	// テキストが無いかつ添付ファイルが無いかつRenoteも無いかつ投票も無かったらエラー
 	if ((ps.text === undefined || ps.text === null) && files === null && renote === null && ps.poll === undefined) {
-		return rej('text, mediaIds, renoteId or poll is required');
+		return rej('text, fileIds, renoteId or poll is required');
 	}
 
 	// 投稿を作成
 	const note = await create(user, {
 		createdAt: new Date(),
-		media: files,
+		files: files,
 		poll: ps.poll,
 		text: ps.text,
 		reply,
diff --git a/src/server/api/endpoints/notes/global-timeline.ts b/src/server/api/endpoints/notes/global-timeline.ts
index 8f7233e308..554245a0f4 100644
--- a/src/server/api/endpoints/notes/global-timeline.ts
+++ b/src/server/api/endpoints/notes/global-timeline.ts
@@ -33,9 +33,9 @@ export default async (params: any, user: ILocalUser) => {
 		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
 	}
 
-	// Get 'mediaOnly' parameter
-	const [mediaOnly, mediaOnlyErr] = $.bool.optional.get(params.mediaOnly);
-	if (mediaOnlyErr) throw 'invalid mediaOnly param';
+	// Get 'withFiles' parameter
+	const [withFiles, withFilesErr] = $.bool.optional.get(params.withFiles);
+	if (withFilesErr) throw 'invalid withFiles param';
 
 	// ミュートしているユーザーを取得
 	const mutedUserIds = user ? (await Mute.find({
@@ -68,8 +68,8 @@ export default async (params: any, user: ILocalUser) => {
 		};
 	}
 
-	if (mediaOnly) {
-		query.mediaIds = { $exists: true, $ne: [] };
+	if (withFiles) {
+		query.fileIds = { $exists: true, $ne: [] };
 	}
 
 	if (sinceId) {
diff --git a/src/server/api/endpoints/notes/hybrid-timeline.ts b/src/server/api/endpoints/notes/hybrid-timeline.ts
index 2dbb1190c1..1060792683 100644
--- a/src/server/api/endpoints/notes/hybrid-timeline.ts
+++ b/src/server/api/endpoints/notes/hybrid-timeline.ts
@@ -66,7 +66,7 @@ export const meta = {
 			}
 		}),
 
-		mediaOnly: $.bool.optional.note({
+		withFiles: $.bool.optional.note({
 			desc: {
 				'ja-JP': 'true にすると、メディアが添付された投稿だけ取得します'
 			}
@@ -164,7 +164,7 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
@@ -180,7 +180,7 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
@@ -196,16 +196,16 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
 		});
 	}
 
-	if (ps.mediaOnly) {
+	if (ps.withFiles) {
 		query.$and.push({
-			mediaIds: { $exists: true, $ne: [] }
+			fileIds: { $exists: true, $ne: [] }
 		});
 	}
 
diff --git a/src/server/api/endpoints/notes/local-timeline.ts b/src/server/api/endpoints/notes/local-timeline.ts
index bbcc6303ca..018e636ab5 100644
--- a/src/server/api/endpoints/notes/local-timeline.ts
+++ b/src/server/api/endpoints/notes/local-timeline.ts
@@ -33,9 +33,9 @@ export default async (params: any, user: ILocalUser) => {
 		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
 	}
 
-	// Get 'mediaOnly' parameter
-	const [mediaOnly, mediaOnlyErr] = $.bool.optional.get(params.mediaOnly);
-	if (mediaOnlyErr) throw 'invalid mediaOnly param';
+	// Get 'withFiles' parameter
+	const [withFiles, withFilesErr] = $.bool.optional.get(params.withFiles);
+	if (withFilesErr) throw 'invalid withFiles param';
 
 	// ミュートしているユーザーを取得
 	const mutedUserIds = user ? (await Mute.find({
@@ -69,8 +69,8 @@ export default async (params: any, user: ILocalUser) => {
 		};
 	}
 
-	if (mediaOnly) {
-		query.mediaIds = { $exists: true, $ne: [] };
+	if (withFiles) {
+		query.fileIds = { $exists: true, $ne: [] };
 	}
 
 	if (sinceId) {
diff --git a/src/server/api/endpoints/notes/search_by_tag.ts b/src/server/api/endpoints/notes/search_by_tag.ts
index e092275fe8..317a0726d3 100644
--- a/src/server/api/endpoints/notes/search_by_tag.ts
+++ b/src/server/api/endpoints/notes/search_by_tag.ts
@@ -247,7 +247,7 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 	if (media != null) {
 		if (media) {
 			push({
-				mediaIds: {
+				fileIds: {
 					$exists: true,
 					$ne: null
 				}
@@ -255,11 +255,11 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 		} else {
 			push({
 				$or: [{
-					mediaIds: {
+					fileIds: {
 						$exists: false
 					}
 				}, {
-					mediaIds: null
+					fileIds: null
 				}]
 			});
 		}
diff --git a/src/server/api/endpoints/notes/timeline.ts b/src/server/api/endpoints/notes/timeline.ts
index 099bf2010b..145f648c56 100644
--- a/src/server/api/endpoints/notes/timeline.ts
+++ b/src/server/api/endpoints/notes/timeline.ts
@@ -67,7 +67,7 @@ export const meta = {
 			}
 		}),
 
-		mediaOnly: $.bool.optional.note({
+		withFiles: $.bool.optional.note({
 			desc: {
 				'ja-JP': 'true にすると、メディアが添付された投稿だけ取得します'
 			}
@@ -154,7 +154,7 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
@@ -170,7 +170,7 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
@@ -186,16 +186,16 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
 		});
 	}
 
-	if (ps.mediaOnly) {
+	if (ps.withFiles) {
 		query.$and.push({
-			mediaIds: { $exists: true, $ne: [] }
+			fileIds: { $exists: true, $ne: [] }
 		});
 	}
 
diff --git a/src/server/api/endpoints/notes/trend.ts b/src/server/api/endpoints/notes/trend.ts
index 7a0a098f28..9f55ed3243 100644
--- a/src/server/api/endpoints/notes/trend.ts
+++ b/src/server/api/endpoints/notes/trend.ts
@@ -52,7 +52,7 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 	}
 
 	if (media != undefined) {
-		query.mediaIds = media ? { $exists: true, $ne: null } : null;
+		query.fileIds = media ? { $exists: true, $ne: null } : null;
 	}
 
 	if (poll != undefined) {
diff --git a/src/server/api/endpoints/notes/user-list-timeline.ts b/src/server/api/endpoints/notes/user-list-timeline.ts
index a7b43014ed..e00a7de371 100644
--- a/src/server/api/endpoints/notes/user-list-timeline.ts
+++ b/src/server/api/endpoints/notes/user-list-timeline.ts
@@ -73,7 +73,7 @@ export const meta = {
 			}
 		}),
 
-		mediaOnly: $.bool.optional.note({
+		withFiles: $.bool.optional.note({
 			desc: {
 				'ja-JP': 'true にすると、メディアが添付された投稿だけ取得します'
 			}
@@ -160,7 +160,7 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
@@ -176,7 +176,7 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
@@ -192,16 +192,16 @@ export default async (params: any, user: ILocalUser) => {
 			}, {
 				text: { $ne: null }
 			}, {
-				mediaIds: { $ne: [] }
+				fileIds: { $ne: [] }
 			}, {
 				poll: { $ne: null }
 			}]
 		});
 	}
 
-	if (ps.mediaOnly) {
+	if (ps.withFiles) {
 		query.$and.push({
-			mediaIds: { $exists: true, $ne: [] }
+			fileIds: { $exists: true, $ne: [] }
 		});
 	}
 
diff --git a/src/server/api/endpoints/users/notes.ts b/src/server/api/endpoints/users/notes.ts
index ff7855bde0..d894e52dba 100644
--- a/src/server/api/endpoints/users/notes.ts
+++ b/src/server/api/endpoints/users/notes.ts
@@ -27,9 +27,9 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 	const [includeReplies = true, includeRepliesErr] = $.bool.optional.get(params.includeReplies);
 	if (includeRepliesErr) return rej('invalid includeReplies param');
 
-	// Get 'withMedia' parameter
-	const [withMedia = false, withMediaErr] = $.bool.optional.get(params.withMedia);
-	if (withMediaErr) return rej('invalid withMedia param');
+	// Get 'withFiles' parameter
+	const [withFiles = false, withFilesErr] = $.bool.optional.get(params.withFiles);
+	if (withFilesErr) return rej('invalid withFiles param');
 
 	// Get 'limit' parameter
 	const [limit = 10, limitErr] = $.num.optional.range(1, 100).get(params.limit);
@@ -104,8 +104,8 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 		query.replyId = null;
 	}
 
-	if (withMedia) {
-		query.mediaIds = {
+	if (withFiles) {
+		query.fileIds = {
 			$exists: true,
 			$ne: []
 		};
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 63e3557828..11e3755863 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -84,7 +84,7 @@ type Option = {
 	text?: string;
 	reply?: INote;
 	renote?: INote;
-	media?: IDriveFile[];
+	files?: IDriveFile[];
 	geo?: any;
 	poll?: any;
 	viaMobile?: boolean;
@@ -135,7 +135,7 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 
 	const mentionedUsers = await extractMentionedUsers(tokens);
 
-	const note = await insertNote(user, data, tokens, tags, mentionedUsers);
+	const note = await insertNote(user, data, tags, mentionedUsers);
 
 	res(note);
 
@@ -309,10 +309,10 @@ async function publish(user: IUser, note: INote, noteObj: any, reply: INote, ren
 	publishToUserLists(note, noteObj);
 }
 
-async function insertNote(user: IUser, data: Option, tokens: ReturnType<typeof parse>, tags: string[], mentionedUsers: IUser[]) {
+async function insertNote(user: IUser, data: Option, tags: string[], mentionedUsers: IUser[]) {
 	const insert: any = {
 		createdAt: data.createdAt,
-		mediaIds: data.media ? data.media.map(file => file._id) : [],
+		fileIds: data.files ? data.files.map(file => file._id) : [],
 		replyId: data.reply ? data.reply._id : null,
 		renoteId: data.renote ? data.renote._id : null,
 		text: data.text,
@@ -347,7 +347,8 @@ async function insertNote(user: IUser, data: Option, tokens: ReturnType<typeof p
 		_user: {
 			host: user.host,
 			inbox: isRemoteUser(user) ? user.inbox : undefined
-		}
+		},
+		_files: data.files ? data.files : []
 	};
 
 	if (data.uri != null) insert.uri = data.uri;
diff --git a/src/services/note/delete.ts b/src/services/note/delete.ts
index dea306feec..32e736b7a5 100644
--- a/src/services/note/delete.ts
+++ b/src/services/note/delete.ts
@@ -23,7 +23,7 @@ export default async function(user: IUser, note: INote) {
 			deletedAt: new Date(),
 			text: null,
 			tags: [],
-			mediaIds: [],
+			fileIds: [],
 			poll: null,
 			geo: null
 		}
-- 
cgit v1.2.3-freya


From 4257fed5009a30b7815fe3254d18b4b87806fe51 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 5 Sep 2018 19:46:55 +0900
Subject: fix mk-media darkmode

---
 src/client/app/common/views/components/media-banner.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 48b0d03d30..5c83925a32 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-banner
+root(isDark)
 	width 100%
 	border-radius 4px
 	margin-top 4px
@@ -70,11 +70,8 @@ export default Vue.extend({
 		> .mk-media-banner-icon
 			font-size 1.6em
 
-	.mk-media-banner-download[data-darkmode]
-		background #21242d
-
-	.mk-media-banner-download:not([data-darkmode])
-		background #f7f7f7
+	.mk-media-banner-download
+		background isDark ? #21242d : #f7f7f7
 
 	.mk-media-banner-sensitive
 		background #111
@@ -85,4 +82,10 @@ export default Vue.extend({
 			display block
 			width 100%
 			height 100%
+
+.mk-media-banner[data-darkmode]
+	root(true)
+
+.mk-media-banner:not([data-darkmode])
+	root(false)
 </style>
-- 
cgit v1.2.3-freya


From 229e85b2c595a296d1f6501ad7057b72fb5ffd53 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 5 Sep 2018 21:51:31 +0900
Subject: [WIP] Update welcome page

---
 src/client/app/desktop/views/pages/welcome.vue | 181 +++++++++++++++----------
 1 file changed, 106 insertions(+), 75 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index b7a39fbdb8..ba22cb598f 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -9,41 +9,65 @@
 
 	<div class="body">
 		<div class="main block">
-			<h1 v-if="name != 'Misskey'">{{ name }}</h1>
-			<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
-
-			<div class="info">
-				<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
-				<span class="stats" v-if="stats">
-					<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
-					<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
-				</span>
+			<div>
+				<h1 v-if="name != 'Misskey'">{{ name }}</h1>
+				<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
+
+				<div class="info">
+					<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
+					<span class="stats" v-if="stats">
+						<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
+						<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
+					</span>
+				</div>
+
+				<p class="desc" v-html="description || '%i18n:common.about%'"></p>
+
+				<p class="sign">
+					<span class="signup" @click="signup">%i18n:@signup%</span>
+					<span class="divider">|</span>
+					<span class="signin" @click="signin">%i18n:@signin%</span>
+				</p>
 			</div>
+		</div>
 
-			<p class="desc" v-html="description || '%i18n:common.about%'"></p>
-
-			<p class="sign">
-				<span class="signup" @click="signup">%i18n:@signup%</span>
-				<span class="divider">|</span>
-				<span class="signin" @click="signin">%i18n:@signin%</span>
-			</p>
+		<div class="announcements block">
+			<header>%fa:broadcast-tower% %i18n:@announcements%</header>
+			<div>
+				<div v-for="broadcast in broadcasts">
+					<h1 v-html="broadcast.title"></h1>
+					<div v-html="broadcast.text"></div>
+				</div>
+			</div>
 		</div>
 
-		<div class="broadcasts block">
-			<div v-for="broadcast in broadcasts">
-				<h1 v-html="broadcast.title"></h1>
-				<div v-html="broadcast.text"></div>
+		<div class="photos block">
+			<header>%fa:images% %i18n:@photos%</header>
+			<div>
+				<div v-for="photo in photos">
+				</div>
 			</div>
 		</div>
 
 		<div class="nav block">
-			<mk-nav class="nav"/>
+			<div>
+				<mk-nav class="nav"/>
+			</div>
 		</div>
 
 		<div class="side">
-			<mk-trends class="trends block"/>
+			<div class="trends block">
+				<div>
+					<mk-trends/>
+				</div>
+			</div>
 
-			<mk-welcome-timeline class="tl block" :max="20"/>
+			<div class="tl block">
+				<header>%fa:comment-alt R% %i18n:@timeline%</header>
+				<div>
+					<mk-welcome-timeline class="tl" :max="20"/>
+				</div>
+			</div>
 		</div>
 	</div>
 
@@ -71,7 +95,8 @@ export default Vue.extend({
 			host,
 			name: 'Misskey',
 			description: '',
-			broadcasts: []
+			broadcasts: [],
+			photos: []
 		};
 	},
 	created() {
@@ -166,8 +191,8 @@ root(isDark)
 
 	> .body
 		display grid
-		grid-template-rows 0.5fr 0.5fr 64px
-		grid-template-columns 1fr 350px
+		grid-template-rows 1fr 1fr 64px
+		grid-template-columns 1fr 1fr 350px
 		gap 16px
 		width 100%
 		max-width 1200px
@@ -178,87 +203,95 @@ root(isDark)
 
 		.block
 			color isDark ? #fff : #444
-			background isDark ? #313543 : #fff
+			background isDark ? #282C37 : #fff
 			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 			//border-radius 8px
 			overflow auto
 
+			> header
+				padding 0 16px
+				line-height 48px
+				background isDark ? #313543 : #fff
+
+				& + div
+					max-height calc(100% - 48px)
+
+			> div
+				overflow auto
+
 		> .main
 			grid-row 1
-			grid-column 1
-			padding 32px
+			grid-column 1 / 3
 			border-top solid 5px $theme-color
 
-			> h1
-				margin 0
-
-				> img
-					margin -8px 0 0 -16px
-					max-width 280px
+			> div
+				padding 32px
 
-			> .info
-				margin 0 auto 16px auto
-				width $width
-				font-size 14px
+				> h1
+					margin 0
 
-				> .stats
-					margin-left 16px
-					padding-left 16px
-					border-left solid 1px isDark ? #fff : #444
+					> img
+						margin -8px 0 0 -16px
+						max-width 280px
 
-					> *
-						margin-right 16px
+				> .info
+					margin 0 auto 16px auto
+					width $width
+					font-size 14px
 
-			> .sign
-				font-size 120%
+					> .stats
+						margin-left 16px
+						padding-left 16px
+						border-left solid 1px isDark ? #fff : #444
 
-				> .divider
-					margin 0 16px
+						> *
+							margin-right 16px
 
-				> .signin
-				> .signup
-					cursor pointer
+				> .sign
+					font-size 120%
 
-					&:hover
-						color $theme-color
+					> .divider
+						margin 0 16px
 
-			> .hashtags
-				margin 16px auto
-				width $width
-				font-size 14px
-				background rgba(#000, 0.3)
-				border-radius 8px
+					> .signin
+					> .signup
+						cursor pointer
 
-				> *
-					display inline-block
-					margin 14px
+						&:hover
+							color $theme-color
 
-		> .broadcasts
+		> .announcements
 			grid-row 2
 			grid-column 1
-			padding 32px
 
 			> div
-				padding 0 0 16px 0
-				margin 0 0 16px 0
-				border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+				padding 32px
 
-				> h1
-					margin 0
-					font-size 1.5em
+				> div
+					padding 0 0 16px 0
+					margin 0 0 16px 0
+					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+
+					> h1
+						margin 0
+						font-size 1.25em
+
+		> .photos
+			grid-row 2
+			grid-column 2
 
 		> .nav
 			display flex
 			justify-content center
 			align-items center
 			grid-row 3
-			grid-column 1
+			grid-column 1 / 3
 			font-size 14px
 
 		> .side
 			display grid
 			grid-row 1 / 4
-			grid-column 2
+			grid-column 3
 			grid-template-rows 1fr 350px
 			grid-template-columns 1fr
 			gap 16px
@@ -266,8 +299,6 @@ root(isDark)
 			> .tl
 				grid-row 1
 				grid-column 1
-				text-align left
-				max-height 100%
 				overflow auto
 
 			> .trends
-- 
cgit v1.2.3-freya


From 395cfa61089efc4ab3ea1b6c6842521bad31efed Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Thu, 6 Sep 2018 02:16:08 +0900
Subject: Resolve #2625 (#2627)

---
 src/client/app/desktop/views/pages/deck/deck.column.vue | 3 ++-
 src/games/reversi/core.ts                               | 6 ++++--
 src/prelude/array.ts                                    | 7 +++++++
 src/server/activitypub/outbox.ts                        | 3 ++-
 src/server/api/endpoints/notes/global-timeline.ts       | 3 ++-
 src/server/api/endpoints/notes/hybrid-timeline.ts       | 3 ++-
 src/server/api/endpoints/notes/local-timeline.ts        | 3 ++-
 src/server/api/endpoints/notes/timeline.ts              | 3 ++-
 src/server/api/endpoints/users/notes.ts                 | 3 ++-
 9 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src/prelude/array.ts

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 239b1b0447..abb09775fb 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -28,6 +28,7 @@
 import Vue from 'vue';
 import Menu from '../../../../common/views/components/menu.vue';
 import contextmenu from '../../../api/contextmenu';
+import { countIf } from '../../../../../../prelude/array';
 
 export default Vue.extend({
 	props: {
@@ -117,7 +118,7 @@ export default Vue.extend({
 		toggleActive() {
 			if (!this.isStacked) return;
 			const vms = this.$store.state.settings.deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id));
-			if (this.active && vms.filter(vm => vm.$el.classList.contains('active')).length == 1) return;
+			if (this.active && countIf(vm => vm.$el.classList.contains('active'), vms) == 1) return;
 			this.active = !this.active;
 		},
 
diff --git a/src/games/reversi/core.ts b/src/games/reversi/core.ts
index b610d46884..34eb03becb 100644
--- a/src/games/reversi/core.ts
+++ b/src/games/reversi/core.ts
@@ -1,3 +1,5 @@
+import { count } from "../../prelude/array";
+
 // MISSKEY REVERSI ENGINE
 
 /**
@@ -101,14 +103,14 @@ export default class Reversi {
 	 * 黒石の数
 	 */
 	public get blackCount() {
-		return this.board.filter(x => x === BLACK).length;
+		return count(BLACK, this.board);
 	}
 
 	/**
 	 * 白石の数
 	 */
 	public get whiteCount() {
-		return this.board.filter(x => x === WHITE).length;
+		return count(BLACK, this.board);
 	}
 
 	/**
diff --git a/src/prelude/array.ts b/src/prelude/array.ts
new file mode 100644
index 0000000000..e944030a7f
--- /dev/null
+++ b/src/prelude/array.ts
@@ -0,0 +1,7 @@
+export function countIf<T>(f: (x: T) => boolean, xs: T[]): number {
+	return xs.filter(f).length;
+}
+
+export function count<T>(x: T, xs: T[]): number {
+	return countIf(y => x === y, xs);
+}
diff --git a/src/server/activitypub/outbox.ts b/src/server/activitypub/outbox.ts
index cc7e55b5df..a5e762eea8 100644
--- a/src/server/activitypub/outbox.ts
+++ b/src/server/activitypub/outbox.ts
@@ -10,6 +10,7 @@ import { setResponseType } from '../activitypub';
 
 import Note from '../../models/note';
 import renderNote from '../../remote/activitypub/renderer/note';
+import { countIf } from '../../prelude/array';
 
 export default async (ctx: Router.IRouterContext) => {
 	const userId = new mongo.ObjectID(ctx.params.user);
@@ -25,7 +26,7 @@ export default async (ctx: Router.IRouterContext) => {
 	const page: boolean = ctx.request.query.page === 'true';
 
 	// Validate parameters
-	if (sinceIdErr || untilIdErr || pageErr || [sinceId, untilId].filter(x => x != null).length > 1) {
+	if (sinceIdErr || untilIdErr || pageErr || countIf(x => x != null, [sinceId, untilId]) > 1) {
 		ctx.status = 400;
 		return;
 	}
diff --git a/src/server/api/endpoints/notes/global-timeline.ts b/src/server/api/endpoints/notes/global-timeline.ts
index e70fc5d76f..5d93cd78ec 100644
--- a/src/server/api/endpoints/notes/global-timeline.ts
+++ b/src/server/api/endpoints/notes/global-timeline.ts
@@ -4,6 +4,7 @@ import Mute from '../../../../models/mute';
 import { pack } from '../../../../models/note';
 import { ILocalUser } from '../../../../models/user';
 import getParams from '../../get-params';
+import { countIf } from '../../../../prelude/array';
 
 export const meta = {
 	desc: {
@@ -42,7 +43,7 @@ export default async (params: any, user: ILocalUser) => {
 	if (psErr) throw psErr;
 
 	// Check if only one of sinceId, untilId, sinceDate, untilDate specified
-	if ([ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate].filter(x => x != null).length > 1) {
+	if (countIf(x => x != null, [ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate]) > 1) {
 		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
 	}
 
diff --git a/src/server/api/endpoints/notes/hybrid-timeline.ts b/src/server/api/endpoints/notes/hybrid-timeline.ts
index 16cec86797..0eb7b61830 100644
--- a/src/server/api/endpoints/notes/hybrid-timeline.ts
+++ b/src/server/api/endpoints/notes/hybrid-timeline.ts
@@ -5,6 +5,7 @@ import { getFriends } from '../../common/get-friends';
 import { pack } from '../../../../models/note';
 import { ILocalUser } from '../../../../models/user';
 import getParams from '../../get-params';
+import { countIf } from '../../../../prelude/array';
 
 export const meta = {
 	desc: {
@@ -86,7 +87,7 @@ export default async (params: any, user: ILocalUser) => {
 	if (psErr) throw psErr;
 
 	// Check if only one of sinceId, untilId, sinceDate, untilDate specified
-	if ([ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate].filter(x => x != null).length > 1) {
+	if (countIf(x => x != null, [ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate]) > 1) {
 		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
 	}
 
diff --git a/src/server/api/endpoints/notes/local-timeline.ts b/src/server/api/endpoints/notes/local-timeline.ts
index 2458a70556..39c385853d 100644
--- a/src/server/api/endpoints/notes/local-timeline.ts
+++ b/src/server/api/endpoints/notes/local-timeline.ts
@@ -4,6 +4,7 @@ import Mute from '../../../../models/mute';
 import { pack } from '../../../../models/note';
 import { ILocalUser } from '../../../../models/user';
 import getParams from '../../get-params';
+import { countIf } from '../../../../prelude/array';
 
 export const meta = {
 	desc: {
@@ -42,7 +43,7 @@ export default async (params: any, user: ILocalUser) => {
 	if (psErr) throw psErr;
 
 	// Check if only one of sinceId, untilId, sinceDate, untilDate specified
-	if ([ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate].filter(x => x != null).length > 1) {
+	if (countIf(x => x != null, [ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate]) > 1) {
 		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
 	}
 
diff --git a/src/server/api/endpoints/notes/timeline.ts b/src/server/api/endpoints/notes/timeline.ts
index 089e7a182a..5f3844987c 100644
--- a/src/server/api/endpoints/notes/timeline.ts
+++ b/src/server/api/endpoints/notes/timeline.ts
@@ -5,6 +5,7 @@ import { getFriends } from '../../common/get-friends';
 import { pack } from '../../../../models/note';
 import { ILocalUser } from '../../../../models/user';
 import getParams from '../../get-params';
+import { countIf } from '../../../../prelude/array';
 
 export const meta = {
 	desc: {
@@ -86,7 +87,7 @@ export default async (params: any, user: ILocalUser) => {
 	if (psErr) throw psErr;
 
 	// Check if only one of sinceId, untilId, sinceDate, untilDate specified
-	if ([ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate].filter(x => x != null).length > 1) {
+	if (countIf(x => x != null, [ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate]) > 1) {
 		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
 	}
 
diff --git a/src/server/api/endpoints/users/notes.ts b/src/server/api/endpoints/users/notes.ts
index 42c31189d6..1ab7786a18 100644
--- a/src/server/api/endpoints/users/notes.ts
+++ b/src/server/api/endpoints/users/notes.ts
@@ -3,6 +3,7 @@ import getHostLower from '../../common/get-host-lower';
 import Note, { pack } from '../../../../models/note';
 import User, { ILocalUser } from '../../../../models/user';
 import getParams from '../../get-params';
+import { countIf } from '../../../../prelude/array';
 
 export const meta = {
 	desc: {
@@ -110,7 +111,7 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 	}
 
 	// Check if only one of sinceId, untilId, sinceDate, untilDate specified
-	if ([ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate].filter(x => x != null).length > 1) {
+	if (countIf(x => x != null, [ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate]) > 1) {
 		throw 'only one of sinceId, untilId, sinceDate, untilDate can be specified';
 	}
 
-- 
cgit v1.2.3-freya


From 1cc183ecdbc1d9e54d2d04634ea30b2dc071bc53 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Thu, 6 Sep 2018 02:44:01 +0900
Subject: Resolve #2631 (#2632)

---
 src/client/app/common/scripts/gcd.ts                         | 2 --
 src/client/app/mobile/views/components/drive.file-detail.vue | 2 +-
 src/prelude/math.ts                                          | 3 +++
 3 files changed, 4 insertions(+), 3 deletions(-)
 delete mode 100644 src/client/app/common/scripts/gcd.ts
 create mode 100644 src/prelude/math.ts

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/gcd.ts b/src/client/app/common/scripts/gcd.ts
deleted file mode 100644
index 9a19f9da66..0000000000
--- a/src/client/app/common/scripts/gcd.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-const gcd = (a, b) => !b ? a : gcd(b, a % b);
-export default gcd;
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 43867211e9..8108892597 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -67,7 +67,7 @@
 import Vue from 'vue';
 import * as EXIF from 'exif-js';
 import * as hljs from 'highlight.js';
-import gcd from '../../../common/scripts/gcd';
+import { gcd } from '../../../../../prelude/math';
 
 export default Vue.extend({
 	props: ['file'],
diff --git a/src/prelude/math.ts b/src/prelude/math.ts
new file mode 100644
index 0000000000..07b94bec30
--- /dev/null
+++ b/src/prelude/math.ts
@@ -0,0 +1,3 @@
+export function gcd(a: number, b: number): number {
+	return b === 0 ? a : gcd(b, a % b);
+}
-- 
cgit v1.2.3-freya


From ebd1c877ada8c9081c3a42f7168f5e25b91427b1 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Thu, 6 Sep 2018 03:21:11 +0900
Subject: Show host in local user detail (#2634)

---
 src/client/app/common/views/components/acct.vue         | 10 ++++++++--
 src/client/app/desktop/views/pages/user/user.header.vue |  2 +-
 src/client/app/mobile/views/pages/user.vue              |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/acct.vue b/src/client/app/common/views/components/acct.vue
index 1ad222afdd..2b5efe609c 100644
--- a/src/client/app/common/views/components/acct.vue
+++ b/src/client/app/common/views/components/acct.vue
@@ -1,14 +1,20 @@
 <template>
 <span class="mk-acct">
 	<span class="name">@{{ user.username }}</span>
-	<span class="host" v-if="user.host">@{{ user.host }}</span>
+	<span class="host" v-if="user.host || detail">@{{ user.host || host }}</span>
 </span>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { host } from '../../../config';
 export default Vue.extend({
-	props: ['user']
+	props: ['user', 'detail'],
+	data() {
+		return {
+			host
+		};
+	}
 });
 </script>
 
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 d8f4656ed0..4b434ec219 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -6,7 +6,7 @@
 		<div class="title">
 			<p class="name">{{ user | userName }}</p>
 			<div>
-				<span class="username"><mk-acct :user="user"/></span>
+				<span class="username"><mk-acct :user="user" :detail="true" /></span>
 				<span v-if="user.isBot" title="%i18n:@is-bot%">%fa:robot%</span>
 				<span class="location" v-if="user.host === null && user.profile.location">%fa:map-marker% {{ user.profile.location }}</span>
 				<span class="birthday" v-if="user.host === null && user.profile.birthday">%fa:birthday-cake% {{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</span>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index ddea43c9f2..c1082f31a9 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -16,7 +16,7 @@
 				</div>
 				<div class="title">
 					<h1>{{ user | userName }}</h1>
-					<span class="username"><mk-acct :user="user"/></span>
+					<span class="username"><mk-acct :user="user" :detail="true" /></span>
 					<span class="followed" v-if="user.isFollowed">%i18n:@follows-you%</span>
 				</div>
 				<div class="description">
-- 
cgit v1.2.3-freya


From 451acb77df54d9d27177f0e3a618939d1a034310 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 6 Sep 2018 04:28:39 +0900
Subject: Improve welcome page

---
 locales/ja-JP.yml                              |  2 ++
 src/client/app/desktop/views/pages/welcome.vue | 33 ++++++++++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1b73c825bb..eaf940ed06 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -990,6 +990,8 @@ desktop/views/pages/welcome.vue:
   signin-button: "やってる"
   signup-button: "やる"
   timeline: "タイムライン"
+  announcements: "お知らせ"
+  photos: "最近の画像"
   powered-by-misskey: "Powered by <b>Misskey</b>."
 
 desktop/views/pages/drive.vue:
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index ba22cb598f..f21070f36f 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -44,8 +44,7 @@
 		<div class="photos block">
 			<header>%fa:images% %i18n:@photos%</header>
 			<div>
-				<div v-for="photo in photos">
-				</div>
+				<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
 			</div>
 		</div>
 
@@ -99,6 +98,7 @@ export default Vue.extend({
 			photos: []
 		};
 	},
+
 	created() {
 		(this as any).os.getMeta().then(meta => {
 			this.name = meta.name;
@@ -110,14 +110,30 @@ export default Vue.extend({
 			this.stats = stats;
 		});
 
+		const image = [
+			'image/jpeg',
+			'image/png',
+			'image/gif'
+		];
+
+		(this as any).api('notes/local-timeline', {
+			fileType: image,
+			limit: 6
+		}).then(notes => {
+			const files = [].concat(...notes.map(n => n.files));
+			this.photos = files.filter(f => image.includes(f.type)).slice(0, 6);
+		});
 	},
+
 	methods: {
 		signup() {
 			this.$modal.show('signup');
 		},
+
 		signin() {
 			this.$modal.show('signin');
 		},
+
 		dark() {
 			this.$store.commit('device/set', {
 				key: 'darkmode',
@@ -280,6 +296,19 @@ root(isDark)
 			grid-row 2
 			grid-column 2
 
+			> div
+				display grid
+				grid-template-rows 1fr 1fr 1fr
+				grid-template-columns 1fr 1fr
+				gap 8px
+				height 100%
+				padding 16px
+
+				> div
+					//border-radius 4px
+					background-position center center
+					background-size cover
+
 		> .nav
 			display flex
 			justify-content center
-- 
cgit v1.2.3-freya


From b4f86feddb213bf61a55dff6174a53a1561e8ffd Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 6 Sep 2018 04:38:07 +0900
Subject: :art:

---
 src/client/app/desktop/views/pages/welcome.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index f21070f36f..f6473a4fc6 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -225,10 +225,14 @@ root(isDark)
 			overflow auto
 
 			> header
+				z-index 1
 				padding 0 16px
 				line-height 48px
 				background isDark ? #313543 : #fff
 
+				if !isDark
+					box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
+
 				& + div
 					max-height calc(100% - 48px)
 
-- 
cgit v1.2.3-freya


From 91e0fc8c620a8b355151db481ccd59a6733f979b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 6 Sep 2018 04:52:42 +0900
Subject: Improve welcome page

---
 src/client/app/desktop/views/pages/welcome.vue | 10 ++--
 src/client/app/mobile/views/pages/welcome.vue  | 65 ++++++++++++++++++++++++--
 2 files changed, 67 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index f6473a4fc6..4cfae0c71e 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -34,9 +34,9 @@
 		<div class="announcements block">
 			<header>%fa:broadcast-tower% %i18n:@announcements%</header>
 			<div>
-				<div v-for="broadcast in broadcasts">
-					<h1 v-html="broadcast.title"></h1>
-					<div v-html="broadcast.text"></div>
+				<div v-for="announcement in announcements">
+					<h1 v-html="announcement.title"></h1>
+					<div v-html="announcement.text"></div>
 				</div>
 			</div>
 		</div>
@@ -94,7 +94,7 @@ export default Vue.extend({
 			host,
 			name: 'Misskey',
 			description: '',
-			broadcasts: [],
+			announcements: [],
 			photos: []
 		};
 	},
@@ -103,7 +103,7 @@ export default Vue.extend({
 		(this as any).os.getMeta().then(meta => {
 			this.name = meta.name;
 			this.description = meta.description;
-			this.broadcasts = meta.broadcasts;
+			this.announcements = meta.broadcasts;
 		});
 
 		(this as any).api('stats').then(stats => {
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 49227790ff..1856731d8a 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="welcome">
+<div class="wgwfgvvimdjvhjfwxropcwksnzftjqes">
 	<div>
 		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
 		<p class="host">{{ host }}</p>
@@ -17,10 +17,19 @@
 		<div class="hashtags">
 			<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
 		</div>
+		<div class="photos">
+			<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
+		</div>
 		<div class="stats" v-if="stats">
 			<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
 			<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
 		</div>
+		<div class="announcements" v-if="announcements && announcements.length > 0">
+			<article v-for="announcement in announcements">
+				<span class="title" v-html="announcement.title"></span>
+				<div v-html="announcement.text"></div>
+			</article>
+		</div>
 		<footer>
 			<small>{{ copyright }}</small>
 		</footer>
@@ -41,13 +50,16 @@ export default Vue.extend({
 			host,
 			name: 'Misskey',
 			description: '',
-			tags: []
+			tags: [],
+			photos: [],
+			announcements: []
 		};
 	},
 	created() {
 		(this as any).os.getMeta().then(meta => {
 			this.name = meta.name;
 			this.description = meta.description;
+			this.announcements = meta.broadcasts;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -57,12 +69,26 @@ export default Vue.extend({
 		(this as any).api('hashtags/trend').then(stats => {
 			this.tags = stats.map(x => x.tag);
 		});
+
+		const image = [
+			'image/jpeg',
+			'image/png',
+			'image/gif'
+		];
+
+		(this as any).api('notes/local-timeline', {
+			fileType: image,
+			limit: 6
+		}).then(notes => {
+			const files = [].concat(...notes.map(n => n.files));
+			this.photos = files.filter(f => image.includes(f.type)).slice(0, 6);
+		});
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
-.welcome
+root(isDark)
 	text-align center
 	//background #fff
 
@@ -145,6 +171,19 @@ export default Vue.extend({
 			> *
 				margin 0 16px
 
+		> .photos
+			display grid
+			grid-template-rows 1fr 1fr 1fr
+			grid-template-columns 1fr 1fr
+			gap 8px
+			height 300px
+			margin-top 16px
+
+			> div
+				border-radius 4px
+				background-position center center
+				background-size cover
+
 		> .stats
 			margin 16px 0
 			padding 8px
@@ -156,6 +195,20 @@ export default Vue.extend({
 			> *
 				margin 0 8px
 
+		> .announcements
+			margin 16px 0
+
+			> article
+				background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
+				border-radius 6px
+				color isDark ? #fff : #3f4967
+				padding 16px
+				margin 8px 0
+				font-size 12px
+
+				> .title
+					font-weight bold
+
 		> footer
 			text-align center
 			color #444
@@ -165,4 +218,10 @@ export default Vue.extend({
 				margin 16px 0 0 0
 				opacity 0.7
 
+.wgwfgvvimdjvhjfwxropcwksnzftjqes[data-darkmode]
+	root(true)
+
+.wgwfgvvimdjvhjfwxropcwksnzftjqes:not([data-darkmode])
+	root(false)
+
 </style>
-- 
cgit v1.2.3-freya


From 4a00c13b33fa647e4833317f2b2251b740968924 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 6 Sep 2018 16:03:00 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 4cfae0c71e..0138fde273 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -213,7 +213,7 @@ root(isDark)
 		width 100%
 		max-width 1200px
 		height 100vh
-		min-height 1000px
+		min-height 950px
 		margin 0 auto
 		padding 64px
 
-- 
cgit v1.2.3-freya


From 3cace734c70c752c57ed9a0057aef4d7ef788528 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Thu, 6 Sep 2018 21:31:15 +0900
Subject: Add concat function (#2640)

---
 src/client/app/desktop/views/pages/welcome.vue | 5 +++--
 src/client/app/mobile/views/pages/welcome.vue  | 5 +++--
 src/games/reversi/core.ts                      | 4 ++--
 src/prelude/array.ts                           | 6 +++++-
 4 files changed, 13 insertions(+), 7 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 0138fde273..7409f6c9b6 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -85,6 +85,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { host, copyright } from '../../../config';
+import { concat } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	data() {
@@ -119,8 +120,8 @@ export default Vue.extend({
 		(this as any).api('notes/local-timeline', {
 			fileType: image,
 			limit: 6
-		}).then(notes => {
-			const files = [].concat(...notes.map(n => n.files));
+		}).then((notes: any[]) => {
+			const files = concat(notes.map((n: any): any[] => n.files));
 			this.photos = files.filter(f => image.includes(f.type)).slice(0, 6);
 		});
 	},
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 1856731d8a..7446cc700f 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -40,6 +40,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { apiUrl, copyright, host } from '../../../config';
+import { concat } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	data() {
@@ -79,8 +80,8 @@ export default Vue.extend({
 		(this as any).api('notes/local-timeline', {
 			fileType: image,
 			limit: 6
-		}).then(notes => {
-			const files = [].concat(...notes.map(n => n.files));
+		}).then((notes: any[]) => {
+			const files = concat(notes.map((n: any): any[] => n.files));
 			this.photos = files.filter(f => image.includes(f.type)).slice(0, 6);
 		});
 	}
diff --git a/src/games/reversi/core.ts b/src/games/reversi/core.ts
index e2a2289f18..3ca9d052af 100644
--- a/src/games/reversi/core.ts
+++ b/src/games/reversi/core.ts
@@ -1,4 +1,4 @@
-import { count, countIf } from "../../prelude/array";
+import { count, concat } from "../../prelude/array";
 
 // MISSKEY REVERSI ENGINE
 
@@ -286,7 +286,7 @@ export default class Reversi {
 			}
 		};
 
-		return [].concat(...diffVectors.map(effectsInLine));
+		return concat(diffVectors.map(effectsInLine));
 	}
 
 	/**
diff --git a/src/prelude/array.ts b/src/prelude/array.ts
index aee17640ed..9a3c266d6d 100644
--- a/src/prelude/array.ts
+++ b/src/prelude/array.ts
@@ -6,6 +6,10 @@ export function count<T>(x: T, xs: T[]): number {
 	return countIf(y => x === y, xs);
 }
 
+export function concat<T>(xss: T[][]): T[] {
+	return ([] as T[]).concat(...xss);
+}
+
 export function intersperse<T>(sep: T, xs: T[]): T[] {
-	return [].concat(...xs.map(x => [sep, x])).slice(1);
+	return concat(xs.map(x => [sep, x])).slice(1);
 }
-- 
cgit v1.2.3-freya


From 00d79487cd89f3cae675ecc0392c47ba547b69a5 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Fri, 7 Sep 2018 00:02:55 +0900
Subject: Add erase function (#2641)

---
 src/client/app/common/scripts/streaming/stream-manager.ts | 3 ++-
 src/client/app/common/views/components/poll-editor.vue    | 3 ++-
 src/client/app/desktop/views/components/post-form.vue     | 3 ++-
 src/client/app/mios.ts                                    | 3 ++-
 src/client/app/mobile/views/components/post-form.vue      | 3 ++-
 src/client/app/store.ts                                   | 7 ++++---
 src/client/app/sw.js                                      | 4 ++--
 src/prelude/array.ts                                      | 4 ++++
 src/server/api/endpoints/hashtags/trend.ts                | 4 ++--
 src/server/api/endpoints/notes/search_by_tag.ts           | 9 +++++----
 src/services/note/create.ts                               | 7 ++++---
 11 files changed, 31 insertions(+), 19 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/streaming/stream-manager.ts b/src/client/app/common/scripts/streaming/stream-manager.ts
index 568b8b0372..8dd06f67d3 100644
--- a/src/client/app/common/scripts/streaming/stream-manager.ts
+++ b/src/client/app/common/scripts/streaming/stream-manager.ts
@@ -1,6 +1,7 @@
 import { EventEmitter } from 'eventemitter3';
 import * as uuid from 'uuid';
 import Connection from './stream';
+import { erase } from '../../../../../prelude/array';
 
 /**
  * ストリーム接続を管理するクラス
@@ -89,7 +90,7 @@ export default abstract class StreamManager<T extends Connection> extends EventE
 	 * @param userId use で発行したユーザーID
 	 */
 	public dispose(userId) {
-		this.users = this.users.filter(id => id != userId);
+		this.users = erase(userId, this.users);
 
 		this._connection.user = `Managed (${ this.users.length })`;
 
diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 115c934c8b..30d9799fec 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -20,6 +20,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { erase } from '../../../../../prelude/array';
 export default Vue.extend({
 	data() {
 		return {
@@ -53,7 +54,7 @@ export default Vue.extend({
 
 		get() {
 			return {
-				choices: this.choices.filter(choice => choice != '')
+				choices: erase('', this.choices)
 			}
 		},
 
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index f6f52c8f1f..65dc9eb9c2 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -62,6 +62,7 @@ import getFace from '../../../common/scripts/get-face';
 import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
+import { erase } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	components: {
@@ -346,7 +347,7 @@ export default Vue.extend({
 		},
 
 		removeVisibleUser(user) {
-			this.visibleUsers = this.visibleUsers.filter(u => u != user);
+			this.visibleUsers = erase(user, this.visibleUsers);
 		},
 
 		post() {
diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index c2ec7f1750..0f72cd2f34 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -17,6 +17,7 @@ import Err from './common/views/components/connect-failed.vue';
 import { LocalTimelineStreamManager } from './common/scripts/streaming/local-timeline';
 import { HybridTimelineStreamManager } from './common/scripts/streaming/hybrid-timeline';
 import { GlobalTimelineStreamManager } from './common/scripts/streaming/global-timeline';
+import { erase } from '../../prelude/array';
 
 //#region api requests
 let spinner = null;
@@ -537,7 +538,7 @@ export default class MiOS extends EventEmitter {
 	}
 
 	public unregisterStreamConnection(connection: Connection) {
-		this.connections = this.connections.filter(c => c != connection);
+		this.connections = erase(connection, this.connections);
 	}
 }
 
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 644e27cce8..8107c1f3a7 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -59,6 +59,7 @@ import MkVisibilityChooser from '../../../common/views/components/visibility-cho
 import getFace from '../../../common/scripts/get-face';
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
+import { erase } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	components: {
@@ -262,7 +263,7 @@ export default Vue.extend({
 		},
 
 		removeVisibleUser(user) {
-			this.visibleUsers = this.visibleUsers.filter(u => u != user);
+			this.visibleUsers = erase(user, this.visibleUsers);
 		},
 
 		clear() {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 53f3eefc08..08dd9f9920 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -4,6 +4,7 @@ import * as nestedProperty from 'nested-property';
 
 import MiOS from './mios';
 import { hostname } from './config';
+import { erase } from '../../prelude/array';
 
 const defaultSettings = {
 	home: null,
@@ -195,7 +196,7 @@ export default (os: MiOS) => new Vuex.Store({
 
 				removeDeckColumn(state, id) {
 					state.deck.columns = state.deck.columns.filter(c => c.id != id);
-					state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id));
+					state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
 					state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
 				},
 
@@ -266,7 +267,7 @@ export default (os: MiOS) => new Vuex.Store({
 
 				stackLeftDeckColumn(state, id) {
 					const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
-					state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id));
+					state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
 					const left = state.deck.layout[i - 1];
 					if (left) state.deck.layout[i - 1].push(id);
 					state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
@@ -274,7 +275,7 @@ export default (os: MiOS) => new Vuex.Store({
 
 				popRightDeckColumn(state, id) {
 					const i = state.deck.layout.findIndex(ids => ids.indexOf(id) != -1);
-					state.deck.layout = state.deck.layout.map(ids => ids.filter(x => x != id));
+					state.deck.layout = state.deck.layout.map(ids => erase(id, ids));
 					state.deck.layout.splice(i + 1, 0, [id]);
 					state.deck.layout = state.deck.layout.filter(ids => ids.length > 0);
 				},
diff --git a/src/client/app/sw.js b/src/client/app/sw.js
index ac7ea20acf..d381bfb7a5 100644
--- a/src/client/app/sw.js
+++ b/src/client/app/sw.js
@@ -3,6 +3,7 @@
  */
 
 import composeNotification from './common/scripts/compose-notification';
+import { erase } from '../../prelude/array';
 
 // キャッシュするリソース
 const cachee = [
@@ -24,8 +25,7 @@ self.addEventListener('activate', ev => {
 	// Clean up old caches
 	ev.waitUntil(
 		caches.keys().then(keys => Promise.all(
-			keys
-				.filter(key => key != _VERSION_)
+			erase(_VERSION_, keys)
 				.map(key => caches.delete(key))
 		))
 	);
diff --git a/src/prelude/array.ts b/src/prelude/array.ts
index 9a3c266d6d..a2a6bbd4c6 100644
--- a/src/prelude/array.ts
+++ b/src/prelude/array.ts
@@ -13,3 +13,7 @@ export function concat<T>(xss: T[][]): T[] {
 export function intersperse<T>(sep: T, xs: T[]): T[] {
 	return concat(xs.map(x => [sep, x])).slice(1);
 }
+
+export function erase<T>(x: T, xs: T[]): T[] {
+	return xs.filter(y => x !== y);
+}
diff --git a/src/server/api/endpoints/hashtags/trend.ts b/src/server/api/endpoints/hashtags/trend.ts
index 01dfccc71c..e7c08ca9f0 100644
--- a/src/server/api/endpoints/hashtags/trend.ts
+++ b/src/server/api/endpoints/hashtags/trend.ts
@@ -1,4 +1,5 @@
 import Note from '../../../../models/note';
+import { erase } from '../../../../prelude/array';
 
 /*
 トレンドに載るためには「『直近a分間のユニーク投稿数が今からa分前～今からb分前の間のユニーク投稿数のn倍以上』のハッシュタグの上位5位以内に入る」ことが必要
@@ -85,8 +86,7 @@ export default () => new Promise(async (res, rej) => {
 	//#endregion
 
 	// タグを人気順に並べ替え
-	let hots = (await Promise.all(hotsPromises))
-		.filter(x => x != null)
+	let hots = erase(null, await Promise.all(hotsPromises))
 		.sort((a, b) => b.count - a.count)
 		.map(tag => tag.name)
 		.slice(0, max);
diff --git a/src/server/api/endpoints/notes/search_by_tag.ts b/src/server/api/endpoints/notes/search_by_tag.ts
index 82f11a9775..77082c2600 100644
--- a/src/server/api/endpoints/notes/search_by_tag.ts
+++ b/src/server/api/endpoints/notes/search_by_tag.ts
@@ -5,6 +5,7 @@ import Mute from '../../../../models/mute';
 import { getFriendIds } from '../../common/get-friends';
 import { pack } from '../../../../models/note';
 import getParams from '../../get-params';
+import { erase } from '../../../../prelude/array';
 
 export const meta = {
 	desc: {
@@ -103,23 +104,23 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 	if (psErr) throw psErr;
 
 	if (ps.includeUserUsernames != null) {
-		const ids = (await Promise.all(ps.includeUserUsernames.map(async (username) => {
+		const ids = erase(null, await Promise.all(ps.includeUserUsernames.map(async (username) => {
 			const _user = await User.findOne({
 				usernameLower: username.toLowerCase()
 			});
 			return _user ? _user._id : null;
-		}))).filter(id => id != null);
+		})));
 
 		ids.forEach(id => ps.includeUserIds.push(id));
 	}
 
 	if (ps.excludeUserUsernames != null) {
-		const ids = (await Promise.all(ps.excludeUserUsernames.map(async (username) => {
+		const ids = erase(null, await Promise.all(ps.excludeUserUsernames.map(async (username) => {
 			const _user = await User.findOne({
 				usernameLower: username.toLowerCase()
 			});
 			return _user ? _user._id : null;
-		}))).filter(id => id != null);
+		})));
 
 		ids.forEach(id => ps.excludeUserIds.push(id));
 	}
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 11e3755863..4759497c63 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -24,6 +24,7 @@ import isQuote from '../../misc/is-quote';
 import { TextElementMention } from '../../mfm/parse/elements/mention';
 import { TextElementHashtag } from '../../mfm/parse/elements/hashtag';
 import { updateNoteStats } from '../update-chart';
+import { erase } from '../../prelude/array';
 
 type NotificationType = 'reply' | 'renote' | 'quote' | 'mention';
 
@@ -103,7 +104,7 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 	if (data.viaMobile == null) data.viaMobile = false;
 
 	if (data.visibleUsers) {
-		data.visibleUsers = data.visibleUsers.filter(x => x != null);
+		data.visibleUsers = erase(null, data.visibleUsers);
 	}
 
 	if (data.reply && data.reply.deletedAt != null) {
@@ -547,13 +548,13 @@ async function extractMentionedUsers(tokens: ReturnType<typeof parse>): Promise<
 	)];
 
 	const mentionedUsers = [...new Set(
-		(await Promise.all(mentionTokens.map(async m => {
+		erase(null, await Promise.all(mentionTokens.map(async m => {
 			try {
 				return await resolveUser(m.username, m.host);
 			} catch (e) {
 				return null;
 			}
-		}))).filter(x => x != null)
+		})))
 	)];
 
 	return mentionedUsers;
-- 
cgit v1.2.3-freya


From 5cd6a0db165247d1c3349c7bda166d0c2bc0e994 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Fri, 7 Sep 2018 00:44:57 +0900
Subject: Fix typo: serive -> service (#2647)

---
 src/client/app/boot.js                            | 2 +-
 src/client/app/common/scripts/check-for-update.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index dd2cf93a89..f14cebe7d5 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -140,7 +140,7 @@
 		// Random
 		localStorage.setItem('salt', Math.random().toString());
 
-		// Clear cache (serive worker)
+		// Clear cache (service worker)
 		try {
 			navigator.serviceWorker.controller.postMessage('clear');
 
diff --git a/src/client/app/common/scripts/check-for-update.ts b/src/client/app/common/scripts/check-for-update.ts
index 4445eefc39..91b165b45d 100644
--- a/src/client/app/common/scripts/check-for-update.ts
+++ b/src/client/app/common/scripts/check-for-update.ts
@@ -9,7 +9,7 @@ export default async function(mios: MiOS, force = false, silent = false) {
 		localStorage.setItem('should-refresh', 'true');
 		localStorage.setItem('v', newer);
 
-		// Clear cache (serive worker)
+		// Clear cache (service worker)
 		try {
 			if (navigator.serviceWorker.controller) {
 				navigator.serviceWorker.controller.postMessage('clear');
-- 
cgit v1.2.3-freya


From 10232c5866bdb79dd2d6cbc91d2b8f3827af3ad4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 00:52:13 +0900
Subject: Fix bug & some refactor

---
 src/client/app/common/views/widgets/broadcast.vue | 16 ++++++++--------
 src/client/app/desktop/views/pages/welcome.vue    |  2 +-
 src/client/app/mobile/views/components/ui.nav.vue |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index e4e77263e5..c0f97e97c1 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="anltbovirfeutcigvwgmgxipejaeozxi"
-	:data-found="broadcasts.length != 0"
+	:data-found="announcements && announcements.length != 0"
 	:data-melt="props.design == 1"
 	:data-mobile="platform == 'mobile'"
 >
@@ -14,12 +14,12 @@
 		</svg>
 	</div>
 	<p class="fetching" v-if="fetching">%i18n:@fetching%<mk-ellipsis/></p>
-	<h1 v-if="!fetching">{{ broadcasts.length == 0 ? '%i18n:@no-broadcasts%' : broadcasts[i].title }}</h1>
+	<h1 v-if="!fetching">{{ announcements.length == 0 ? '%i18n:@no-broadcasts%' : announcements[i].title }}</h1>
 	<p v-if="!fetching">
-		<span v-if="broadcasts.length != 0" v-html="broadcasts[i].text"></span>
-		<template v-if="broadcasts.length == 0">%i18n:@have-a-nice-day%</template>
+		<span v-if="announcements.length != 0" v-html="announcements[i].text"></span>
+		<template v-if="announcements.length == 0">%i18n:@have-a-nice-day%</template>
 	</p>
-	<a v-if="broadcasts.length > 1" @click="next">%i18n:@next% &gt;&gt;</a>
+	<a v-if="announcements.length > 1" @click="next">%i18n:@next% &gt;&gt;</a>
 </div>
 </template>
 
@@ -36,18 +36,18 @@ export default define({
 		return {
 			i: 0,
 			fetching: true,
-			broadcasts: []
+			announcements: []
 		};
 	},
 	mounted() {
 		(this as any).os.getMeta().then(meta => {
-			this.broadcasts = meta.broadcasts;
+			this.announcements = meta.broadcasts;
 			this.fetching = false;
 		});
 	},
 	methods: {
 		next() {
-			if (this.i == this.broadcasts.length - 1) {
+			if (this.i == this.announcements.length - 1) {
 				this.i = 0;
 			} else {
 				this.i++;
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 0138fde273..d55029fb50 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -33,7 +33,7 @@
 
 		<div class="announcements block">
 			<header>%fa:broadcast-tower% %i18n:@announcements%</header>
-			<div>
+			<div v-if="announcements && announcements.length > 0">
 				<div v-for="announcement in announcements">
 					<h1 v-html="announcement.title"></h1>
 					<div v-html="announcement.text"></div>
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 83a8eb4392..c3ae05fef6 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -34,7 +34,7 @@
 					<li @click="dark"><p><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template><span>%i18n:@darkmode%</span></p></li>
 				</ul>
 			</div>
-			<div class="announcements" v-if="announcements.length > 0">
+			<div class="announcements" v-if="announcements && announcements.length > 0">
 				<article v-for="announcement in announcements">
 					<span v-html="announcement.title" class="title"></span>
 					<div v-html="announcement.text"></div>
-- 
cgit v1.2.3-freya


From 98954cd6d4c0ef25f704bd3df761361f48740ca5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 01:02:31 +0900
Subject: Trim image

---
 src/client/assets/pointer.png | Bin 237627 -> 280910 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

(limited to 'src/client')

diff --git a/src/client/assets/pointer.png b/src/client/assets/pointer.png
index 0d03f75d2b..c9aaada5a3 100644
Binary files a/src/client/assets/pointer.png and b/src/client/assets/pointer.png differ
-- 
cgit v1.2.3-freya


From bf7e19b288c8ffda07e9adc300234b4bfc8c8b15 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 01:18:47 +0900
Subject: :art:

---
 src/client/app/desktop/views/pages/welcome.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 1bcb0ecb20..5100a8efc7 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -28,6 +28,8 @@
 					<span class="divider">|</span>
 					<span class="signin" @click="signin">%i18n:@signin%</span>
 				</p>
+
+				<img src="/assets/pointer.png" alt="" class="char">
 			</div>
 		</div>
 
@@ -247,6 +249,7 @@ root(isDark)
 
 			> div
 				padding 32px
+				min-height 100%
 
 				> h1
 					margin 0
@@ -281,6 +284,17 @@ root(isDark)
 						&:hover
 							color $theme-color
 
+				> .char
+					display block
+					position absolute
+					right 0
+					bottom 0
+					width 180px
+					opacity 0.3
+
+				> *:not(.char)
+					z-index 1
+
 		> .announcements
 			grid-row 2
 			grid-column 1
-- 
cgit v1.2.3-freya


From d92e9759f39b53ba35dd907b311d529f047e07e9 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Fri, 7 Sep 2018 01:20:23 +0900
Subject: Refactor analog clock widget (#2648)

---
 src/client/app/common/views/widgets/analog-clock.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue
index 0de30228b3..04223f0d21 100644
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -1,8 +1,8 @@
 <template>
 <div class="mkw-analog-clock">
-	<mk-widget-container :naked="!(props.design % 2)" :show-header="false">
+	<mk-widget-container :naked="props.style % 2 === 0" :show-header="false">
 		<div class="mkw-analog-clock--body">
-			<mk-analog-clock :dark="$store.state.device.darkmode" :smooth="!(props.design && ~props.design)"/>
+			<mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/>
 		</div>
 	</mk-widget-container>
 </div>
@@ -13,13 +13,12 @@ import define from '../../../common/define-widget';
 export default define({
 	name: 'analog-clock',
 	props: () => ({
-		design: -1
+		style: 0
 	})
 }).extend({
 	methods: {
 		func() {
-			if (++this.props.design > 2)
-				this.props.design = -1;
+			this.props.style = (this.props.style + 1) % 4;
 			this.save();
 		}
 	}
-- 
cgit v1.2.3-freya


From 7959196dc7d8c6f40c16a020492aae11e6136e44 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Fri, 7 Sep 2018 04:21:04 +0900
Subject: Add sum function (#2653)

---
 src/client/app/common/views/components/poll.vue         | 3 ++-
 src/client/app/desktop/views/components/note-detail.vue | 5 ++---
 src/client/app/desktop/views/components/notes.note.vue  | 5 ++---
 src/client/app/mobile/views/components/note-detail.vue  | 5 ++---
 src/client/app/mobile/views/components/note.vue         | 5 ++---
 src/prelude/array.ts                                    | 4 ++++
 6 files changed, 14 insertions(+), 13 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 660247edbc..4fe51d219b 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -21,6 +21,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { sum } from '../../../../../prelude/array';
 export default Vue.extend({
 	props: ['note'],
 	data() {
@@ -33,7 +34,7 @@ export default Vue.extend({
 			return this.note.poll;
 		},
 		total(): number {
-			return this.poll.choices.reduce((a, b) => a + b.votes, 0);
+			return sum(this.poll.choices.map(x => x.votes));
 		},
 		isVoted(): boolean {
 			return this.poll.choices.some(c => c.isVoted);
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index a61a004a85..1e068bd1cd 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -86,6 +86,7 @@ import MkRenoteFormWindow from './renote-form-window.vue';
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './notes.note.sub.vue';
+import { sum } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	components: {
@@ -122,9 +123,7 @@ export default Vue.extend({
 		},
 		reactionsCount(): number {
 			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
+				? sum(Object.values(this.p.reactionCounts))
 				: 0;
 		},
 		title(): string {
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 1d6b2048ba..75d6ebd628 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -78,6 +78,7 @@ import MkRenoteFormWindow from './renote-form-window.vue';
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './notes.note.sub.vue';
+import { sum } from '../../../../../prelude/array';
 
 function focus(el, fn) {
 	const target = fn(el);
@@ -120,9 +121,7 @@ export default Vue.extend({
 
 		reactionsCount(): number {
 			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
+				? sum(Object.values(this.p.reactionCounts))
 				: 0;
 		},
 
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 10ff3fcc09..d48d9a7790 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -85,6 +85,7 @@ import parse from '../../../../../mfm/parse';
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './note.sub.vue';
+import { sum } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	components: {
@@ -123,9 +124,7 @@ export default Vue.extend({
 
 		reactionsCount(): number {
 			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
+				? sum(Object.values(this.p.reactionCounts))
 				: 0;
 		},
 
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 9bd4a83ecb..907e728984 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -70,6 +70,7 @@ import parse from '../../../../../mfm/parse';
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './note.sub.vue';
+import { sum } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	components: {
@@ -100,9 +101,7 @@ export default Vue.extend({
 
 		reactionsCount(): number {
 			return this.p.reactionCounts
-				? Object.keys(this.p.reactionCounts)
-					.map(key => this.p.reactionCounts[key])
-					.reduce((a, b) => a + b)
+				? sum(Object.values(this.p.reactionCounts))
 				: 0;
 		},
 
diff --git a/src/prelude/array.ts b/src/prelude/array.ts
index abef6ca039..54f7081712 100644
--- a/src/prelude/array.ts
+++ b/src/prelude/array.ts
@@ -21,3 +21,7 @@ export function erase<T>(x: T, xs: T[]): T[] {
 export function unique<T>(xs: T[]): T[] {
 	return [...new Set(xs)];
 }
+
+export function sum(xs: number[]): number {
+	return xs.reduce((a, b) => a + b, 0);
+}
-- 
cgit v1.2.3-freya


From fa04ac789eba82cef075867ebd0e8b9365c15046 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 05:37:15 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 5100a8efc7..f601bc9016 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -287,8 +287,8 @@ root(isDark)
 				> .char
 					display block
 					position absolute
-					right 0
-					bottom 0
+					right 16px
+					bottom 16px
 					width 180px
 					opacity 0.3
 
-- 
cgit v1.2.3-freya


From 2b50364ab4f94c1259fb5b5b2df74f5b2e654a90 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 05:45:13 +0900
Subject: 
 ユーザー名にコントラストを付けるデザインのオンオフを切り替えられるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                    | 2 ++
 src/client/app/common/views/components/acct.vue      | 4 ++--
 src/client/app/desktop/views/components/settings.vue | 7 +++++++
 src/client/app/mobile/views/pages/settings.vue       | 8 ++++++++
 src/client/app/store.ts                              | 1 +
 5 files changed, 20 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index eaf940ed06..668678e0c8 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -736,6 +736,7 @@ desktop/views/components/settings.vue:
   delete-wallpaper: "壁紙を削除"
   dark-mode: "ダークモード"
   circle-icons: "円形のアイコンを使用"
+  contrasted-acct: "ユーザー名にコントラストを付ける"
   gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
   post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
   suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
@@ -1349,6 +1350,7 @@ mobile/views/pages/settings.vue:
   dark-mode: "ダークモード"
   i-am-under-limited-internet: "私は通信を制限されている"
   circle-icons: "円形のアイコンを使用"
+  contrasted-acct: "ユーザー名にコントラストを付ける"
   timeline: "タイムライン"
   show-reply-target: "リプライ先を表示する"
   show-my-renotes: "自分の行ったRenoteを表示する"
diff --git a/src/client/app/common/views/components/acct.vue b/src/client/app/common/views/components/acct.vue
index 2b5efe609c..bd7833f1a9 100644
--- a/src/client/app/common/views/components/acct.vue
+++ b/src/client/app/common/views/components/acct.vue
@@ -1,7 +1,7 @@
 <template>
 <span class="mk-acct">
 	<span class="name">@{{ user.username }}</span>
-	<span class="host" v-if="user.host || detail">@{{ user.host || host }}</span>
+	<span class="host" :class="{ fade: $store.state.settings.contrastedAcct }" v-if="user.host || detail">@{{ user.host || host }}</span>
 </span>
 </template>
 
@@ -20,6 +20,6 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-acct
-	> .host
+	> .host.fade
 		opacity 0.5
 </style>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 7d6f1d55fb..7cab7ec983 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -44,6 +44,7 @@
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 				<mk-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons" text="%i18n:@circle-icons%"/>
+				<mk-switch v-model="$store.state.settings.contrastedAcct" @change="onContrastedAcct" text="%i18n:@contrasted-acct%"/>
 				<mk-switch v-model="$store.state.settings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="%i18n:@gradient-window-header%"/>
 				<mk-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi" text="%i18n:common.i-like-sushi%"/>
 			</div>
@@ -376,6 +377,12 @@ export default Vue.extend({
 				value: v
 			});
 		},
+		onChangeContrastedAcct(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'contrastedAcct',
+				value: v
+			});
+		},
 		onChangeILikeSushi(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'iLikeSushi',
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 4a148dc9d2..29fe067a08 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -13,6 +13,7 @@
 				<section>
 					<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
 					<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
+					<ui-switch v-model="$store.state.settings.contrastedAcct" @change="onChangeContrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 					<ui-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 					<ui-switch v-model="$store.state.settings.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
 					<ui-switch v-model="$store.state.settings.games.reversi.showBoardLabels" @change="onChangeReversiBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
@@ -218,6 +219,13 @@ export default Vue.extend({
 			});
 		},
 
+		onChangeContrastedAcct(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'contrastedAcct',
+				value: v
+			});
+		},
+
 		onChangeILikeSushi(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'iLikeSushi',
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 08dd9f9920..16ce78ea9f 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -16,6 +16,7 @@ const defaultSettings = {
 	suggestRecentHashtags: true,
 	showClockOnHeader: true,
 	circleIcons: true,
+	contrastedAcct: true,
 	gradientWindowHeader: false,
 	showReplyTarget: true,
 	showMyRenotes: true,
-- 
cgit v1.2.3-freya


From 106d4cc0d65edb01d3b71b3d91258550cd489825 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 06:04:00 +0900
Subject: :art:

---
 src/client/app/common/views/widgets/broadcast.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index c0f97e97c1..f2fa720f52 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -126,7 +126,7 @@ root(isDark)
 		margin 0
 		font-size 0.95em
 		font-weight normal
-		color #4078c0
+		color isDark ? #539eff : #4078c0
 
 	> p
 		display block
-- 
cgit v1.2.3-freya


From 7343e6e2e8e94b2a58943c62c047b5a7c4116e3a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 19:20:50 +0900
Subject: 統計で無視するハッシュタグを設定できるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../desktop/views/pages/admin/admin.hashtags.vue   | 41 ++++++++++++++++++++++
 src/client/app/desktop/views/pages/admin/admin.vue |  7 ++++
 src/models/meta.ts                                 |  7 ++--
 src/server/api/endpoints/admin/update-meta.ts      | 12 ++++++-
 src/server/api/endpoints/hashtags/trend.ts         |  7 ++++
 src/server/api/endpoints/meta.ts                   |  6 ++--
 6 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 src/client/app/desktop/views/pages/admin/admin.hashtags.vue

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
new file mode 100644
index 0000000000..c6bf20361f
--- /dev/null
+++ b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
@@ -0,0 +1,41 @@
+<template>
+<div class="jdnqwkzlnxcfftthoybjxrebyolvoucw mk-admin-card">
+	<header>%i18n:@hided-tags%</header>
+	<textarea v-model="hidedTags"></textarea>
+	<button class="ui" @click="save">%i18n:@save%</button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+	data() {
+		return {
+			hidedTags: '',
+		};
+	},
+	created() {
+		(this as any).os.getMeta().then(meta => {
+			this.hidedTags = meta.hidedTags.join('\n');
+		});
+	},
+	methods: {
+		save() {
+			(this as any).api('admin/update-meta', {
+				hidedTags: this.hidedTags.split('\n')
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.jdnqwkzlnxcfftthoybjxrebyolvoucw
+	textarea
+		width 100%
+		min-height 300px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index a71059c378..510252b447 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -5,6 +5,8 @@
 			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:chalkboard .fw%%i18n:@dashboard%</li>
 			<li @click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
 			<li @click="nav('announcements')" :class="{ active: page == 'announcements' }">%fa:broadcast-tower .fw%%i18n:@announcements%</li>
+			<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }">%fa:hashtag .fw%%i18n:@hashtags%</li>
+
 			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:@drive%</li> -->
 			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
 		</ul>
@@ -17,6 +19,9 @@
 		<div v-show="page == 'announcements'">
 			<x-announcements/>
 		</div>
+		<div v-show="page == 'hashtags'">
+			<x-hashtags/>
+		</div>
 		<div v-if="page == 'users'">
 			<x-suspend-user/>
 			<x-unsuspend-user/>
@@ -33,6 +38,7 @@
 import Vue from "vue";
 import XDashboard from "./admin.dashboard.vue";
 import XAnnouncements from "./admin.announcements.vue";
+import XHashtags from "./admin.hashtags.vue";
 import XSuspendUser from "./admin.suspend-user.vue";
 import XUnsuspendUser from "./admin.unsuspend-user.vue";
 import XVerifyUser from "./admin.verify-user.vue";
@@ -43,6 +49,7 @@ export default Vue.extend({
 	components: {
 		XDashboard,
 		XAnnouncements,
+		XHashtags,
 		XSuspendUser,
 		XUnsuspendUser,
 		XVerifyUser,
diff --git a/src/models/meta.ts b/src/models/meta.ts
index aef0163dfe..4f1977f3b5 100644
--- a/src/models/meta.ts
+++ b/src/models/meta.ts
@@ -4,12 +4,13 @@ const Meta = db.get<IMeta>('meta');
 export default Meta;
 
 export type IMeta = {
-	broadcasts: any[];
-	stats: {
+	broadcasts?: any[];
+	stats?: {
 		notesCount: number;
 		originalNotesCount: number;
 		usersCount: number;
 		originalUsersCount: number;
 	};
-	disableRegistration: boolean;
+	disableRegistration?: boolean;
+	hidedTags?: string[];
 };
diff --git a/src/server/api/endpoints/admin/update-meta.ts b/src/server/api/endpoints/admin/update-meta.ts
index 10ca15d329..f903628774 100644
--- a/src/server/api/endpoints/admin/update-meta.ts
+++ b/src/server/api/endpoints/admin/update-meta.ts
@@ -21,7 +21,13 @@ export const meta = {
 			desc: {
 				'ja-JP': '招待制か否か'
 			}
-		})
+		}),
+
+		hidedTags: $.arr($.str).optional.nullable.note({
+			desc: {
+				'ja-JP': '統計などで無視するハッシュタグ'
+			}
+		}),
 	}
 };
 
@@ -39,6 +45,10 @@ export default (params: any) => new Promise(async (res, rej) => {
 		set.disableRegistration = ps.disableRegistration;
 	}
 
+	if (Array.isArray(ps.hidedTags)) {
+		set.hidedTags = ps.hidedTags;
+	}
+
 	await Meta.update({}, {
 		$set: set
 	}, { upsert: true });
diff --git a/src/server/api/endpoints/hashtags/trend.ts b/src/server/api/endpoints/hashtags/trend.ts
index e7c08ca9f0..bfa475619c 100644
--- a/src/server/api/endpoints/hashtags/trend.ts
+++ b/src/server/api/endpoints/hashtags/trend.ts
@@ -1,5 +1,6 @@
 import Note from '../../../../models/note';
 import { erase } from '../../../../prelude/array';
+import Meta from '../../../../models/meta';
 
 /*
 トレンドに載るためには「『直近a分間のユニーク投稿数が今からa分前～今からb分前の間のユニーク投稿数のn倍以上』のハッシュタグの上位5位以内に入る」ことが必要
@@ -17,6 +18,9 @@ const max = 5;
  * Get trends of hashtags
  */
 export default () => new Promise(async (res, rej) => {
+	const meta = await Meta.findOne({});
+	const hidedTags = (meta.hidedTags || []).map(t => t.toLowerCase());
+
 	//#region 1. 直近Aの内に投稿されたハッシュタグ(とユーザーのペア)を集計
 	const data = await Note.aggregate([{
 		$match: {
@@ -53,6 +57,9 @@ export default () => new Promise(async (res, rej) => {
 
 	// カウント
 	data.map(x => x._id).forEach(x => {
+		// ブラックリストに登録されているタグなら弾く
+		if (hidedTags.includes(x.tag)) return;
+
 		const i = tags.findIndex(tag => tag.name == x.tag);
 		if (i != -1) {
 			tags[i].count++;
diff --git a/src/server/api/endpoints/meta.ts b/src/server/api/endpoints/meta.ts
index b0876eaafd..4472d8d779 100644
--- a/src/server/api/endpoints/meta.ts
+++ b/src/server/api/endpoints/meta.ts
@@ -4,6 +4,7 @@
 import * as os from 'os';
 import config from '../../../config';
 import Meta from '../../../models/meta';
+import { ILocalUser } from '../../../models/user';
 
 const pkg = require('../../../../package.json');
 const client = require('../../../../built/client/meta.json');
@@ -11,7 +12,7 @@ const client = require('../../../../built/client/meta.json');
 /**
  * Show core info
  */
-export default () => new Promise(async (res, rej) => {
+export default (params: any, me: ILocalUser) => new Promise(async (res, rej) => {
 	const meta: any = (await Meta.findOne()) || {};
 
 	res({
@@ -35,6 +36,7 @@ export default () => new Promise(async (res, rej) => {
 		disableRegistration: meta.disableRegistration,
 		driveCapacityPerLocalUserMb: config.localDriveCapacityMb,
 		recaptchaSitekey: config.recaptcha ? config.recaptcha.site_key : null,
-		swPublickey: config.sw ? config.sw.public_key : null
+		swPublickey: config.sw ? config.sw.public_key : null,
+		hidedTags: (me && me.isAdmin) ? meta.hidedTags : undefined
 	});
 });
-- 
cgit v1.2.3-freya


From 1917b0339e5fa2ca5fa700fa802200083b0c99d7 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Fri, 7 Sep 2018 19:24:18 +0900
Subject: #2652 (#2658)

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

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index e182e7f8cb..f9b8415b5b 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -14,7 +14,7 @@
 			<header>
 				<h1>{{ title }}</h1>
 			</header>
-			<p>{{ description }}</p>
+			<p>{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
 			<footer>
 				<img class="icon" v-if="icon" :src="icon"/>
 				<p>{{ sitename }}</p>
-- 
cgit v1.2.3-freya


From 8c6856d894b6ae95f1f935eb31857b43e9acff2d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 20:21:25 +0900
Subject: Improve welcome page

---
 locales/ja-JP.yml                                  |  1 +
 package.json                                       |  1 +
 src/client/app/common/views/components/index.ts    |  2 +
 .../app/common/views/components/tag-cloud.vue      | 90 ++++++++++++++++++++++
 src/client/app/desktop/views/pages/welcome.vue     | 47 +++++++++--
 5 files changed, 136 insertions(+), 5 deletions(-)
 create mode 100644 src/client/app/common/views/components/tag-cloud.vue

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 0c4825e8c4..3cf8d90e9d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -994,6 +994,7 @@ desktop/views/pages/welcome.vue:
   announcements: "お知らせ"
   photos: "最近の画像"
   powered-by-misskey: "Powered by <b>Misskey</b>."
+  info: "情報"
 
 desktop/views/pages/drive.vue:
   title: "Misskey Drive"
diff --git a/package.json b/package.json
index ab984eef5c..9b49dfaac4 100644
--- a/package.json
+++ b/package.json
@@ -217,6 +217,7 @@
 		"vue-style-loader": "4.1.2",
 		"vue-template-compiler": "2.5.17",
 		"vuedraggable": "2.16.0",
+		"vuewordcloud": "18.7.11",
 		"vuex": "3.0.1",
 		"vuex-persistedstate": "2.5.4",
 		"web-push": "3.3.2",
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 4700b6269e..75c6086d7c 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import tagCloud from './tag-cloud.vue';
 import trends from './trends.vue';
 import analogClock from './analog-clock.vue';
 import menu from './menu.vue';
@@ -41,6 +42,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-tag-cloud', tagCloud);
 Vue.component('mk-trends', trends);
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
diff --git a/src/client/app/common/views/components/tag-cloud.vue b/src/client/app/common/views/components/tag-cloud.vue
new file mode 100644
index 0000000000..6675ba608e
--- /dev/null
+++ b/src/client/app/common/views/components/tag-cloud.vue
@@ -0,0 +1,90 @@
+<template>
+<div class="jtivnzhfwquxpsfidertopbmwmchmnmo">
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="empty" v-else-if="tags.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
+	<div v-else>
+		<vue-word-cloud
+				:words="tags.map(x => [x.name, x.count])"
+				:color="color"
+				font-family="Roboto">
+			<template slot-scope="{word, text, weight}">
+				<div style="cursor: pointer;" :title="weight">
+					{{ text }}
+				</div>
+			</template>
+		</vue-word-cloud>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as VueWordCloud from 'vuewordcloud';
+
+export default Vue.extend({
+	components: {
+		[VueWordCloud.name]: VueWordCloud
+	},
+	data() {
+		return {
+			tags: [],
+			fetching: true,
+			clock: null
+		};
+	},
+	mounted() {
+		this.fetch();
+		this.clock = setInterval(this.fetch, 1000 * 60);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		fetch() {
+			(this as any).api('aggregation/hashtags').then(tags => {
+				this.tags = tags;
+				this.fetching = false;
+			});
+		},
+		color([, weight]) {
+			const peak = Math.max.apply(null, this.tags.map(x => x.count));
+			const w = weight / peak;
+
+			if (w == 1) {
+				return this.$store.state.device.darkmode ? '#ff4e69' : '#ff4e69';
+			} else if (w > 0.5) {
+				return this.$store.state.device.darkmode ? '#3bc4c7' : '#3bc4c7';
+			} else {
+				return this.$store.state.device.darkmode ? '#fff' : '#555';
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	height 100%
+	width 100%
+
+	> .fetching
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+	> div
+		height 100%
+		width 100%
+
+.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
+	root(true)
+
+.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index f601bc9016..549d9175f3 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -50,6 +50,12 @@
 			</div>
 		</div>
 
+		<div class="tag-cloud block">
+			<div>
+				<mk-tag-cloud/>
+			</div>
+		</div>
+
 		<div class="nav block">
 			<div>
 				<mk-nav class="nav"/>
@@ -69,6 +75,16 @@
 					<mk-welcome-timeline class="tl" :max="20"/>
 				</div>
 			</div>
+
+			<div class="info block">
+				<header>%fa:info-circle% %i18n:@info%</header>
+				<div>
+					<div v-if="meta" class="body">
+						<p>Version: <b>{{ meta.version }}</b></p>
+						<p>Maintainer: <b><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></b></p>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 
@@ -92,6 +108,7 @@ import { concat } from '../../../../../prelude/array';
 export default Vue.extend({
 	data() {
 		return {
+			meta: null,
 			stats: null,
 			copyright,
 			host,
@@ -104,6 +121,7 @@ export default Vue.extend({
 
 	created() {
 		(this as any).os.getMeta().then(meta => {
+			this.meta = meta;
 			this.name = meta.name;
 			this.description = meta.description;
 			this.announcements = meta.broadcasts;
@@ -210,13 +228,12 @@ root(isDark)
 
 	> .body
 		display grid
-		grid-template-rows 1fr 1fr 64px
+		grid-template-rows 1fr 1fr 256px 64px
 		grid-template-columns 1fr 1fr 350px
 		gap 16px
 		width 100%
 		max-width 1200px
-		height 100vh
-		min-height 950px
+		height 1200px
 		margin 0 auto
 		padding 64px
 
@@ -328,17 +345,25 @@ root(isDark)
 					background-position center center
 					background-size cover
 
+		> .tag-cloud
+			grid-row 3
+			grid-column 1 / 3
+
+			> div
+				height 256px
+				padding 32px
+
 		> .nav
 			display flex
 			justify-content center
 			align-items center
-			grid-row 3
+			grid-row 4
 			grid-column 1 / 3
 			font-size 14px
 
 		> .side
 			display grid
-			grid-row 1 / 4
+			grid-row 1 / 5
 			grid-column 3
 			grid-template-rows 1fr 350px
 			grid-template-columns 1fr
@@ -354,6 +379,18 @@ root(isDark)
 				grid-column 1
 				padding 8px
 
+			> .info
+				grid-row 3
+				grid-column 1
+
+				> div
+					padding 16px
+
+					> .body
+						> p
+							display block
+							margin 0
+
 .mk-welcome[data-darkmode]
 	root(true)
 
-- 
cgit v1.2.3-freya


From 9e3abb9989e52682a5471a8773ee1007c51b0ef9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 20:41:12 +0900
Subject: Improve welcome page

---
 src/client/app/mobile/views/pages/welcome.vue | 32 +++++++++++++++------------
 1 file changed, 18 insertions(+), 14 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 7446cc700f..f5014d585f 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -15,7 +15,7 @@
 			<mk-welcome-timeline/>
 		</div>
 		<div class="hashtags">
-			<router-link v-for="tag in tags" :key="tag" :to="`/tags/${ tag }`" :title="tag">#{{ tag }}</router-link>
+			<mk-tag-cloud/>
 		</div>
 		<div class="photos">
 			<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
@@ -30,6 +30,10 @@
 				<div v-html="announcement.text"></div>
 			</article>
 		</div>
+		<div class="info" v-if="meta">
+			<p>Version: <b>{{ meta.version }}</b></p>
+			<p>Maintainer: <b><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></b></p>
+		</div>
 		<footer>
 			<small>{{ copyright }}</small>
 		</footer>
@@ -39,25 +43,25 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { apiUrl, copyright, host } from '../../../config';
+import { copyright, host } from '../../../config';
 import { concat } from '../../../../../prelude/array';
 
 export default Vue.extend({
 	data() {
 		return {
-			apiUrl,
+			meta: null,
 			copyright,
 			stats: null,
 			host,
 			name: 'Misskey',
 			description: '',
-			tags: [],
 			photos: [],
 			announcements: []
 		};
 	},
 	created() {
 		(this as any).os.getMeta().then(meta => {
+			this.meta = meta;
 			this.name = meta.name;
 			this.description = meta.description;
 			this.announcements = meta.broadcasts;
@@ -67,10 +71,6 @@ export default Vue.extend({
 			this.stats = stats;
 		});
 
-		(this as any).api('hashtags/trend').then(stats => {
-			this.tags = stats.map(x => x.tag);
-		});
-
 		const image = [
 			'image/jpeg',
 			'image/png',
@@ -165,12 +165,8 @@ root(isDark)
 				-webkit-overflow-scrolling touch
 
 		> .hashtags
-			padding 16px 0
-			border solid 2px #ddd
-			border-radius 8px
-
-			> *
-				margin 0 16px
+			padding 0 8px
+			height 200px
 
 		> .photos
 			display grid
@@ -210,6 +206,14 @@ root(isDark)
 				> .title
 					font-weight bold
 
+		> .info
+			padding 16px 0
+			border solid 2px #ddd
+			border-radius 8px
+
+			> *
+				margin 0 16px
+
 		> footer
 			text-align center
 			color #444
-- 
cgit v1.2.3-freya


From 19e1f996a6b1aef8148d4489199d65573dbacdfe Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 21:10:31 +0900
Subject: Fix bug

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 7cab7ec983..d800ccfe11 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -44,7 +44,7 @@
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 				<mk-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons" text="%i18n:@circle-icons%"/>
-				<mk-switch v-model="$store.state.settings.contrastedAcct" @change="onContrastedAcct" text="%i18n:@contrasted-acct%"/>
+				<mk-switch v-model="$store.state.settings.contrastedAcct" @change="onChangeContrastedAcct" text="%i18n:@contrasted-acct%"/>
 				<mk-switch v-model="$store.state.settings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="%i18n:@gradient-window-header%"/>
 				<mk-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi" text="%i18n:common.i-like-sushi%"/>
 			</div>
-- 
cgit v1.2.3-freya


From efaaa76185ec7ee39e855d90bdcdb8a4d13f0207 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 7 Sep 2018 21:13:15 +0900
Subject: Improve note visibility settings

Closes #2312
Closes #2313
---
 locales/ja-JP.yml                                  | 16 +++++++++++++
 .../common/views/components/visibility-chooser.vue |  6 +++--
 .../app/desktop/views/components/post-form.vue     |  2 +-
 .../app/desktop/views/components/settings.vue      | 27 ++++++++++++++++++++++
 .../app/mobile/views/components/post-form.vue      |  2 +-
 src/client/app/mobile/views/pages/settings.vue     | 27 ++++++++++++++++++++++
 src/client/app/store.ts                            |  2 ++
 7 files changed, 78 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3cf8d90e9d..07d8e7f48c 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -73,6 +73,16 @@ common:
     rip: "RIP"
     pudding: "Pudding"
 
+  note-visibility:
+    public: "公開"
+    home: "ホーム"
+    home-desc: "ホームタイムラインにのみ公開"
+    followers: "フォロワー"
+    followers-desc: "自分のフォロワーにのみ公開"
+    specified: "ダイレクト"
+    specified-desc: "指定したユーザーにのみ公開"
+    private: "非公開"
+
   note-placeholders:
     a: "今どうしてる？"
     b: "何かありましたか？"
@@ -724,6 +734,9 @@ desktop/views/components/settings.vue:
   behaviour: "動作"
   fetch-on-scroll: "スクロールで自動読み込み"
   fetch-on-scroll-desc: "ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。"
+  note-visibility: "投稿の公開範囲"
+  default-note-visibility: "デフォルトの公開範囲"
+  remember-note-visibility: "投稿の公開範囲を記憶する"
   auto-popout: "ウィンドウの自動ポップアウト"
   auto-popout-desc: "ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトします。この設定はブラウザに記憶されます。"
   advanced: "詳細設定"
@@ -1365,6 +1378,9 @@ mobile/views/pages/settings.vue:
   notification-position-top: "上"
   behavior: "動作"
   fetch-on-scroll: "スクロールで自動読み込み"
+  note-visibility: "投稿の公開範囲"
+  default-note-visibility: "デフォルトの公開範囲"
+  remember-note-visibility: "投稿の公開範囲を記憶する"
   disable-via-mobile: "「モバイルからの投稿」フラグを付けない"
   load-raw-images: "添付された画像を高画質で表示する"
   load-remote-media: "リモートサーバーのメディアを表示する"
diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index 4691604e57..7d90b3520c 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -47,7 +47,7 @@ export default Vue.extend({
 	props: ['source', 'compact'],
 	data() {
 		return {
-			v: this.$store.state.device.visibility || 'public'
+			v: this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility
 		}
 	},
 	mounted() {
@@ -97,7 +97,9 @@ export default Vue.extend({
 	},
 	methods: {
 		choose(visibility) {
-			this.$store.commit('device/setVisibility', visibility);
+			if (this.$store.state.settings.rememberNoteVisibility) {
+				this.$store.commit('device/setVisibility', visibility);
+			}
 			this.$emit('chosen', visibility);
 			this.$destroy();
 		},
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 65dc9eb9c2..b2f0954d97 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -100,7 +100,7 @@ export default Vue.extend({
 			useCw: false,
 			cw: null,
 			geo: null,
-			visibility: this.$store.state.device.visibility || 'public',
+			visibility: this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility,
 			visibleUsers: [],
 			autocomplete: null,
 			draghover: false,
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index d800ccfe11..3998adf601 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -26,6 +26,22 @@
 			<mk-switch v-model="autoPopout" text="%i18n:@auto-popout%">
 				<span>%i18n:@auto-popout-desc%</span>
 			</mk-switch>
+
+			<section>
+				<header>%i18n:@note-visibility%</header>
+				<mk-switch v-model="$store.state.settings.rememberNoteVisibility" @change="onChangeRememberNoteVisibility" text="%i18n:@remember-note-visibility%"/>
+				<section>
+					<header>%i18n:@default-note-visibility%</header>
+					<ui-select v-model="defaultNoteVisibility">
+						<option value="public">%i18n:common.note-visibility.public%</option>
+						<option value="home">%i18n:common.note-visibility.home%</option>
+						<option value="followers">%i18n:common.note-visibility.followers%</option>
+						<option value="specified">%i18n:common.note-visibility.specified%</option>
+						<option value="private">%i18n:common.note-visibility.private%</option>
+					</ui-select>
+				</section>
+			</section>
+
 			<details>
 				<summary>%i18n:@advanced%</summary>
 				<mk-switch v-model="apiViaStream" text="%i18n:@api-via-stream%">
@@ -239,6 +255,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'apiViaStream', value }); }
 		},
 
+		defaultNoteVisibility: {
+			get() { return this.$store.state.settings.defaultNoteVisibility; },
+			set(value) { this.$store.commit('settings/set', { key: 'defaultNoteVisibility', value }); }
+		},
+
 		autoPopout: {
 			get() { return this.$store.state.device.autoPopout; },
 			set(value) { this.$store.commit('device/set', { key: 'autoPopout', value }); }
@@ -312,6 +333,12 @@ export default Vue.extend({
 				value: v
 			});
 		},
+		onChangeRememberNoteVisibility(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'rememberNoteVisibility',
+				value: v
+			});
+		},
 		onChangeAutoWatch(v) {
 			(this as any).api('i/update', {
 				autoWatch: v
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 8107c1f3a7..dcb2f16fa4 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 			files: [],
 			poll: false,
 			geo: null,
-			visibility: this.$store.state.device.visibility || 'public',
+			visibility: this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility,
 			visibleUsers: [],
 			useCw: false,
 			cw: null,
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 29fe067a08..a078929016 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -53,6 +53,21 @@
 					<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
 					<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
 				</section>
+
+				<section>
+					<header>%i18n:@note-visibility%</header>
+					<ui-switch v-model="$store.state.settings.rememberNoteVisibility" @change="onChangeRememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch>
+					<section>
+						<header>%i18n:@default-note-visibility%</header>
+						<ui-select v-model="defaultNoteVisibility">
+							<option value="public">%i18n:common.note-visibility.public%</option>
+							<option value="home">%i18n:common.note-visibility.home%</option>
+							<option value="followers">%i18n:common.note-visibility.followers%</option>
+							<option value="specified">%i18n:common.note-visibility.specified%</option>
+							<option value="private">%i18n:common.note-visibility.private%</option>
+						</ui-select>
+					</section>
+				</section>
 			</ui-card>
 
 			<ui-card>
@@ -161,6 +176,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
 		},
 
+		defaultNoteVisibility: {
+			get() { return this.$store.state.settings.defaultNoteVisibility; },
+			set(value) { this.$store.commit('settings/set', { key: 'defaultNoteVisibility', value }); }
+		},
+
 		lightmode: {
 			get() { return this.$store.state.device.lightmode; },
 			set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); }
@@ -198,6 +218,13 @@ export default Vue.extend({
 			});
 		},
 
+		onChangeRememberNoteVisibility(v) {
+			this.$store.dispatch('settings/set', {
+				key: 'rememberNoteVisibility',
+				value: v
+			});
+		},
+
 		onChangeDisableViaMobile(v) {
 			this.$store.dispatch('settings/set', {
 				key: 'disableViaMobile',
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 16ce78ea9f..22de9b5587 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -26,6 +26,8 @@ const defaultSettings = {
 	disableViaMobile: false,
 	memo: null,
 	iLikeSushi: false,
+	rememberNoteVisibility: false,
+	defaultNoteVisibility: 'public',
 	games: {
 		reversi: {
 			showBoardLabels: false,
-- 
cgit v1.2.3-freya


From 39e44948361760c9686e359bd3901efda83a1c96 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 8 Sep 2018 01:31:50 +0900
Subject: :art:

---
 src/client/app/common/views/components/tag-cloud.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/tag-cloud.vue b/src/client/app/common/views/components/tag-cloud.vue
index 6675ba608e..6eb82bb711 100644
--- a/src/client/app/common/views/components/tag-cloud.vue
+++ b/src/client/app/common/views/components/tag-cloud.vue
@@ -6,6 +6,7 @@
 		<vue-word-cloud
 				:words="tags.map(x => [x.name, x.count])"
 				:color="color"
+				:spacing="0.25"
 				font-family="Roboto">
 			<template slot-scope="{word, text, weight}">
 				<div style="cursor: pointer;" :title="weight">
-- 
cgit v1.2.3-freya


From 1c84c0828ef87ca70dfec1f57aee533b099098ea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 8 Sep 2018 01:46:01 +0900
Subject: 良い感じに
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/views/components/tag-cloud.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/tag-cloud.vue b/src/client/app/common/views/components/tag-cloud.vue
index 6eb82bb711..5f2cc5276a 100644
--- a/src/client/app/common/views/components/tag-cloud.vue
+++ b/src/client/app/common/views/components/tag-cloud.vue
@@ -4,10 +4,9 @@
 	<p class="empty" v-else-if="tags.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
 	<div v-else>
 		<vue-word-cloud
-				:words="tags.map(x => [x.name, x.count])"
+				:words="tags.slice(0, 20).map(x => [x.name, x.count])"
 				:color="color"
-				:spacing="0.25"
-				font-family="Roboto">
+				:spacing="1">
 			<template slot-scope="{word, text, weight}">
 				<div style="cursor: pointer;" :title="weight">
 					{{ text }}
@@ -51,7 +50,7 @@ export default Vue.extend({
 			const peak = Math.max.apply(null, this.tags.map(x => x.count));
 			const w = weight / peak;
 
-			if (w == 1) {
+			if (w > 0.9) {
 				return this.$store.state.device.darkmode ? '#ff4e69' : '#ff4e69';
 			} else if (w > 0.5) {
 				return this.$store.state.device.darkmode ? '#3bc4c7' : '#3bc4c7';
-- 
cgit v1.2.3-freya


From 2824d8a5b6d4232c12accea2f74d0b8f9e877764 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 8 Sep 2018 04:54:11 +0900
Subject: Add animation

---
 .../common/views/components/welcome-timeline.vue   | 147 +++++++++++----------
 1 file changed, 79 insertions(+), 68 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index b427721d37..965ec78559 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -1,22 +1,24 @@
 <template>
 <div class="mk-welcome-timeline">
-	<div v-for="note in notes">
-		<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>
-				<span class="username">@{{ note.user | acct }}</span>
-				<div class="info">
-					<router-link class="created-at" :to="note | notePage">
-						<mk-time :time="note.createdAt"/>
-					</router-link>
+	<transition-group name="ldzpakcixzickvggyixyrhqwjaefknon" tag="div">
+		<div v-for="note in notes" :key="note.id">
+			<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>
+					<span class="username">@{{ note.user | acct }}</span>
+					<div class="info">
+						<router-link class="created-at" :to="note | notePage">
+							<mk-time :time="note.createdAt"/>
+						</router-link>
+					</div>
+				</header>
+				<div class="text">
+					<misskey-flavored-markdown v-if="note.text" :text="note.text"/>
 				</div>
-			</header>
-			<div class="text">
-				<misskey-flavored-markdown v-if="note.text" :text="note.text"/>
 			</div>
 		</div>
-	</div>
+	</transition-group>
 </div>
 </template>
 
@@ -83,64 +85,73 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
+.ldzpakcixzickvggyixyrhqwjaefknon-enter
+.ldzpakcixzickvggyixyrhqwjaefknon-leave-to
+	opacity 0
+	transform translateY(-30px)
+
 root(isDark)
 	background isDark ? #282C37 : #fff
 
 	> div
-		padding 16px
-		overflow-wrap break-word
-		font-size .9em
-		color isDark ? #fff : #4C4C4C
-		border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
-
-		&:after
-			content ""
-			display block
-			clear both
-
-		> .avatar
-			display block
-			float left
-			position -webkit-sticky
-			position sticky
-			top 16px
-			width 42px
-			height 42px
-			border-radius 6px
-
-		> .body
-			float right
-			width calc(100% - 42px)
-			padding-left 12px
-
-			> header
-				display flex
-				align-items center
-				margin-bottom 4px
-				white-space nowrap
-
-				> .name
-					display block
-					margin 0 .5em 0 0
-					padding 0
-					overflow hidden
-					font-weight bold
-					text-overflow ellipsis
-					color isDark ? #fff : #627079
-
-				> .username
-					margin 0 .5em 0 0
-					color isDark ? #606984 : #ccc
-
-				> .info
-					margin-left auto
-					font-size 0.9em
-
-					> .created-at
-						color isDark ? #606984 : #c0c0c0
-
-			> .text
-				text-align left
+		> *
+			transition transform .3s ease, opacity .3s ease
+
+		> div
+			padding 16px
+			overflow-wrap break-word
+			font-size .9em
+			color isDark ? #fff : #4C4C4C
+			border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
+
+			&:after
+				content ""
+				display block
+				clear both
+
+			> .avatar
+				display block
+				float left
+				position -webkit-sticky
+				position sticky
+				top 16px
+				width 42px
+				height 42px
+				border-radius 6px
+
+			> .body
+				float right
+				width calc(100% - 42px)
+				padding-left 12px
+
+				> header
+					display flex
+					align-items center
+					margin-bottom 4px
+					white-space nowrap
+
+					> .name
+						display block
+						margin 0 .5em 0 0
+						padding 0
+						overflow hidden
+						font-weight bold
+						text-overflow ellipsis
+						color isDark ? #fff : #627079
+
+					> .username
+						margin 0 .5em 0 0
+						color isDark ? #606984 : #ccc
+
+					> .info
+						margin-left auto
+						font-size 0.9em
+
+						> .created-at
+							color isDark ? #606984 : #c0c0c0
+
+				> .text
+					text-align left
 
 .mk-welcome-timeline[data-darkmode]
 	root(true)
-- 
cgit v1.2.3-freya


From 380cf0de6912000bf5fb18876dc910ce8b9a0e63 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 8 Sep 2018 15:11:12 +0900
Subject: Improve welcome page

---
 assets/about/drive.png                         | Bin 0 -> 112977 bytes
 assets/about/post.png                          | Bin 0 -> 352793 bytes
 assets/about/reaction.png                      | Bin 0 -> 24621 bytes
 assets/about/ui.png                            | Bin 0 -> 128212 bytes
 locales/ja-JP.yml                              |  13 +
 src/client/app/desktop/views/pages/welcome.vue | 436 +++++++++++++++----------
 6 files changed, 279 insertions(+), 170 deletions(-)
 create mode 100644 assets/about/drive.png
 create mode 100644 assets/about/post.png
 create mode 100644 assets/about/reaction.png
 create mode 100644 assets/about/ui.png

(limited to 'src/client')

diff --git a/assets/about/drive.png b/assets/about/drive.png
new file mode 100644
index 0000000000..c35de433a8
Binary files /dev/null and b/assets/about/drive.png differ
diff --git a/assets/about/post.png b/assets/about/post.png
new file mode 100644
index 0000000000..ba291ec665
Binary files /dev/null and b/assets/about/post.png differ
diff --git a/assets/about/reaction.png b/assets/about/reaction.png
new file mode 100644
index 0000000000..e4e7e06bc0
Binary files /dev/null and b/assets/about/reaction.png differ
diff --git a/assets/about/ui.png b/assets/about/ui.png
new file mode 100644
index 0000000000..ad102a31af
Binary files /dev/null and b/assets/about/ui.png differ
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 07d8e7f48c..9404cd6ba6 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -6,6 +6,19 @@ common:
   misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
+  intro:
+    title: "Misskeyって？"
+    about: "Misskeyはオープンソースの<b>分散型マイクロブログSNS</b>です。リッチで高度にカスタマイズできるUI、投稿へのリアクション、ファイルを一元管理できるドライブなど、先進的な機能を揃えています。また、Fediverseと呼ばれるネットワークに接続できるため、他のSNSともやり取りできます。例えば、あなたが何か投稿すると、その投稿はMisskeyだけでなく他のSNSにも伝わります。ちょうどある惑星から他の惑星に電波を発信している様子をイメージしてください。"
+    features: "特徴"
+    rich-contents: "投稿"
+    rich-contents-desc: "自分の考え、話題の出来事、皆と共有したいことについて発信してください。必要であれば、様々な構文を使って投稿を装飾したり、好きな画像、動画などのファイルやアンケートを添付することもできます。"
+    reaction: "リアクション"
+    reaction-desc: "あなたの気持ちを伝える最も簡単な方法です。Misskeyは、他のユーザーの投稿に様々なリアクションを付けることができます。いちどMisskeyのリアクション機能を体験してしまうと、もう「いいね」の概念しか存在しないSNSには戻れなくなるかもしれません。"
+    ui: "インターフェース"
+    ui-desc: "どのようなUIが使いやすいかは人それぞれです。だから、Misskeyは自由度の高いUIを持っています。レイアウトやデザインを調整したり、カスタマイズ可能な様々なウィジェットを配置したりして、自分だけのホームを作ってください。"
+    drive: "ドライブ"
+    drive-desc: "以前投稿したことのある画像をまた投稿したくなったことはありませんか？もしくは、アップロードしたファイルをフォルダ分けして整理したくなったことはありませんか？Misskeyの根幹に組み込まれたドライブ機能によってそれらが解決します。ファイルの共有も簡単です。"
+    outro: "他にもMisskeyにしかない機能はまだまだあるので、ぜひあなた自身の目で確かめてください。Misskeyは分散型SNSなので、このインスタンスが気に入らなければ他のインスタンスを試すこともできます。それでは、GLHF!"
   adblock:
     detected: "広告ブロッカーを無効にしてください"
     warning: "<strong>Misskeyは広告を掲載していません</strong>が、広告をブロックする機能が有効だと一部の機能が利用できなかったり、不具合が発生する場合があります。"
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 549d9175f3..441ce890d0 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -7,86 +7,128 @@
 
 	<mk-forkit class="forkit"/>
 
-	<div class="body">
-		<div class="main block">
-			<div>
-				<h1 v-if="name != 'Misskey'">{{ name }}</h1>
-				<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
-
-				<div class="info">
-					<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
-					<span class="stats" v-if="stats">
-						<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
-						<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
-					</span>
-				</div>
-
-				<p class="desc" v-html="description || '%i18n:common.about%'"></p>
+	<main>
+		<div class="body">
+			<div class="main block">
+				<div>
+					<h1 v-if="name != 'Misskey'">{{ name }}</h1>
+					<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
+
+					<div class="info">
+						<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
+						<span class="stats" v-if="stats">
+							<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
+							<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
+						</span>
+					</div>
 
-				<p class="sign">
-					<span class="signup" @click="signup">%i18n:@signup%</span>
-					<span class="divider">|</span>
-					<span class="signin" @click="signin">%i18n:@signin%</span>
-				</p>
+					<p class="desc" v-html="description || '%i18n:common.about%'"></p>
+					<a class="about" @click="about">%i18n:@about%</a>
 
-				<img src="/assets/pointer.png" alt="" class="char">
-			</div>
-		</div>
+					<p class="sign">
+						<span class="signup" @click="signup">%i18n:@signup%</span>
+						<span class="divider">|</span>
+						<span class="signin" @click="signin">%i18n:@signin%</span>
+					</p>
 
-		<div class="announcements block">
-			<header>%fa:broadcast-tower% %i18n:@announcements%</header>
-			<div v-if="announcements && announcements.length > 0">
-				<div v-for="announcement in announcements">
-					<h1 v-html="announcement.title"></h1>
-					<div v-html="announcement.text"></div>
+					<img src="/assets/pointer.png" alt="" class="char">
 				</div>
 			</div>
-		</div>
 
-		<div class="photos block">
-			<header>%fa:images% %i18n:@photos%</header>
-			<div>
-				<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
-			</div>
-		</div>
-
-		<div class="tag-cloud block">
-			<div>
-				<mk-tag-cloud/>
+			<div class="announcements block">
+				<header>%fa:broadcast-tower% %i18n:@announcements%</header>
+				<div v-if="announcements && announcements.length > 0">
+					<div v-for="announcement in announcements">
+						<h1 v-html="announcement.title"></h1>
+						<div v-html="announcement.text"></div>
+					</div>
+				</div>
 			</div>
-		</div>
 
-		<div class="nav block">
-			<div>
-				<mk-nav class="nav"/>
+			<div class="photos block">
+				<header>%fa:images% %i18n:@photos%</header>
+				<div>
+					<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
+				</div>
 			</div>
-		</div>
 
-		<div class="side">
-			<div class="trends block">
+			<div class="tag-cloud block">
 				<div>
-					<mk-trends/>
+					<mk-tag-cloud/>
 				</div>
 			</div>
 
-			<div class="tl block">
-				<header>%fa:comment-alt R% %i18n:@timeline%</header>
+			<div class="nav block">
 				<div>
-					<mk-welcome-timeline class="tl" :max="20"/>
+					<mk-nav class="nav"/>
 				</div>
 			</div>
 
-			<div class="info block">
-				<header>%fa:info-circle% %i18n:@info%</header>
-				<div>
-					<div v-if="meta" class="body">
-						<p>Version: <b>{{ meta.version }}</b></p>
-						<p>Maintainer: <b><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></b></p>
+			<div class="side">
+				<div class="trends block">
+					<div>
+						<mk-trends/>
+					</div>
+				</div>
+
+				<div class="tl block">
+					<header>%fa:comment-alt R% %i18n:@timeline%</header>
+					<div>
+						<mk-welcome-timeline class="tl" :max="20"/>
+					</div>
+				</div>
+
+				<div class="info block">
+					<header>%fa:info-circle% %i18n:@info%</header>
+					<div>
+						<div v-if="meta" class="body">
+							<p>Version: <b>{{ meta.version }}</b></p>
+							<p>Maintainer: <b><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></b></p>
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	</main>
+
+	<modal name="about" :class="$store.state.device.darkmode ? ['about', 'modal-dark'] : ['about', 'modal-light']" width="800px" height="auto" scrollable>
+		<article class="fpdezooorhntlzyeszemrsqdlgbysvxq">
+			<h1>%i18n:common.intro.title%</h1>
+			<p v-html="'%i18n:common.intro.about%'"></p>
+			<section>
+				<h2>%i18n:common.intro.features%</h2>
+				<section>
+					<div class="body">
+						<h3>%i18n:common.intro.rich-contents%</h3>
+						<p v-html="'%i18n:common.intro.rich-contents-desc%'"></p>
+					</div>
+					<div class="image"><img src="/assets/about/post.png" alt=""></div>
+				</section>
+				<section>
+					<div class="body">
+						<h3>%i18n:common.intro.reaction%</h3>
+						<p v-html="'%i18n:common.intro.reaction-desc%'"></p>
+					</div>
+					<div class="image"><img src="/assets/about/reaction.png" alt=""></div>
+				</section>
+				<section>
+					<div class="body">
+						<h3>%i18n:common.intro.ui%</h3>
+						<p v-html="'%i18n:common.intro.ui-desc%'"></p>
+					</div>
+					<div class="image"><img src="/assets/about/ui.png" alt=""></div>
+				</section>
+				<section>
+					<div class="body">
+						<h3>%i18n:common.intro.drive%</h3>
+						<p v-html="'%i18n:common.intro.drive-desc%'"></p>
+					</div>
+					<div class="image"><img src="/assets/about/drive.png" alt=""></div>
+				</section>
+			</section>
+			<p v-html="'%i18n:common.intro.outro%'"></p>
+		</article>
+	</modal>
 
 	<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
 		<header class="formHeader">%i18n:@signup%</header>
@@ -147,6 +189,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+		about() {
+			this.$modal.show('about');
+		},
+
 		signup() {
 			this.$modal.show('signup');
 		},
@@ -199,6 +245,54 @@ export default Vue.extend({
 		margin 0 48px
 		font-size 1.5em
 
+.v--modal-overlay.about
+	.v--modal-box.v--modal
+		margin 32px 0
+
+.fpdezooorhntlzyeszemrsqdlgbysvxq
+	padding 64px
+
+	> p:last-child
+		margin-bottom 0
+
+	> h1
+		margin-top 0
+
+	> section
+		> h2
+			border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+
+		> section
+			display grid
+			grid-template-rows 1fr
+			grid-template-columns 180px 1fr
+			gap 32px
+			margin-bottom 32px
+			padding-bottom 32px
+			border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+
+			&:nth-child(odd)
+				grid-template-columns 1fr 180px
+
+				> .body
+					grid-column 1
+
+				> .image
+					grid-column 2
+
+			> .body
+				grid-row 1
+				grid-column 2
+
+			> .image
+				grid-row 1
+				grid-column 1
+
+				> img
+					display block
+					width 100%
+					height 100%
+					object-fit cover
 </style>
 
 <style lang="stylus" scoped>
@@ -226,16 +320,11 @@ root(isDark)
 		font-size 18px
 		color isDark ? #fff : #444
 
-	> .body
-		display grid
-		grid-template-rows 1fr 1fr 256px 64px
-		grid-template-columns 1fr 1fr 350px
-		gap 16px
-		width 100%
-		max-width 1200px
-		height 1200px
+	> main
 		margin 0 auto
 		padding 64px
+		width 100%
+		max-width 1200px
 
 		.block
 			color isDark ? #fff : #444
@@ -259,137 +348,144 @@ root(isDark)
 			> div
 				overflow auto
 
-		> .main
-			grid-row 1
-			grid-column 1 / 3
-			border-top solid 5px $theme-color
+		> .body
+			display grid
+			grid-template-rows 1fr 1fr 256px 64px
+			grid-template-columns 1fr 1fr 350px
+			gap 16px
+			height 1200px
 
-			> div
-				padding 32px
-				min-height 100%
+			> .main
+				grid-row 1
+				grid-column 1 / 3
+				border-top solid 5px $theme-color
 
-				> h1
-					margin 0
+				> div
+					padding 32px
+					min-height 100%
 
-					> img
-						margin -8px 0 0 -16px
-						max-width 280px
+					> h1
+						margin 0
 
-				> .info
-					margin 0 auto 16px auto
-					width $width
-					font-size 14px
+						> img
+							margin -8px 0 0 -16px
+							max-width 280px
 
-					> .stats
-						margin-left 16px
-						padding-left 16px
-						border-left solid 1px isDark ? #fff : #444
+					> .info
+						margin 0 auto 16px auto
+						width $width
+						font-size 14px
 
-						> *
-							margin-right 16px
+						> .stats
+							margin-left 16px
+							padding-left 16px
+							border-left solid 1px isDark ? #fff : #444
 
-				> .sign
-					font-size 120%
+							> *
+								margin-right 16px
 
-					> .divider
-						margin 0 16px
+					> .sign
+						font-size 120%
 
-					> .signin
-					> .signup
-						cursor pointer
+						> .divider
+							margin 0 16px
 
-						&:hover
-							color $theme-color
+						> .signin
+						> .signup
+							cursor pointer
 
-				> .char
-					display block
-					position absolute
-					right 16px
-					bottom 16px
-					width 180px
-					opacity 0.3
+							&:hover
+								color $theme-color
 
-				> *:not(.char)
-					z-index 1
+					> .char
+						display block
+						position absolute
+						right 16px
+						bottom 16px
+						width 180px
+						opacity 0.3
 
-		> .announcements
-			grid-row 2
-			grid-column 1
+					> *:not(.char)
+						z-index 1
 
-			> div
-				padding 32px
+			> .announcements
+				grid-row 2
+				grid-column 1
 
 				> div
-					padding 0 0 16px 0
-					margin 0 0 16px 0
-					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+					padding 32px
 
-					> h1
-						margin 0
-						font-size 1.25em
+					> div
+						padding 0 0 16px 0
+						margin 0 0 16px 0
+						border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
 
-		> .photos
-			grid-row 2
-			grid-column 2
+						> h1
+							margin 0
+							font-size 1.25em
 
-			> div
-				display grid
-				grid-template-rows 1fr 1fr 1fr
-				grid-template-columns 1fr 1fr
-				gap 8px
-				height 100%
-				padding 16px
+			> .photos
+				grid-row 2
+				grid-column 2
 
 				> div
-					//border-radius 4px
-					background-position center center
-					background-size cover
-
-		> .tag-cloud
-			grid-row 3
-			grid-column 1 / 3
-
-			> div
-				height 256px
-				padding 32px
-
-		> .nav
-			display flex
-			justify-content center
-			align-items center
-			grid-row 4
-			grid-column 1 / 3
-			font-size 14px
-
-		> .side
-			display grid
-			grid-row 1 / 5
-			grid-column 3
-			grid-template-rows 1fr 350px
-			grid-template-columns 1fr
-			gap 16px
-
-			> .tl
-				grid-row 1
-				grid-column 1
-				overflow auto
+					display grid
+					grid-template-rows 1fr 1fr 1fr
+					grid-template-columns 1fr 1fr
+					gap 8px
+					height 100%
+					padding 16px
 
-			> .trends
-				grid-row 2
-				grid-column 1
-				padding 8px
+					> div
+						//border-radius 4px
+						background-position center center
+						background-size cover
 
-			> .info
+			> .tag-cloud
 				grid-row 3
-				grid-column 1
+				grid-column 1 / 3
 
 				> div
-					padding 16px
+					height 256px
+					padding 32px
+
+			> .nav
+				display flex
+				justify-content center
+				align-items center
+				grid-row 4
+				grid-column 1 / 3
+				font-size 14px
+
+			> .side
+				display grid
+				grid-row 1 / 5
+				grid-column 3
+				grid-template-rows 1fr 350px
+				grid-template-columns 1fr
+				gap 16px
+
+				> .tl
+					grid-row 1
+					grid-column 1
+					overflow auto
+
+				> .trends
+					grid-row 2
+					grid-column 1
+					padding 8px
 
-					> .body
-						> p
-							display block
-							margin 0
+				> .info
+					grid-row 3
+					grid-column 1
+
+					> div
+						padding 16px
+
+						> .body
+							> p
+								display block
+								margin 0
 
 .mk-welcome[data-darkmode]
 	root(true)
-- 
cgit v1.2.3-freya


From 82ee3a538be54992fad21137a6ae66f662f59d0f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 8 Sep 2018 15:28:38 +0900
Subject: Improve welcome page

---
 src/client/app/mobile/views/pages/welcome.vue | 68 +++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index f5014d585f..74f43f2c71 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -30,6 +30,34 @@
 				<div v-html="announcement.text"></div>
 			</article>
 		</div>
+		<article class="about-misskey">
+			<h1>%i18n:common.intro.title%</h1>
+			<p v-html="'%i18n:common.intro.about%'"></p>
+			<section>
+				<h2>%i18n:common.intro.features%</h2>
+				<section>
+					<h3>%i18n:common.intro.rich-contents%</h3>
+					<div class="image"><img src="/assets/about/post.png" alt=""></div>
+					<p v-html="'%i18n:common.intro.rich-contents-desc%'"></p>
+				</section>
+				<section>
+					<h3>%i18n:common.intro.reaction%</h3>
+					<div class="image"><img src="/assets/about/reaction.png" alt=""></div>
+					<p v-html="'%i18n:common.intro.reaction-desc%'"></p>
+				</section>
+				<section>
+					<h3>%i18n:common.intro.ui%</h3>
+					<div class="image"><img src="/assets/about/ui.png" alt=""></div>
+					<p v-html="'%i18n:common.intro.ui-desc%'"></p>
+				</section>
+				<section>
+					<h3>%i18n:common.intro.drive%</h3>
+					<div class="image"><img src="/assets/about/drive.png" alt=""></div>
+					<p v-html="'%i18n:common.intro.drive-desc%'"></p>
+				</section>
+			</section>
+			<p v-html="'%i18n:common.intro.outro%'"></p>
+		</article>
 		<div class="info" v-if="meta">
 			<p>Version: <b>{{ meta.version }}</b></p>
 			<p>Maintainer: <b><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></b></p>
@@ -206,6 +234,46 @@ root(isDark)
 				> .title
 					font-weight bold
 
+		> .about-misskey
+			margin 16px 0
+			padding 32px
+			font-size 14px
+			background #fff
+			border-radius 6px
+			overflow hidden
+			color #3a3e46
+
+			> h1
+				margin 0
+
+				& + p
+					margin-top 8px
+
+			> p:last-child
+				margin-bottom 0
+
+			> section
+				> h2
+					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+
+				> section
+					margin-bottom 16px
+					padding-bottom 16px
+					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+
+					> h3
+						margin-bottom 8px
+
+					> p
+						margin-bottom 0
+
+					> .image
+						> img
+							display block
+							width 100%
+							height 120px
+							object-fit cover
+
 		> .info
 			padding 16px 0
 			border solid 2px #ddd
-- 
cgit v1.2.3-freya


From 08c278578d2dc9329776e48111e4e10bc6a917ae Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 8 Sep 2018 19:03:20 +0900
Subject: use svg and cdn to download reactions (#2665)

---
 .../app/common/views/components/reaction-icon.vue  |  22 ++++++++++-----------
 src/client/assets/reactions/angry.png              | Bin 4606 -> 0 bytes
 src/client/assets/reactions/confused.png           | Bin 6058 -> 0 bytes
 src/client/assets/reactions/congrats.png           | Bin 10000 -> 0 bytes
 src/client/assets/reactions/hmm.png                | Bin 5874 -> 0 bytes
 src/client/assets/reactions/laugh.png              | Bin 6933 -> 0 bytes
 src/client/assets/reactions/like.png               | Bin 4822 -> 0 bytes
 src/client/assets/reactions/love.png               | Bin 2805 -> 0 bytes
 src/client/assets/reactions/pudding.png            | Bin 7595 -> 0 bytes
 src/client/assets/reactions/rip.png                | Bin 6793 -> 0 bytes
 src/client/assets/reactions/surprise.png           | Bin 3806 -> 0 bytes
 src/client/assets/reactions/sushi.png              | Bin 8651 -> 0 bytes
 12 files changed, 11 insertions(+), 11 deletions(-)
 delete mode 100644 src/client/assets/reactions/angry.png
 delete mode 100644 src/client/assets/reactions/confused.png
 delete mode 100644 src/client/assets/reactions/congrats.png
 delete mode 100644 src/client/assets/reactions/hmm.png
 delete mode 100644 src/client/assets/reactions/laugh.png
 delete mode 100644 src/client/assets/reactions/like.png
 delete mode 100644 src/client/assets/reactions/love.png
 delete mode 100644 src/client/assets/reactions/pudding.png
 delete mode 100644 src/client/assets/reactions/rip.png
 delete mode 100644 src/client/assets/reactions/surprise.png
 delete mode 100644 src/client/assets/reactions/sushi.png

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/reaction-icon.vue b/src/client/app/common/views/components/reaction-icon.vue
index 46886b8ab2..61a3baa273 100644
--- a/src/client/app/common/views/components/reaction-icon.vue
+++ b/src/client/app/common/views/components/reaction-icon.vue
@@ -1,17 +1,17 @@
 <template>
 <span class="mk-reaction-icon">
-	<img v-if="reaction == 'like'" src="/assets/reactions/like.png" alt="%i18n:common.reactions.like%">
-	<img v-if="reaction == 'love'" src="/assets/reactions/love.png" alt="%i18n:common.reactions.love%">
-	<img v-if="reaction == 'laugh'" src="/assets/reactions/laugh.png" alt="%i18n:common.reactions.laugh%">
-	<img v-if="reaction == 'hmm'" src="/assets/reactions/hmm.png" alt="%i18n:common.reactions.hmm%">
-	<img v-if="reaction == 'surprise'" src="/assets/reactions/surprise.png" alt="%i18n:common.reactions.surprise%">
-	<img v-if="reaction == 'congrats'" src="/assets/reactions/congrats.png" alt="%i18n:common.reactions.congrats%">
-	<img v-if="reaction == 'angry'" src="/assets/reactions/angry.png" alt="%i18n:common.reactions.angry%">
-	<img v-if="reaction == 'confused'" src="/assets/reactions/confused.png" alt="%i18n:common.reactions.confused%">
-	<img v-if="reaction == 'rip'" src="/assets/reactions/rip.png" alt="%i18n:common.reactions.rip%">
+	<img v-if="reaction == 'like'" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" alt="%i18n:common.reactions.like%">
+	<img v-if="reaction == 'love'" src="https://twemoji.maxcdn.com/2/svg/2764.svg" alt="%i18n:common.reactions.love%">
+	<img v-if="reaction == 'laugh'" src="https://twemoji.maxcdn.com/2/svg/1f606.svg" alt="%i18n:common.reactions.laugh%">
+	<img v-if="reaction == 'hmm'" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" alt="%i18n:common.reactions.hmm%">
+	<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" alt="%i18n:common.reactions.surprise%">
+	<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" alt="%i18n:common.reactions.congrats%">
+	<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" alt="%i18n:common.reactions.angry%">
+	<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f622.svg" alt="%i18n:common.reactions.confused%">
+	<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" alt="%i18n:common.reactions.rip%">
 	<template v-if="reaction == 'pudding'">
-		<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="/assets/reactions/sushi.png" alt="%i18n:common.reactions.pudding%">
-		<img v-else src="/assets/reactions/pudding.png" alt="%i18n:common.reactions.pudding%">
+		<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" alt="%i18n:common.reactions.pudding%">
+		<img v-else src="https://twemoji.maxcdn.com/2/svg/1f36e.svg" alt="%i18n:common.reactions.pudding%">
 	</template>
 </span>
 </template>
diff --git a/src/client/assets/reactions/angry.png b/src/client/assets/reactions/angry.png
deleted file mode 100644
index 7e32dd6809..0000000000
Binary files a/src/client/assets/reactions/angry.png and /dev/null differ
diff --git a/src/client/assets/reactions/confused.png b/src/client/assets/reactions/confused.png
deleted file mode 100644
index c791854183..0000000000
Binary files a/src/client/assets/reactions/confused.png and /dev/null differ
diff --git a/src/client/assets/reactions/congrats.png b/src/client/assets/reactions/congrats.png
deleted file mode 100644
index fdea27fcb9..0000000000
Binary files a/src/client/assets/reactions/congrats.png and /dev/null differ
diff --git a/src/client/assets/reactions/hmm.png b/src/client/assets/reactions/hmm.png
deleted file mode 100644
index 725fe3898d..0000000000
Binary files a/src/client/assets/reactions/hmm.png and /dev/null differ
diff --git a/src/client/assets/reactions/laugh.png b/src/client/assets/reactions/laugh.png
deleted file mode 100644
index 3b3c10a27a..0000000000
Binary files a/src/client/assets/reactions/laugh.png and /dev/null differ
diff --git a/src/client/assets/reactions/like.png b/src/client/assets/reactions/like.png
deleted file mode 100644
index 526b391f96..0000000000
Binary files a/src/client/assets/reactions/like.png and /dev/null differ
diff --git a/src/client/assets/reactions/love.png b/src/client/assets/reactions/love.png
deleted file mode 100644
index 9fe82cd070..0000000000
Binary files a/src/client/assets/reactions/love.png and /dev/null differ
diff --git a/src/client/assets/reactions/pudding.png b/src/client/assets/reactions/pudding.png
deleted file mode 100644
index e4d10a229d..0000000000
Binary files a/src/client/assets/reactions/pudding.png and /dev/null differ
diff --git a/src/client/assets/reactions/rip.png b/src/client/assets/reactions/rip.png
deleted file mode 100644
index 4800fdb91b..0000000000
Binary files a/src/client/assets/reactions/rip.png and /dev/null differ
diff --git a/src/client/assets/reactions/surprise.png b/src/client/assets/reactions/surprise.png
deleted file mode 100644
index aa55592ded..0000000000
Binary files a/src/client/assets/reactions/surprise.png and /dev/null differ
diff --git a/src/client/assets/reactions/sushi.png b/src/client/assets/reactions/sushi.png
deleted file mode 100644
index c30d44eb15..0000000000
Binary files a/src/client/assets/reactions/sushi.png and /dev/null differ
-- 
cgit v1.2.3-freya


From 67f60ab3071521838c1886716066c8a22ddb2e1a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 8 Sep 2018 19:25:59 +0900
Subject:  fix wrong reaction img  (#2666)

* use svg and cdn to download reactions

* fix wrong reaction img
---
 src/client/app/common/views/components/reaction-icon.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/reaction-icon.vue b/src/client/app/common/views/components/reaction-icon.vue
index 61a3baa273..c668efac6b 100644
--- a/src/client/app/common/views/components/reaction-icon.vue
+++ b/src/client/app/common/views/components/reaction-icon.vue
@@ -7,7 +7,7 @@
 	<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" alt="%i18n:common.reactions.surprise%">
 	<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" alt="%i18n:common.reactions.congrats%">
 	<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" alt="%i18n:common.reactions.angry%">
-	<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f622.svg" alt="%i18n:common.reactions.confused%">
+	<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f625.svg" alt="%i18n:common.reactions.confused%">
 	<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" alt="%i18n:common.reactions.rip%">
 	<template v-if="reaction == 'pudding'">
 		<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" alt="%i18n:common.reactions.pudding%">
-- 
cgit v1.2.3-freya


From 5a13c38a6d27535da21894ca8642d722873c017f Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sat, 8 Sep 2018 21:44:28 +0900
Subject: インスタンス名がブラウザタイトルに反映されないのを修正 (#2668)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* titleが反映されないのを修正

* deckでtitleが反映されるように修正
---
 src/client/app/config.ts                         | 2 ++
 src/client/app/desktop/views/pages/deck/deck.vue | 1 +
 src/client/app/mios.ts                           | 4 ++--
 src/server/web/views/note.pug                    | 2 +-
 src/server/web/views/user.pug                    | 2 +-
 webpack.config.ts                                | 4 +++-
 6 files changed, 10 insertions(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index a326c521db..2e464c50f3 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -5,6 +5,7 @@ declare const _COPYRIGHT_: string;
 declare const _VERSION_: string;
 declare const _CODENAME_: string;
 declare const _ENV_: string;
+declare const _NAME_: string;
 
 const address = new URL(location.href);
 
@@ -20,3 +21,4 @@ export const copyright = _COPYRIGHT_;
 export const version = _VERSION_;
 export const codename = _CODENAME_;
 export const env = _ENV_;
+export const name = _NAME_;
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 26b989656e..5e7a07ea6b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -85,6 +85,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		document.title = (this as any).os.instanceName;
 		document.documentElement.style.overflow = 'hidden';
 	},
 
diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index 0f72cd2f34..d9d4ee9a07 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -3,7 +3,7 @@ import { EventEmitter } from 'eventemitter3';
 import * as uuid from 'uuid';
 
 import initStore from './store';
-import { apiUrl, version, lang } from './config';
+import { apiUrl, version, lang, name } from './config';
 import Progress from './common/scripts/loading';
 import Connection from './common/scripts/streaming/stream';
 import { HomeStreamManager } from './common/scripts/streaming/home';
@@ -72,7 +72,7 @@ export default class MiOS extends EventEmitter {
 	};
 
 	public get instanceName() {
-		return this.meta ? this.meta.data.name : 'Misskey';
+		return this.meta ? this.meta.data.name : name;
 	}
 
 	private isMetaFetching = false;
diff --git a/src/server/web/views/note.pug b/src/server/web/views/note.pug
index 4f7c3d7777..234ecabe22 100644
--- a/src/server/web/views/note.pug
+++ b/src/server/web/views/note.pug
@@ -6,7 +6,7 @@ block vars
 	- const url = `${config.url}/notes/${note.id}`;
 
 block title
-	= `${title} | Misskey`
+	= `${title} | ${config.name}`
 
 block desc
 	meta(name='description' content= summary)
diff --git a/src/server/web/views/user.pug b/src/server/web/views/user.pug
index 63d2f75156..506a889d98 100644
--- a/src/server/web/views/user.pug
+++ b/src/server/web/views/user.pug
@@ -6,7 +6,7 @@ block vars
 	- const img = user.avatarId ? `${config.drive_url}/${user.avatarId}` : null;
 
 block title
-	= `${title} | Misskey`
+	= `${title} | ${config.name}`
 
 block desc
 	meta(name='description' content= user.description)
diff --git a/webpack.config.ts b/webpack.config.ts
index a50d6c40cc..bc1c0ddbcf 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -22,6 +22,7 @@ const locales = require('./locales');
 const meta = require('./package.json');
 const version = `${meta.clientVersion}-${rndstr({ length: 8, chars: '0-9a-z' })}`;
 const codename = meta.codename;
+import config from './src/config';
 
 declare var global: {
 	faReplacement: typeof faReplacement;
@@ -75,7 +76,8 @@ const consts = {
 	_CODENAME_: codename,
 	_LANG_: '%lang%',
 	_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
-	_ENV_: process.env.NODE_ENV
+	_ENV_: process.env.NODE_ENV,
+	_NAME_: config.name
 };
 
 const _consts: { [ key: string ]: any } = {};
-- 
cgit v1.2.3-freya


From 5d4e9aa9498c94f1c352432d7bc89f427d067723 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 8 Sep 2018 23:16:02 +0900
Subject: Show ai image in welcome page

---
 src/client/app/desktop/views/pages/welcome.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 441ce890d0..ea1734f8c7 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -22,8 +22,10 @@
 						</span>
 					</div>
 
-					<p class="desc" v-html="description || '%i18n:common.about%'"></p>
-					<a class="about" @click="about">%i18n:@about%</a>
+					<div class="desc">
+						<span class="desc" v-html="description || '%i18n:common.about%'"></span>
+						<a class="about" @click="about">%i18n:@about%</a>
+					</div>
 
 					<p class="sign">
 						<span class="signup" @click="signup">%i18n:@signup%</span>
@@ -31,7 +33,7 @@
 						<span class="signin" @click="signin">%i18n:@signin%</span>
 					</p>
 
-					<img src="/assets/pointer.png" alt="" class="char">
+					<img src="/assets/ai.png" alt="" title="藍" class="char">
 				</div>
 			</div>
 
@@ -350,10 +352,10 @@ root(isDark)
 
 		> .body
 			display grid
-			grid-template-rows 1fr 1fr 256px 64px
+			grid-template-rows 390px 1fr 256px 64px
 			grid-template-columns 1fr 1fr 350px
 			gap 16px
-			height 1200px
+			height 1150px
 
 			> .main
 				grid-row 1
@@ -384,8 +386,12 @@ root(isDark)
 							> *
 								margin-right 16px
 
+					> .desc
+						max-width calc(100% - 150px)
+
 					> .sign
 						font-size 120%
+						margin-bottom 0
 
 						> .divider
 							margin 0 16px
@@ -401,9 +407,9 @@ root(isDark)
 						display block
 						position absolute
 						right 16px
-						bottom 16px
-						width 180px
-						opacity 0.3
+						bottom 0
+						height 320px
+						opacity 0.7
 
 					> *:not(.char)
 						z-index 1
-- 
cgit v1.2.3-freya


From 6a45bb21c384e722b0c67b0c65608cc62ae62b6a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 8 Sep 2018 23:19:11 +0900
Subject: #2668 の一部をRevert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/config.ts | 2 --
 src/client/app/mios.ts   | 4 ++--
 webpack.config.ts        | 4 +---
 3 files changed, 3 insertions(+), 7 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index 2e464c50f3..a326c521db 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -5,7 +5,6 @@ declare const _COPYRIGHT_: string;
 declare const _VERSION_: string;
 declare const _CODENAME_: string;
 declare const _ENV_: string;
-declare const _NAME_: string;
 
 const address = new URL(location.href);
 
@@ -21,4 +20,3 @@ export const copyright = _COPYRIGHT_;
 export const version = _VERSION_;
 export const codename = _CODENAME_;
 export const env = _ENV_;
-export const name = _NAME_;
diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index d9d4ee9a07..0f72cd2f34 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -3,7 +3,7 @@ import { EventEmitter } from 'eventemitter3';
 import * as uuid from 'uuid';
 
 import initStore from './store';
-import { apiUrl, version, lang, name } from './config';
+import { apiUrl, version, lang } from './config';
 import Progress from './common/scripts/loading';
 import Connection from './common/scripts/streaming/stream';
 import { HomeStreamManager } from './common/scripts/streaming/home';
@@ -72,7 +72,7 @@ export default class MiOS extends EventEmitter {
 	};
 
 	public get instanceName() {
-		return this.meta ? this.meta.data.name : name;
+		return this.meta ? this.meta.data.name : 'Misskey';
 	}
 
 	private isMetaFetching = false;
diff --git a/webpack.config.ts b/webpack.config.ts
index bc1c0ddbcf..a50d6c40cc 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -22,7 +22,6 @@ const locales = require('./locales');
 const meta = require('./package.json');
 const version = `${meta.clientVersion}-${rndstr({ length: 8, chars: '0-9a-z' })}`;
 const codename = meta.codename;
-import config from './src/config';
 
 declare var global: {
 	faReplacement: typeof faReplacement;
@@ -76,8 +75,7 @@ const consts = {
 	_CODENAME_: codename,
 	_LANG_: '%lang%',
 	_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
-	_ENV_: process.env.NODE_ENV,
-	_NAME_: config.name
+	_ENV_: process.env.NODE_ENV
 };
 
 const _consts: { [ key: string ]: any } = {};
-- 
cgit v1.2.3-freya


From bc3a5f35124fff69e11e7c23bbd9798be8f9077c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 10 Sep 2018 03:02:06 +0900
Subject: Fix #2596

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index b2f0954d97..fd489283f1 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -63,6 +63,7 @@ import MkVisibilityChooser from '../../../common/views/components/visibility-cho
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
 import { erase } from '../../../../../prelude/array';
+import parseAcct from '../../../../../misc/acct/parse';
 
 export default Vue.extend({
 	components: {
@@ -337,10 +338,9 @@ export default Vue.extend({
 		addVisibleUser() {
 			(this as any).apis.input({
 				title: '%i18n:@enter-username%'
-			}).then(username => {
-				(this as any).api('users/show', {
-					username
-				}).then(user => {
+			}).then(acct => {
+				if (acct.startsWith('@')) acct = acct.substr(1);
+				(this as any).api('users/show', parseAcct(acct)).then(user => {
 					this.visibleUsers.push(user);
 				});
 			});
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index dcb2f16fa4..7e6a4c38e1 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -60,6 +60,7 @@ import getFace from '../../../common/scripts/get-face';
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
 import { erase } from '../../../../../prelude/array';
+import parseAcct from '../../../../../misc/acct/parse';
 
 export default Vue.extend({
 	components: {
@@ -253,10 +254,9 @@ export default Vue.extend({
 		addVisibleUser() {
 			(this as any).apis.input({
 				title: '%i18n:@username-prompt%'
-			}).then(username => {
-				(this as any).api('users/show', {
-					username
-				}).then(user => {
+			}).then(acct => {
+				if (acct.startsWith('@')) acct = acct.substr(1);
+				(this as any).api('users/show', parseAcct(acct)).then(user => {
 					this.visibleUsers.push(user);
 				});
 			});
-- 
cgit v1.2.3-freya


From 4dc8351f56416832f156e7e67f548810fc8e4960 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 10 Sep 2018 17:50:34 +0900
Subject: Optimize booting script

---
 src/client/app/boot.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index f14cebe7d5..25aa26dd19 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -18,6 +18,8 @@
 		return;
 	}
 
+	const langs = LANGS;
+
 	//#region Load settings
 	let settings = null;
 	const vuex = localStorage.getItem('vuex');
@@ -40,10 +42,10 @@
 	//#region Detect the user language
 	let lang = null;
 
-	if (LANGS.includes(navigator.language)) {
+	if (langs.includes(navigator.language)) {
 		lang = navigator.language;
 	} else {
-		lang = LANGS.find(x => x.split('-')[0] == navigator.language);
+		lang = langs.find(x => x.split('-')[0] == navigator.language);
 
 		if (lang == null) {
 			// Fallback
@@ -52,7 +54,7 @@
 	}
 
 	if (settings && settings.device.lang &&
-		LANGS.includes(settings.device.lang)) {
+		langs.includes(settings.device.lang)) {
 		lang = settings.device.lang;
 	}
 	//#endregion
-- 
cgit v1.2.3-freya


From b24f368d3f207554735e4edc5c5a2b7e16a6d281 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Mon, 10 Sep 2018 18:02:46 +0900
Subject: サロゲートペアを字数にカウントしないようにする (#2661)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update post-form.vue

* Update messaging-message.ts

* Update post-form.vue

* Update note.ts

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#issuecomment-419579444

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#issuecomment-419579444

* Update messaging-message.ts

refs: https://github.com/syuilo/misskey/pull/2661#issuecomment-419579444

* Update note.ts

refs: https://github.com/syuilo/misskey/pull/2661#issuecomment-419579444

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#discussion_r216175581

* Update post-form.vue

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#discussion_r216242002

* Update post-form.vue

refs: https://github.com/syuilo/misskey/pull/2661#discussion_r216242105
---
 src/client/app/desktop/views/components/post-form.vue | 9 +++++++--
 src/client/app/mobile/views/components/post-form.vue  | 7 ++++++-
 src/models/messaging-message.ts                       | 3 ++-
 src/models/note.ts                                    | 5 +++--
 4 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index fd489283f1..483a51b0ae 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -45,7 +45,7 @@
 		<span v-if="visibility === 'specified'">%fa:envelope%</span>
 		<span v-if="visibility === 'private'">%fa:lock%</span>
 	</button>
-	<p class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</p>
+	<p class="text-count" :class="{ over: this.trimmedLength(text) > 1000 }">{{ 1000 - this.trimmedLength(text) }}</p>
 	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
 		{{ posting ? '%i18n:@posting%' : submitText }}<mk-ellipsis v-if="posting"/>
 	</button>
@@ -63,6 +63,7 @@ import MkVisibilityChooser from '../../../common/views/components/visibility-cho
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
 import { erase } from '../../../../../prelude/array';
+import { length } from 'stringz';
 import parseAcct from '../../../../../misc/acct/parse';
 
 export default Vue.extend({
@@ -147,7 +148,7 @@ export default Vue.extend({
 		canPost(): boolean {
 			return !this.posting &&
 				(1 <= this.text.length || 1 <= this.files.length || this.poll || this.renote) &&
-				(this.text.trim().length <= 1000);
+				(length(this.text.trim()) <= 1000);
 		}
 	},
 
@@ -199,6 +200,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+	  trimmedLength(text: string) {
+			return length(text.trim());
+		},
+
 		addTag(tag: string) {
 			insertTextAtCursor(this.$refs.text, ` #${tag} `);
 		},
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 7e6a4c38e1..be20b11f14 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -4,7 +4,7 @@
 		<header>
 			<button class="cancel" @click="cancel">%fa:times%</button>
 			<div>
-				<span class="text-count" :class="{ over: text.length > 1000 }">{{ 1000 - text.length }}</span>
+				<span class="text-count" :class="{ over: trimmedLength(text) > 1000 }">{{ 1000 - trimmedLength(text) }}</span>
 				<span class="geo" v-if="geo">%fa:map-marker-alt%</span>
 				<button class="submit" :disabled="!canPost" @click="post">{{ submitText }}</button>
 			</div>
@@ -60,6 +60,7 @@ import getFace from '../../../common/scripts/get-face';
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
 import { erase } from '../../../../../prelude/array';
+import { length } from 'stringz';
 import parseAcct from '../../../../../misc/acct/parse';
 
 export default Vue.extend({
@@ -180,6 +181,10 @@ export default Vue.extend({
 	},
 
 	methods: {
+		trimmedLength(text: string) {
+			return length(text.trim());
+		},
+
 		addTag(tag: string) {
 			insertTextAtCursor(this.$refs.text, ` #${tag} `);
 		},
diff --git a/src/models/messaging-message.ts b/src/models/messaging-message.ts
index f46abd506d..d778164de0 100644
--- a/src/models/messaging-message.ts
+++ b/src/models/messaging-message.ts
@@ -4,6 +4,7 @@ import { pack as packUser } from './user';
 import { pack as packFile } from './drive-file';
 import db from '../db/mongodb';
 import MessagingHistory, { deleteMessagingHistory } from './messaging-history';
+import { length } from 'stringz';
 
 const MessagingMessage = db.get<IMessagingMessage>('messagingMessages');
 export default MessagingMessage;
@@ -19,7 +20,7 @@ export interface IMessagingMessage {
 }
 
 export function isValidText(text: string): boolean {
-	return text.length <= 1000 && text.trim() != '';
+	return length(text.trim()) <= 1000 && text.trim() != '';
 }
 
 /**
diff --git a/src/models/note.ts b/src/models/note.ts
index 624bdbdfe8..6530d0b324 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -2,6 +2,7 @@ import * as mongo from 'mongodb';
 const deepcopy = require('deepcopy');
 import rap from '@prezzemolo/rap';
 import db from '../db/mongodb';
+import { length } from 'stringz';
 import { IUser, pack as packUser } from './user';
 import { pack as packApp } from './app';
 import PollVote, { deletePollVote } from './poll-vote';
@@ -24,11 +25,11 @@ Note.createIndex({
 export default Note;
 
 export function isValidText(text: string): boolean {
-	return text.length <= 1000 && text.trim() != '';
+	return length(text.trim()) <= 1000 && text.trim() != '';
 }
 
 export function isValidCw(text: string): boolean {
-	return text.length <= 100;
+	return length(text.trim()) <= 100;
 }
 
 export type INote = {
-- 
cgit v1.2.3-freya


From 046976dffc1aa8bc02259ab4a65e74b1216a0ec3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 12 Sep 2018 02:48:19 +0900
Subject: Resolve #2691

---
 .../app/desktop/views/components/timeline.vue      |  11 +-
 .../desktop/views/pages/admin/admin.dashboard.vue  |  35 ++++--
 src/client/app/mobile/views/pages/home.vue         |  11 +-
 src/models/meta.ts                                 |   1 +
 src/server/api/endpoints/admin/update-meta.ts      |  10 ++
 src/server/api/endpoints/meta.ts                   |   1 +
 src/stream.ts                                      | 119 ++++++++++++++-------
 7 files changed, 134 insertions(+), 54 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 52a7753438..8d72016f22 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -2,8 +2,8 @@
 <div class="mk-timeline">
 	<header>
 		<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 == 'hybrid'" @click="src = 'hybrid'">%fa:share-alt% %i18n:@hybrid%</span>
+		<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
+		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</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="%i18n:@list%">%fa:list%</button>
@@ -29,7 +29,8 @@ export default Vue.extend({
 	data() {
 		return {
 			src: 'home',
-			list: null
+			list: null,
+			enableLocalTimeline: false
 		};
 	},
 
@@ -44,6 +45,10 @@ export default Vue.extend({
 	},
 
 	created() {
+		(this as any).os.getMeta().then(meta => {
+			this.enableLocalTimeline = !meta.disableLocalTimeline;
+		});
+
 		if (this.$store.state.device.tl) {
 			this.src = this.$store.state.device.tl.src;
 			if (this.src == 'list') {
diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
index ebb54d782e..c86c30db17 100644
--- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
@@ -1,22 +1,34 @@
 <template>
 <div class="obdskegsannmntldydackcpzezagxqfy mk-admin-card">
 	<header>%i18n:@dashboard%</header>
+
 	<div v-if="stats" class="stats">
 		<div><b>%fa:user% {{ stats.originalUsersCount | number }}</b><span>%i18n:@original-users%</span></div>
 		<div><span>%fa:user% {{ stats.usersCount | number }}</span><span>%i18n:@all-users%</span></div>
 		<div><b>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</b><span>%i18n:@original-notes%</span></div>
 		<div><span>%fa:pencil-alt% {{ stats.notesCount | number }}</span><span>%i18n:@all-notes%</span></div>
 	</div>
+
 	<div class="cpu-memory">
 		<x-cpu-memory :connection="connection"/>
 	</div>
-	<div>
-		<label>
-			<input type="checkbox" v-model="disableRegistration" @change="updateMeta">
-			<span>disableRegistration</span>
-		</label>
-		<button class="ui" @click="invite">%i18n:@invite%</button>
-		<p v-if="inviteCode">Code: <code>{{ inviteCode }}</code></p>
+
+	<div class="form">
+		<div>
+			<label>
+				<input type="checkbox" v-model="disableRegistration" @change="updateMeta">
+				<span>%i18n:@disableRegistration%</span>
+			</label>
+			<button class="ui" @click="invite">%i18n:@invite%</button>
+			<p v-if="inviteCode">Code: <code>{{ inviteCode }}</code></p>
+		</div>
+
+		<div>
+			<label>
+				<input type="checkbox" v-model="disableLocalTimeline" @change="updateMeta">
+				<span>%i18n:@disableLocalTimeline%</span>
+			</label>
+		</div>
 	</div>
 </div>
 </template>
@@ -33,6 +45,7 @@ export default Vue.extend({
 		return {
 			stats: null,
 			disableRegistration: false,
+			disableLocalTimeline: false,
 			inviteCode: null,
 			connection: null,
 			connectionId: null
@@ -44,6 +57,7 @@ export default Vue.extend({
 
 		(this as any).os.getMeta().then(meta => {
 			this.disableRegistration = meta.disableRegistration;
+			this.disableLocalTimeline = meta.disableLocalTimeline;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -61,7 +75,8 @@ export default Vue.extend({
 		},
 		updateMeta() {
 			(this as any).api('admin/update-meta', {
-				disableRegistration: this.disableRegistration
+				disableRegistration: this.disableRegistration,
+				disableLocalTimeline: this.disableLocalTimeline
 			});
 		}
 	}
@@ -97,4 +112,8 @@ export default Vue.extend({
 		border solid 1px #eee
 		border-radius: 8px
 
+	> .form
+		> div
+			border-bottom solid 1px #eee
+
 </style>
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 706c9cd28b..333ca1a7a1 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -24,8 +24,8 @@
 			<div class="body">
 				<div>
 					<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 == 'hybrid'" @click="src = 'hybrid'">%fa:share-alt% %i18n:@hybrid%</span>
+					<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
+					<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 					<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
 					<template v-if="lists">
 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
@@ -60,7 +60,8 @@ export default Vue.extend({
 			src: 'home',
 			list: null,
 			lists: null,
-			showNav: false
+			showNav: false,
+			enableLocalTimeline: false
 		};
 	},
 
@@ -85,6 +86,10 @@ export default Vue.extend({
 	},
 
 	created() {
+		(this as any).os.getMeta().then(meta => {
+			this.enableLocalTimeline = !meta.disableLocalTimeline;
+		});
+
 		if (this.$store.state.device.tl) {
 			this.src = this.$store.state.device.tl.src;
 			if (this.src == 'list') {
diff --git a/src/models/meta.ts b/src/models/meta.ts
index 4f1977f3b5..8ca68416f8 100644
--- a/src/models/meta.ts
+++ b/src/models/meta.ts
@@ -12,5 +12,6 @@ export type IMeta = {
 		originalUsersCount: number;
 	};
 	disableRegistration?: boolean;
+	disableLocalTimeline?: boolean;
 	hidedTags?: string[];
 };
diff --git a/src/server/api/endpoints/admin/update-meta.ts b/src/server/api/endpoints/admin/update-meta.ts
index f903628774..3f5cd56b2f 100644
--- a/src/server/api/endpoints/admin/update-meta.ts
+++ b/src/server/api/endpoints/admin/update-meta.ts
@@ -23,6 +23,12 @@ export const meta = {
 			}
 		}),
 
+		disableLocalTimeline: $.bool.optional.nullable.note({
+			desc: {
+				'ja-JP': 'ローカルタイムライン(とソーシャルタイムライン)を無効にするか否か'
+			}
+		}),
+
 		hidedTags: $.arr($.str).optional.nullable.note({
 			desc: {
 				'ja-JP': '統計などで無視するハッシュタグ'
@@ -45,6 +51,10 @@ export default (params: any) => new Promise(async (res, rej) => {
 		set.disableRegistration = ps.disableRegistration;
 	}
 
+	if (typeof ps.disableLocalTimeline === 'boolean') {
+		set.disableLocalTimeline = ps.disableLocalTimeline;
+	}
+
 	if (Array.isArray(ps.hidedTags)) {
 		set.hidedTags = ps.hidedTags;
 	}
diff --git a/src/server/api/endpoints/meta.ts b/src/server/api/endpoints/meta.ts
index 4472d8d779..18b0882f76 100644
--- a/src/server/api/endpoints/meta.ts
+++ b/src/server/api/endpoints/meta.ts
@@ -34,6 +34,7 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 		},
 		broadcasts: meta.broadcasts,
 		disableRegistration: meta.disableRegistration,
+		disableLocalTimeline: meta.disableLocalTimeline,
 		driveCapacityPerLocalUserMb: config.localDriveCapacityMb,
 		recaptchaSitekey: config.recaptcha ? config.recaptcha.site_key : null,
 		swPublickey: config.sw ? config.sw.public_key : null,
diff --git a/src/stream.ts b/src/stream.ts
index 38a640c5da..ebc75c875c 100644
--- a/src/stream.ts
+++ b/src/stream.ts
@@ -1,58 +1,97 @@
 import * as mongo from 'mongodb';
 import Xev from 'xev';
-
-const ev = new Xev();
+import Meta, { IMeta } from './models/meta';
 
 type ID = string | mongo.ObjectID;
 
-function publish(channel: string, type: string, value?: any): void {
-	const message = type == null ? value : value == null ?
-		{ type: type } :
-		{ type: type, body: value };
+class Publisher {
+	private ev: Xev;
+	private meta: IMeta;
 
-	ev.emit(channel, message);
-}
+	constructor() {
+		this.ev = new Xev();
 
-export function publishUserStream(userId: ID, type: string, value?: any): void {
-	publish(`user-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
-}
+		setInterval(async () => {
+			this.meta = await Meta.findOne({});
+		}, 5000);
+	}
 
-export function publishDriveStream(userId: ID, type: string, value?: any): void {
-	publish(`drive-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
-}
+	public getMeta = async () => {
+		if (this.meta != null) return this.meta;
 
-export function publishNoteStream(noteId: ID, type: string): void {
-	publish(`note-stream:${noteId}`, null, noteId);
-}
+		this.meta = await Meta.findOne({});
+		return this.meta;
+	}
 
-export function publishUserListStream(listId: ID, type: string, value?: any): void {
-	publish(`user-list-stream:${listId}`, type, typeof value === 'undefined' ? null : value);
-}
+	private publish = (channel: string, type: string, value?: any): void => {
+		const message = type == null ? value : value == null ?
+			{ type: type } :
+			{ type: type, body: value };
 
-export function publishMessagingStream(userId: ID, otherpartyId: ID, type: string, value?: any): void {
-	publish(`messaging-stream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
-}
+		this.ev.emit(channel, message);
+	}
 
-export function publishMessagingIndexStream(userId: ID, type: string, value?: any): void {
-	publish(`messaging-index-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
-}
+	public publishUserStream = (userId: ID, type: string, value?: any): void => {
+		this.publish(`user-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
 
-export function publishReversiStream(userId: ID, type: string, value?: any): void {
-	publish(`reversi-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
-}
+	public publishDriveStream = (userId: ID, type: string, value?: any): void => {
+		this.publish(`drive-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
 
-export function publishReversiGameStream(gameId: ID, type: string, value?: any): void {
-	publish(`reversi-game-stream:${gameId}`, type, typeof value === 'undefined' ? null : value);
-}
+	public publishNoteStream = (noteId: ID, type: string): void => {
+		this.publish(`note-stream:${noteId}`, null, noteId);
+	}
 
-export function publishLocalTimelineStream(note: any): void {
-	publish('local-timeline', null, note);
-}
+	public publishUserListStream = (listId: ID, type: string, value?: any): void => {
+		this.publish(`user-list-stream:${listId}`, type, typeof value === 'undefined' ? null : value);
+	}
 
-export function publishHybridTimelineStream(userId: ID, note: any): void {
-	publish(userId ? `hybrid-timeline:${userId}` : 'hybrid-timeline', null, note);
-}
+	public publishMessagingStream = (userId: ID, otherpartyId: ID, type: string, value?: any): void => {
+		this.publish(`messaging-stream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishMessagingIndexStream = (userId: ID, type: string, value?: any): void => {
+		this.publish(`messaging-index-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishReversiStream = (userId: ID, type: string, value?: any): void => {
+		this.publish(`reversi-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishReversiGameStream = (gameId: ID, type: string, value?: any): void => {
+		this.publish(`reversi-game-stream:${gameId}`, type, typeof value === 'undefined' ? null : value);
+	}
 
-export function publishGlobalTimelineStream(note: any): void {
-	publish('global-timeline', null, note);
+	public publishLocalTimelineStream = async (note: any): Promise<void> => {
+		const meta = await this.getMeta();
+		if (meta.disableLocalTimeline) return;
+		this.publish('local-timeline', null, note);
+	}
+
+	public publishHybridTimelineStream = async (userId: ID, note: any): Promise<void> => {
+		const meta = await this.getMeta();
+		if (meta.disableLocalTimeline) return;
+		this.publish(userId ? `hybrid-timeline:${userId}` : 'hybrid-timeline', null, note);
+	}
+
+	public publishGlobalTimelineStream = (note: any): void => {
+		this.publish('global-timeline', null, note);
+	}
 }
+
+const publisher = new Publisher();
+
+export default publisher;
+
+export const publishUserStream = publisher.publishUserStream;
+export const publishDriveStream = publisher.publishDriveStream;
+export const publishNoteStream = publisher.publishNoteStream;
+export const publishUserListStream = publisher.publishUserListStream;
+export const publishMessagingStream = publisher.publishMessagingStream;
+export const publishMessagingIndexStream = publisher.publishMessagingIndexStream;
+export const publishReversiStream = publisher.publishReversiStream;
+export const publishReversiGameStream = publisher.publishReversiGameStream;
+export const publishLocalTimelineStream = publisher.publishLocalTimelineStream;
+export const publishHybridTimelineStream = publisher.publishHybridTimelineStream;
+export const publishGlobalTimelineStream = publisher.publishGlobalTimelineStream;
-- 
cgit v1.2.3-freya


From 0ed197d4d9d40ca93f492a5ecd20e9c861a7f7d2 Mon Sep 17 00:00:00 2001
From: Aya Morisawa <AyaMorisawa4869@gmail.com>
Date: Wed, 12 Sep 2018 03:02:14 +0900
Subject: Use unique (#2695)

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 483a51b0ae..c371940aa3 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -62,7 +62,7 @@ import getFace from '../../../common/scripts/get-face';
 import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
-import { erase } from '../../../../../prelude/array';
+import { erase, unique } from '../../../../../prelude/array';
 import { length } from 'stringz';
 import parseAcct from '../../../../../misc/acct/parse';
 
@@ -397,7 +397,7 @@ export default Vue.extend({
 			if (this.text && this.text != '') {
 				const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
 				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
-				localStorage.setItem('hashtags', JSON.stringify(hashtags.concat(history).reduce((a, c) => a.includes(c) ? a : [...a, c], [])));
+				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
 			}
 		},
 
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index be20b11f14..212451a5bc 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -308,7 +308,7 @@ export default Vue.extend({
 			if (this.text && this.text != '') {
 				const hashtags = parse(this.text).filter(x => x.type == 'hashtag').map(x => x.hashtag);
 				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
-				localStorage.setItem('hashtags', JSON.stringify(hashtags.concat(history).reduce((a, c) => a.includes(c) ? a : [...a, c], [])));
+				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags.concat(history))));
 			}
 		},
 
-- 
cgit v1.2.3-freya


From ca2230f690a77f368126282ba51ec28a46e92dca Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 12 Sep 2018 03:32:47 +0900
Subject: Refactor

---
 .../views/components/misskey-flavored-markdown.ts  | 57 +++++++++++-----------
 1 file changed, 28 insertions(+), 29 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/misskey-flavored-markdown.ts b/src/client/app/common/views/components/misskey-flavored-markdown.ts
index 44680751f7..224bd6f5de 100644
--- a/src/client/app/common/views/components/misskey-flavored-markdown.ts
+++ b/src/client/app/common/views/components/misskey-flavored-markdown.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { VNode } from 'vue';
 import * as emojilib from 'emojilib';
 import { length } from 'stringz';
 import parse from '../../../../../mfm/parse';
@@ -6,10 +6,7 @@ import getAcct from '../../../../../misc/acct/render';
 import { url } from '../../../config';
 import MkUrl from './url.vue';
 import MkGoogle from './google.vue';
-
-const flatten = list => list.reduce(
-	(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []
-);
+import { concat } from '../../../../../prelude/array';
 
 export default Vue.component('misskey-flavored-markdown', {
 	props: {
@@ -32,20 +29,20 @@ export default Vue.component('misskey-flavored-markdown', {
 	},
 
 	render(createElement) {
-		let ast;
+		let ast: any[];
 
 		if (this.ast == null) {
 			// Parse text to ast
 			ast = parse(this.text);
 		} else {
-			ast = this.ast;
+			ast = this.ast as any[];
 		}
 
 		let bigCount = 0;
 		let motionCount = 0;
 
 		// Parse ast to DOM
-		const els = flatten(ast.map(token => {
+		const els = concat(ast.map((token): VNode[] => {
 			switch (token.type) {
 				case 'text': {
 					const text = token.content.replace(/(\r\n|\n|\r)/g, '\n');
@@ -56,12 +53,12 @@ export default Vue.component('misskey-flavored-markdown', {
 						x[x.length - 1].pop();
 						return x;
 					} else {
-						return createElement('span', text.replace(/\n/g, ' '));
+						return [createElement('span', text.replace(/\n/g, ' '))];
 					}
 				}
 
 				case 'bold': {
-					return createElement('b', token.bold);
+					return [createElement('b', token.bold)];
 				}
 
 				case 'big': {
@@ -95,23 +92,23 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'url': {
-					return createElement(MkUrl, {
+					return [createElement(MkUrl, {
 						props: {
 							url: token.content,
 							target: '_blank'
 						}
-					});
+					})];
 				}
 
 				case 'link': {
-					return createElement('a', {
+					return [createElement('a', {
 						attrs: {
 							class: 'link',
 							href: token.url,
 							target: '_blank',
 							title: token.url
 						}
-					}, token.title);
+					}, token.title)];
 				}
 
 				case 'mention': {
@@ -129,16 +126,16 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'hashtag': {
-					return createElement('a', {
+					return [createElement('a', {
 						attrs: {
 							href: `${url}/tags/${encodeURIComponent(token.hashtag)}`,
 							target: '_blank'
 						}
-					}, token.content);
+					}, token.content)];
 				}
 
 				case 'code': {
-					return createElement('pre', {
+					return [createElement('pre', {
 						class: 'code'
 					}, [
 						createElement('code', {
@@ -146,15 +143,15 @@ export default Vue.component('misskey-flavored-markdown', {
 								innerHTML: token.html
 							}
 						})
-					]);
+					])];
 				}
 
 				case 'inline-code': {
-					return createElement('code', {
+					return [createElement('code', {
 						domProps: {
 							innerHTML: token.html
 						}
-					});
+					})];
 				}
 
 				case 'quote': {
@@ -164,43 +161,45 @@ export default Vue.component('misskey-flavored-markdown', {
 						const x = text2.split('\n')
 							.map(t => [createElement('span', t), createElement('br')]);
 						x[x.length - 1].pop();
-						return createElement('div', {
+						return [createElement('div', {
 							attrs: {
 								class: 'quote'
 							}
-						}, x);
+						}, x)];
 					} else {
-						return createElement('span', {
+						return [createElement('span', {
 							attrs: {
 								class: 'quote'
 							}
-						}, text2.replace(/\n/g, ' '));
+						}, text2.replace(/\n/g, ' '))];
 					}
 				}
 
 				case 'title': {
-					return createElement('div', {
+					return [createElement('div', {
 						attrs: {
 							class: 'title'
 						}
-					}, token.title);
+					}, token.title)];
 				}
 
 				case 'emoji': {
 					const emoji = emojilib.lib[token.emoji];
-					return createElement('span', emoji ? emoji.char : token.content);
+					return [createElement('span', emoji ? emoji.char : token.content)];
 				}
 
 				case 'search': {
-					return createElement(MkGoogle, {
+					return [createElement(MkGoogle, {
 						props: {
 							q: token.query
 						}
-					});
+					})];
 				}
 
 				default: {
 					console.log('unknown ast type:', token.type);
+
+					return [];
 				}
 			}
 		}));
-- 
cgit v1.2.3-freya


From aa1817737eab9289d8b3fb098dde2f3b62f182dd Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Sep 2018 01:06:18 +0900
Subject: Fix glitch

---
 src/client/app/common/views/components/avatar.vue | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index c5ac74e537..a2b0fc6bd3 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -1,15 +1,15 @@
 <template>
-	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
-		<span class="inner" :style="style"></span>
+	<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-if="disableLink && !disablePreview" v-user-preview="user.id" @click="onClick">
+		<span class="inner" :style="icon"></span>
 	</span>
-	<span class="mk-avatar" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
-		<span class="inner" :style="style"></span>
+	<span class="mk-avatar" :style="style" :class="{ cat }" :title="user | acct" v-else-if="disableLink && disablePreview" @click="onClick">
+		<span class="inner" :style="icon"></span>
 	</span>
-	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
-		<span class="inner" :style="style"></span>
+	<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && !disablePreview" v-user-preview="user.id">
+		<span class="inner" :style="icon"></span>
 	</router-link>
-	<router-link class="mk-avatar" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
-		<span class="inner" :style="style"></span>
+	<router-link class="mk-avatar" :style="style" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else-if="!disableLink && disablePreview">
+		<span class="inner" :style="icon"></span>
 	</router-link>
 </template>
 
@@ -42,6 +42,11 @@ export default Vue.extend({
 			return this.user.isCat && this.$store.state.settings.circleIcons;
 		},
 		style(): any {
+			return {
+				borderRadius: this.$store.state.settings.circleIcons ? '100%' : null
+			};
+		},
+		icon(): any {
 			return {
 				backgroundColor: this.lightmode
 					? `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`
-- 
cgit v1.2.3-freya


From f19f92c53886735b5efe166a912209c42a80bfbf Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Sep 2018 01:50:36 +0900
Subject: Clean up: Remove unused import

---
 src/client/app/common/views/pages/follow.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 05c1329f6d..80a870a257 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -32,7 +32,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import parseAcct from '../../../../../misc/acct/parse';
-import getUserName from '../../../../../misc/get-user-name';
 import Progress from '../../../common/scripts/loading';
 
 export default Vue.extend({
-- 
cgit v1.2.3-freya


From 8a8c079b2fd974716f85f859c5aa5b64d4361133 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Sep 2018 02:08:17 +0900
Subject: Improve following/followers view

Closes #2235
---
 .../desktop/views/components/users-list.item.vue   | 126 ++++++++++-----------
 .../app/desktop/views/components/users-list.vue    |  26 +++--
 2 files changed, 73 insertions(+), 79 deletions(-)

(limited to 'src/client')

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 262fd38cd1..f42d577fce 100644
--- a/src/client/app/desktop/views/components/users-list.item.vue
+++ b/src/client/app/desktop/views/components/users-list.item.vue
@@ -1,17 +1,16 @@
 <template>
-<div class="root item">
-	<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>
-			<span class="username">@{{ user | acct }}</span>
-		</header>
-		<div class="body">
-			<p class="followed" v-if="user.isFollowed">%i18n:@followed%</p>
-			<div class="description">{{ user.description }}</div>
+<div class="zvdbznxvfixtmujpsigoccczftvpiwqh">
+	<div class="banner" :style="bannerStyle"></div>
+	<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
+	<div class="body">
+		<router-link :to="user | userPage" class="name">{{ user | userName }}</router-link>
+		<span class="username">@{{ user | acct }}</span>
+		<div class="description">
+			<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
 		</div>
+		<p class="followed" v-if="user.isFollowed">%i18n:@followed%</p>
+		<mk-follow-button :user="user" :size="'big'"/>
 	</div>
-	<mk-follow-button :user="user"/>
 </div>
 </template>
 
@@ -19,76 +18,69 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['user']
+	props: ['user'],
+
+	computed: {
+		bannerStyle(): any {
+			if (this.user.bannerUrl == null) return {};
+			return {
+				backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
+				backgroundImage: `url(${ this.user.bannerUrl })`
+			};
+		}
+	},
 });
 </script>
 
 <style lang="stylus" scoped>
-.root.item
-	padding 16px
+.zvdbznxvfixtmujpsigoccczftvpiwqh
+	$bg = #fff
+
+	margin 16px auto
+	max-width calc(100% - 32px)
 	font-size 16px
+	text-align center
+	background $bg
+	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
 
-	&:after
-		content ""
-		display block
-		clear both
+	> .banner
+		height 100px
+		background-color #f9f4f4
+		background-position center
+		background-size cover
 
 	> .avatar
 		display block
-		float left
-		margin 0 16px 0 0
-		width 58px
-		height 58px
-		border-radius 8px
-
-	> .main
-		float left
-		width calc(100% - 74px)
-
-		> header
-			margin-bottom 2px
+		margin -40px auto 0 auto
+		width 80px
+		height 80px
+		border-radius 100%
+		border solid 4px $bg
 
-			> .name
-				display inline
-				margin 0
-				padding 0
-				color #777
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
+	> .body
+		padding 4px 32px 32px 32px
 
-				&:hover
-					text-decoration underline
+		@media (max-width 400px)
+			padding 4px 16px 16px 16px
 
-			> .username
-				text-align left
-				margin 0 0 0 8px
-				color #ccc
+		> .name
+			font-size 20px
+			font-weight bold
 
-		> .body
-			> .followed
-				display inline-block
-				margin 0 0 4px 0
-				padding 2px 8px
-				vertical-align top
-				font-size 10px
-				color #71afc7
-				background #eefaff
-				border-radius 4px
+		> .username
+			display block
+			opacity 0.7
 
-			> .description
-				cursor default
-				display block
-				margin 0
-				padding 0
-				overflow-wrap break-word
-				font-size 1.1em
-				color #717171
+		> .description
+			margin 16px 0
 
-	> .mk-follow-button
-		position absolute
-		top 16px
-		right 16px
+		> .followed
+			margin 0 0 16px 0
+			padding 0
+			line-height 24px
+			font-size 0.8em
+			color #71afc7
+			background #eefaff
+			border-radius 4px
 
 </style>
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
index 0423db8ed7..05e2f4e5b3 100644
--- a/src/client/app/desktop/views/components/users-list.vue
+++ b/src/client/app/desktop/views/components/users-list.vue
@@ -33,7 +33,7 @@ export default Vue.extend({
 	props: ['fetch', 'count', 'youKnowCount'],
 	data() {
 		return {
-			limit: 30,
+			limit: 20,
 			mode: 'all',
 			fetching: true,
 			moreFetching: false,
@@ -73,10 +73,14 @@ export default Vue.extend({
 
 .mk-users-list
 	height 100%
-	background #fff
+	overflow auto
+	background #eee
 
 	> nav
-		z-index 1
+		z-index 10
+		position sticky
+		top 0
+		background #fff
 		box-shadow 0 1px 0 rgba(#000, 0.1)
 
 		> div
@@ -114,16 +118,14 @@ export default Vue.extend({
 					background #eee
 					border-radius 20px
 
-	> .users
-		height calc(100% - 54px)
-		overflow auto
-
-		> *
-			border-bottom solid 1px rgba(#000, 0.05)
+	> button
+		display block
+		width calc(100% - 32px)
+		margin 16px
+		padding 16px
 
-			> *
-				max-width 600px
-				margin 0 auto
+		&:hover
+			background rgba(#000, 0.1)
 
 	> .no
 		margin 0
-- 
cgit v1.2.3-freya


From 700f8c9bb4899e684da0cb218f848a60ac4260ab Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Sep 2018 17:44:36 +0900
Subject: CWが適用されない箇所を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/desktop/views/components/note-detail.vue   | 116 ++++++++++++++-------
 .../app/desktop/views/components/note-preview.vue  |  50 +++++++--
 .../desktop/views/components/notes.note.sub.vue    |  63 +++++++++--
 .../app/desktop/views/components/notes.note.vue    |  13 ++-
 .../app/desktop/views/components/renote-form.vue   |   4 +-
 .../app/desktop/views/pages/deck/deck.note.vue     |   2 +-
 .../app/mobile/views/components/note-detail.vue    | 111 +++++++++++++-------
 .../app/mobile/views/components/note-preview.vue   |  58 +++++++++--
 .../app/mobile/views/components/note.sub.vue       |  60 ++++++++---
 src/client/app/mobile/views/components/note.vue    |   6 +-
 .../app/mobile/views/components/post-form.vue      |   6 +-
 11 files changed, 361 insertions(+), 128 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 1e068bd1cd..a0ad089f92 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -37,20 +37,26 @@
 			</router-link>
 		</header>
 		<div class="body">
-			<div class="text">
-				<span v-if="p.isHidden" style="opacity: 0.5">%i18n:@private%</span>
-				<span v-if="p.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
-				<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
-			</div>
-			<div class="files" v-if="p.files.length > 0">
-				<mk-media-list :media-list="p.files" :raw="true"/>
-			</div>
-			<mk-poll v-if="p.poll" :note="p"/>
-			<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
-			<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</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 ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+			</p>
+			<div class="content" v-show="p.cw == null || showContent">
+				<div class="text">
+					<span v-if="p.isHidden" style="opacity: 0.5">%i18n:@private%</span>
+					<span v-if="p.deletedAt" style="opacity: 0.5">%i18n:@deleted%</span>
+					<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
+				</div>
+				<div class="files" v-if="p.files.length > 0">
+					<mk-media-list :media-list="p.files" :raw="true"/>
+				</div>
+				<mk-poll v-if="p.poll" :note="p"/>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
+				<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</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>
 		<footer>
@@ -105,6 +111,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			showContent: false,
 			conversation: [],
 			conversationFetching: false,
 			replies: []
@@ -118,17 +125,21 @@ export default Vue.extend({
 				this.note.fileIds.length == 0 &&
 				this.note.poll == null);
 		},
+
 		p(): any {
 			return this.isRenote ? this.note.renote : this.note;
 		},
+
 		reactionsCount(): number {
 			return this.p.reactionCounts
 				? sum(Object.values(this.p.reactionCounts))
 				: 0;
 		},
+
 		title(): string {
 			return new Date(this.p.createdAt).toLocaleString();
 		},
+
 		urls(): string[] {
 			if (this.p.text) {
 				const ast = parse(this.p.text);
@@ -183,22 +194,26 @@ export default Vue.extend({
 				this.conversation = conversation.reverse();
 			});
 		},
+
 		reply() {
 			(this as any).os.new(MkPostFormWindow, {
 				reply: this.p
 			});
 		},
+
 		renote() {
 			(this as any).os.new(MkRenoteFormWindow, {
 				note: this.p
 			});
 		},
+
 		react() {
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				note: this.p
 			});
 		},
+
 		menu() {
 			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
@@ -326,37 +341,62 @@ root(isDark)
 		> .body
 			padding 8px 0
 
-			> .text
+			> .cw
 				cursor default
 				display block
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				font-size 1.5em
 				color isDark ? #fff : #717171
 
-			> .renote
-				margin 8px 0
-
-				> .mk-note-preview
-					padding 16px
-					border dashed 1px #c0dac6
-					border-radius 8px
-
-			> .location
-				margin 4px 0
-				font-size 12px
-				color #ccc
-
-			> .map
-				width 100%
-				height 300px
-
-				&:empty
-					display none
-
-			> .mk-url-preview
-				margin-top 8px
+				> .text
+					margin-right 8px
+
+				> .toggle
+					display inline-block
+					padding 4px 8px
+					font-size 0.7em
+					color isDark ? #393f4f : #fff
+					background isDark ? #687390 : #b1b9c1
+					border-radius 2px
+					cursor pointer
+					user-select none
+
+					&:hover
+						background isDark ? #707b97 : #bbc4ce
+
+			> .content
+				> .text
+					cursor default
+					display block
+					margin 0
+					padding 0
+					overflow-wrap break-word
+					font-size 1.5em
+					color isDark ? #fff : #717171
+
+				> .renote
+					margin 8px 0
+
+					> *
+						padding 16px
+						border dashed 1px #c0dac6
+						border-radius 8px
+
+				> .location
+					margin 4px 0
+					font-size 12px
+					color #ccc
+
+				> .map
+					width 100%
+					height 300px
+
+					&:empty
+						display none
+
+				> .mk-url-preview
+					margin-top 8px
 
 		> footer
 			font-size 1.2em
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index c723db98c0..e7e878849b 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -1,10 +1,16 @@
 <template>
-<div class="mk-note-preview" :title="title">
+<div class="qiziqtywpuaucsgarwajitwaakggnisj" :title="title">
 	<mk-avatar class="avatar" :user="note.user" v-if="!mini"/>
 	<div class="main">
 		<mk-note-header class="header" :note="note" :mini="true"/>
 		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
+			<p v-if="note.cw != null" class="cw">
+				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
+				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+			</p>
+			<div class="content" v-show="note.cw == null || showContent">
+				<mk-sub-note-content class="text" :note="note"/>
+			</div>
 		</div>
 	</div>
 </div>
@@ -25,6 +31,13 @@ export default Vue.extend({
 			default: false
 		}
 	},
+
+	data() {
+		return {
+			showContent: false
+		};
+	},
+
 	computed: {
 		title(): string {
 			return new Date(this.note.createdAt).toLocaleString();
@@ -52,16 +65,41 @@ root(isDark)
 
 		> .body
 
-			> .text
+			> .cw
 				cursor default
+				display block
 				margin 0
 				padding 0
-				color isDark ? #959ba7 : #717171
+				overflow-wrap break-word
+				color isDark ? #fff : #717171
+
+				> .text
+					margin-right 8px
+
+				> .toggle
+					display inline-block
+					padding 4px 8px
+					font-size 0.7em
+					color isDark ? #393f4f : #fff
+					background isDark ? #687390 : #b1b9c1
+					border-radius 2px
+					cursor pointer
+					user-select none
+
+					&:hover
+						background isDark ? #707b97 : #bbc4ce
+
+			> .content
+				> .text
+					cursor default
+					margin 0
+					padding 0
+					color isDark ? #959ba7 : #717171
 
-.mk-note-preview[data-darkmode]
+.qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
 	root(true)
 
-.mk-note-preview:not([data-darkmode])
+.qiziqtywpuaucsgarwajitwaakggnisj: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 fc851e83e9..15944bebd1 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -1,10 +1,16 @@
 <template>
-<div class="sub" :title="title">
+<div class="tkfdzaxtkdeianobciwadajxzbddorql" :title="title">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
 		<mk-note-header class="header" :note="note"/>
 		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
+			<p v-if="note.cw != null" class="cw">
+				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
+				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+			</p>
+			<div class="content" v-show="note.cw == null || showContent">
+				<mk-sub-note-content class="text" :note="note"/>
+			</div>
 		</div>
 	</div>
 </div>
@@ -14,7 +20,19 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['note'],
+	props: {
+		note: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			showContent: false
+		};
+	},
+
 	computed: {
 		title(): string {
 			return new Date(this.note.createdAt).toLocaleString();
@@ -48,20 +66,45 @@ root(isDark)
 
 		> .body
 
-			> .text
+			> .cw
 				cursor default
+				display block
 				margin 0
 				padding 0
-				color isDark ? #959ba7 : #717171
+				overflow-wrap break-word
+				color isDark ? #fff : #717171
+
+				> .text
+					margin-right 8px
+
+				> .toggle
+					display inline-block
+					padding 4px 8px
+					font-size 0.7em
+					color isDark ? #393f4f : #fff
+					background isDark ? #687390 : #b1b9c1
+					border-radius 2px
+					cursor pointer
+					user-select none
+
+					&:hover
+						background isDark ? #707b97 : #bbc4ce
+
+			> .content
+				> .text
+					cursor default
+					margin 0
+					padding 0
+					color isDark ? #959ba7 : #717171
 
-				pre
-					max-height 120px
-					font-size 80%
+					pre
+						max-height 120px
+						font-size 80%
 
-.sub[data-darkmode]
+.tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
 	root(true)
 
-.sub:not([data-darkmode])
+.tkfdzaxtkdeianobciwadajxzbddorql: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 75d6ebd628..e1bc8be5a5 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -34,9 +34,7 @@
 					<mk-poll v-if="p.poll" :note="p" ref="pollViewer"/>
 					<a class="location" v-if="p.geo" :href="`https://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 class="renote" v-if="p.renote"><mk-note-preview :note="p.renote"/></div>
 					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				</div>
 			</div>
@@ -96,7 +94,12 @@ export default Vue.extend({
 		XSub
 	},
 
-	props: ['note'],
+	props: {
+		note: {
+			type: Object,
+			required: true
+		}
+	},
 
 	data() {
 		return {
@@ -469,7 +472,7 @@ root(isDark)
 					> .renote
 						margin 8px 0
 
-						> .mk-note-preview
+						> *
 							padding 16px
 							border dashed 1px isDark ? #4e945e : #c0dac6
 							border-radius 8px
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index 38eab3362f..c5192ecaac 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-renote-form">
-	<mk-note-preview :note="note"/>
+	<mk-note-preview class="preview" :note="note"/>
 	<template v-if="!quote">
 		<footer>
 			<a class="quote" v-if="!quote" @click="onQuote">%i18n:@quote%</a>
@@ -61,7 +61,7 @@ export default Vue.extend({
 
 root(isDark)
 
-	> .mk-note-preview
+	> .preview
 		margin 16px 22px
 
 	> footer
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index b42df1f347..ec4b9182b7 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -394,7 +394,7 @@ root(isDark)
 					> .renote
 						margin 8px 0
 
-						> .mk-note-preview
+						> *
 							padding 16px
 							border dashed 1px isDark ? #4e945e : #c0dac6
 							border-radius 8px
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index d48d9a7790..752e44fd60 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -35,20 +35,26 @@
 			</div>
 		</header>
 		<div class="body">
-			<div class="text">
-				<span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
-				<span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span>
-				<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
-			</div>
-			<div class="files" v-if="p.files.length > 0">
-				<mk-media-list :media-list="p.files" :raw="true"/>
-			</div>
-			<mk-poll v-if="p.poll" :note="p"/>
-			<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
-			<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</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 ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+			</p>
+			<div class="content" v-show="p.cw == null || showContent">
+				<div class="text">
+					<span v-if="p.isHidden" style="opacity: 0.5">(%i18n:@private%)</span>
+					<span v-if="p.deletedAt" style="opacity: 0.5">(%i18n:@deleted%)</span>
+					<misskey-flavored-markdown v-if="p.text" :text="p.text" :i="$store.state.i"/>
+				</div>
+				<div class="files" v-if="p.files.length > 0">
+					<mk-media-list :media-list="p.files" :raw="true"/>
+				</div>
+				<mk-poll v-if="p.poll" :note="p"/>
+				<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
+				<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</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>
 		<router-link class="time" :to="p | notePage">
@@ -104,6 +110,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			showContent: false,
 			conversation: [],
 			conversationFetching: false,
 			replies: []
@@ -334,44 +341,70 @@ root(isDark)
 		> .body
 			padding 8px 0
 
-			> .text
+			> .cw
+				cursor default
 				display block
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				font-size 16px
 				color isDark ? #fff : #717171
 
-				@media (min-width 500px)
-					font-size 24px
+				> .text
+					margin-right 8px
+
+				> .toggle
+					display inline-block
+					padding 4px 8px
+					font-size 0.7em
+					color isDark ? #393f4f : #fff
+					background isDark ? #687390 : #b1b9c1
+					border-radius 2px
+					cursor pointer
+					user-select none
+
+					&:hover
+						background isDark ? #707b97 : #bbc4ce
 
-			> .renote
-				margin 8px 0
+			> .content
 
-				> .mk-note-preview
-					padding 16px
-					border dashed 1px #c0dac6
-					border-radius 8px
+				> .text
+					display block
+					margin 0
+					padding 0
+					overflow-wrap break-word
+					font-size 16px
+					color isDark ? #fff : #717171
 
-			> .location
-				margin 4px 0
-				font-size 12px
-				color #ccc
+					@media (min-width 500px)
+						font-size 24px
 
-			> .map
-				width 100%
-				height 200px
+				> .renote
+					margin 8px 0
 
-				&:empty
-					display none
+					> *
+						padding 16px
+						border dashed 1px #c0dac6
+						border-radius 8px
 
-			> .mk-url-preview
-				margin-top 8px
+				> .location
+					margin 4px 0
+					font-size 12px
+					color #ccc
 
-			> .files
-				> img
-					display block
-					max-width 100%
+				> .map
+					width 100%
+					height 200px
+
+					&:empty
+						display none
+
+				> .mk-url-preview
+					margin-top 8px
+
+				> .files
+					> img
+						display block
+						max-width 100%
 
 		> .time
 			font-size 16px
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 5d56d2d326..a85434407f 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -1,10 +1,16 @@
 <template>
-<div class="mk-note-preview" :class="{ smart: $store.state.device.postStyle == 'smart' }">
+<div class="yohlumlkhizgfkvvscwfcrcggkotpvry" :class="{ smart: $store.state.device.postStyle == 'smart' }">
 	<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle != 'smart'"/>
 	<div class="main">
 		<mk-note-header class="header" :note="note" :mini="true"/>
 		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
+			<p v-if="note.cw != null" class="cw">
+				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
+				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+			</p>
+			<div class="content" v-show="note.cw == null || showContent">
+				<mk-sub-note-content class="text" :note="note"/>
+			</div>
 		</div>
 	</div>
 </div>
@@ -14,7 +20,18 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['note']
+	props: {
+		note: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			showContent: false
+		};
+	}
 });
 </script>
 
@@ -65,16 +82,41 @@ root(isDark)
 
 		> .body
 
-			> .text
+			> .cw
 				cursor default
+				display block
 				margin 0
 				padding 0
-				color isDark ? #959ba7 : #717171
-
-.mk-note-preview[data-darkmode]
+				overflow-wrap break-word
+				color isDark ? #fff : #717171
+
+				> .text
+					margin-right 8px
+
+				> .toggle
+					display inline-block
+					padding 4px 8px
+					font-size 0.7em
+					color isDark ? #393f4f : #fff
+					background isDark ? #687390 : #b1b9c1
+					border-radius 2px
+					cursor pointer
+					user-select none
+
+					&:hover
+						background isDark ? #707b97 : #bbc4ce
+
+			> .content
+				> .text
+					cursor default
+					margin 0
+					padding 0
+					color isDark ? #959ba7 : #717171
+
+.yohlumlkhizgfkvvscwfcrcggkotpvry[data-darkmode]
 	root(true)
 
-.mk-note-preview:not([data-darkmode])
+.yohlumlkhizgfkvvscwfcrcggkotpvry: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 a68aec40a1..77527a1498 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -1,10 +1,16 @@
 <template>
-<div class="sub" :class="{ smart: $store.state.device.postStyle == 'smart' }">
+<div class="zlrxdaqttccpwhpaagdmkawtzklsccam" :class="{ smart: $store.state.device.postStyle == 'smart' }">
 	<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle != 'smart'"/>
 	<div class="main">
 		<mk-note-header class="header" :note="note" :mini="true"/>
 		<div class="body">
-			<mk-sub-note-content class="text" :note="note"/>
+			<p v-if="note.cw != null" class="cw">
+				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
+				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+			</p>
+			<div class="content" v-show="note.cw == null || showContent">
+				<mk-sub-note-content class="text" :note="note"/>
+			</div>
 		</div>
 	</div>
 </div>
@@ -24,6 +30,12 @@ export default Vue.extend({
 			type: Boolean,
 			default: true
 		}
+	},
+
+	data() {
+		return {
+			showContent: false
+		};
 	}
 });
 </script>
@@ -77,20 +89,44 @@ root(isDark)
 			margin-bottom 2px
 
 		> .body
-
-			> .text
+			> .cw
+				cursor default
+				display block
 				margin 0
 				padding 0
-				color isDark ? #959ba7 : #717171
-
-				pre
-					max-height 120px
-					font-size 80%
-
-.sub[data-darkmode]
+				overflow-wrap break-word
+				color isDark ? #fff : #717171
+
+				> .text
+					margin-right 8px
+
+				> .toggle
+					display inline-block
+					padding 4px 8px
+					font-size 0.7em
+					color isDark ? #393f4f : #fff
+					background isDark ? #687390 : #b1b9c1
+					border-radius 2px
+					cursor pointer
+					user-select none
+
+					&:hover
+						background isDark ? #707b97 : #bbc4ce
+
+			> .content
+				> .text
+					margin 0
+					padding 0
+					color isDark ? #959ba7 : #717171
+
+					pre
+						max-height 120px
+						font-size 80%
+
+.zlrxdaqttccpwhpaagdmkawtzklsccam[data-darkmode]
 	root(true)
 
-.sub:not([data-darkmode])
+.zlrxdaqttccpwhpaagdmkawtzklsccam: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 907e728984..c608451e51 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -35,9 +35,7 @@
 					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 					<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</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 class="renote" v-if="p.renote"><mk-note-preview :note="p.renote"/></div>
 				</div>
 				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
 			</div>
@@ -436,7 +434,7 @@ root(isDark)
 					> .renote
 						margin 8px 0
 
-						> .mk-note-preview
+						> *
 							padding 16px
 							border dashed 1px isDark ? #4e945e : #c0dac6
 							border-radius 8px
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 212451a5bc..e53ba48ffb 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -10,8 +10,8 @@
 			</div>
 		</header>
 		<div class="form">
-			<mk-note-preview v-if="reply" :note="reply"/>
-			<mk-note-preview v-if="renote" :note="renote"/>
+			<mk-note-preview class="preview" v-if="reply" :note="reply"/>
+			<mk-note-preview class="preview" v-if="renote" :note="renote"/>
 			<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">+%i18n:@add-visible-user%</a>
@@ -387,7 +387,7 @@ root(isDark)
 			max-width 500px
 			margin 0 auto
 
-			> .mk-note-preview
+			> .preview
 				padding 16px
 
 			> .visibleUsers
-- 
cgit v1.2.3-freya


From 03e1d3fbc45252b05bf5abdb8ffee28297400acc Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Sep 2018 18:01:50 +0900
Subject: Refactor

---
 locales/ja-JP.yml                                  |  8 ++--
 .../app/common/views/components/cw-button.vue      | 44 ++++++++++++++++++++++
 src/client/app/common/views/components/index.ts    |  2 +
 .../app/desktop/views/components/note-detail.vue   | 15 +-------
 .../app/desktop/views/components/note-preview.vue  | 15 +-------
 .../desktop/views/components/notes.note.sub.vue    | 15 +-------
 .../app/desktop/views/components/notes.note.vue    | 15 +-------
 .../app/desktop/views/pages/deck/deck.note.vue     |  2 +-
 .../app/mobile/views/components/note-detail.vue    | 15 +-------
 .../app/mobile/views/components/note-preview.vue   | 15 +-------
 .../app/mobile/views/components/note.sub.vue       | 15 +-------
 src/client/app/mobile/views/components/note.vue    | 15 +-------
 12 files changed, 59 insertions(+), 117 deletions(-)
 create mode 100644 src/client/app/common/views/components/cw-button.vue

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 9404cd6ba6..98c2f5fe45 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -273,6 +273,10 @@ common/views/components/connect-failed.troubleshooter.vue:
   flush: "キャッシュの削除"
   set-version: "バージョン指定"
 
+common/views/components/cw-button.vue:
+  hide: "隠す"
+  show: "もっと見る"
+
 common/views/components/messaging.vue:
   search-user: "ユーザーを探す"
   you: "あなた"
@@ -666,8 +670,6 @@ desktop/views/components/notes.note.vue:
   detail: "詳細"
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
-  hide: "隠す"
-  see-more: "もっと見る"
 
 desktop/views/components/notes.vue:
   error: "読み込みに失敗しました。"
@@ -1192,8 +1194,6 @@ mobile/views/components/friends-maker.vue:
 
 mobile/views/components/note.vue:
   reposted-by: "{}がRenote"
-  more: "もっと見る"
-  less: "隠す"
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
   location: "位置情報"
diff --git a/src/client/app/common/views/components/cw-button.vue b/src/client/app/common/views/components/cw-button.vue
new file mode 100644
index 0000000000..06087edc93
--- /dev/null
+++ b/src/client/app/common/views/components/cw-button.vue
@@ -0,0 +1,44 @@
+<template>
+<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? '%i18n:@hide%' : '%i18n:@show%' }}</button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		value: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	methods: {
+		toggle() {
+			this.$emit('input', !this.value);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	display inline-block
+	padding 4px 8px
+	font-size 0.7em
+	color isDark ? #393f4f : #fff
+	background isDark ? #687390 : #b1b9c1
+	border-radius 2px
+	cursor pointer
+	user-select none
+
+	&:hover
+		background isDark ? #707b97 : #bbc4ce
+
+.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
+	root(true)
+
+.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 75c6086d7c..6f8152cea2 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import cwButton from './cw-button.vue';
 import tagCloud from './tag-cloud.vue';
 import trends from './trends.vue';
 import analogClock from './analog-clock.vue';
@@ -42,6 +43,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-cw-button', cwButton);
 Vue.component('mk-tag-cloud', tagCloud);
 Vue.component('mk-trends', trends);
 Vue.component('mk-analog-clock', analogClock);
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index a0ad089f92..7307eeb7dc 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 @@
 		<div class="body">
 			<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 ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="p.cw == null || showContent">
 				<div class="text">
@@ -352,19 +352,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					cursor default
diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index e7e878849b..6c84165356 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>
@@ -76,19 +76,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					cursor default
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 15944bebd1..8f01ddd43c 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>
@@ -77,19 +77,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					cursor default
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index e1bc8be5a5..46a866f9a7 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -18,7 +18,7 @@
 			<div class="body">
 				<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 ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+					<mk-cw-button v-model="showContent"/>
 				</p>
 				<div class="content" v-show="p.cw == null || showContent">
 					<div class="text">
@@ -401,19 +401,6 @@ root(isDark)
 					> .text
 						margin-right 8px
 
-					> .toggle
-						display inline-block
-						padding 4px 8px
-						font-size 0.7em
-						color isDark ? #393f4f : #fff
-						background isDark ? #687390 : #b1b9c1
-						border-radius 2px
-						cursor pointer
-						user-select none
-
-						&:hover
-							background isDark ? #707b97 : #bbc4ce
-
 				> .content
 
 					> .text
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index ec4b9182b7..980fb03136 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -18,7 +18,7 @@
 			<div class="body">
 				<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 ? '%i18n:@less%' : '%i18n:@more%' }}</span>
+					<mk-cw-button v-model="showContent"/>
 				</p>
 				<div class="content" v-show="p.cw == null || showContent">
 					<div class="text">
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 752e44fd60..68be9f8ac4 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 @@
 		<div class="body">
 			<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 ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="p.cw == null || showContent">
 				<div class="text">
@@ -352,19 +352,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 
 				> .text
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index a85434407f..4c03593a9e 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>
@@ -93,19 +93,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					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 77527a1498..c25f827dad 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<span class="toggle" @click="showContent = !showContent">{{ showContent ? '%i18n:@hide%' : '%i18n:@see-more%' }}</span>
+				<mk-cw-button v-model="showContent"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<mk-sub-note-content class="text" :note="note"/>
@@ -100,19 +100,6 @@ root(isDark)
 				> .text
 					margin-right 8px
 
-				> .toggle
-					display inline-block
-					padding 4px 8px
-					font-size 0.7em
-					color isDark ? #393f4f : #fff
-					background isDark ? #687390 : #b1b9c1
-					border-radius 2px
-					cursor pointer
-					user-select none
-
-					&:hover
-						background isDark ? #707b97 : #bbc4ce
-
 			> .content
 				> .text
 					margin 0
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index c608451e51..8787b39a93 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -18,7 +18,7 @@
 			<div class="body">
 				<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 ? '%i18n:@less%' : '%i18n:@more%' }}</span>
+					<mk-cw-button v-model="showContent"/>
 				</p>
 				<div class="content" v-show="p.cw == null || showContent">
 					<div class="text">
@@ -350,19 +350,6 @@ root(isDark)
 					> .text
 						margin-right 8px
 
-					> .toggle
-						display inline-block
-						padding 4px 8px
-						font-size 0.7em
-						color isDark ? #393f4f : #fff
-						background isDark ? #687390 : #b1b9c1
-						border-radius 2px
-						cursor pointer
-						user-select none
-
-						&:hover
-							background isDark ? #707b97 : #bbc4ce
-
 				> .content
 
 					> .text
-- 
cgit v1.2.3-freya


From 683d3a70b231c97fda58634b1852444097f47960 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Sep 2018 18:23:44 +0900
Subject: #2562 #2563

---
 locales/ja-JP.yml                                  |  5 +++-
 .../views/pages/settings/settings.profile.vue      | 31 +++++++++++++++++-----
 2 files changed, 29 insertions(+), 7 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 98c2f5fe45..5b6fe6bb6f 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -880,7 +880,7 @@ desktop/views/components/settings.profile.vue:
   birthday: "誕生日"
   save: "保存"
   locked-account: "アカウントの保護"
-  is-locked: "投稿を非公開にする"
+  is-locked: "フォローを承認制にする"
   other: "その他"
   is-bot: "このアカウントはBotです"
   is-cat: "このアカウントはCatです"
@@ -1353,6 +1353,9 @@ mobile/views/pages/settings/settings.profile.vue:
   avatar: "アイコン"
   banner: "バナー"
   is-cat: "このアカウントはCatです"
+  is-locked: "フォローを承認制にする"
+  advanced: "その他"
+  privacy: "プライバシー"
   save: "保存"
   saved: "プロフィールを保存しました"
   uploading: "アップロード中"
diff --git a/src/client/app/mobile/views/pages/settings/settings.profile.vue b/src/client/app/mobile/views/pages/settings/settings.profile.vue
index 3efeac3da5..6f5ac9ae93 100644
--- a/src/client/app/mobile/views/pages/settings/settings.profile.vue
+++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue
@@ -40,11 +40,25 @@
 				<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
 			</ui-input>
 
-			<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
-
-			<ui-button @click="save">%i18n:@save%</ui-button>
+			<ui-button @click="save(true)">%i18n:@save%</ui-button>
 		</ui-form>
 	</section>
+
+	<section>
+		<header>%i18n:@advanced%</header>
+
+		<div>
+			<ui-switch v-model="isCat" @change="save(false)">%i18n:@is-cat%</ui-switch>
+		</div>
+	</section>
+
+	<section>
+		<header>%i18n:@privacy%</header>
+
+		<div>
+			<ui-switch v-model="isLocked" @change="save(false)">%i18n:@is-locked%</ui-switch>
+		</div>
+	</section>
 </ui-card>
 </template>
 
@@ -64,6 +78,7 @@ export default Vue.extend({
 			avatarId: null,
 			bannerId: null,
 			isCat: false,
+			isLocked: false,
 			saving: false,
 			avatarUploading: false,
 			bannerUploading: false
@@ -79,6 +94,7 @@ export default Vue.extend({
 		this.avatarId = this.$store.state.i.avatarId;
 		this.bannerId = this.$store.state.i.bannerId;
 		this.isCat = this.$store.state.i.isCat;
+		this.isLocked = this.$store.state.i.isLocked;
 	},
 
 	methods: {
@@ -126,7 +142,7 @@ export default Vue.extend({
 				});
 		},
 
-		save() {
+		save(notify) {
 			this.saving = true;
 
 			(this as any).api('i/update', {
@@ -136,7 +152,8 @@ export default Vue.extend({
 				birthday: this.birthday || null,
 				avatarId: this.avatarId,
 				bannerId: this.bannerId,
-				isCat: this.isCat
+				isCat: this.isCat,
+				isLocked: this.isLocked
 			}).then(i => {
 				this.saving = false;
 				this.$store.state.i.avatarId = i.avatarId;
@@ -144,7 +161,9 @@ export default Vue.extend({
 				this.$store.state.i.bannerId = i.bannerId;
 				this.$store.state.i.bannerUrl = i.bannerUrl;
 
-				alert('%i18n:@saved%');
+				if (notify) {
+					alert('%i18n:@saved%');
+				}
 			});
 		}
 	}
-- 
cgit v1.2.3-freya


From 684301948122d333d1030b4ce579a5596908ef04 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 14 Sep 2018 09:15:37 +0900
Subject: メモリリークを承知でいくつかの重要な部分のアニメーションを有効化
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index f19ecf8f9a..26aa0c8dea 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -10,8 +10,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!--<transition-group name="mk-notes" class="transition">-->
-	<div class="notes">
+	<transition-group name="mk-notes" class="notes transition" tag="div">
 		<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">
@@ -19,8 +18,7 @@
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</div>
-	<!--</transition-group>-->
+	</transition-group>
 
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index bfe71903e4..9d0e73adef 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -2,8 +2,7 @@
 <div class="mk-notifications">
 	<div class="notifications" v-if="notifications.length != 0">
 		<!-- トランジションを有効にするとなぜかメモリリークする -->
-		<!-- <transition-group name="mk-notifications" class="transition"> -->
-		<div>
+		<transition-group name="mk-notifications" class="transition" tag="div">
 			<template v-for="(notification, i) in _notifications">
 				<div class="notification" :class="notification.type" :key="notification.id">
 					<mk-time :time="notification.createdAt"/>
@@ -97,8 +96,7 @@
 					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 				</p>
 			</template>
-		</div>
-		<!-- </transition-group> -->
+		</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%' }}
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index ce2670dc52..17806f062e 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -14,8 +14,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!-- <transition-group name="mk-notes" class="transition"> -->
-	<div class="transition">
+	<transition-group name="mk-notes" class="transition" tag="div">
 		<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">
@@ -23,8 +22,7 @@
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</div>
-	<!-- </transition-group> -->
+	</transition-group>
 
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-- 
cgit v1.2.3-freya


From 4b3ece439e04a1e03825f9cbf88b9885771f5119 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 14 Sep 2018 12:39:11 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/notify.vue b/src/client/app/mobile/views/components/notify.vue
index 7a2f7bfedc..307fb08cfa 100644
--- a/src/client/app/mobile/views/components/notify.vue
+++ b/src/client/app/mobile/views/components/notify.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 	$height = 78px
 
 	position fixed
-	z-index 1024
+	z-index 10000
 	left 0
 	right 0
 	width 100%
-- 
cgit v1.2.3-freya


From 34a5adf9517f109626801e576733a65002cde87c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 14 Sep 2018 15:14:59 +0900
Subject: 常に閲覧注意の画像を表示するオプションを追加 & リファクタリング
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |   2 +
 .../app/desktop/views/components/media-image.vue   |   2 +-
 .../app/desktop/views/components/settings.vue      | 258 ++++++++++-----------
 .../app/mobile/views/components/media-image.vue    |   2 +-
 src/client/app/mobile/views/pages/settings.vue     | 170 ++++++--------
 src/client/app/store.ts                            |   1 +
 6 files changed, 199 insertions(+), 236 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5b6fe6bb6f..aaa06bdd1d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -116,6 +116,8 @@ common:
   use-contrast-reversi-stones: "リバーシのアイコンにコントラストを付ける"
   verified-user: "公式アカウント"
   disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"
+  always-show-nsfw: "常に閲覧注意のメディアを表示する"
+  this-setting-is-this-device-only: "このデバイスのみ"
 
   do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
 
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 0284872c68..66ac389f64 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="image.isSensitive && hide" @click="hide = false">
+<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="image.isSensitive && hide && !$store.state.device.alwaysShowNsfw" @click="hide = false">
 	<div>
 		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
 		<span>%i18n:@click-to-show%</span>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 3998adf601..8e2905e73b 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>%i18n:@behaviour%</h1>
-			<mk-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll" text="%i18n:@fetch-on-scroll%">
+			<mk-switch v-model="fetchOnScroll" text="%i18n:@fetch-on-scroll%">
 				<span>%i18n:@fetch-on-scroll-desc%</span>
 			</mk-switch>
 			<mk-switch v-model="autoPopout" text="%i18n:@auto-popout%">
@@ -29,7 +29,7 @@
 
 			<section>
 				<header>%i18n:@note-visibility%</header>
-				<mk-switch v-model="$store.state.settings.rememberNoteVisibility" @change="onChangeRememberNoteVisibility" text="%i18n:@remember-note-visibility%"/>
+				<mk-switch v-model="rememberNoteVisibility" text="%i18n:@remember-note-visibility%"/>
 				<section>
 					<header>%i18n:@default-note-visibility%</header>
 					<ui-select v-model="defaultNoteVisibility">
@@ -59,24 +59,25 @@
 				<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
-				<mk-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons" text="%i18n:@circle-icons%"/>
-				<mk-switch v-model="$store.state.settings.contrastedAcct" @change="onChangeContrastedAcct" text="%i18n:@contrasted-acct%"/>
-				<mk-switch v-model="$store.state.settings.gradientWindowHeader" @change="onChangeGradientWindowHeader" text="%i18n:@gradient-window-header%"/>
-				<mk-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi" text="%i18n:common.i-like-sushi%"/>
+				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
+				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
+				<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
+				<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/>
 			</div>
-			<mk-switch v-model="$store.state.settings.showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/>
-			<mk-switch v-model="$store.state.settings.suggestRecentHashtags" @change="onChangeSuggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/>
-			<mk-switch v-model="$store.state.settings.showClockOnHeader" @change="onChangeShowClockOnHeader" text="%i18n:@show-clock-on-header%"/>
-			<mk-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget" text="%i18n:@show-reply-target%"/>
-			<mk-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes" text="%i18n:@show-my-renotes%"/>
-			<mk-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/>
-			<mk-switch v-model="$store.state.settings.showLocalRenotes" @change="onChangeShowLocalRenotes" text="%i18n:@show-local-renotes%"/>
-			<mk-switch v-model="$store.state.settings.showMaps" @change="onChangeShowMaps" text="%i18n:@show-maps%">
+			<mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/>
+			<mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/>
+			<mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/>
+			<mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/>
+			<mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/>
+			<mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/>
+			<mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/>
+			<mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/>
+			<mk-switch v-model="showMaps" text="%i18n:@show-maps%">
 				<span>%i18n:@show-maps-desc%</span>
 			</mk-switch>
-			<mk-switch v-model="$store.state.settings.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/>
-			<mk-switch v-model="$store.state.settings.games.reversi.showBoardLabels" @change="onChangeReversiBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
-			<mk-switch v-model="$store.state.settings.games.reversi.useContrastStones" @change="onChangeUseContrastReversiStones" text="%i18n:common.use-contrast-reversi-stones%"/>
+			<mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/>
+			<mk-switch v-model="games_reversi_showBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
+			<mk-switch v-model="games_reversi_useContrastStones" text="%i18n:common.use-contrast-reversi-stones%"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -98,7 +99,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@mobile%</h1>
-			<mk-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile" text="%i18n:@disable-via-mobile%"/>
+			<mk-switch v-model="disableViaMobile" text="%i18n:@disable-via-mobile%"/>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -255,11 +256,6 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'apiViaStream', value }); }
 		},
 
-		defaultNoteVisibility: {
-			get() { return this.$store.state.settings.defaultNoteVisibility; },
-			set(value) { this.$store.commit('settings/set', { key: 'defaultNoteVisibility', value }); }
-		},
-
 		autoPopout: {
 			get() { return this.$store.state.device.autoPopout; },
 			set(value) { this.$store.commit('device/set', { key: 'autoPopout', value }); }
@@ -298,7 +294,107 @@ export default Vue.extend({
 		enableExperimentalFeatures: {
 			get() { return this.$store.state.device.enableExperimentalFeatures; },
 			set(value) { this.$store.commit('device/set', { key: 'enableExperimentalFeatures', value }); }
-		}
+		},
+
+		alwaysShowNsfw: {
+			get() { return this.$store.state.device.alwaysShowNsfw; },
+			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
+		},
+
+		fetchOnScroll: {
+			get() { return this.$store.state.settings.fetchOnScroll; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
+		},
+
+		rememberNoteVisibility: {
+			get() { return this.$store.state.settings.rememberNoteVisibility; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'rememberNoteVisibility', value }); }
+		},
+
+		defaultNoteVisibility: {
+			get() { return this.$store.state.settings.defaultNoteVisibility; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
+		},
+
+		showReplyTarget: {
+			get() { return this.$store.state.settings.showReplyTarget; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
+		},
+
+		showMyRenotes: {
+			get() { return this.$store.state.settings.showMyRenotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showMyRenotes', value }); }
+		},
+
+		showRenotedMyNotes: {
+			get() { return this.$store.state.settings.showRenotedMyNotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showRenotedMyNotes', value }); }
+		},
+
+		showLocalRenotes: {
+			get() { return this.$store.state.settings.showLocalRenotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showLocalRenotes', value }); }
+		},
+
+		showPostFormOnTopOfTl: {
+			get() { return this.$store.state.settings.showPostFormOnTopOfTl; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showPostFormOnTopOfTl', value }); }
+		},
+
+		suggestRecentHashtags: {
+			get() { return this.$store.state.settings.suggestRecentHashtags; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'suggestRecentHashtags', value }); }
+		},
+
+		showClockOnHeader: {
+			get() { return this.$store.state.settings.showClockOnHeader; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showClockOnHeader', value }); }
+		},
+
+		showMaps: {
+			get() { return this.$store.state.settings.showMaps; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showMaps', value }); }
+		},
+
+		circleIcons: {
+			get() { return this.$store.state.settings.circleIcons; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'circleIcons', value }); }
+		},
+
+		contrastedAcct: {
+			get() { return this.$store.state.settings.contrastedAcct; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'contrastedAcct', value }); }
+		},
+
+		iLikeSushi: {
+			get() { return this.$store.state.settings.iLikeSushi; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
+		},
+
+		games_reversi_showBoardLabels: {
+			get() { return this.$store.state.settings.games.reversi.showBoardLabels; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
+		},
+
+		games_reversi_useContrastStones: {
+			get() { return this.$store.state.settings.games.reversi.useContrastStones; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useContrastStones', value }); }
+		},
+
+		disableAnimatedMfm: {
+			get() { return this.$store.state.settings.disableAnimatedMfm; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
+		},
+
+		disableViaMobile: {
+			get() { return this.$store.state.settings.disableViaMobile; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
+		},
+
+		gradientWindowHeader: {
+			get() { return this.$store.state.settings.gradientWindowHeader; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', value }); }
+		},
 	},
 	created() {
 		(this as any).os.getMeta().then(meta => {
@@ -327,125 +423,11 @@ export default Vue.extend({
 				wallpaperId: null
 			});
 		},
-		onChangeFetchOnScroll(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'fetchOnScroll',
-				value: v
-			});
-		},
-		onChangeRememberNoteVisibility(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'rememberNoteVisibility',
-				value: v
-			});
-		},
 		onChangeAutoWatch(v) {
 			(this as any).api('i/update', {
 				autoWatch: v
 			});
 		},
-		onChangeDark(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'dark',
-				value: v
-			});
-		},
-		onChangeShowPostFormOnTopOfTl(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showPostFormOnTopOfTl',
-				value: v
-			});
-		},
-		onChangeSuggestRecentHashtags(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'suggestRecentHashtags',
-				value: v
-			});
-		},
-		onChangeShowClockOnHeader(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showClockOnHeader',
-				value: v
-			});
-		},
-		onChangeShowReplyTarget(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showReplyTarget',
-				value: v
-			});
-		},
-		onChangeShowMyRenotes(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showMyRenotes',
-				value: v
-			});
-		},
-		onChangeShowRenotedMyNotes(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showRenotedMyNotes',
-				value: v
-			});
-		},
-		onChangeShowLocalRenotes(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showLocalRenotes',
-				value: v
-			});
-		},
-		onChangeShowMaps(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showMaps',
-				value: v
-			});
-		},
-		onChangeCircleIcons(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'circleIcons',
-				value: v
-			});
-		},
-		onChangeContrastedAcct(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'contrastedAcct',
-				value: v
-			});
-		},
-		onChangeILikeSushi(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'iLikeSushi',
-				value: v
-			});
-		},
-		onChangeReversiBoardLabels(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'games.reversi.showBoardLabels',
-				value: v
-			});
-		},
-		onChangeUseContrastReversiStones(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'games.reversi.useContrastStones',
-				value: v
-			});
-		},
-		onChangeDisableAnimatedMfm(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'disableAnimatedMfm',
-				value: v
-			});
-		},
-		onChangeGradientWindowHeader(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'gradientWindowHeader',
-				value: v
-			});
-		},
-		onChangeDisableViaMobile(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'disableViaMobile',
-				value: v
-			});
-		},
 		checkForUpdate() {
 			this.checkingForUpdate = true;
 			checkForUpdate((this as any).os, true, true).then(newer => {
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index e40069bbe3..65ea6cf8ea 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="qjewsnkgzzxlxtzncydssfbgjibiehcy" v-if="image.isSensitive && hide" @click="hide = false">
+<div class="qjewsnkgzzxlxtzncydssfbgjibiehcy" v-if="image.isSensitive && hide && !$store.state.device.alwaysShowNsfw" @click="hide = false">
 	<div>
 		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
 		<span>%i18n:@click-to-show%</span>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index a078929016..c93b3a50f1 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -12,21 +12,22 @@
 
 				<section>
 					<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
-					<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
-					<ui-switch v-model="$store.state.settings.contrastedAcct" @change="onChangeContrastedAcct">%i18n:@contrasted-acct%</ui-switch>
-					<ui-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi">%i18n:common.i-like-sushi%</ui-switch>
-					<ui-switch v-model="$store.state.settings.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
-					<ui-switch v-model="$store.state.settings.games.reversi.showBoardLabels" @change="onChangeReversiBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
-					<ui-switch v-model="$store.state.settings.games.reversi.useContrastStones" @change="onChangeUseContrastReversiStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
+					<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
+					<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
+					<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
+					<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
+					<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
+					<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
+					<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
 				</section>
 
 				<section>
 					<header>%i18n:@timeline%</header>
 					<div>
-						<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
-						<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
-						<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
-						<ui-switch v-model="$store.state.settings.showLocalRenotes" @change="onChangeShowLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
+						<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
+						<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
+						<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
+						<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
 					</div>
 				</section>
 
@@ -47,16 +48,16 @@
 				<div slot="title">%fa:cog% %i18n:@behavior%</div>
 
 				<section>
-					<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
-					<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
+					<ui-switch v-model="fetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
+					<ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
 					<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
-					<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
+					<ui-switch v-model="loadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
 					<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
 				</section>
 
 				<section>
 					<header>%i18n:@note-visibility%</header>
-					<ui-switch v-model="$store.state.settings.rememberNoteVisibility" @change="onChangeRememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch>
+					<ui-switch v-model="rememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch>
 					<section>
 						<header>%i18n:@default-note-visibility%</header>
 						<ui-select v-model="defaultNoteVisibility">
@@ -166,6 +167,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
 		},
 
+		alwaysShowNsfw: {
+			get() { return this.$store.state.device.alwaysShowNsfw; },
+			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
+		},
+
 		postStyle: {
 			get() { return this.$store.state.device.postStyle; },
 			set(value) { this.$store.commit('device/set', { key: 'postStyle', value }); }
@@ -176,11 +182,6 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
 		},
 
-		defaultNoteVisibility: {
-			get() { return this.$store.state.settings.defaultNoteVisibility; },
-			set(value) { this.$store.commit('settings/set', { key: 'defaultNoteVisibility', value }); }
-		},
-
 		lightmode: {
 			get() { return this.$store.state.device.lightmode; },
 			set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); }
@@ -200,113 +201,90 @@ export default Vue.extend({
 			get() { return this.$store.state.device.enableSounds; },
 			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
 		},
-	},
 
-	mounted() {
-		document.title = '%i18n:@settings%';
-	},
+		fetchOnScroll: {
+			get() { return this.$store.state.settings.fetchOnScroll; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
+		},
 
-	methods: {
-		signout() {
-			(this as any).os.signout();
+		rememberNoteVisibility: {
+			get() { return this.$store.state.settings.rememberNoteVisibility; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'rememberNoteVisibility', value }); }
 		},
 
-		onChangeFetchOnScroll(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'fetchOnScroll',
-				value: v
-			});
+		disableViaMobile: {
+			get() { return this.$store.state.settings.disableViaMobile; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
 		},
 
-		onChangeRememberNoteVisibility(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'rememberNoteVisibility',
-				value: v
-			});
+		loadRemoteMedia: {
+			get() { return this.$store.state.settings.loadRemoteMedia; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'loadRemoteMedia', value }); }
 		},
 
-		onChangeDisableViaMobile(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'disableViaMobile',
-				value: v
-			});
+		circleIcons: {
+			get() { return this.$store.state.settings.circleIcons; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'circleIcons', value }); }
 		},
 
-		onChangeLoadRemoteMedia(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'loadRemoteMedia',
-				value: v
-			});
+		contrastedAcct: {
+			get() { return this.$store.state.settings.contrastedAcct; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'contrastedAcct', value }); }
 		},
 
-		onChangeCircleIcons(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'circleIcons',
-				value: v
-			});
+		iLikeSushi: {
+			get() { return this.$store.state.settings.iLikeSushi; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
 		},
 
-		onChangeContrastedAcct(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'contrastedAcct',
-				value: v
-			});
+		games_reversi_showBoardLabels: {
+			get() { return this.$store.state.settings.games.reversi.showBoardLabels; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
 		},
 
-		onChangeILikeSushi(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'iLikeSushi',
-				value: v
-			});
+		games_reversi_useContrastStones: {
+			get() { return this.$store.state.settings.games.reversi.useContrastStones; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useContrastStones', value }); }
 		},
 
-		onChangeReversiBoardLabels(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'games.reversi.showBoardLabels',
-				value: v
-			});
+		disableAnimatedMfm: {
+			get() { return this.$store.state.settings.disableAnimatedMfm; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
 		},
 
-		onChangeUseContrastReversiStones(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'games.reversi.useContrastStones',
-				value: v
-			});
+		showReplyTarget: {
+			get() { return this.$store.state.settings.showReplyTarget; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
 		},
 
-		onChangeDisableAnimatedMfm(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'disableAnimatedMfm',
-				value: v
-			});
+		showMyRenotes: {
+			get() { return this.$store.state.settings.showMyRenotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showMyRenotes', value }); }
 		},
 
-		onChangeShowReplyTarget(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showReplyTarget',
-				value: v
-			});
+		showRenotedMyNotes: {
+			get() { return this.$store.state.settings.showRenotedMyNotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showRenotedMyNotes', value }); }
 		},
 
-		onChangeShowMyRenotes(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showMyRenotes',
-				value: v
-			});
+		showLocalRenotes: {
+			get() { return this.$store.state.settings.showLocalRenotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showLocalRenotes', value }); }
 		},
 
-		onChangeShowRenotedMyNotes(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showRenotedMyNotes',
-				value: v
-			});
+		defaultNoteVisibility: {
+			get() { return this.$store.state.settings.defaultNoteVisibility; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
 		},
+	},
 
-		onChangeShowLocalRenotes(v) {
-			this.$store.dispatch('settings/set', {
-				key: 'showLocalRenotes',
-				value: v
-			});
+	mounted() {
+		document.title = '%i18n:@settings%';
+	},
+
+	methods: {
+		signout() {
+			(this as any).os.signout();
 		},
 
 		checkForUpdate() {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 22de9b5587..7a5b3e986b 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -47,6 +47,7 @@ const defaultDeviceSettings = {
 	debug: false,
 	lightmode: false,
 	loadRawImages: false,
+	alwaysShowNsfw: false,
 	postStyle: 'standard',
 	mobileNotificationPosition: 'bottom'
 };
-- 
cgit v1.2.3-freya


From 3220d69a6930151f33928b5d789150aacc4bc382 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 14 Sep 2018 20:11:01 +0900
Subject: 常にメディアを閲覧注意として投稿するオプションを実装
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                              |  1 +
 src/client/app/desktop/views/components/settings.profile.vue   |  7 +++++++
 .../app/mobile/views/pages/settings/settings.profile.vue       |  8 ++++++++
 src/models/user.ts                                             |  5 ++++-
 src/server/api/endpoints/drive/files/create.ts                 |  4 ++--
 src/server/api/endpoints/i/update.ts                           |  7 +++++++
 src/services/drive/add-file.ts                                 | 10 ++++++++--
 7 files changed, 37 insertions(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index aaa06bdd1d..134ec33831 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -117,6 +117,7 @@ common:
   verified-user: "公式アカウント"
   disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
+  always-mark-nsfw: "常にメディアを閲覧注意として投稿"
   this-setting-is-this-device-only: "このデバイスのみ"
 
   do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
index 262583b640..0f53941b31 100644
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -30,6 +30,7 @@
 		<h2>%i18n:@other%</h2>
 		<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/>
 		<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/>
+		<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/>
 	</section>
 </div>
 </template>
@@ -46,6 +47,12 @@ export default Vue.extend({
 			birthday: null,
 		};
 	},
+	computed: {
+		alwaysMarkNsfw: {
+			get() { return this.$store.state.i.settings.alwaysMarkNsfw; },
+			set(value) { (this as any).api('i/update', { alwaysMarkNsfw: value }); }
+		},
+	},
 	created() {
 		this.name = this.$store.state.i.name || '';
 		this.location = this.$store.state.i.profile.location;
diff --git a/src/client/app/mobile/views/pages/settings/settings.profile.vue b/src/client/app/mobile/views/pages/settings/settings.profile.vue
index 6f5ac9ae93..127f531902 100644
--- a/src/client/app/mobile/views/pages/settings/settings.profile.vue
+++ b/src/client/app/mobile/views/pages/settings/settings.profile.vue
@@ -49,6 +49,7 @@
 
 		<div>
 			<ui-switch v-model="isCat" @change="save(false)">%i18n:@is-cat%</ui-switch>
+			<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
 		</div>
 	</section>
 
@@ -85,6 +86,13 @@ export default Vue.extend({
 		};
 	},
 
+	computed: {
+		alwaysMarkNsfw: {
+			get() { return this.$store.state.i.settings.alwaysMarkNsfw; },
+			set(value) { (this as any).api('i/update', { alwaysMarkNsfw: value }); }
+		},
+	},
+
 	created() {
 		this.name = this.$store.state.i.name || '';
 		this.username = this.$store.state.i.username;
diff --git a/src/models/user.ts b/src/models/user.ts
index 8f3fbbdc8f..64197c91c2 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -102,7 +102,10 @@ export interface ILocalUser extends IUserBase {
 	twoFactorEnabled: boolean;
 	twoFactorTempSecret?: string;
 	clientSettings: any;
-	settings: any;
+	settings: {
+		autoWatch: boolean;
+		alwaysMarkNsfw?: boolean;
+	};
 	hasUnreadNotification: boolean;
 	hasUnreadMessagingMessage: boolean;
 }
diff --git a/src/server/api/endpoints/drive/files/create.ts b/src/server/api/endpoints/drive/files/create.ts
index dfbd11d0c2..4b5ffa90e0 100644
--- a/src/server/api/endpoints/drive/files/create.ts
+++ b/src/server/api/endpoints/drive/files/create.ts
@@ -31,8 +31,8 @@ export const meta = {
 			}
 		}),
 
-		isSensitive: $.bool.optional.note({
-			default: false,
+		isSensitive: $.bool.optional.nullable.note({
+			default: null,
 			desc: {
 				'ja-JP': 'このメディアが「閲覧注意」(NSFW)かどうか',
 				'en-US': 'Whether this media is NSFW'
diff --git a/src/server/api/endpoints/i/update.ts b/src/server/api/endpoints/i/update.ts
index 6aa4cc1148..c1be0b6ebc 100644
--- a/src/server/api/endpoints/i/update.ts
+++ b/src/server/api/endpoints/i/update.ts
@@ -84,6 +84,12 @@ export const meta = {
 				'ja-JP': '投稿の自動ウォッチをするか否か'
 			}
 		}),
+
+		alwaysMarkNsfw: $.bool.optional.note({
+			desc: {
+				'ja-JP': 'アップロードするメディアをデフォルトで「閲覧注意」として設定するか'
+			}
+		}),
 	}
 };
 
@@ -106,6 +112,7 @@ export default async (params: any, user: ILocalUser, app: IApp) => new Promise(a
 	if (typeof ps.isBot == 'boolean') updates.isBot = ps.isBot;
 	if (typeof ps.isCat == 'boolean') updates.isCat = ps.isCat;
 	if (typeof ps.autoWatch == 'boolean') updates['settings.autoWatch'] = ps.autoWatch;
+	if (typeof ps.alwaysMarkNsfw == 'boolean') updates['settings.alwaysMarkNsfw'] = ps.alwaysMarkNsfw;
 
 	if (ps.avatarId) {
 		const avatar = await DriveFile.findOne({
diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts
index 828ebcbb94..666a6ca742 100644
--- a/src/services/drive/add-file.ts
+++ b/src/services/drive/add-file.ts
@@ -153,7 +153,7 @@ export default async function(
 	isLink: boolean = false,
 	url: string = null,
 	uri: string = null,
-	sensitive = false
+	sensitive: boolean = null
 ): Promise<IDriveFile> {
 	// Calc md5 hash
 	const calcHash = new Promise<string>((res, rej) => {
@@ -329,7 +329,13 @@ export default async function(
 		properties: properties,
 		withoutChunks: isLink,
 		isRemote: isLink,
-		isSensitive: sensitive
+		isSensitive: (sensitive !== null && sensitive !== undefined)
+			? sensitive
+			: isLocalUser(user)
+				? user.settings.alwaysMarkNsfw
+					? true
+					: false
+				: false
 	} as IMetadata;
 
 	if (url !== null) {
-- 
cgit v1.2.3-freya


From f670345d450d2ac13448c56bc0aeb8dd5c3d84ef Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 14 Sep 2018 20:33:27 +0900
Subject: ユーザー名のホストを省略しないオプションを実装
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                    | 1 +
 src/client/app/common/views/components/acct.vue      | 2 +-
 src/client/app/desktop/views/components/settings.vue | 6 ++++++
 src/client/app/mobile/views/pages/settings.vue       | 6 ++++++
 src/client/app/store.ts                              | 1 +
 5 files changed, 15 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 134ec33831..5257d616c4 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -118,6 +118,7 @@ common:
   disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
   always-mark-nsfw: "常にメディアを閲覧注意として投稿"
+  show-full-acct: "ユーザー名のホストを省略しない"
   this-setting-is-this-device-only: "このデバイスのみ"
 
   do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
diff --git a/src/client/app/common/views/components/acct.vue b/src/client/app/common/views/components/acct.vue
index bd7833f1a9..542fbb4296 100644
--- a/src/client/app/common/views/components/acct.vue
+++ b/src/client/app/common/views/components/acct.vue
@@ -1,7 +1,7 @@
 <template>
 <span class="mk-acct">
 	<span class="name">@{{ user.username }}</span>
-	<span class="host" :class="{ fade: $store.state.settings.contrastedAcct }" v-if="user.host || detail">@{{ user.host || host }}</span>
+	<span class="host" :class="{ fade: $store.state.settings.contrastedAcct }" v-if="user.host || detail || $store.state.settings.showFullAcct">@{{ user.host || host }}</span>
 </span>
 </template>
 
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 8e2905e73b..1973acc839 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -61,6 +61,7 @@
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
 				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
+				<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
 				<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
 				<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/>
 			</div>
@@ -366,6 +367,11 @@ export default Vue.extend({
 			set(value) { this.$store.dispatch('settings/set', { key: 'contrastedAcct', value }); }
 		},
 
+		showFullAcct: {
+			get() { return this.$store.state.settings.showFullAcct; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showFullAcct', value }); }
+		},
+
 		iLikeSushi: {
 			get() { return this.$store.state.settings.iLikeSushi; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index c93b3a50f1..9b0e521a4f 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -14,6 +14,7 @@
 					<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
 					<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
 					<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
+					<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
 					<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 					<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
 					<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
@@ -232,6 +233,11 @@ export default Vue.extend({
 			set(value) { this.$store.dispatch('settings/set', { key: 'contrastedAcct', value }); }
 		},
 
+		showFullAcct: {
+			get() { return this.$store.state.settings.showFullAcct; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showFullAcct', value }); }
+		},
+
 		iLikeSushi: {
 			get() { return this.$store.state.settings.iLikeSushi; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 7a5b3e986b..997bddc5cc 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -17,6 +17,7 @@ const defaultSettings = {
 	showClockOnHeader: true,
 	circleIcons: true,
 	contrastedAcct: true,
+	showFullAcct: false,
 	gradientWindowHeader: false,
 	showReplyTarget: true,
 	showMyRenotes: true,
-- 
cgit v1.2.3-freya


From c985fed3e43bae05f9e6e854f651f49f2bc3e83a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 15 Sep 2018 05:40:58 +0900
Subject: Resolve #2328

---
 locales/ja-JP.yml                                  |   4 +
 package.json                                       |   1 +
 src/client/app/desktop/views/components/charts.vue | 103 ++++++++++++++++++++-
 src/models/stats.ts                                |  26 ++++++
 src/server/api/endpoints/chart.ts                  |  21 +++++
 src/server/index.ts                                |  25 +++++
 src/services/update-chart.ts                       |  22 +++++
 7 files changed, 200 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5257d616c4..72dc88b7b3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -518,6 +518,7 @@ desktop/views/components/charts.vue:
   notes: "投稿"
   users: "ユーザー"
   drive: "ドライブ"
+  network: "ネットワーク"
   charts:
     notes: "投稿の増減 (統合)"
     local-notes: "投稿の増減 (ローカル)"
@@ -529,6 +530,9 @@ desktop/views/components/charts.vue:
     drive-total: "ドライブ使用量の累計"
     drive-files: "ドライブのファイル数の増減"
     drive-files-total: "ドライブのファイル数の累計"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
 
 desktop/views/components/choose-file-from-drive-window.vue:
   choose-file: "ファイル選択中"
diff --git a/package.json b/package.json
index 4d2a4b285b..4b9eaf9e22 100644
--- a/package.json
+++ b/package.json
@@ -179,6 +179,7 @@
 		"redis": "2.8.0",
 		"request": "2.88.0",
 		"request-promise-native": "1.0.5",
+		"request-stats": "3.0.0",
 		"rimraf": "2.6.2",
 		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue
index c4e92e429f..6514cdf788 100644
--- a/src/client/app/desktop/views/components/charts.vue
+++ b/src/client/app/desktop/views/components/charts.vue
@@ -19,6 +19,11 @@
 				<option value="drive">%i18n:@charts.drive%</option>
 				<option value="drive-total">%i18n:@charts.drive-total%</option>
 			</optgroup>
+			<optgroup label="%i18n:@network%">
+				<option value="network-requests">%i18n:@charts.network-requests%</option>
+				<option value="network-time">%i18n:@charts.network-time%</option>
+				<option value="network-usage">%i18n:@charts.network-usage%</option>
+			</optgroup>
 		</select>
 		<div>
 			<span @click="span = 'day'" :class="{ active: span == 'day' }">%i18n:@per-day%</span> | <span @click="span = 'hour'" :class="{ active: span == 'hour' }">%i18n:@per-hour%</span>
@@ -41,7 +46,10 @@ const colors = {
 	localPlus: 'rgb(52, 178, 118)',
 	remotePlus: 'rgb(158, 255, 209)',
 	localMinus: 'rgb(255, 97, 74)',
-	remoteMinus: 'rgb(255, 149, 134)'
+	remoteMinus: 'rgb(255, 149, 134)',
+
+	incoming: 'rgb(52, 178, 118)',
+	outgoing: 'rgb(255, 97, 74)',
 };
 
 const rgba = (color: string): string => {
@@ -75,6 +83,9 @@ export default Vue.extend({
 				case 'drive-total': return this.driveTotalChart();
 				case 'drive-files': return this.driveFilesChart();
 				case 'drive-files-total': return this.driveFilesTotalChart();
+				case 'network-requests': return this.networkRequestsChart();
+				case 'network-time': return this.networkTimeChart();
+				case 'network-usage': return this.networkUsageChart();
 			}
 		},
 
@@ -544,7 +555,95 @@ export default Vue.extend({
 					}
 				}
 			}];
-		}
+		},
+
+		networkRequestsChart(): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				requests: x.network.requests
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Requests',
+					fill: true,
+					backgroundColor: rgba(colors.localPlus),
+					borderColor: colors.localPlus,
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.requests }))
+				}]
+			}];
+		},
+
+		networkTimeChart(): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				time: x.network.requests != 0 ? (x.network.totalTime / x.network.requests) : 0,
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Avg time (ms)',
+					fill: true,
+					backgroundColor: rgba(colors.localPlus),
+					borderColor: colors.localPlus,
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.time }))
+				}]
+			}];
+		},
+
+		networkUsageChart(): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				incoming: x.network.incomingBytes,
+				outgoing: x.network.outgoingBytes
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Incoming',
+					fill: true,
+					backgroundColor: rgba(colors.incoming),
+					borderColor: colors.incoming,
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.incoming }))
+				}, {
+					label: 'Outgoing',
+					fill: true,
+					backgroundColor: rgba(colors.outgoing),
+					borderColor: colors.outgoing,
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.outgoing }))
+				}]
+			}, {
+				scales: {
+					yAxes: [{
+						ticks: {
+							callback: value => {
+								return Vue.filter('bytes')(value, 1);
+							}
+						}
+					}]
+				},
+				tooltips: {
+					callbacks: {
+						label: (tooltipItem, data) => {
+							const label = data.datasets[tooltipItem.datasetIndex].label || '';
+							return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel, 1)}`;
+						}
+					}
+				}
+			}];
+		},
 	}
 });
 </script>
diff --git a/src/models/stats.ts b/src/models/stats.ts
index d496f2c480..c4c838caeb 100644
--- a/src/models/stats.ts
+++ b/src/models/stats.ts
@@ -204,4 +204,30 @@ export interface IStats {
 			decSize: number;
 		};
 	};
+
+	/**
+	 * ネットワークに関する統計
+	 */
+	network: {
+		/**
+		 * サーバーへのリクエスト数
+		 */
+		requests: number;
+
+		/**
+		 * 応答時間の合計
+		 * TIP: (totalTime / requests) でひとつのリクエストに平均でどれくらいの時間がかかったか知れる
+		 */
+		totalTime: number;
+
+		/**
+		 * 合計受信データ量
+		 */
+		incomingBytes: number;
+
+		/**
+		 * 合計送信データ量
+		 */
+		outgoingBytes: number;
+	};
 }
diff --git a/src/server/api/endpoints/chart.ts b/src/server/api/endpoints/chart.ts
index 7da970131e..3b1a3b56fc 100644
--- a/src/server/api/endpoints/chart.ts
+++ b/src/server/api/endpoints/chart.ts
@@ -6,6 +6,15 @@ type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 function migrateStats(stats: IStats[]) {
 	stats.forEach(stat => {
+		if (stat.network == null) {
+			stat.network = {
+				requests: 0,
+				totalTime: 0,
+				incomingBytes: 0,
+				outgoingBytes: 0
+			};
+		}
+
 		const isOldData =
 			stat.users.local.inc == null ||
 			stat.users.local.dec == null ||
@@ -180,6 +189,12 @@ export default (params: any) => new Promise(async (res, rej) => {
 								decCount: 0,
 								decSize: 0
 							}
+						},
+						network: {
+							requests: 0,
+							totalTime: 0,
+							incomingBytes: 0,
+							outgoingBytes: 0
 						}
 					});
 				} else {
@@ -236,6 +251,12 @@ export default (params: any) => new Promise(async (res, rej) => {
 								decCount: 0,
 								decSize: 0
 							}
+						},
+						network: {
+							requests: 0,
+							totalTime: 0,
+							incomingBytes: 0,
+							outgoingBytes: 0
 						}
 					});
 				}
diff --git a/src/server/index.ts b/src/server/index.ts
index f1fcf58c8d..dc60b0d9ec 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -11,11 +11,13 @@ import * as Router from 'koa-router';
 import * as mount from 'koa-mount';
 import * as compress from 'koa-compress';
 import * as logger from 'koa-logger';
+const requestStats = require('request-stats');
 //const slow = require('koa-slow');
 
 import activityPub from './activitypub';
 import webFinger from './webfinger';
 import config from '../config';
+import { updateNetworkStats } from '../services/update-chart';
 
 // Init app
 const app = new Koa();
@@ -81,4 +83,27 @@ export default () => new Promise(resolve => {
 
 	// Listen
 	server.listen(config.port, resolve);
+
+	//#region Network stats
+	let queue: any[] = [];
+
+	requestStats(server, (stats: any) => {
+		if (stats.ok) {
+			queue.push(stats);
+		}
+	});
+
+	// Bulk write
+	setInterval(() => {
+		if (queue.length == 0) return;
+
+		const requests = queue.length;
+		const time = queue.reduce((a, b) => a + b.time, 0);
+		const incomingBytes = queue.reduce((a, b) => a + b.req.bytes, 0);
+		const outgoingBytes = queue.reduce((a, b) => a + b.res.bytes, 0);
+		queue = [];
+
+		updateNetworkStats(requests, time, incomingBytes, outgoingBytes);
+	}, 5000);
+	//#endregion
 });
diff --git a/src/services/update-chart.ts b/src/services/update-chart.ts
index 1f8da6be9f..78834ba601 100644
--- a/src/services/update-chart.ts
+++ b/src/services/update-chart.ts
@@ -96,6 +96,12 @@ async function getCurrentStats(span: 'day' | 'hour'): Promise<IStats> {
 						decCount: 0,
 						decSize: 0
 					}
+				},
+				network: {
+					requests: 0,
+					totalTime: 0,
+					incomingBytes: 0,
+					outgoingBytes: 0
 				}
 			};
 
@@ -161,6 +167,12 @@ async function getCurrentStats(span: 'day' | 'hour'): Promise<IStats> {
 						decCount: 0,
 						decSize: 0
 					}
+				},
+				network: {
+					requests: 0,
+					totalTime: 0,
+					incomingBytes: 0,
+					outgoingBytes: 0
 				}
 			};
 
@@ -243,3 +255,13 @@ export async function updateDriveStats(file: IDriveFile, isAdditional: boolean)
 
 	await update(inc);
 }
+
+export async function updateNetworkStats(requests: number, time: number, incomingBytes: number, outgoingBytes: number) {
+	const inc = {} as any;
+	inc['network.requests'] = requests;
+	inc['network.totalTime'] = time;
+	inc['network.incomingBytes'] = incomingBytes;
+	inc['network.outgoingBytes'] = outgoingBytes;
+
+	await update(inc);
+}
-- 
cgit v1.2.3-freya


From 7b2b7d1456b500c8dd406a6e51c8f95d0f9405d3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 15 Sep 2018 21:48:10 +0900
Subject: Resolve #2066

---
 package.json                                       |   4 -
 .../components/games/reversi/reversi.game.vue      |  16 +-
 .../components/games/reversi/reversi.index.vue     |   1 -
 .../components/games/reversi/reversi.room.vue      |   7 +-
 src/client/app/desktop/script.ts                   |   1 -
 .../desktop/views/components/settings.drive.vue    |   1 -
 .../desktop/views/components/settings.profile.vue  |   2 +-
 .../app/desktop/views/components/settings.vue      |  33 ++--
 .../app/desktop/views/components/taskmanager.vue   | 219 ---------------------
 src/client/app/init.ts                             |  11 --
 src/client/app/mobile/script.ts                    |   1 -
 src/client/element.scss                            |  12 --
 webpack.config.ts                                  |  17 --
 13 files changed, 22 insertions(+), 303 deletions(-)
 delete mode 100644 src/client/app/desktop/views/components/taskmanager.vue
 delete mode 100644 src/client/element.scss

(limited to 'src/client')

diff --git a/package.json b/package.json
index 081780250a..7b81c925b2 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,6 @@
 		"dompurify": "1.0.5",
 		"double-ended-queue": "2.1.0-0",
 		"elasticsearch": "15.1.1",
-		"element-ui": "2.4.6",
 		"emojilib": "2.3.0",
 		"escape-regexp": "0.0.1",
 		"eslint": "5.0.1",
@@ -132,7 +131,6 @@
 		"insert-text-at-cursor": "0.1.1",
 		"is-root": "2.0.0",
 		"is-url": "1.2.4",
-		"jquery": "3.3.1",
 		"js-yaml": "3.12.0",
 		"jsdom": "11.12.0",
 		"koa": "2.5.1",
@@ -160,8 +158,6 @@
 		"ms": "2.1.1",
 		"nan": "2.11.0",
 		"nested-property": "0.0.7",
-		"node-sass": "4.9.3",
-		"node-sass-json-importer": "4.0.1",
 		"nprogress": "0.2.0",
 		"object-assign-deep": "0.4.0",
 		"on-build-webpack": "0.1.0",
diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index 673879a435..fea19d917e 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -50,15 +50,15 @@
 	</div>
 
 	<div class="player" v-if="game.isEnded">
-		<el-button-group>
-			<el-button type="primary" @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</el-button>
-			<el-button type="primary" @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</el-button>
-		</el-button-group>
+		<div>
+			<button @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</button>
+			<button @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</button>
+		</div>
 		<span>{{ logPos }} / {{ logs.length }}</span>
-		<el-button-group>
-			<el-button type="primary" @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</el-button>
-			<el-button type="primary" @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</el-button>
-		</el-button-group>
+		<div>
+			<button @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</button>
+			<button @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</button>
+		</div>
 	</div>
 
 	<div class="info">
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index fa88aeaaf4..d23902aae7 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -3,7 +3,6 @@
 	<h1>%i18n:@title%</h1>
 	<p>%i18n:@sub-title%</p>
 	<div class="play">
-		<!--<el-button round>フリーマッチ(準備中)</el-button>-->
 		<form-button primary round @click="match">%i18n:@invite%</form-button>
 		<details>
 			<summary>%i18n:@rule%</summary>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index aed8718dd0..fef833d63e 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -59,11 +59,6 @@
 			</header>
 
 			<div>
-				<el-alert v-for="message in messages"
-						:title="message.text"
-						:type="message.type"
-						:key="message.id"/>
-
 				<template v-for="item in form">
 					<mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch>
 
@@ -93,7 +88,7 @@
 						</header>
 
 						<div>
-							<el-input v-model="item.value" @change="onChangeForm(item)"/>
+							<input v-model="item.value" @change="onChangeForm(item)"/>
 						</div>
 					</div>
 				</template>
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index f0e8a42662..e32682286c 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -6,7 +6,6 @@ import VueRouter from 'vue-router';
 
 // Style
 import './style.styl';
-import '../../element.scss';
 
 import init from '../init';
 import fuckAdBlock from '../common/scripts/fuck-ad-block';
diff --git a/src/client/app/desktop/views/components/settings.drive.vue b/src/client/app/desktop/views/components/settings.drive.vue
index e8a3cc9685..d254b27110 100644
--- a/src/client/app/desktop/views/components/settings.drive.vue
+++ b/src/client/app/desktop/views/components/settings.drive.vue
@@ -1,7 +1,6 @@
 <template>
 <div class="root">
 	<template v-if="!fetching">
-		<el-progress :text-inside="true" :stroke-width="18" :percentage="Math.floor((usage / capacity) * 100)"/>
 		<p><b>{{ capacity | bytes }}</b>%i18n:max%<b>{{ usage | bytes }}</b>%i18n:in-use%</p>
 	</template>
 </div>
diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
index 0f53941b31..d47b5b224b 100644
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -19,7 +19,7 @@
 	</label>
 	<label class="ui from group">
 		<p>%i18n:@birthday%</p>
-		<el-date-picker v-model="birthday" type="date" value-format="yyyy-MM-dd"/>
+		<input type="date" v-model="birthday"/>
 	</label>
 	<button class="ui primary" @click="save">%i18n:@save%</button>
 	<section>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 1973acc839..709715e598 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -87,13 +87,11 @@
 				<span>%i18n:@enable-sounds-desc%</span>
 			</mk-switch>
 			<label>%i18n:@volume%</label>
-			<el-slider
+			<input type="range"
 				v-model="soundVolume"
-				:show-input="true"
-				:format-tooltip="v => `${v * 100}%`"
 				:disabled="!enableSounds"
-				:max="1"
-				:step="0.1"
+				max="1"
+				step="0.1"
 			/>
 			<button class="ui button" @click="soundTest">%fa:volume-up% %i18n:@test%</button>
 		</section>
@@ -105,14 +103,15 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@language%</h1>
-			<el-select v-model="lang" placeholder="%i18n:@pick-language%">
-				<el-option-group label="%i18n:@recommended%">
-					<el-option label="%i18n:@auto%" :value="null"/>
-				</el-option-group>
-				<el-option-group label="%i18n:@specify-language%">
-					<el-option v-for="x in langs" :label="x[1]" :value="x[0]" :key="x[0]"/>
-				</el-option-group>
-			</el-select>
+			<select v-model="lang" placeholder="%i18n:@pick-language%">
+				<optgroup label="%i18n:@recommended%">
+					<option value="">%i18n:@auto%</option>
+				</optgroup>
+
+				<optgroup label="%i18n:@specify-language%">
+					<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
+				</optgroup>
+			</select>
 			<div class="none ui info">
 				<p>%fa:info-circle%%i18n:@language-desc%</p>
 			</div>
@@ -207,10 +206,6 @@
 			<mk-switch v-model="enableExperimentalFeatures" text="%i18n:@experimental%">
 				<span>%i18n:@experimental-desc%</span>
 			</mk-switch>
-			<details v-if="debug">
-				<summary>%i18n:@tools%</summary>
-				<button class="ui button block" @click="taskmngr">%i18n:@task-manager%</button>
-			</details>
 		</section>
 	</div>
 </div>
@@ -228,7 +223,6 @@ import XSignins from './settings.signins.vue';
 import XDrive from './settings.drive.vue';
 import { url, langs, version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
-import MkTaskManager from './taskmanager.vue';
 
 export default Vue.extend({
 	components: {
@@ -408,9 +402,6 @@ export default Vue.extend({
 		});
 	},
 	methods: {
-		taskmngr() {
-			(this as any).os.new(MkTaskManager);
-		},
 		customizeHome() {
 			this.$router.push('/i/customize-home');
 			this.$emit('done');
diff --git a/src/client/app/desktop/views/components/taskmanager.vue b/src/client/app/desktop/views/components/taskmanager.vue
deleted file mode 100644
index 1f1385add8..0000000000
--- a/src/client/app/desktop/views/components/taskmanager.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-<mk-window ref="window" width="750px" height="500px" @closed="$destroy" name="TaskManager">
-	<span slot="header" :class="$style.header">%fa:stethoscope%%i18n:@title%</span>
-	<el-tabs :class="$style.content">
-		<el-tab-pane label="Requests">
-			<el-table
-				:data="os.requests"
-				style="width: 100%"
-				:default-sort="{prop: 'date', order: 'descending'}"
-			>
-				<el-table-column type="expand">
-					<template slot-scope="props">
-						<pre>{{ props.row.data }}</pre>
-						<pre>{{ props.row.res }}</pre>
-					</template>
-				</el-table-column>
-
-				<el-table-column
-					label="Requested at"
-					prop="date"
-					sortable
-				>
-					<template slot-scope="scope">
-						<b style="margin-right: 8px">{{ scope.row.date.getTime() }}</b>
-						<span>(<mk-time :time="scope.row.date"/>)</span>
-					</template>
-				</el-table-column>
-
-				<el-table-column
-					label="Name"
-				>
-					<template slot-scope="scope">
-						<b>{{ scope.row.name }}</b>
-					</template>
-				</el-table-column>
-
-				<el-table-column
-					label="Status"
-				>
-					<template slot-scope="scope">
-						<span>{{ scope.row.status || '(pending)' }}</span>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-tab-pane>
-
-		<el-tab-pane label="Streams">
-			<el-table
-				:data="os.connections"
-				style="width: 100%"
-			>
-				<el-table-column
-					label="Uptime"
-				>
-					<template slot-scope="scope">
-						<mk-timer v-if="scope.row.connectedAt" :time="scope.row.connectedAt"/>
-						<span v-else>-</span>
-					</template>
-				</el-table-column>
-
-				<el-table-column
-					label="Name"
-				>
-					<template slot-scope="scope">
-						<b>{{ scope.row.name == '' ? '[Home]' : scope.row.name }}</b>
-					</template>
-				</el-table-column>
-
-				<el-table-column
-					label="User"
-				>
-					<template slot-scope="scope">
-						<span>{{ scope.row.user || '(anonymous)' }}</span>
-					</template>
-				</el-table-column>
-
-				<el-table-column
-					prop="state"
-					label="State"
-				/>
-
-				<el-table-column
-					prop="in"
-					label="In"
-				/>
-
-				<el-table-column
-					prop="out"
-					label="Out"
-				/>
-			</el-table>
-		</el-tab-pane>
-
-		<el-tab-pane label="Streams (Inspect)">
-			<el-tabs type="card" style="height:50%">
-				<el-tab-pane v-for="c in os.connections" :label="c.name == '' ? '[Home]' : c.name" :key="c.id" :name="c.id" ref="connectionsTab">
-					<div style="padding: 12px 0 0 12px">
-					<el-button size="mini" @click="send(c)">Send</el-button>
-					<el-button size="mini" type="warning" @click="c.isSuspended = true" v-if="!c.isSuspended">Suspend</el-button>
-					<el-button size="mini" type="success" @click="c.isSuspended = false" v-else>Resume</el-button>
-					<el-button size="mini" type="danger" @click="c.close">Disconnect</el-button>
-				</div>
-
-					<el-table
-						:data="c.inout"
-						style="width: 100%"
-						:default-sort="{prop: 'at', order: 'descending'}"
-					>
-						<el-table-column type="expand">
-							<template slot-scope="props">
-								<pre>{{ props.row.data }}</pre>
-							</template>
-						</el-table-column>
-
-						<el-table-column
-							label="Date"
-							prop="at"
-							sortable
-						>
-							<template slot-scope="scope">
-								<b style="margin-right: 8px">{{ scope.row.at.getTime() }}</b>
-								<span>(<mk-time :time="scope.row.at"/>)</span>
-							</template>
-						</el-table-column>
-
-						<el-table-column
-							label="Type"
-						>
-							<template slot-scope="scope">
-								<span>{{ getMessageType(scope.row.data) }}</span>
-							</template>
-						</el-table-column>
-
-						<el-table-column
-							label="Incoming / Outgoing"
-							prop="type"
-						/>
-					</el-table>
-				</el-tab-pane>
-			</el-tabs>
-		</el-tab-pane>
-
-		<el-tab-pane label="Windows">
-			<el-table
-				:data="Array.from(os.windows.windows)"
-				style="width: 100%"
-			>
-				<el-table-column
-					label="Name"
-				>
-					<template slot-scope="scope">
-						<b>{{ scope.row.name || '(unknown)' }}</b>
-					</template>
-				</el-table-column>
-
-				<el-table-column
-					label="Operations"
-				>
-					<template slot-scope="scope">
-						<el-button size="mini" type="danger" @click="scope.row.close">Close</el-button>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-tab-pane>
-	</el-tabs>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	mounted() {
-		(this as any).os.windows.on('added', this.onWindowsChanged);
-		(this as any).os.windows.on('removed', this.onWindowsChanged);
-	},
-	beforeDestroy() {
-		(this as any).os.windows.off('added', this.onWindowsChanged);
-		(this as any).os.windows.off('removed', this.onWindowsChanged);
-	},
-	methods: {
-		getMessageType(data): string {
-			return data.type ? data.type : '-';
-		},
-		onWindowsChanged() {
-			this.$forceUpdate();
-		},
-		send(c) {
-			(this as any).apis.input({
-				title: 'Send a JSON message',
-				allowEmpty: false
-			}).then(json => {
-				c.send(JSON.parse(json));
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" module>
-.header
-	> [data-fa]
-		margin-right 4px
-
-.content
-	height 100%
-	overflow auto
-
-</style>
-
-<style>
-.el-tabs__header {
-	margin-bottom: 0 !important;
-}
-
-.el-tabs__item {
-	padding: 0 20px !important;
-}
-</style>
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 82924e92e3..dfc3a819b8 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -7,9 +7,6 @@ import Vuex from 'vuex';
 import VueRouter from 'vue-router';
 import * as TreeView from 'vue-json-tree-view';
 import VAnimateCss from 'v-animate-css';
-import Element from 'element-ui';
-import ElementLocaleEn from 'element-ui/lib/locale/lang/en';
-import ElementLocaleJa from 'element-ui/lib/locale/lang/ja';
 import VModal from 'vue-js-modal';
 
 import App from './app.vue';
@@ -17,18 +14,10 @@ import checkForUpdate from './common/scripts/check-for-update';
 import MiOS, { API } from './mios';
 import { version, codename, lang } from './config';
 
-let elementLocale;
-switch (lang) {
-	case 'ja-JP': elementLocale = ElementLocaleJa; break;
-	case 'en-US': elementLocale = ElementLocaleEn; break;
-	default: elementLocale = ElementLocaleEn; break;
-}
-
 Vue.use(Vuex);
 Vue.use(VueRouter);
 Vue.use(TreeView);
 Vue.use(VAnimateCss);
-Vue.use(Element, { locale: elementLocale });
 Vue.use(VModal);
 
 // Register global directives
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index 5b9d45462a..9412c85980 100644
--- a/src/client/app/mobile/script.ts
+++ b/src/client/app/mobile/script.ts
@@ -6,7 +6,6 @@ import VueRouter from 'vue-router';
 
 // Style
 import './style.styl';
-import '../../element.scss';
 
 import init from '../init';
 
diff --git a/src/client/element.scss b/src/client/element.scss
deleted file mode 100644
index 917198e024..0000000000
--- a/src/client/element.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/* Element variable definitons */
-/* SEE: http://element.eleme.io/#/en-US/component/custom-theme */
-
-@import '../const.json';
-
-/* theme color */
-$--color-primary: $themeColor;
-
-/* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-@import "~element-ui/packages/theme-chalk/src/index";
diff --git a/webpack.config.ts b/webpack.config.ts
index a50d6c40cc..325923084e 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -7,7 +7,6 @@ import * as webpack from 'webpack';
 import chalk from 'chalk';
 import rndstr from 'rndstr';
 const { VueLoaderPlugin } = require('vue-loader');
-const jsonImporter = require('node-sass-json-importer');
 const minifyHtml = require('html-minifier').minify;
 const WebpackOnBuildPlugin = require('on-build-webpack');
 //const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
@@ -183,22 +182,6 @@ module.exports = {
 					loader: 'stylus-loader'
 				}]
 			}]
-		}, {
-			test: /\.scss$/,
-			exclude: /node_modules/,
-			use: [{
-				loader: 'style-loader'
-			}, {
-				loader: 'css-loader',
-				options: {
-					minimize: true
-				}
-			}, {
-				loader: 'sass-loader',
-				options: {
-					importer: jsonImporter(),
-				}
-			}]
 		}, {
 			test: /\.css$/,
 			use: [{
-- 
cgit v1.2.3-freya


From 25b0a93acdec893ebd4f32b51ad0b7bc5df1350a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 15 Sep 2018 21:53:04 +0900
Subject: :v:

---
 src/client/app/common/views/components/menu.vue                |  2 +-
 src/client/app/common/views/components/note-menu.vue           |  8 ++++----
 src/client/app/common/views/components/reaction-picker.vue     |  4 ++--
 src/client/app/common/views/components/visibility-chooser.vue  |  4 ++--
 src/client/app/common/views/directives/autocomplete.ts         |  2 +-
 src/client/app/desktop/views/components/context-menu.vue       |  2 +-
 src/client/app/desktop/views/components/dialog.vue             |  2 +-
 src/client/app/desktop/views/components/friends-maker.vue      |  2 +-
 src/client/app/desktop/views/components/media-image-dialog.vue |  2 +-
 src/client/app/desktop/views/components/media-video-dialog.vue |  2 +-
 src/client/app/desktop/views/components/ui-notification.vue    |  2 +-
 src/client/app/desktop/views/components/user-preview.vue       |  2 +-
 src/client/app/desktop/views/components/window.vue             |  4 ++--
 src/client/app/init.ts                                         | 10 +++++++---
 src/client/app/mobile/views/components/dialog.vue              |  2 +-
 src/client/app/mobile/views/components/drive-file-chooser.vue  |  6 +++---
 .../app/mobile/views/components/drive-folder-chooser.vue       |  4 ++--
 src/client/app/mobile/views/components/friends-maker.vue       |  2 +-
 src/client/app/mobile/views/components/notify.vue              |  2 +-
 src/client/app/mobile/views/components/post-form-dialog.vue    |  2 +-
 20 files changed, 35 insertions(+), 31 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index e99bfcbd26..fba7e235e0 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -108,7 +108,7 @@ export default Vue.extend({
 				easing: 'easeInBack',
 				complete: () => {
 					this.$emit('closed');
-					this.$destroy();
+					this.destroyDom();
 				}
 			});
 		}
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index 0b0609ac4e..c9912fb1e2 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -64,7 +64,7 @@ export default Vue.extend({
 			(this as any).api('i/pin', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$destroy();
+				this.destroyDom();
 			});
 		},
 
@@ -73,7 +73,7 @@ export default Vue.extend({
 			(this as any).api('notes/delete', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$destroy();
+				this.destroyDom();
 			});
 		},
 
@@ -81,13 +81,13 @@ export default Vue.extend({
 			(this as any).api('notes/favorites/create', {
 				noteId: this.note.id
 			}).then(() => {
-				this.$destroy();
+				this.destroyDom();
 			});
 		},
 
 		closed() {
 			this.$nextTick(() => {
-				this.$destroy();
+				this.destroyDom();
 			});
 		}
 	}
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index a455afbf7d..a4828c987b 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 				reaction: reaction
 			}).then(() => {
 				if (this.cb) this.cb();
-				this.$destroy();
+				this.destroyDom();
 			});
 		},
 		onMouseover(e) {
@@ -120,7 +120,7 @@ export default Vue.extend({
 				scale: 0.5,
 				duration: 200,
 				easing: 'easeInBack',
-				complete: () => this.$destroy()
+				complete: () => this.destroyDom()
 			});
 		}
 	}
diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index 7d90b3520c..1830b1832e 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -101,7 +101,7 @@ export default Vue.extend({
 				this.$store.commit('device/setVisibility', visibility);
 			}
 			this.$emit('chosen', visibility);
-			this.$destroy();
+			this.destroyDom();
 		},
 		close() {
 			(this.$refs.backdrop as any).style.pointerEvents = 'none';
@@ -119,7 +119,7 @@ export default Vue.extend({
 				scale: 0.5,
 				duration: 200,
 				easing: 'easeInBack',
-				complete: () => this.$destroy()
+				complete: () => this.destroyDom()
 			});
 		}
 	}
diff --git a/src/client/app/common/views/directives/autocomplete.ts b/src/client/app/common/views/directives/autocomplete.ts
index 26bc13871d..f7f8e9bf16 100644
--- a/src/client/app/common/views/directives/autocomplete.ts
+++ b/src/client/app/common/views/directives/autocomplete.ts
@@ -167,7 +167,7 @@ class Autocomplete {
 	private close() {
 		if (this.suggestion == null) return;
 
-		this.suggestion.$destroy();
+		this.suggestion.destroyDom();
 		this.suggestion = null;
 
 		this.textarea.focus();
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
index afb6838eb6..49aeac143f 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -64,7 +64,7 @@ export default Vue.extend({
 			});
 
 			this.$emit('closed');
-			this.$destroy();
+			this.destroyDom();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue
index aff21c1754..bbb1e0030c 100644
--- a/src/client/app/desktop/views/components/dialog.vue
+++ b/src/client/app/desktop/views/components/dialog.vue
@@ -78,7 +78,7 @@ export default Vue.extend({
 				scale: 0.8,
 				duration: 300,
 				easing: [ 0.5, -0.5, 1, 0.5 ],
-				complete: () => this.$destroy()
+				complete: () => this.destroyDom()
 			});
 		},
 		onBgClick() {
diff --git a/src/client/app/desktop/views/components/friends-maker.vue b/src/client/app/desktop/views/components/friends-maker.vue
index 7dfd9e4359..4e8a212b00 100644
--- a/src/client/app/desktop/views/components/friends-maker.vue
+++ b/src/client/app/desktop/views/components/friends-maker.vue
@@ -14,7 +14,7 @@
 	<p class="empty" v-if="!fetching && users.length == 0">%i18n:@empty%</p>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@fetching%<mk-ellipsis/></p>
 	<a class="refresh" @click="refresh">%i18n:@refresh%</a>
-	<button class="close" @click="$destroy()" title="%i18n:@close%">%fa:times%</button>
+	<button class="close" @click="destroyDom()" title="%i18n:@close%">%fa:times%</button>
 </div>
 </template>
 
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 026522d907..89a340d3ae 100644
--- a/src/client/app/desktop/views/components/media-image-dialog.vue
+++ b/src/client/app/desktop/views/components/media-image-dialog.vue
@@ -26,7 +26,7 @@ export default Vue.extend({
 				opacity: 0,
 				duration: 100,
 				easing: 'linear',
-				complete: () => this.$destroy()
+				complete: () => this.destroyDom()
 			});
 		}
 	}
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 959cefa42c..03c93c8939 100644
--- a/src/client/app/desktop/views/components/media-video-dialog.vue
+++ b/src/client/app/desktop/views/components/media-video-dialog.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
 				opacity: 0,
 				duration: 100,
 				easing: 'linear',
-				complete: () => this.$destroy()
+				complete: () => this.destroyDom()
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/components/ui-notification.vue b/src/client/app/desktop/views/components/ui-notification.vue
index 68413914c0..7519124870 100644
--- a/src/client/app/desktop/views/components/ui-notification.vue
+++ b/src/client/app/desktop/views/components/ui-notification.vue
@@ -27,7 +27,7 @@ export default Vue.extend({
 					translateY: -64,
 					duration: 500,
 					easing: 'easeInElastic',
-					complete: () => this.$destroy()
+					complete: () => this.destroyDom()
 				});
 			}, 6000);
 		});
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index 1e1755ec3c..f6d6d68a7f 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -75,7 +75,7 @@ export default Vue.extend({
 				'margin-top': '-8px',
 				duration: 200,
 				easing: 'easeOutQuad',
-				complete: () => this.$destroy()
+				complete: () => this.destroyDom()
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index ec044ad27e..30f0ec558f 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -106,7 +106,7 @@ export default Vue.extend({
 
 	mounted() {
 		if (this.preventMount) {
-			this.$destroy();
+			this.destroyDom();
 			return;
 		}
 
@@ -190,7 +190,7 @@ export default Vue.extend({
 			});
 
 			setTimeout(() => {
-				this.$destroy();
+				this.destroyDom();
 				this.$emit('closed');
 			}, 300);
 		},
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index dfc3a819b8..db3852da60 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -31,9 +31,13 @@ require('./common/views/widgets');
 require('./common/views/filters');
 
 Vue.mixin({
-	destroyed(this: any) {
-		if (this.$el.parentNode) {
-			this.$el.parentNode.removeChild(this.$el);
+	methods: {
+		destroyDom() {
+			this.$destroy();
+
+			if (this.$el.parentNode) {
+				this.$el.parentNode.removeChild(this.$el);
+			}
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/components/dialog.vue b/src/client/app/mobile/views/components/dialog.vue
index 9ee01cb782..6a0d74c752 100644
--- a/src/client/app/mobile/views/components/dialog.vue
+++ b/src/client/app/mobile/views/components/dialog.vue
@@ -78,7 +78,7 @@ export default Vue.extend({
 				scale: 0.8,
 				duration: 300,
 				easing: [ 0.5, -0.5, 1, 0.5 ],
-				complete: () => this.$destroy()
+				complete: () => this.destroyDom()
 			});
 		},
 		onBgClick() {
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 aaa707d8a7..92ac211af2 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -31,15 +31,15 @@ export default Vue.extend({
 		},
 		onSelected(file) {
 			this.$emit('selected', file);
-			this.$destroy();
+			this.destroyDom();
 		},
 		cancel() {
 			this.$emit('canceled');
-			this.$destroy();
+			this.destroyDom();
 		},
 		ok() {
 			this.$emit('selected', this.files);
-			this.$destroy();
+			this.destroyDom();
 		}
 	}
 });
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 7934fb7816..6d3fba1efd 100644
--- a/src/client/app/mobile/views/components/drive-folder-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-folder-chooser.vue
@@ -19,11 +19,11 @@ export default Vue.extend({
 	methods: {
 		cancel() {
 			this.$emit('canceled');
-			this.$destroy();
+			this.destroyDom();
 		},
 		ok() {
 			this.$emit('selected', (this.$refs.browser as any).folder);
-			this.$destroy();
+			this.destroyDom();
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/components/friends-maker.vue b/src/client/app/mobile/views/components/friends-maker.vue
index e0461d2bc2..dbb82f4b18 100644
--- a/src/client/app/mobile/views/components/friends-maker.vue
+++ b/src/client/app/mobile/views/components/friends-maker.vue
@@ -47,7 +47,7 @@ export default Vue.extend({
 			this.fetch();
 		},
 		close() {
-			this.$destroy();
+			this.destroyDom();
 		}
 	}
 });
diff --git a/src/client/app/mobile/views/components/notify.vue b/src/client/app/mobile/views/components/notify.vue
index 307fb08cfa..5f94b91ddd 100644
--- a/src/client/app/mobile/views/components/notify.vue
+++ b/src/client/app/mobile/views/components/notify.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
 					[this.pos]: `-${this.$el.offsetHeight}px`,
 					duration: 500,
 					easing: 'easeOutQuad',
-					complete: () => this.$destroy()
+					complete: () => this.destroyDom()
 				});
 			}, 6000);
 		});
diff --git a/src/client/app/mobile/views/components/post-form-dialog.vue b/src/client/app/mobile/views/components/post-form-dialog.vue
index ec37386512..15b36db945 100644
--- a/src/client/app/mobile/views/components/post-form-dialog.vue
+++ b/src/client/app/mobile/views/components/post-form-dialog.vue
@@ -79,7 +79,7 @@ export default Vue.extend({
 				translateY: 16,
 				duration: 300,
 				easing: 'easeOutQuad',
-				complete: () => this.$destroy()
+				complete: () => this.destroyDom()
 			});
 		},
 
-- 
cgit v1.2.3-freya


From 952a49f7496c5c6a6dae8998e8d42ea53281db2e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sat, 15 Sep 2018 22:22:41 +0900
Subject: revert デスクトップの動画埋め込みを廃止
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/desktop/views/components/media-video.vue   | 26 +++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 0a374acb8f..8af5f9b07e 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -6,11 +6,19 @@
 	</div>
 </div>
 <div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else>
+	<video class="video"
+		:src="video.url"
+		:title="video.name"
+		controls
+		@dblclick.prevent="onClick"
+		ref="video"
+		v-if="inlinePlayable" />
 	<a class="thumbnail"
 		:href="video.url"
 		:style="imageStyle"
 		@click.prevent="onClick"
-		:title="video.name">
+		:title="video.name"
+		v-else>
 		%fa:R play-circle%
 	</a>
 </div>
@@ -19,13 +27,15 @@
 <script lang="ts">
 import Vue from 'vue';
 import MkMediaVideoDialog from './media-video-dialog.vue';
-
 export default Vue.extend({
 	props: {
 		video: {
 			type: Object,
 			required: true
 		},
+		inlinePlayable: {
+			default: false
+		},
 		hide: {
 			type: Boolean,
 			default: true
@@ -57,32 +67,32 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .vwxdhznewyashiknzolsoihtlpicqepe
+	.video
+		display block
+		width 100%
+		height 100%
+		border-radius 4px
 	.thumbnail
 		display flex
 		justify-content center
 		align-items center
 		font-size 3.5em
-
 		cursor zoom-in
 		overflow hidden
 		background-position center
 		background-size cover
 		width 100%
 		height 100%
-
 .uofhebxjdgksfmltszlxurtjnjjsvioh
 	display flex
 	justify-content center
 	align-items center
 	background #111
 	color #fff
-
 	> div
 		display table-cell
 		text-align center
 		font-size 12px
-
-		> *
+		> b
 			display block
-
 </style>
-- 
cgit v1.2.3-freya


From 7d768875176e38be394806376997055ee387f56f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 03:46:53 +0900
Subject: アニメーションを無効にするオプションを実装
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                              | 1 +
 src/client/app/common/views/components/trends.vue              | 6 ++----
 src/client/app/desktop/views/components/notes.vue              | 4 ++--
 src/client/app/desktop/views/components/notifications.vue      | 4 ++--
 src/client/app/desktop/views/components/settings.vue           | 6 ++++++
 src/client/app/desktop/views/pages/deck/deck.notifications.vue | 6 ++----
 src/client/app/mobile/views/components/notes.vue               | 4 ++--
 src/client/app/mobile/views/components/notifications.vue       | 6 ++----
 src/client/app/mobile/views/pages/settings.vue                 | 6 ++++++
 src/client/app/store.ts                                        | 1 +
 10 files changed, 26 insertions(+), 18 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 72dc88b7b3..c5ec3fd588 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -119,6 +119,7 @@ common:
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
   always-mark-nsfw: "常にメディアを閲覧注意として投稿"
   show-full-acct: "ユーザー名のホストを省略しない"
+  enable-animations: "アニメーションを使用"
   this-setting-is-this-device-only: "このデバイスのみ"
 
   do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
index 627edc3876..0042dbe853 100644
--- a/src/client/app/common/views/components/trends.vue
+++ b/src/client/app/common/views/components/trends.vue
@@ -3,8 +3,7 @@
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
 	<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!-- <transition-group v-else tag="div" name="chart"> -->
-	<div>
+	<transition-group v-else tag="div" name="chart">
 		<div v-for="stat in stats" :key="stat.tag">
 			<div class="tag">
 				<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
@@ -12,8 +11,7 @@
 			</div>
 			<x-chart class="chart" :src="stat.chart"/>
 		</div>
-	</div>
-	<!-- </transition-group> -->
+	</transition-group>
 </div>
 </template>
 
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 26aa0c8dea..1d8c3fff36 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -10,7 +10,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<transition-group name="mk-notes" class="notes transition" tag="div">
+	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
 		<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">
@@ -18,7 +18,7 @@
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</transition-group>
+	</component>
 
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 9d0e73adef..0debd3f824 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -2,7 +2,7 @@
 <div class="mk-notifications">
 	<div class="notifications" v-if="notifications.length != 0">
 		<!-- トランジションを有効にするとなぜかメモリリークする -->
-		<transition-group name="mk-notifications" class="transition" tag="div">
+		<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div">
 			<template v-for="(notification, i) in _notifications">
 				<div class="notification" :class="notification.type" :key="notification.id">
 					<mk-time :time="notification.createdAt"/>
@@ -96,7 +96,7 @@
 					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 				</p>
 			</template>
-		</transition-group>
+		</component>
 	</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%' }}
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 709715e598..c46f6cfab1 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -60,6 +60,7 @@
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
+				<mk-switch v-model="animations" text="%i18n:common.enable-animations%"/>
 				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
 				<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
 				<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
@@ -246,6 +247,11 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		animations: {
+			get() { return this.$store.state.device.animations; },
+			set(value) { this.$store.commit('device/set', { key: 'animations', value }); }
+		},
+
 		apiViaStream: {
 			get() { return this.$store.state.device.apiViaStream; },
 			set(value) { this.$store.commit('device/set', { key: 'apiViaStream', value }); }
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index fcb74b9140..18d9a21c64 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -1,8 +1,7 @@
 <template>
 <div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!--<transition-group name="mk-notifications" class="transition notifications">-->
-	<div class="notifications">
+	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 		<template v-for="(notification, i) in _notifications">
 			<x-notification class="notification" :notification="notification" :key="notification.id"/>
 			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
@@ -10,8 +9,7 @@
 				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</div>
-	<!--</transition-group>-->
+	</component>
 	<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%' }}
 	</button>
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 17806f062e..f2ad93bebf 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -14,7 +14,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<transition-group name="mk-notes" class="transition" tag="div">
+	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
 		<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">
@@ -22,7 +22,7 @@
 				<span>%fa:angle-down%{{ _notes[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</transition-group>
+	</component>
 
 	<footer v-if="more">
 		<button @click="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 9f20c3fb22..95c85beaca 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -1,8 +1,7 @@
 <template>
 <div class="mk-notifications">
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<!-- <transition-group name="mk-notifications" class="transition notifications"> -->
-	<div class="transition notifications">
+	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 		<template v-for="(notification, i) in _notifications">
 			<mk-notification :notification="notification" :key="notification.id"/>
 			<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
@@ -10,8 +9,7 @@
 				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
 			</p>
 		</template>
-	</div>
-	<!-- </transition-group> -->
+	</component>
 
 	<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
 		<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 9b0e521a4f..c14a683f23 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -13,6 +13,7 @@
 				<section>
 					<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
 					<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
+					<ui-switch v-model="animations">%i18n:common.enable-animations% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
 					<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 					<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
 					<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
@@ -168,6 +169,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
 		},
 
+		animations: {
+			get() { return this.$store.state.device.animations; },
+			set(value) { this.$store.commit('device/set', { key: 'animations', value }); }
+		},
+
 		alwaysShowNsfw: {
 			get() { return this.$store.state.device.alwaysShowNsfw; },
 			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 997bddc5cc..a7d9bd4560 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -38,6 +38,7 @@ const defaultSettings = {
 };
 
 const defaultDeviceSettings = {
+	animations: true,
 	apiViaStream: true,
 	autoPopout: false,
 	darkmode: false,
-- 
cgit v1.2.3-freya


From 2e3d0d3435ea7597ba22ba718f1189ecf3e44843 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 03:48:16 +0900
Subject: Fix bug

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

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index e53ba48ffb..024c73674c 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -59,7 +59,7 @@ import MkVisibilityChooser from '../../../common/views/components/visibility-cho
 import getFace from '../../../common/scripts/get-face';
 import parse from '../../../../../mfm/parse';
 import { host } from '../../../config';
-import { erase } from '../../../../../prelude/array';
+import { erase, unique } from '../../../../../prelude/array';
 import { length } from 'stringz';
 import parseAcct from '../../../../../misc/acct/parse';
 
-- 
cgit v1.2.3-freya


From 2a96429be81460036cea60cf57f88f2e9a77d8ba Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:21:48 +0900
Subject: バグ修正やデザイン調整など
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/common/views/components/media-banner.vue   | 26 ++++++++++------------
 .../app/common/views/components/media-list.vue     | 22 ++++++++++++------
 2 files changed, 27 insertions(+), 21 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 5c83925a32..0693143f02 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="mk-media-banner">
-	<div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false">
-		<span class="mk-media-banner-icon">%fa:exclamation-triangle%</span>
+	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
+		<span class="icon">%fa:exclamation-triangle%</span>
 		<b>%i18n:@sensitive%</b>
 		<span>%i18n:@click-to-show%</span>
 	</div>
-	<div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')">
+	<div class="audio" v-else-if="media.type.startsWith('audio')">
 		<audio class="audio"
 			:src="media.url"
 			:title="media.name"
@@ -13,12 +13,12 @@
 			ref="audio"
 			preload="metadata" />
 	</div>
-	<a class="mk-media-banner-download" v-else
+	<a class="download" v-else
 		:href="media.url"
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="mk-media-banner-icon">%fa:download%</span>
+		<span class="icon">%fa:download%</span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
@@ -48,40 +48,38 @@ root(isDark)
 	margin-top 4px
 	overflow hidden
 
-	.mk-media-banner-download,
-	.mk-media-banner-sensitive
+	> .download,
+	> .sensitive
 		display flex
 		align-items center
 		font-size 12px
-		padding .2em .6em
+		padding 8px 12px
 		white-space nowrap
 
 		> *
 			display block
 
 		> b
-			flex-shrink 2147483647
 			overflow hidden
 			text-overflow ellipsis
 
 		> *:not(:last-child)
 			margin-right .2em
 
-		> .mk-media-banner-icon
+		> .icon
 			font-size 1.6em
 
-	.mk-media-banner-download
+	> .download
 		background isDark ? #21242d : #f7f7f7
 
-	.mk-media-banner-sensitive
+	> .sensitive
 		background #111
 		color #fff
 
-	.mk-media-banner-audio
+	> .audio
 		.audio
 			display block
 			width 100%
-			height 100%
 
 .mk-media-banner[data-darkmode]
 	root(true)
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index e949c063ab..b4b7d8f87f 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="mk-media-list">
-	<template v-for="media in mediaList">
-		<mk-media-banner :media="media" :key="media.id" v-if="!media.type.startsWith('image') && !media.type.startsWith('video')"/>
+	<template v-for="media in mediaList.filter(media => !previewable(media))">
+		<mk-media-banner :media="media" :key="media.id"/>
 	</template>
-	<div class="mk-media-list-fixed" v-if="mediaList.filter(media => media.type.startsWith('image') || media.type.startsWith('video')).length > 0">
-		<div :data-count="mediaList.filter(media => media.type.startsWith('video') || media.type.startsWith('image')).length" ref="grid">
+	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
+		<div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid">
 			<template v-for="media in mediaList">
 				<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
 				<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
@@ -27,15 +27,23 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		// for Safari bug
-		this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
+		//#region for Safari bug
+		if (this.$refs.grid) {
+			this.$refs.grid.style.height = this.$refs.grid.clientHeight ? `${this.$refs.grid.clientHeight}px` : '128px';
+		}
+		//#endregion
+	},
+	methods: {
+		previewable(file) {
+			return file.type.startsWith('video') || file.type.startsWith('image');
+		}
 	}
 });
 </script>
 
 <style lang="stylus" scoped>
 .mk-media-list
-	> .mk-media-list-fixed
+	> .gird-container
 		width 100%
 		margin-top 4px
 
-- 
cgit v1.2.3-freya


From 8d24fcba6ab18ef03127f8d95eb87ce45bb005d7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:26:01 +0900
Subject: :v:

---
 src/client/app/common/views/components/index.ts       | 2 --
 src/client/app/common/views/components/media-list.vue | 6 +++++-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 21af4ec846..6f8152cea2 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -20,7 +20,6 @@ import reactionsViewer from './reactions-viewer.vue';
 import time from './time.vue';
 import timer from './timer.vue';
 import mediaList from './media-list.vue';
-import mediaBanner from './media-banner.vue';
 import uploader from './uploader.vue';
 import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
@@ -64,7 +63,6 @@ Vue.component('mk-reactions-viewer', reactionsViewer);
 Vue.component('mk-time', time);
 Vue.component('mk-timer', timer);
 Vue.component('mk-media-list', mediaList);
-Vue.component('mk-media-banner', mediaBanner);
 Vue.component('mk-uploader', uploader);
 Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index b4b7d8f87f..d83d6f85cd 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-media-list">
 	<template v-for="media in mediaList.filter(media => !previewable(media))">
-		<mk-media-banner :media="media" :key="media.id"/>
+		<x-banner :media="media" :key="media.id"/>
 	</template>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
 		<div :data-count="mediaList.filter(media => previewable(media)).length" ref="grid">
@@ -16,8 +16,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import XBanner from './media-banner.vue';
 
 export default Vue.extend({
+	components: {
+		XBanner
+	},
 	props: {
 		mediaList: {
 			required: true
-- 
cgit v1.2.3-freya


From a680bcda1fdb6f0658fea1c99cc115ce10e190c5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:27:10 +0900
Subject: Fix

---
 src/client/app/desktop/views/components/media-video.vue | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 8af5f9b07e..d2752b0c95 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -27,6 +27,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import MkMediaVideoDialog from './media-video-dialog.vue';
+
 export default Vue.extend({
 	props: {
 		video: {
@@ -72,6 +73,7 @@ export default Vue.extend({
 		width 100%
 		height 100%
 		border-radius 4px
+
 	.thumbnail
 		display flex
 		justify-content center
@@ -83,16 +85,19 @@ export default Vue.extend({
 		background-size cover
 		width 100%
 		height 100%
+
 .uofhebxjdgksfmltszlxurtjnjjsvioh
 	display flex
 	justify-content center
 	align-items center
 	background #111
 	color #fff
+
 	> div
 		display table-cell
 		text-align center
 		font-size 12px
+
 		> b
 			display block
 </style>
-- 
cgit v1.2.3-freya


From 19152c28cb88eee42ef820242f47deeb9d1c63d8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:31:55 +0900
Subject: Fix bug

---
 src/client/app/common/views/components/media-banner.vue |  9 +++++----
 src/client/app/desktop/views/components/media-image.vue |  9 +++++----
 src/client/app/desktop/views/components/media-video.vue |  9 +++++----
 src/client/app/mobile/views/components/media-image.vue  |  9 +++++----
 src/client/app/mobile/views/components/media-video.vue  | 15 +++++++++------
 5 files changed, 29 insertions(+), 22 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 0693143f02..211dbf0208 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -32,11 +32,12 @@ export default Vue.extend({
 		media: {
 			type: Object,
 			required: true
-		},
-		hide: {
-			type: Boolean,
-			default: true
 		}
+	},
+	data() {
+		return {
+			hide: true
+		};
 	}
 })
 </script>
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 3cff8cfc04..f9ab188ca5 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -27,12 +27,13 @@ export default Vue.extend({
 		},
 		raw: {
 			default: false
-		},
-		hide: {
-			type: Boolean,
-			default: true
 		}
 	},
+	data() {
+		return {
+			hide: true
+		};
+	},
 	computed: {
 		style(): any {
 			return {
diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index d2752b0c95..1ff762abc2 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -36,12 +36,13 @@ export default Vue.extend({
 		},
 		inlinePlayable: {
 			default: false
-		},
-		hide: {
-			type: Boolean,
-			default: true
 		}
 	},
+	data() {
+		return {
+			hide: true
+		};
+	},
 	computed: {
 		imageStyle(): any {
 			return {
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index e38cef06ba..652a2ad3a4 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -19,12 +19,13 @@ export default Vue.extend({
 		},
 		raw: {
 			default: false
-		},
-		hide: {
-			type: Boolean,
-			default: true
 		}
 	},
+	data() {
+		return {
+			hide: true
+		};
+	}
 	computed: {
 		style(): any {
 			let url = `url(${this.image.thumbnailUrl})`;
diff --git a/src/client/app/mobile/views/components/media-video.vue b/src/client/app/mobile/views/components/media-video.vue
index aea7f41460..1e2c1ea7b0 100644
--- a/src/client/app/mobile/views/components/media-video.vue
+++ b/src/client/app/mobile/views/components/media-video.vue
@@ -15,25 +15,28 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue from 'vue';
+
 export default Vue.extend({
 	props: {
 		video: {
 			type: Object,
 			required: true
-		},
-		hide: {
-			type: Boolean,
-			default: true
 		}
 	},
+	data() {
+		return {
+			hide: true
+		};
+	},
 	computed: {
 		imageStyle(): any {
 			return {
 				'background-image': `url(${this.video.url})`
 			};
 		}
-	},})
+	}
+});
 </script>
 
 <style lang="stylus" scoped>
-- 
cgit v1.2.3-freya


From a61320ca8c6148f7b1b75278a7ddcf364b205009 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 04:34:46 +0900
Subject: Improve usability

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index c371940aa3..8db85aeaca 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -49,7 +49,7 @@
 	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
 		{{ posting ? '%i18n:@posting%' : submitText }}<mk-ellipsis v-if="posting"/>
 	</button>
-	<input ref="file" type="file" accept="image/*" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
+	<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
 	<div class="dropzone" v-if="draghover"></div>
 </div>
 </template>
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 024c73674c..1294273a2a 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -42,7 +42,7 @@
 					<span v-if="visibility === 'private'">%fa:lock%</span>
 				</button>
 			</footer>
-			<input ref="file" class="file" type="file" accept="image/*" multiple="multiple" @change="onChangeFile"/>
+			<input ref="file" class="file" type="file" multiple="multiple" @change="onChangeFile"/>
 		</div>
 	</div>
 	<div class="hashtags" v-if="recentHashtags.length > 0 && $store.state.settings.suggestRecentHashtags">
-- 
cgit v1.2.3-freya


From cda3635d97fbacb3fda2f36cd501b962f4fda410 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 21:40:48 +0900
Subject: enable-animations --> reduce-motion

---
 locales/ja-JP.yml                                              | 2 +-
 src/client/app/desktop/views/components/notes.vue              | 2 +-
 src/client/app/desktop/views/components/notifications.vue      | 2 +-
 src/client/app/desktop/views/components/settings.vue           | 8 ++++----
 src/client/app/desktop/views/pages/deck/deck.notifications.vue | 2 +-
 src/client/app/mobile/views/components/notes.vue               | 2 +-
 src/client/app/mobile/views/components/notifications.vue       | 2 +-
 src/client/app/mobile/views/pages/settings.vue                 | 8 ++++----
 src/client/app/store.ts                                        | 2 +-
 9 files changed, 15 insertions(+), 15 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c2a8110d92..3ced4dafe1 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -119,7 +119,7 @@ common:
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
   always-mark-nsfw: "常にメディアを閲覧注意として投稿"
   show-full-acct: "ユーザー名のホストを省略しない"
-  enable-animations: "アニメーションを使用"
+  reduce-motion: "UIの動きを減らす"
   this-setting-is-this-device-only: "このデバイスのみ"
 
   do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 1d8c3fff36..ec9aa285d0 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -10,7 +10,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
 		<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">
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 0debd3f824..2eb80dcd01 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -2,7 +2,7 @@
 <div class="mk-notifications">
 	<div class="notifications" v-if="notifications.length != 0">
 		<!-- トランジションを有効にするとなぜかメモリリークする -->
-		<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div">
+		<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition" tag="div">
 			<template v-for="(notification, i) in _notifications">
 				<div class="notification" :class="notification.type" :key="notification.id">
 					<mk-time :time="notification.createdAt"/>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index c46f6cfab1..3911ec5931 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -60,7 +60,7 @@
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
 				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
-				<mk-switch v-model="animations" text="%i18n:common.enable-animations%"/>
+				<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
 				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
 				<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
 				<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
@@ -247,9 +247,9 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		animations: {
-			get() { return this.$store.state.device.animations; },
-			set(value) { this.$store.commit('device/set', { key: 'animations', value }); }
+		reduceMotion: {
+			get() { return this.$store.state.device.reduceMotion; },
+			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
 		},
 
 		apiViaStream: {
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index 18d9a21c64..f73f221b7b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 		<template v-for="(notification, i) in _notifications">
 			<x-notification class="notification" :notification="notification" :key="notification.id"/>
 			<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index f2ad93bebf..401df3ae5b 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -14,7 +14,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="transition" tag="div">
 		<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">
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 95c85beaca..11ac23f4b1 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-notifications">
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="$store.state.device.animations ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
 		<template v-for="(notification, i) in _notifications">
 			<mk-notification :notification="notification" :key="notification.id"/>
 			<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index c14a683f23..f315c058df 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -13,7 +13,7 @@
 				<section>
 					<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
 					<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
-					<ui-switch v-model="animations">%i18n:common.enable-animations% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
+					<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion% (%i18n:common.this-setting-is-this-device-only%)</ui-switch>
 					<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 					<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
 					<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
@@ -169,9 +169,9 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
 		},
 
-		animations: {
-			get() { return this.$store.state.device.animations; },
-			set(value) { this.$store.commit('device/set', { key: 'animations', value }); }
+		reduceMotion: {
+			get() { return this.$store.state.device.reduceMotion; },
+			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
 		},
 
 		alwaysShowNsfw: {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index a7d9bd4560..7eaef13125 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -38,7 +38,7 @@ const defaultSettings = {
 };
 
 const defaultDeviceSettings = {
-	animations: true,
+	reduceMotion: false,
 	apiViaStream: true,
 	autoPopout: false,
 	darkmode: false,
-- 
cgit v1.2.3-freya


From 32afe77a269f414965373e3c53044c4a94cfeded Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 22:48:57 +0900
Subject: 自分宛ての投稿をタイムラインで見れるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |  3 ++
 .../app/desktop/views/components/timeline.core.vue |  6 ++-
 .../app/desktop/views/components/timeline.vue      |  2 +
 .../app/mobile/views/pages/home.timeline.vue       |  6 ++-
 src/client/app/mobile/views/pages/home.vue         |  3 ++
 src/models/note.ts                                 |  2 +
 src/server/api/endpoints/notes/mentions.ts         | 59 ++++++++++++----------
 src/services/note/create.ts                        |  4 ++
 8 files changed, 54 insertions(+), 31 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3ced4dafe1..2a8cfebb57 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -167,6 +167,7 @@ common:
     local: "ローカル"
     hybrid: "ソーシャル"
     global: "グローバル"
+    mentions: "あなた宛て"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -913,6 +914,7 @@ desktop/views/components/timeline.vue:
   local: "ローカル"
   hybrid: "ソーシャル"
   global: "グローバル"
+  mentions: "あなた宛て"
   list: "リスト"
 
 desktop/views/components/ui.header.vue:
@@ -1314,6 +1316,7 @@ mobile/views/pages/home.vue:
   local: "ローカル"
   hybrid: "ソーシャル"
   global: "グローバル"
+  mentions: "あなた宛て"
 
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index 25fd5d36ac..b6b5cca817 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -48,6 +48,7 @@ export default Vue.extend({
 				case 'local': return (this as any).os.streams.localTimelineStream;
 				case 'hybrid': return (this as any).os.streams.hybridTimelineStream;
 				case 'global': return (this as any).os.streams.globalTimelineStream;
+				case 'mentions': return (this as any).os.stream;
 			}
 		},
 
@@ -57,6 +58,7 @@ export default Vue.extend({
 				case 'local': return 'notes/local-timeline';
 				case 'hybrid': return 'notes/hybrid-timeline';
 				case 'global': return 'notes/global-timeline';
+				case 'mentions': return 'notes/mentions';
 			}
 		},
 
@@ -69,7 +71,7 @@ export default Vue.extend({
 		this.connection = this.stream.getConnection();
 		this.connectionId = this.stream.use();
 
-		this.connection.on('note', this.onNote);
+		this.connection.on(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
 		if (this.src == 'home') {
 			this.connection.on('follow', this.onChangeFollowing);
 			this.connection.on('unfollow', this.onChangeFollowing);
@@ -81,7 +83,7 @@ export default Vue.extend({
 	},
 
 	beforeDestroy() {
-		this.connection.off('note', this.onNote);
+		this.connection.off(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
 		if (this.src == 'home') {
 			this.connection.off('follow', this.onChangeFollowing);
 			this.connection.off('unfollow', this.onChangeFollowing);
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 8d72016f22..3e51d12883 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -5,6 +5,7 @@
 		<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
 		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
+		<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
 		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
 		<button @click="chooseList" title="%i18n:@list%">%fa:list%</button>
 	</header>
@@ -12,6 +13,7 @@
 	<x-core v-if="src == 'local'" ref="tl" key="local" src="local"/>
 	<x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 	<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
+	<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
 	<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.timeline.vue b/src/client/app/mobile/views/pages/home.timeline.vue
index 416b006cd8..d4fcea1f93 100644
--- a/src/client/app/mobile/views/pages/home.timeline.vue
+++ b/src/client/app/mobile/views/pages/home.timeline.vue
@@ -47,6 +47,7 @@ export default Vue.extend({
 				case 'local': return (this as any).os.streams.localTimelineStream;
 				case 'hybrid': return (this as any).os.streams.hybridTimelineStream;
 				case 'global': return (this as any).os.streams.globalTimelineStream;
+				case 'mentions': return (this as any).os.stream;
 			}
 		},
 
@@ -56,6 +57,7 @@ export default Vue.extend({
 				case 'local': return 'notes/local-timeline';
 				case 'hybrid': return 'notes/hybrid-timeline';
 				case 'global': return 'notes/global-timeline';
+				case 'mentions': return 'notes/mentions';
 			}
 		},
 
@@ -68,7 +70,7 @@ export default Vue.extend({
 		this.connection = this.stream.getConnection();
 		this.connectionId = this.stream.use();
 
-		this.connection.on('note', this.onNote);
+		this.connection.on(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
 		if (this.src == 'home') {
 			this.connection.on('follow', this.onChangeFollowing);
 			this.connection.on('unfollow', this.onChangeFollowing);
@@ -78,7 +80,7 @@ export default Vue.extend({
 	},
 
 	beforeDestroy() {
-		this.connection.off('note', this.onNote);
+		this.connection.off(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
 		if (this.src == 'home') {
 			this.connection.off('follow', this.onChangeFollowing);
 			this.connection.off('unfollow', this.onChangeFollowing);
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 333ca1a7a1..3150bb02b4 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -6,6 +6,7 @@
 			<span v-if="src == 'local'">%fa:R comments%%i18n:@local%</span>
 			<span v-if="src == 'hybrid'">%fa:share-alt%%i18n:@hybrid%</span>
 			<span v-if="src == 'global'">%fa:globe%%i18n:@global%</span>
+			<span v-if="src == 'mentions'">%fa:at%%i18n:@mentions%</span>
 			<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
 		</span>
 		<span style="margin-left:8px">
@@ -27,6 +28,7 @@
 					<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
 					<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 					<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
+					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
 					<template v-if="lists">
 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
 					</template>
@@ -39,6 +41,7 @@
 			<x-tl v-if="src == 'local'" ref="tl" key="local" src="local"/>
 			<x-tl v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
+			<x-tl v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
 			<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 		</div>
 	</main>
diff --git a/src/models/note.ts b/src/models/note.ts
index 6530d0b324..62b1b3ecb1 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -17,6 +17,8 @@ import Following from './following';
 const Note = db.get<INote>('notes');
 Note.createIndex('uri', { sparse: true, unique: true });
 Note.createIndex('userId');
+Note.createIndex('mentions');
+Note.createIndex('visibleUserIds');
 Note.createIndex('tagsLower');
 Note.createIndex('_files.contentType');
 Note.createIndex({
diff --git a/src/server/api/endpoints/notes/mentions.ts b/src/server/api/endpoints/notes/mentions.ts
index a7fb14d8a9..3b2e262e4f 100644
--- a/src/server/api/endpoints/notes/mentions.ts
+++ b/src/server/api/endpoints/notes/mentions.ts
@@ -3,6 +3,7 @@ import Note from '../../../../models/note';
 import { getFriendIds } from '../../common/get-friends';
 import { pack } from '../../../../models/note';
 import { ILocalUser } from '../../../../models/user';
+import getParams from '../../get-params';
 
 export const meta = {
 	desc: {
@@ -10,42 +11,48 @@ export const meta = {
 		'en-US': 'Get mentions of myself.'
 	},
 
-	requireCredential: true
-};
+	requireCredential: true,
 
-export default (params: any, user: ILocalUser) => new Promise(async (res, rej) => {
-	// Get 'following' parameter
-	const [following = false, followingError] =
-		$.bool.optional.get(params.following);
-	if (followingError) return rej('invalid following param');
+	params: {
+		following: $.bool.optional.note({
+			default: false
+		}),
+
+		limit: $.num.optional.range(1, 100).note({
+			default: 10
+		}),
 
-	// Get 'limit' parameter
-	const [limit = 10, limitErr] = $.num.optional.range(1, 100).get(params.limit);
-	if (limitErr) return rej('invalid limit param');
+		sinceId: $.type(ID).optional.note({
+		}),
 
-	// Get 'sinceId' parameter
-	const [sinceId, sinceIdErr] = $.type(ID).optional.get(params.sinceId);
-	if (sinceIdErr) return rej('invalid sinceId param');
+		untilId: $.type(ID).optional.note({
+		}),
+	}
+};
 
-	// Get 'untilId' parameter
-	const [untilId, untilIdErr] = $.type(ID).optional.get(params.untilId);
-	if (untilIdErr) return rej('invalid untilId param');
+export default (params: any, user: ILocalUser) => new Promise(async (res, rej) => {
+	const [ps, psErr] = getParams(meta, params);
+	if (psErr) throw psErr;
 
 	// Check if both of sinceId and untilId is specified
-	if (sinceId && untilId) {
+	if (ps.sinceId && ps.untilId) {
 		return rej('cannot set sinceId and untilId');
 	}
 
 	// Construct query
 	const query = {
-		mentions: user._id
+		$or: [{
+			mentions: user._id
+		}, {
+			visibleUserIds: user._id
+		}]
 	} as any;
 
 	const sort = {
 		_id: -1
 	};
 
-	if (following) {
+	if (ps.following) {
 		const followingIds = await getFriendIds(user._id);
 
 		query.userId = {
@@ -53,26 +60,24 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 		};
 	}
 
-	if (sinceId) {
+	if (ps.sinceId) {
 		sort._id = 1;
 		query._id = {
-			$gt: sinceId
+			$gt: ps.sinceId
 		};
-	} else if (untilId) {
+	} else if (ps.untilId) {
 		query._id = {
-			$lt: untilId
+			$lt: ps.untilId
 		};
 	}
 
 	// Issue query
 	const mentions = await Note
 		.find(query, {
-			limit: limit,
+			limit: ps.limit,
 			sort: sort
 		});
 
 	// Serialize
-	res(await Promise.all(mentions.map(async mention =>
-		await pack(mention, user)
-	)));
+	res(await Promise.all(mentions.map(mention => pack(mention, user))));
 });
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 771e9cade8..aa65cfe0cf 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -138,6 +138,10 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 
 	const mentionedUsers = await extractMentionedUsers(tokens);
 
+	if (data.reply && !user._id.equals(data.reply.userId) && !mentionedUsers.some(u => u._id.equals(data.reply.userId))) {
+		mentionedUsers.push(await User.findOne({ _id: data.reply.userId }));
+	}
+
 	const note = await insertNote(user, data, tags, mentionedUsers);
 
 	res(note);
-- 
cgit v1.2.3-freya


From afeb8058b170e9e121d5d60fc4185f371934ef81 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 16 Sep 2018 23:15:02 +0900
Subject: Add mentions column (Deck)

---
 .../desktop/views/pages/deck/deck.column-core.vue  |  5 +-
 .../views/pages/deck/deck.mentions-column.vue      | 38 +++++++++
 .../app/desktop/views/pages/deck/deck.mentions.vue | 93 ++++++++++++++++++++++
 src/client/app/desktop/views/pages/deck/deck.vue   |  9 +++
 4 files changed, 144 insertions(+), 1 deletion(-)
 create mode 100644 src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
 create mode 100644 src/client/app/desktop/views/pages/deck/deck.mentions.vue

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/deck/deck.column-core.vue b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
index 7f219c0be1..b7602bd235 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column-core.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
@@ -6,6 +6,7 @@
 <x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked"/>
 <x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked"/>
 <x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked"/>
+<x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked"/>
 </template>
 
 <script lang="ts">
@@ -13,12 +14,14 @@ import Vue from 'vue';
 import XTlColumn from './deck.tl-column.vue';
 import XNotificationsColumn from './deck.notifications-column.vue';
 import XWidgetsColumn from './deck.widgets-column.vue';
+import XMentionsColumn from './deck.mentions-column.vue';
 
 export default Vue.extend({
 	components: {
 		XTlColumn,
 		XNotificationsColumn,
-		XWidgetsColumn
+		XWidgetsColumn,
+		XMentionsColumn
 	},
 
 	props: {
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
new file mode 100644
index 0000000000..8ec10164f2
--- /dev/null
+++ b/src/client/app/desktop/views/pages/deck/deck.mentions-column.vue
@@ -0,0 +1,38 @@
+<template>
+<x-column :name="name" :column="column" :is-stacked="isStacked">
+	<span slot="header">%fa:at%{{ name }}</span>
+
+	<x-mentions/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XColumn from './deck.column.vue';
+import XMentions from './deck.mentions.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XMentions
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+			return '%i18n:common.deck.mentions%';
+		}
+	},
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions.vue b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
new file mode 100644
index 0000000000..cecb75f067
--- /dev/null
+++ b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
@@ -0,0 +1,93 @@
+<template>
+	<x-notes ref="timeline" :more="existMore ? more : null"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+
+	mounted() {
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('mention', this.onNote);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.off('mention', this.onNote);
+		(this as any).os.stream.dispose(this.connectionId);
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/mentions', {
+					limit: fetchLimit + 1,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+				}).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;
+
+			const promise = (this as any).api('notes/mentions', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			});
+
+			promise.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;
+			});
+
+			return promise;
+		},
+		onNote(note) {
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 5e7a07ea6b..4a4535959e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -138,6 +138,15 @@ export default Vue.extend({
 							type: 'global'
 						});
 					}
+				}, {
+					icon: '%fa:at%',
+					text: '%i18n:common.deck.mentions%',
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'mentions'
+						});
+					}
 				}, {
 					icon: '%fa:list%',
 					text: '%i18n:common.deck.list%',
-- 
cgit v1.2.3-freya


From 8751d917948df1dfda5a69c01175a19b05f624f2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 17 Sep 2018 02:56:57 +0900
Subject: Better stats page

---
 src/client/app/desktop/views/components/charts.vue | 4 ++--
 src/client/app/desktop/views/pages/stats/stats.vue | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue
index 6514cdf788..e401095363 100644
--- a/src/client/app/desktop/views/components/charts.vue
+++ b/src/client/app/desktop/views/components/charts.vue
@@ -100,7 +100,7 @@ export default Vue.extend({
 
 	created() {
 		(this as any).api('chart', {
-			limit: 32
+			limit: 35
 		}).then(chart => {
 			this.chart = chart;
 		});
@@ -681,6 +681,6 @@ export default Vue.extend({
 	> div
 		> *
 			display block
-			height 320px
+			height 350px
 
 </style>
diff --git a/src/client/app/desktop/views/pages/stats/stats.vue b/src/client/app/desktop/views/pages/stats/stats.vue
index 41005b6398..7a4e4ab5ce 100644
--- a/src/client/app/desktop/views/pages/stats/stats.vue
+++ b/src/client/app/desktop/views/pages/stats/stats.vue
@@ -43,7 +43,7 @@ export default Vue.extend({
 	> .stats
 		display flex
 		justify-content center
-		margin-bottom 16px
+		margin 0 auto 16px auto
 		padding 32px
 		background #fff
 		box-shadow 0 2px 8px rgba(#000, 0.1)
@@ -60,5 +60,6 @@ export default Vue.extend({
 				font-size 70%
 
 	> div
-		max-width 850px
+		max-width 950px
+		margin 0 auto
 </style>
-- 
cgit v1.2.3-freya


From 109738ccb9ef8c203685e6f4bc31986ac2a17046 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 17 Sep 2018 09:00:20 +0900
Subject: ハッシュタグタイムラインを実装
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |   5 +
 src/client/app/common/scripts/streaming/hashtag.ts |  13 +++
 .../desktop/views/components/settings-window.vue   |   8 +-
 .../app/desktop/views/components/settings.tags.vue |  65 +++++++++++
 .../app/desktop/views/components/settings.vue      |  18 +++-
 .../app/desktop/views/components/timeline.core.vue |  76 +++++++++----
 .../app/desktop/views/components/timeline.vue      | 119 +++++++++++++++++----
 .../desktop/views/pages/deck/deck.column-core.vue  |   1 +
 .../desktop/views/pages/deck/deck.hashtag-tl.vue   | 117 ++++++++++++++++++++
 .../desktop/views/pages/deck/deck.tl-column.vue    |   7 +-
 src/client/app/desktop/views/pages/deck/deck.vue   |  14 +++
 .../app/mobile/views/pages/home.timeline.vue       |  76 +++++++++----
 src/client/app/mobile/views/pages/home.vue         |  17 ++-
 src/client/app/store.ts                            |   1 +
 src/server/api/endpoints/notes/search_by_tag.ts    |  45 ++++----
 src/server/api/stream/hashtag.ts                   |  48 +++++++++
 src/server/api/streaming.ts                        |   6 ++
 src/services/note/create.ts                        |   6 +-
 src/stream.ts                                      |   5 +
 19 files changed, 555 insertions(+), 92 deletions(-)
 create mode 100644 src/client/app/common/scripts/streaming/hashtag.ts
 create mode 100644 src/client/app/desktop/views/components/settings.tags.vue
 create mode 100644 src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
 create mode 100644 src/server/api/stream/hashtag.ts

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 2a8cfebb57..a3b2bd88e7 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -166,6 +166,7 @@ common:
     home: "ホーム"
     local: "ローカル"
     hybrid: "ソーシャル"
+    hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
     notifications: "通知"
@@ -916,6 +917,10 @@ desktop/views/components/timeline.vue:
   global: "グローバル"
   mentions: "あなた宛て"
   list: "リスト"
+  hashtag: "ハッシュタグ"
+  add-tag-timeline: "ハッシュタグを追加"
+  add-list: "リストを追加"
+  list-name: "リスト名"
 
 desktop/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
diff --git a/src/client/app/common/scripts/streaming/hashtag.ts b/src/client/app/common/scripts/streaming/hashtag.ts
new file mode 100644
index 0000000000..276b8f8d3d
--- /dev/null
+++ b/src/client/app/common/scripts/streaming/hashtag.ts
@@ -0,0 +1,13 @@
+import Stream from './stream';
+import MiOS from '../../../mios';
+
+export class HashtagStream extends Stream {
+	constructor(os: MiOS, me, q) {
+		super(os, 'hashtag', me ? {
+			i: me.token,
+			q: JSON.stringify(q)
+		} : {
+			q: JSON.stringify(q)
+		});
+	}
+}
diff --git a/src/client/app/desktop/views/components/settings-window.vue b/src/client/app/desktop/views/components/settings-window.vue
index deb865b102..b4cc570282 100644
--- a/src/client/app/desktop/views/components/settings-window.vue
+++ b/src/client/app/desktop/views/components/settings-window.vue
@@ -1,13 +1,19 @@
 <template>
 <mk-window ref="window" is-modal width="700px" height="550px" @closed="$destroy">
 	<span slot="header" :class="$style.header">%fa:cog%%i18n:@settings%</span>
-	<mk-settings @done="close"/>
+	<mk-settings :initial-page="initialPage" @done="close"/>
 </mk-window>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 export default Vue.extend({
+	props: {
+		initialPage: {
+			type: String,
+			required: false
+		}
+	},
 	methods: {
 		close() {
 			(this as any).$refs.window.close();
diff --git a/src/client/app/desktop/views/components/settings.tags.vue b/src/client/app/desktop/views/components/settings.tags.vue
new file mode 100644
index 0000000000..a7234f7d87
--- /dev/null
+++ b/src/client/app/desktop/views/components/settings.tags.vue
@@ -0,0 +1,65 @@
+<template>
+<div class="vfcitkilproprqtbnpoertpsziierwzi">
+	<div v-for="timeline in timelines" class="timeline">
+		<ui-input v-model="timeline.title" @change="save">
+			<span>%i18n:@title%</span>
+		</ui-input>
+		<ui-textarea :value="timeline.query ? timeline.query.map(tags => tags.join(' ')).join('\n') : ''" @input="onQueryChange(timeline, $event)">
+			<span>%i18n:@query%</span>
+		</ui-textarea>
+		<ui-button class="save" @click="save">%i18n:@save%</ui-button>
+	</div>
+	<ui-button class="add" @click="add">%i18n:@add%</ui-button>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as uuid from 'uuid';
+
+export default Vue.extend({
+	data() {
+		return {
+			timelines: this.$store.state.settings.tagTimelines
+		};
+	},
+
+	methods: {
+		add() {
+			this.timelines.push({
+				id: uuid(),
+				title: '',
+				query: ''
+			});
+
+			this.save();
+		},
+
+		save() {
+			this.$store.dispatch('settings/set', { key: 'tagTimelines', value: this.timelines });
+		},
+
+		onQueryChange(timeline, value) {
+			timeline.query = value.split('\n').map(tags => tags.split(' '));
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+
+root(isDark)
+	> .timeline
+		padding-bottom 16px
+		border-bottom solid 1px rgba(#000, 0.1)
+
+	> .add
+		margin-top 16px
+
+.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
+	root(true)
+
+.vfcitkilproprqtbnpoertpsziierwzi: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 3911ec5931..312a7ed56e 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -5,6 +5,7 @@
 		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
 		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
 		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:@drive%</p>
+		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
 		<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:@mute%</p>
 		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
 		<p :class="{ active: page == 'twitter' }" @mousedown="page = 'twitter'">%fa:B twitter .fw%Twitter</p>
@@ -138,6 +139,11 @@
 			<x-drive/>
 		</section>
 
+		<section class="hashtags" v-show="page == 'hashtags'">
+			<h1>%i18n:@tags%</h1>
+			<x-tags/>
+		</section>
+
 		<section class="mute" v-show="page == 'mute'">
 			<h1>%i18n:@mute%</h1>
 			<x-mute/>
@@ -222,6 +228,7 @@ import XApi from './settings.api.vue';
 import XApps from './settings.apps.vue';
 import XSignins from './settings.signins.vue';
 import XDrive from './settings.drive.vue';
+import XTags from './settings.tags.vue';
 import { url, langs, version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
 
@@ -234,11 +241,18 @@ export default Vue.extend({
 		XApi,
 		XApps,
 		XSignins,
-		XDrive
+		XDrive,
+		XTags
+	},
+	props: {
+		initialPage: {
+			type: String,
+			required: false
+		}
 	},
 	data() {
 		return {
-			page: 'profile',
+			page: this.initialPage || 'profile',
 			meta: null,
 			version,
 			langs,
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index b6b5cca817..d2176dee87 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 { HashtagStream } from '../../../common/scripts/streaming/hashtag';
 
 const fetchLimit = 10;
 
@@ -23,6 +24,9 @@ export default Vue.extend({
 		src: {
 			type: String,
 			required: true
+		},
+		tagTl: {
+			required: false
 		}
 	},
 
@@ -31,6 +35,7 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
+			streamManager: null,
 			connection: null,
 			connectionId: null,
 			date: null
@@ -42,16 +47,6 @@ export default Vue.extend({
 			return this.$store.state.i.followingCount == 0;
 		},
 
-		stream(): any {
-			switch (this.src) {
-				case 'home': return (this as any).os.stream;
-				case 'local': return (this as any).os.streams.localTimelineStream;
-				case 'hybrid': return (this as any).os.streams.hybridTimelineStream;
-				case 'global': return (this as any).os.streams.globalTimelineStream;
-				case 'mentions': return (this as any).os.stream;
-			}
-		},
-
 		endpoint(): string {
 			switch (this.src) {
 				case 'home': return 'notes/timeline';
@@ -59,6 +54,7 @@ export default Vue.extend({
 				case 'hybrid': return 'notes/hybrid-timeline';
 				case 'global': return 'notes/global-timeline';
 				case 'mentions': return 'notes/mentions';
+				case 'tag': return 'notes/search_by_tag';
 			}
 		},
 
@@ -68,13 +64,36 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.connection.on(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
+		if (this.src == 'tag') {
+			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'home') {
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
 			this.connection.on('follow', this.onChangeFollowing);
 			this.connection.on('unfollow', this.onChangeFollowing);
+		} else if (this.src == 'local') {
+			this.streamManager = (this as any).os.streams.localTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'hybrid') {
+			this.streamManager = (this as any).os.streams.hybridTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'global') {
+			this.streamManager = (this as any).os.streams.globalTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'mentions') {
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', this.onNote);
 		}
 
 		document.addEventListener('keydown', this.onKeydown);
@@ -83,12 +102,27 @@ export default Vue.extend({
 	},
 
 	beforeDestroy() {
-		this.connection.off(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
+		if (this.src == 'tag') {
+			this.connection.off('note', this.onNote);
+			this.connection.close();
+		} else if (this.src == 'home') {
+			this.connection.off('note', this.onNote);
 			this.connection.off('follow', this.onChangeFollowing);
 			this.connection.off('unfollow', this.onChangeFollowing);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'local') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'hybrid') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'global') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'mentions') {
+			this.connection.off('mention', this.onNote);
+			this.streamManager.dispose(this.connectionId);
 		}
-		this.stream.dispose(this.connectionId);
 
 		document.removeEventListener('keydown', this.onKeydown);
 	},
@@ -103,7 +137,8 @@ export default Vue.extend({
 					untilDate: this.date ? this.date.getTime() : undefined,
 					includeMyRenotes: this.$store.state.settings.showMyRenotes,
 					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					query: this.tagTl ? this.tagTl.query : undefined
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -126,7 +161,8 @@ export default Vue.extend({
 				untilId: (this.$refs.timeline as any).tail().id,
 				includeMyRenotes: this.$store.state.settings.showMyRenotes,
 				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				query: this.tagTl ? this.tagTl.query : undefined
 			});
 
 			promise.then(notes => {
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 3e51d12883..48eedc88d6 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -6,14 +6,19 @@
 		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
 		<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
+		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span>
 		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
-		<button @click="chooseList" title="%i18n:@list%">%fa:list%</button>
+		<div class="buttons">
+			<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button>
+			<button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button>
+		</div>
 	</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 == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 	<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
 	<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
+	<x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
 	<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 </div>
 </template>
@@ -21,7 +26,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import XCore from './timeline.core.vue';
-import MkUserListsWindow from './user-lists-window.vue';
+import Menu from '../../../common/views/components/menu.vue';
+import MkSettingsWindow from './settings-window.vue';
 
 export default Vue.extend({
 	components: {
@@ -32,6 +38,7 @@ export default Vue.extend({
 		return {
 			src: 'home',
 			list: null,
+			tagTl: null,
 			enableLocalTimeline: false
 		};
 	},
@@ -41,8 +48,14 @@ export default Vue.extend({
 			this.saveSrc();
 		},
 
-		list() {
+		list(x) {
 			this.saveSrc();
+			if (x != null) this.tagTl = null;
+		},
+
+		tagTl(x) {
+			this.saveSrc();
+			if (x != null) this.list = null;
 		}
 	},
 
@@ -55,6 +68,8 @@ export default Vue.extend({
 			this.src = this.$store.state.device.tl.src;
 			if (this.src == 'list') {
 				this.list = this.$store.state.device.tl.arg;
+			} else if (this.src == 'tag') {
+				this.tagTl = this.$store.state.device.tl.arg;
 			}
 		} else if (this.$store.state.i.followingCount == 0) {
 			this.src = 'hybrid';
@@ -71,7 +86,7 @@ export default Vue.extend({
 		saveSrc() {
 			this.$store.commit('device/setTl', {
 				src: this.src,
-				arg: this.list
+				arg: this.src == 'list' ? this.list : this.tagTl
 			});
 		},
 
@@ -79,12 +94,74 @@ export default Vue.extend({
 			(this.$refs.tl as any).warp(date);
 		},
 
-		chooseList() {
-			const w = (this as any).os.new(MkUserListsWindow);
-			w.$once('choosen', list => {
-				this.list = list;
-				this.src = 'list';
-				w.close();
+		async chooseList() {
+			const lists = await (this as any).api('users/lists/list');
+
+			let menu = [{
+				icon: '%fa:plus%',
+				text: '%i18n:@add-list%',
+				action: () => {
+					(this as any).apis.input({
+						title: '%i18n:@list-name%',
+					}).then(async title => {
+						const list = await (this as any).api('users/lists/create', {
+							title
+						});
+
+						this.list = list;
+						this.src = 'list';
+					});
+				}
+			}];
+
+			if (lists.length > 0) {
+				menu.push(null);
+			}
+
+			menu = menu.concat(lists.map(list => ({
+				icon: '%fa:list%',
+				text: list.title,
+				action: () => {
+					this.list = list;
+					this.src = 'list';
+				}
+			})));
+
+			this.os.new(Menu, {
+				source: this.$refs.listButton,
+				compact: false,
+				items: menu
+			});
+		},
+
+		chooseTag() {
+			let menu = [{
+				icon: '%fa:plus%',
+				text: '%i18n:@add-tag-timeline%',
+				action: () => {
+					(this as any).os.new(MkSettingsWindow, {
+						initialPage: 'hashtags'
+					});
+				}
+			}];
+
+			if (this.$store.state.settings.tagTimelines.length > 0) {
+				menu.push(null);
+			}
+
+			menu = menu.concat(this.$store.state.settings.tagTimelines.map(t => ({
+				icon: '%fa:hashtag%',
+				text: t.title,
+				action: () => {
+					this.tagTl = t;
+					this.src = 'tag';
+				}
+			})));
+
+			this.os.new(Menu, {
+				source: this.$refs.tagButton,
+				compact: false,
+				items: menu
 			});
 		}
 	}
@@ -106,22 +183,24 @@ root(isDark)
 		border-radius 6px 6px 0 0
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
-		> button
+		> .buttons
 			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
+			> button
+				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
+				&:active
+					color isDark ? #b2c1d5 : #999
 
 		> span
 			display inline-block
diff --git a/src/client/app/desktop/views/pages/deck/deck.column-core.vue b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
index b7602bd235..a320f697b3 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column-core.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
@@ -6,6 +6,7 @@
 <x-tl-column v-else-if="column.type == 'hybrid'" :column="column" :is-stacked="isStacked"/>
 <x-tl-column v-else-if="column.type == 'global'" :column="column" :is-stacked="isStacked"/>
 <x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked"/>
+<x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked"/>
 <x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked"/>
 </template>
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue b/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
new file mode 100644
index 0000000000..f38d5a6df5
--- /dev/null
+++ b/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
@@ -0,0 +1,117 @@
+<template>
+	<x-notes ref="timeline" :more="existMore ? more : null" :media-view="mediaView"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+import { HashtagStream } from '../../../../common/scripts/streaming/hashtag';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+		tagTl: {
+			type: Object,
+			required: true
+		},
+		mediaOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		mediaView: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			this.fetch();
+		}
+	},
+
+	mounted() {
+		if (this.connection) this.connection.close();
+		this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+		this.connection.on('note', this.onNote);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.close();
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/search_by_tag', {
+					limit: fetchLimit + 1,
+					withFiles: this.mediaOnly,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					query: this.tagTl.query
+				}).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;
+
+			const promise = (this as any).api('notes/search_by_tag', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				withFiles: this.mediaOnly,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				query: this.tagTl.query
+			});
+
+			promise.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;
+			});
+
+			return promise;
+		},
+		onNote(note) {
+			if (this.mediaOnly && note.files.length == 0) return;
+
+			// Prepend a note
+			(this.$refs.timeline as any).prepend(note);
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
index 231b505f5d..550b1be628 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
@@ -6,6 +6,7 @@
 		<template v-if="column.type == 'hybrid'">%fa:share-alt%</template>
 		<template v-if="column.type == 'global'">%fa:globe%</template>
 		<template v-if="column.type == 'list'">%fa:list%</template>
+		<template v-if="column.type == 'hashtag'">%fa:hashtag%</template>
 		<span>{{ name }}</span>
 	</span>
 
@@ -14,6 +15,7 @@
 		<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/>
 	</div>
 	<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
+	<x-hashtag-tl v-if="column.type == 'hashtag'" :tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
 	<x-tl v-else :src="column.type" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
 </x-column>
 </template>
@@ -23,12 +25,14 @@ import Vue from 'vue';
 import XColumn from './deck.column.vue';
 import XTl from './deck.tl.vue';
 import XListTl from './deck.list-tl.vue';
+import XHashtagTl from './deck.hashtag-tl.vue';
 
 export default Vue.extend({
 	components: {
 		XColumn,
 		XTl,
-		XListTl
+		XListTl,
+		XHashtagTl
 	},
 
 	props: {
@@ -65,6 +69,7 @@ export default Vue.extend({
 				case 'hybrid': return '%i18n:common.deck.hybrid%';
 				case 'global': return '%i18n:common.deck.global%';
 				case 'list': return this.column.list.title;
+				case 'hashtag': return this.$store.state.settings.tagTimelines.find(x => x.id == this.column.tagTlId).title;
 			}
 		}
 	},
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 4a4535959e..aafe9a45d3 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -161,6 +161,20 @@ export default Vue.extend({
 							w.close();
 						});
 					}
+				}, {
+					icon: '%fa:hashtag%',
+					text: '%i18n:common.deck.hashtag%',
+					action: () => {
+						(this as any).apis.input({
+							title: '%i18n:@enter-hashtag-tl-title%'
+						}).then(title => {
+							this.$store.dispatch('settings/addDeckColumn', {
+								id: uuid(),
+								type: 'hashtag',
+								tagTlId: this.$store.state.settings.tagTimelines.find(x => x.title == title).id
+							});
+						});
+					}
 				}, {
 					icon: '%fa:bell R%',
 					text: '%i18n:common.deck.notifications%',
diff --git a/src/client/app/mobile/views/pages/home.timeline.vue b/src/client/app/mobile/views/pages/home.timeline.vue
index d4fcea1f93..fecb2384ba 100644
--- a/src/client/app/mobile/views/pages/home.timeline.vue
+++ b/src/client/app/mobile/views/pages/home.timeline.vue
@@ -13,6 +13,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { HashtagStream } from '../../../common/scripts/streaming/hashtag';
 
 const fetchLimit = 10;
 
@@ -21,6 +22,9 @@ export default Vue.extend({
 		src: {
 			type: String,
 			required: true
+		},
+		tagTl: {
+			required: false
 		}
 	},
 
@@ -29,6 +33,7 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
+			streamManager: null,
 			connection: null,
 			connectionId: null,
 			unreadCount: 0,
@@ -41,16 +46,6 @@ export default Vue.extend({
 			return this.$store.state.i.followingCount == 0;
 		},
 
-		stream(): any {
-			switch (this.src) {
-				case 'home': return (this as any).os.stream;
-				case 'local': return (this as any).os.streams.localTimelineStream;
-				case 'hybrid': return (this as any).os.streams.hybridTimelineStream;
-				case 'global': return (this as any).os.streams.globalTimelineStream;
-				case 'mentions': return (this as any).os.stream;
-			}
-		},
-
 		endpoint(): string {
 			switch (this.src) {
 				case 'home': return 'notes/timeline';
@@ -58,6 +53,7 @@ export default Vue.extend({
 				case 'hybrid': return 'notes/hybrid-timeline';
 				case 'global': return 'notes/global-timeline';
 				case 'mentions': return 'notes/mentions';
+				case 'tag': return 'notes/search_by_tag';
 			}
 		},
 
@@ -67,25 +63,63 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
-
-		this.connection.on(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
+		if (this.src == 'tag') {
+			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'home') {
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
 			this.connection.on('follow', this.onChangeFollowing);
 			this.connection.on('unfollow', this.onChangeFollowing);
+		} else if (this.src == 'local') {
+			this.streamManager = (this as any).os.streams.localTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'hybrid') {
+			this.streamManager = (this as any).os.streams.hybridTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'global') {
+			this.streamManager = (this as any).os.streams.globalTimelineStream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('note', this.onNote);
+		} else if (this.src == 'mentions') {
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', this.onNote);
 		}
 
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		this.connection.off(this.src == 'mentions' ? 'mention' : 'note', this.onNote);
-		if (this.src == 'home') {
+		if (this.src == 'tag') {
+			this.connection.off('note', this.onNote);
+			this.connection.close();
+		} else if (this.src == 'home') {
+			this.connection.off('note', this.onNote);
 			this.connection.off('follow', this.onChangeFollowing);
 			this.connection.off('unfollow', this.onChangeFollowing);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'local') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'hybrid') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'global') {
+			this.connection.off('note', this.onNote);
+			this.streamManager.dispose(this.connectionId);
+		} else if (this.src == 'mentions') {
+			this.connection.off('mention', this.onNote);
+			this.streamManager.dispose(this.connectionId);
 		}
-		this.stream.dispose(this.connectionId);
 	},
 
 	methods: {
@@ -98,7 +132,8 @@ export default Vue.extend({
 					untilDate: this.date ? this.date.getTime() : undefined,
 					includeMyRenotes: this.$store.state.settings.showMyRenotes,
 					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					query: this.tagTl ? this.tagTl.query : undefined
 				}).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
@@ -121,7 +156,8 @@ export default Vue.extend({
 				untilId: (this.$refs.timeline as any).tail().id,
 				includeMyRenotes: this.$store.state.settings.showMyRenotes,
 				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				query: this.tagTl ? this.tagTl.query : undefined
 			});
 
 			promise.then(notes => {
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 3150bb02b4..3ec2f16b75 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -8,6 +8,7 @@
 			<span v-if="src == 'global'">%fa:globe%%i18n:@global%</span>
 			<span v-if="src == 'mentions'">%fa:at%%i18n:@mentions%</span>
 			<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
+			<span v-if="src == 'tag'">%fa:hashtag%{{ tagTl.title }}</span>
 		</span>
 		<span style="margin-left:8px">
 			<template v-if="!showNav">%fa:angle-down%</template>
@@ -32,6 +33,7 @@
 					<template v-if="lists">
 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
 					</template>
+					<span v-for="tl in $store.state.settings.tagTimelines" :data-active="src == 'tag' && tagTl == tl" @click="src = 'tag'; tagTl = tl" :key="tl.id">%fa:hashtag% {{ tl.title }}</span>
 				</div>
 			</div>
 		</div>
@@ -42,6 +44,7 @@
 			<x-tl v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
 			<x-tl v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
+			<x-tl v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
 			<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 		</div>
 	</main>
@@ -63,6 +66,7 @@ export default Vue.extend({
 			src: 'home',
 			list: null,
 			lists: null,
+			tagTl: null,
 			showNav: false,
 			enableLocalTimeline: false
 		};
@@ -74,9 +78,16 @@ export default Vue.extend({
 			this.saveSrc();
 		},
 
-		list() {
+		list(x) {
 			this.showNav = false;
 			this.saveSrc();
+			if (x != null) this.tagTl = null;
+		},
+
+		tagTl(x) {
+			this.showNav = false;
+			this.saveSrc();
+			if (x != null) this.list = null;
 		},
 
 		showNav(v) {
@@ -97,6 +108,8 @@ export default Vue.extend({
 			this.src = this.$store.state.device.tl.src;
 			if (this.src == 'list') {
 				this.list = this.$store.state.device.tl.arg;
+			} else if (this.src == 'tag') {
+				this.tagTl = this.$store.state.device.tl.arg;
 			}
 		} else if (this.$store.state.i.followingCount == 0) {
 			this.src = 'hybrid';
@@ -121,7 +134,7 @@ export default Vue.extend({
 		saveSrc() {
 			this.$store.commit('device/setTl', {
 				src: this.src,
-				arg: this.list
+				arg: this.src == 'list' ? this.list : this.tagTl
 			});
 		},
 
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 7eaef13125..171620ae30 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -10,6 +10,7 @@ const defaultSettings = {
 	home: null,
 	mobileHome: [],
 	deck: null,
+	tagTimelines: [],
 	fetchOnScroll: true,
 	showMaps: true,
 	showPostFormOnTopOfTl: false,
diff --git a/src/server/api/endpoints/notes/search_by_tag.ts b/src/server/api/endpoints/notes/search_by_tag.ts
index 11bfe34724..7beb97aec6 100644
--- a/src/server/api/endpoints/notes/search_by_tag.ts
+++ b/src/server/api/endpoints/notes/search_by_tag.ts
@@ -13,12 +13,18 @@ export const meta = {
 	},
 
 	params: {
-		tag: $.str.note({
+		tag: $.str.optional.note({
 			desc: {
 				'ja-JP': 'タグ'
 			}
 		}),
 
+		query: $.arr($.arr($.str)).optional.note({
+			desc: {
+				'ja-JP': 'クエリ'
+			}
+		}),
+
 		includeUserIds: $.arr($.type(ID)).optional.note({
 			default: []
 		}),
@@ -59,11 +65,9 @@ export const meta = {
 			}
 		}),
 
-		withFiles: $.bool.optional.nullable.note({
-			default: null,
-
+		withFiles: $.bool.optional.note({
 			desc: {
-				'ja-JP': 'ファイルが添付された投稿に限定するか否か'
+				'ja-JP': 'true にすると、ファイルが添付された投稿だけ取得します'
 			}
 		}),
 
@@ -126,8 +130,14 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 	}
 
 	const q: any = {
-		$and: [{
+		$and: [ps.tag ? {
 			tagsLower: ps.tag.toLowerCase()
+		} : {
+			$or: ps.query.map(tags => ({
+				$and: tags.map(t => ({
+					tagsLower: t.toLowerCase()
+				}))
+			}))
 		}],
 		deletedAt: { $exists: false }
 	};
@@ -281,25 +291,10 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 
 	const withFiles = ps.withFiles != null ? ps.withFiles : ps.media;
 
-	if (withFiles != null) {
-		if (withFiles) {
-			push({
-				fileIds: {
-					$exists: true,
-					$ne: null
-				}
-			});
-		} else {
-			push({
-				$or: [{
-					fileIds: {
-						$exists: false
-					}
-				}, {
-					fileIds: null
-				}]
-			});
-		}
+	if (withFiles) {
+		push({
+			fileIds: { $exists: true, $ne: [] }
+		});
 	}
 
 	if (ps.poll != null) {
diff --git a/src/server/api/stream/hashtag.ts b/src/server/api/stream/hashtag.ts
new file mode 100644
index 0000000000..db2806e796
--- /dev/null
+++ b/src/server/api/stream/hashtag.ts
@@ -0,0 +1,48 @@
+import * as websocket from 'websocket';
+import Xev from 'xev';
+
+import { IUser } from '../../../models/user';
+import Mute from '../../../models/mute';
+import { pack } from '../../../models/note';
+
+export default async function(
+	request: websocket.request,
+	connection: websocket.connection,
+	subscriber: Xev,
+	user?: IUser
+) {
+	const mute = user ? await Mute.find({ muterId: user._id }) : null;
+	const mutedUserIds = mute ? mute.map(m => m.muteeId.toString()) : [];
+
+	const q: Array<string[]> = JSON.parse((request.resourceURL.query as any).q);
+
+	// Subscribe stream
+	subscriber.on('hashtag', async note => {
+		const matched = q.some(tags => tags.every(tag => note.tags.map((t: string) => t.toLowerCase()).includes(tag.toLowerCase())));
+		if (!matched) return;
+
+		// Renoteなら再pack
+		if (note.renoteId != null) {
+			note.renote = await pack(note.renoteId, user, {
+				detail: true
+			});
+		}
+
+		//#region 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
+		if (mutedUserIds.indexOf(note.userId) != -1) {
+			return;
+		}
+		if (note.reply != null && mutedUserIds.indexOf(note.reply.userId) != -1) {
+			return;
+		}
+		if (note.renote != null && mutedUserIds.indexOf(note.renote.userId) != -1) {
+			return;
+		}
+		//#endregion
+
+		connection.send(JSON.stringify({
+			type: 'note',
+			body: note
+		}));
+	});
+}
diff --git a/src/server/api/streaming.ts b/src/server/api/streaming.ts
index e6094a40b2..873719d031 100644
--- a/src/server/api/streaming.ts
+++ b/src/server/api/streaming.ts
@@ -14,6 +14,7 @@ import reversiGameStream from './stream/games/reversi-game';
 import reversiStream from './stream/games/reversi';
 import serverStatsStream from './stream/server-stats';
 import notesStatsStream from './stream/notes-stats';
+import hashtagStream from './stream/hashtag';
 import { ParsedUrlQuery } from 'querystring';
 import authenticate from './authenticate';
 
@@ -57,6 +58,11 @@ module.exports = (server: http.Server) => {
 			return;
 		}
 
+		if (request.resourceURL.pathname === '/hashtag') {
+			hashtagStream(request, connection, ev, user);
+			return;
+		}
+
 		if (user == null) {
 			connection.send('authentication-failed');
 			connection.close();
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index aa65cfe0cf..7daf83b294 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -1,7 +1,7 @@
 import es from '../../db/elasticsearch';
 import Note, { pack, INote } from '../../models/note';
 import User, { isLocalUser, IUser, isRemoteUser, IRemoteUser, ILocalUser } from '../../models/user';
-import { publishUserStream, publishLocalTimelineStream, publishHybridTimelineStream, publishGlobalTimelineStream, publishUserListStream } from '../../stream';
+import { publishUserStream, publishLocalTimelineStream, publishHybridTimelineStream, publishGlobalTimelineStream, publishUserListStream, publishHashtagStream } from '../../stream';
 import Following from '../../models/following';
 import { deliver } from '../../queue';
 import renderNote from '../../remote/activitypub/renderer/note';
@@ -181,6 +181,10 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 		noteObj.isFirstNote = true;
 	}
 
+	if (tags.length > 0) {
+		publishHashtagStream(noteObj);
+	}
+
 	const nm = new NotificationManager(user, note);
 	const nmRelatedPromises = [];
 
diff --git a/src/stream.ts b/src/stream.ts
index ebc75c875c..8a8d8b4cf0 100644
--- a/src/stream.ts
+++ b/src/stream.ts
@@ -78,6 +78,10 @@ class Publisher {
 	public publishGlobalTimelineStream = (note: any): void => {
 		this.publish('global-timeline', null, note);
 	}
+
+	public publishHashtagStream = (note: any): void => {
+		this.publish('hashtag', null, note);
+	}
 }
 
 const publisher = new Publisher();
@@ -95,3 +99,4 @@ export const publishReversiGameStream = publisher.publishReversiGameStream;
 export const publishLocalTimelineStream = publisher.publishLocalTimelineStream;
 export const publishHybridTimelineStream = publisher.publishHybridTimelineStream;
 export const publishGlobalTimelineStream = publisher.publishGlobalTimelineStream;
+export const publishHashtagStream = publisher.publishHashtagStream;
-- 
cgit v1.2.3-freya


From d872a16fe082725055bb31c423d73aa52f1caf3c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 17 Sep 2018 09:05:51 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 48eedc88d6..2dc84004df 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -188,10 +188,10 @@ root(isDark)
 			z-index 2
 			top 0
 			right 0
+			padding-right 8px
 
 			> button
-				padding 0
-				width 42px
+				padding 0 8px
 				font-size 0.9em
 				line-height 42px
 				color isDark ? #9baec8 : #ccc
-- 
cgit v1.2.3-freya


From ab83e08bc7deb244d35e2315abead473d536d2c3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 02:14:12 +0900
Subject: メッセージタイムラインを追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |   3 +
 .../app/desktop/views/components/timeline.core.vue | 148 ++++++++++++---------
 .../app/desktop/views/components/timeline.vue      |  18 ++-
 .../desktop/views/pages/deck/deck.column-core.vue  |   5 +-
 .../views/pages/deck/deck.direct-column.vue        |  38 ++++++
 .../app/desktop/views/pages/deck/deck.direct.vue   |  97 ++++++++++++++
 src/client/app/desktop/views/pages/deck/deck.vue   |   9 ++
 .../app/mobile/views/pages/home.timeline.vue       | 147 +++++++++++---------
 src/client/app/mobile/views/pages/home.vue         |  49 +++++--
 src/server/api/endpoints/notes/mentions.ts         |   7 +
 src/services/note/create.ts                        |  22 ++-
 11 files changed, 393 insertions(+), 150 deletions(-)
 create mode 100644 src/client/app/desktop/views/pages/deck/deck.direct-column.vue
 create mode 100644 src/client/app/desktop/views/pages/deck/deck.direct.vue

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a3b2bd88e7..11dd76d0e6 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -169,6 +169,7 @@ common:
     hashtag: "ハッシュタグ"
     global: "グローバル"
     mentions: "あなた宛て"
+    direct: "ダイレクト投稿"
     notifications: "通知"
     list: "リスト"
     swap-left: "左に移動"
@@ -916,6 +917,7 @@ desktop/views/components/timeline.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
   list: "リスト"
   hashtag: "ハッシュタグ"
   add-tag-timeline: "ハッシュタグを追加"
@@ -1322,6 +1324,7 @@ mobile/views/pages/home.vue:
   hybrid: "ソーシャル"
   global: "グローバル"
   mentions: "あなた宛て"
+  messages: "メッセージ"
 
 mobile/views/pages/tag.vue:
   no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index d2176dee87..c8aa36f171 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -38,7 +38,14 @@ export default Vue.extend({
 			streamManager: null,
 			connection: null,
 			connectionId: null,
-			date: null
+			date: null,
+			baseQuery: {
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			},
+			query: {},
+			endpoint: null
 		};
 	},
 
@@ -47,53 +54,102 @@ export default Vue.extend({
 			return this.$store.state.i.followingCount == 0;
 		},
 
-		endpoint(): string {
-			switch (this.src) {
-				case 'home': return 'notes/timeline';
-				case 'local': return 'notes/local-timeline';
-				case 'hybrid': return 'notes/hybrid-timeline';
-				case 'global': return 'notes/global-timeline';
-				case 'mentions': return 'notes/mentions';
-				case 'tag': return 'notes/search_by_tag';
-			}
-		},
-
 		canFetchMore(): boolean {
 			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
 	mounted() {
+		const prepend = note => {
+			(this.$refs.timeline as any).prepend(note);
+		};
+
 		if (this.src == 'tag') {
+			this.endpoint = 'notes/search_by_tag';
+			this.query = {
+				query: this.tagTl.query
+			};
 			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
-			this.connection.on('note', this.onNote);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.connection.close();
+			});
 		} else if (this.src == 'home') {
+			this.endpoint = 'notes/timeline';
+			const onChangeFollowing = () => {
+				this.fetch();
+			};
 			this.streamManager = (this as any).os.stream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('note', this.onNote);
-			this.connection.on('follow', this.onChangeFollowing);
-			this.connection.on('unfollow', this.onChangeFollowing);
+			this.connection.on('note', prepend);
+			this.connection.on('follow', onChangeFollowing);
+			this.connection.on('unfollow', onChangeFollowing);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.connection.off('follow', onChangeFollowing);
+				this.connection.off('unfollow', onChangeFollowing);
+				this.streamManager.dispose(this.connectionId);
+			});
 		} else if (this.src == 'local') {
+			this.endpoint = 'notes/local-timeline';
 			this.streamManager = (this as any).os.streams.localTimelineStream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('note', this.onNote);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
 		} else if (this.src == 'hybrid') {
+			this.endpoint = 'notes/hybrid-timeline';
 			this.streamManager = (this as any).os.streams.hybridTimelineStream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('note', this.onNote);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
 		} else if (this.src == 'global') {
+			this.endpoint = 'notes/global-timeline';
 			this.streamManager = (this as any).os.streams.globalTimelineStream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('note', this.onNote);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
 		} else if (this.src == 'mentions') {
+			this.endpoint = 'notes/mentions';
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('mention', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'messages') {
+			this.endpoint = 'notes/mentions';
+			this.query = {
+				visibility: 'specified'
+			};
+			const onNote = note => {
+				if (note.visibility == 'specified') {
+					prepend(note);
+				}
+			};
 			this.streamManager = (this as any).os.stream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('mention', this.onNote);
+			this.connection.on('mention', onNote);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('mention', onNote);
+				this.streamManager.dispose(this.connectionId);
+			});
 		}
 
 		document.addEventListener('keydown', this.onKeydown);
@@ -102,28 +158,7 @@ export default Vue.extend({
 	},
 
 	beforeDestroy() {
-		if (this.src == 'tag') {
-			this.connection.off('note', this.onNote);
-			this.connection.close();
-		} else if (this.src == 'home') {
-			this.connection.off('note', this.onNote);
-			this.connection.off('follow', this.onChangeFollowing);
-			this.connection.off('unfollow', this.onChangeFollowing);
-			this.streamManager.dispose(this.connectionId);
-		} else if (this.src == 'local') {
-			this.connection.off('note', this.onNote);
-			this.streamManager.dispose(this.connectionId);
-		} else if (this.src == 'hybrid') {
-			this.connection.off('note', this.onNote);
-			this.streamManager.dispose(this.connectionId);
-		} else if (this.src == 'global') {
-			this.connection.off('note', this.onNote);
-			this.streamManager.dispose(this.connectionId);
-		} else if (this.src == 'mentions') {
-			this.connection.off('mention', this.onNote);
-			this.streamManager.dispose(this.connectionId);
-		}
-
+		this.$emit('beforeDestroy');
 		document.removeEventListener('keydown', this.onKeydown);
 	},
 
@@ -132,14 +167,10 @@ export default Vue.extend({
 			this.fetching = true;
 
 			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				(this as any).api(this.endpoint, {
+				(this as any).api(this.endpoint, Object.assign({
 					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : undefined,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-					query: this.tagTl ? this.tagTl.query : undefined
-				}).then(notes => {
+					untilDate: this.date ? this.date.getTime() : undefined
+				}, this.baseQuery, this.query)).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
 						this.existMore = true;
@@ -156,14 +187,10 @@ export default Vue.extend({
 
 			this.moreFetching = true;
 
-			const promise = (this as any).api(this.endpoint, {
+			const promise = (this as any).api(this.endpoint, Object.assign({
 				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-				query: this.tagTl ? this.tagTl.query : undefined
-			});
+				untilId: (this.$refs.timeline as any).tail().id
+			}, this.baseQuery, this.query));
 
 			promise.then(notes => {
 				if (notes.length == fetchLimit + 1) {
@@ -178,15 +205,6 @@ export default Vue.extend({
 			return promise;
 		},
 
-		onNote(note) {
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		onChangeFollowing() {
-			this.fetch();
-		},
-
 		focus() {
 			(this.$refs.timeline as any).focus();
 		},
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 2dc84004df..ccc35f95ff 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -5,10 +5,11 @@
 		<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
 		<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 		<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
-		<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
 		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span>
 		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
 		<div class="buttons">
+			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%</button>
+			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%</button>
 			<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button>
 			<button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button>
 		</div>
@@ -18,6 +19,7 @@
 	<x-core v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 	<x-core v-if="src == 'global'" ref="tl" key="global" src="global"/>
 	<x-core v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
+	<x-core v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
 	<x-core v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
 	<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 </div>
@@ -202,6 +204,20 @@ root(isDark)
 				&:active
 					color isDark ? #b2c1d5 : #999
 
+				&[data-active]
+					color $theme-color
+					cursor default
+
+					&:before
+						content ""
+						display block
+						position absolute
+						bottom 0
+						left 0
+						width 100%
+						height 2px
+						background $theme-color
+
 		> span
 			display inline-block
 			padding 0 10px
diff --git a/src/client/app/desktop/views/pages/deck/deck.column-core.vue b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
index a320f697b3..e1490cb0e4 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column-core.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column-core.vue
@@ -8,6 +8,7 @@
 <x-tl-column v-else-if="column.type == 'list'" :column="column" :is-stacked="isStacked"/>
 <x-tl-column v-else-if="column.type == 'hashtag'" :column="column" :is-stacked="isStacked"/>
 <x-mentions-column v-else-if="column.type == 'mentions'" :column="column" :is-stacked="isStacked"/>
+<x-direct-column v-else-if="column.type == 'direct'" :column="column" :is-stacked="isStacked"/>
 </template>
 
 <script lang="ts">
@@ -16,13 +17,15 @@ import XTlColumn from './deck.tl-column.vue';
 import XNotificationsColumn from './deck.notifications-column.vue';
 import XWidgetsColumn from './deck.widgets-column.vue';
 import XMentionsColumn from './deck.mentions-column.vue';
+import XDirectColumn from './deck.direct-column.vue';
 
 export default Vue.extend({
 	components: {
 		XTlColumn,
 		XNotificationsColumn,
 		XWidgetsColumn,
-		XMentionsColumn
+		XMentionsColumn,
+		XDirectColumn
 	},
 
 	props: {
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct-column.vue b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
new file mode 100644
index 0000000000..d5093761f4
--- /dev/null
+++ b/src/client/app/desktop/views/pages/deck/deck.direct-column.vue
@@ -0,0 +1,38 @@
+<template>
+<x-column :name="name" :column="column" :is-stacked="isStacked">
+	<span slot="header">%fa:envelope R%{{ name }}</span>
+
+	<x-direct/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XColumn from './deck.column.vue';
+import XDirect from './deck.direct.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XDirect
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	computed: {
+		name(): string {
+			if (this.column.name) return this.column.name;
+			return '%i18n:common.deck.direct%';
+		}
+	},
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct.vue b/src/client/app/desktop/views/pages/deck/deck.direct.vue
new file mode 100644
index 0000000000..ec9e6b9c3d
--- /dev/null
+++ b/src/client/app/desktop/views/pages/deck/deck.direct.vue
@@ -0,0 +1,97 @@
+<template>
+	<x-notes ref="timeline" :more="existMore ? more : null"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XNotes from './deck.notes.vue';
+
+const fetchLimit = 10;
+
+export default Vue.extend({
+	components: {
+		XNotes
+	},
+
+	props: {
+	},
+
+	data() {
+		return {
+			fetching: true,
+			moreFetching: false,
+			existMore: false,
+			connection: null,
+			connectionId: null
+		};
+	},
+
+	mounted() {
+		this.connection = (this as any).os.stream.getConnection();
+		this.connectionId = (this as any).os.stream.use();
+
+		this.connection.on('mention', this.onNote);
+
+		this.fetch();
+	},
+
+	beforeDestroy() {
+		this.connection.off('mention', this.onNote);
+		(this as any).os.stream.dispose(this.connectionId);
+	},
+
+	methods: {
+		fetch() {
+			this.fetching = true;
+
+			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
+				(this as any).api('notes/mentions', {
+					limit: fetchLimit + 1,
+					includeMyRenotes: this.$store.state.settings.showMyRenotes,
+					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+					visibility: 'specified'
+				}).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;
+
+			const promise = (this as any).api('notes/mentions', {
+				limit: fetchLimit + 1,
+				untilId: (this.$refs.timeline as any).tail().id,
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
+				visibility: 'specified'
+			});
+
+			promise.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;
+			});
+
+			return promise;
+		},
+		onNote(note) {
+			// Prepend a note
+			if (note.visibility == 'specified') {
+				(this.$refs.timeline as any).prepend(note);
+			}
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index aafe9a45d3..e5aeba251a 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -147,6 +147,15 @@ export default Vue.extend({
 							type: 'mentions'
 						});
 					}
+				}, {
+					icon: '%fa:envelope R%',
+					text: '%i18n:common.deck.direct%',
+					action: () => {
+						this.$store.dispatch('settings/addDeckColumn', {
+							id: uuid(),
+							type: 'direct'
+						});
+					}
 				}, {
 					icon: '%fa:list%',
 					text: '%i18n:common.deck.list%',
diff --git a/src/client/app/mobile/views/pages/home.timeline.vue b/src/client/app/mobile/views/pages/home.timeline.vue
index fecb2384ba..225abcff6b 100644
--- a/src/client/app/mobile/views/pages/home.timeline.vue
+++ b/src/client/app/mobile/views/pages/home.timeline.vue
@@ -37,7 +37,14 @@ export default Vue.extend({
 			connection: null,
 			connectionId: null,
 			unreadCount: 0,
-			date: null
+			date: null,
+			baseQuery: {
+				includeMyRenotes: this.$store.state.settings.showMyRenotes,
+				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
+				includeLocalRenotes: this.$store.state.settings.showLocalRenotes
+			},
+			query: {},
+			endpoint: null
 		};
 	},
 
@@ -46,80 +53,109 @@ export default Vue.extend({
 			return this.$store.state.i.followingCount == 0;
 		},
 
-		endpoint(): string {
-			switch (this.src) {
-				case 'home': return 'notes/timeline';
-				case 'local': return 'notes/local-timeline';
-				case 'hybrid': return 'notes/hybrid-timeline';
-				case 'global': return 'notes/global-timeline';
-				case 'mentions': return 'notes/mentions';
-				case 'tag': return 'notes/search_by_tag';
-			}
-		},
-
 		canFetchMore(): boolean {
 			return !this.moreFetching && !this.fetching && this.existMore;
 		}
 	},
 
 	mounted() {
+		const prepend = note => {
+			(this.$refs.timeline as any).prepend(note);
+		};
+
 		if (this.src == 'tag') {
+			this.endpoint = 'notes/search_by_tag';
+			this.query = {
+				query: this.tagTl.query
+			};
 			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
-			this.connection.on('note', this.onNote);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.connection.close();
+			});
 		} else if (this.src == 'home') {
+			this.endpoint = 'notes/timeline';
+			const onChangeFollowing = () => {
+				this.fetch();
+			};
 			this.streamManager = (this as any).os.stream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('note', this.onNote);
-			this.connection.on('follow', this.onChangeFollowing);
-			this.connection.on('unfollow', this.onChangeFollowing);
+			this.connection.on('note', prepend);
+			this.connection.on('follow', onChangeFollowing);
+			this.connection.on('unfollow', onChangeFollowing);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.connection.off('follow', onChangeFollowing);
+				this.connection.off('unfollow', onChangeFollowing);
+				this.streamManager.dispose(this.connectionId);
+			});
 		} else if (this.src == 'local') {
+			this.endpoint = 'notes/local-timeline';
 			this.streamManager = (this as any).os.streams.localTimelineStream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('note', this.onNote);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
 		} else if (this.src == 'hybrid') {
+			this.endpoint = 'notes/hybrid-timeline';
 			this.streamManager = (this as any).os.streams.hybridTimelineStream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('note', this.onNote);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
 		} else if (this.src == 'global') {
+			this.endpoint = 'notes/global-timeline';
 			this.streamManager = (this as any).os.streams.globalTimelineStream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('note', this.onNote);
+			this.connection.on('note', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('note', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
 		} else if (this.src == 'mentions') {
+			this.endpoint = 'notes/mentions';
+			this.streamManager = (this as any).os.stream;
+			this.connection = this.streamManager.getConnection();
+			this.connectionId = this.streamManager.use();
+			this.connection.on('mention', prepend);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('mention', prepend);
+				this.streamManager.dispose(this.connectionId);
+			});
+		} else if (this.src == 'messages') {
+			this.endpoint = 'notes/mentions';
+			this.query = {
+				visibility: 'specified'
+			};
+			const onNote = note => {
+				if (note.visibility == 'specified') {
+					prepend(note);
+				}
+			};
 			this.streamManager = (this as any).os.stream;
 			this.connection = this.streamManager.getConnection();
 			this.connectionId = this.streamManager.use();
-			this.connection.on('mention', this.onNote);
+			this.connection.on('mention', onNote);
+			this.$once('beforeDestroy', () => {
+				this.connection.off('mention', onNote);
+				this.streamManager.dispose(this.connectionId);
+			});
 		}
 
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		if (this.src == 'tag') {
-			this.connection.off('note', this.onNote);
-			this.connection.close();
-		} else if (this.src == 'home') {
-			this.connection.off('note', this.onNote);
-			this.connection.off('follow', this.onChangeFollowing);
-			this.connection.off('unfollow', this.onChangeFollowing);
-			this.streamManager.dispose(this.connectionId);
-		} else if (this.src == 'local') {
-			this.connection.off('note', this.onNote);
-			this.streamManager.dispose(this.connectionId);
-		} else if (this.src == 'hybrid') {
-			this.connection.off('note', this.onNote);
-			this.streamManager.dispose(this.connectionId);
-		} else if (this.src == 'global') {
-			this.connection.off('note', this.onNote);
-			this.streamManager.dispose(this.connectionId);
-		} else if (this.src == 'mentions') {
-			this.connection.off('mention', this.onNote);
-			this.streamManager.dispose(this.connectionId);
-		}
+		this.$emit('beforeDestroy');
 	},
 
 	methods: {
@@ -127,14 +163,10 @@ export default Vue.extend({
 			this.fetching = true;
 
 			(this.$refs.timeline as any).init(() => new Promise((res, rej) => {
-				(this as any).api(this.endpoint, {
+				(this as any).api(this.endpoint, Object.assign({
 					limit: fetchLimit + 1,
-					untilDate: this.date ? this.date.getTime() : undefined,
-					includeMyRenotes: this.$store.state.settings.showMyRenotes,
-					includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-					includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-					query: this.tagTl ? this.tagTl.query : undefined
-				}).then(notes => {
+					untilDate: this.date ? this.date.getTime() : undefined
+				}, this.baseQuery, this.query)).then(notes => {
 					if (notes.length == fetchLimit + 1) {
 						notes.pop();
 						this.existMore = true;
@@ -151,14 +183,10 @@ export default Vue.extend({
 
 			this.moreFetching = true;
 
-			const promise = (this as any).api(this.endpoint, {
+			const promise = (this as any).api(this.endpoint, Object.assign({
 				limit: fetchLimit + 1,
-				untilId: (this.$refs.timeline as any).tail().id,
-				includeMyRenotes: this.$store.state.settings.showMyRenotes,
-				includeRenotedMyNotes: this.$store.state.settings.showRenotedMyNotes,
-				includeLocalRenotes: this.$store.state.settings.showLocalRenotes,
-				query: this.tagTl ? this.tagTl.query : undefined
-			});
+				untilId: (this.$refs.timeline as any).tail().id
+			}, this.baseQuery, this.query));
 
 			promise.then(notes => {
 				if (notes.length == fetchLimit + 1) {
@@ -173,15 +201,6 @@ export default Vue.extend({
 			return promise;
 		},
 
-		onNote(note) {
-			// Prepend a note
-			(this.$refs.timeline as any).prepend(note);
-		},
-
-		onChangeFollowing() {
-			this.fetch();
-		},
-
 		focus() {
 			(this.$refs.timeline as any).focus();
 		},
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 3ec2f16b75..e61916fe18 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -7,6 +7,7 @@
 			<span v-if="src == 'hybrid'">%fa:share-alt%%i18n:@hybrid%</span>
 			<span v-if="src == 'global'">%fa:globe%%i18n:@global%</span>
 			<span v-if="src == 'mentions'">%fa:at%%i18n:@mentions%</span>
+			<span v-if="src == 'messages'">%fa:envelope R%%i18n:@messages%</span>
 			<span v-if="src == 'list'">%fa:list%{{ list.title }}</span>
 			<span v-if="src == 'tag'">%fa:hashtag%{{ tagTl.title }}</span>
 		</span>
@@ -23,16 +24,21 @@
 	<main :data-darkmode="$store.state.device.darkmode">
 		<div class="nav" v-if="showNav">
 			<div class="bg" @click="showNav = false"></div>
+			<div class="pointer"></div>
 			<div class="body">
 				<div>
 					<span :data-active="src == 'home'" @click="src = 'home'">%fa:home% %i18n:@home%</span>
 					<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline">%fa:R comments% %i18n:@local%</span>
 					<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 					<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
+					<div class="hr"></div>
 					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
+					<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%</span>
 					<template v-if="lists">
+						<div class="hr"></div>
 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
 					</template>
+					<div class="hr" v-if="$store.state.settings.tagTimelines && $store.state.settings.tagTimelines.length > 0"></div>
 					<span v-for="tl in $store.state.settings.tagTimelines" :data-active="src == 'tag' && tagTl == tl" @click="src = 'tag'; tagTl = tl" :key="tl.id">%fa:hashtag% {{ tl.title }}</span>
 				</div>
 			</div>
@@ -44,6 +50,7 @@
 			<x-tl v-if="src == 'hybrid'" ref="tl" key="hybrid" src="hybrid"/>
 			<x-tl v-if="src == 'global'" ref="tl" key="global" src="global"/>
 			<x-tl v-if="src == 'mentions'" ref="tl" key="mentions" src="mentions"/>
+			<x-tl v-if="src == 'messages'" ref="tl" key="messages" src="messages"/>
 			<x-tl v-if="src == 'tag'" ref="tl" key="tag" src="tag" :tag-tl="tagTl"/>
 			<mk-user-list-timeline v-if="src == 'list'" ref="tl" :key="list.id" :list="list"/>
 		</div>
@@ -150,6 +157,26 @@ export default Vue.extend({
 
 root(isDark)
 	> .nav
+		> .pointer
+			position fixed
+			z-index 10002
+			top 56px
+			left 0
+			right 0
+
+			$size = 16px
+
+			&:after
+				content ""
+				display block
+				position absolute
+				top -($size * 2)
+				left s('calc(50% - %s)', $size)
+				border-top solid $size transparent
+				border-left solid $size transparent
+				border-right solid $size transparent
+				border-bottom solid $size isDark ? #272f3a : #fff
+
 		> .bg
 			position fixed
 			z-index 10000
@@ -166,28 +193,22 @@ root(isDark)
 			left 0
 			right 0
 			width 300px
+			max-height calc(100% - 70px)
 			margin 0 auto
+			overflow auto
+			-webkit-overflow-scrolling touch
 			background isDark ? #272f3a : #fff
 			border-radius 8px
 			box-shadow 0 0 16px rgba(#000, 0.1)
 
-			$balloon-size = 16px
-
-			&: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 isDark ? #272f3a : #fff
-
 			> div
 				padding 8px 0
 
-				> *
+				> .hr
+					margin 8px 0
+					border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+
+				> *:not(.hr)
 					display block
 					padding 8px 16px
 					color isDark ? #cdd0d8 : #666
diff --git a/src/server/api/endpoints/notes/mentions.ts b/src/server/api/endpoints/notes/mentions.ts
index 3b2e262e4f..8675a9f562 100644
--- a/src/server/api/endpoints/notes/mentions.ts
+++ b/src/server/api/endpoints/notes/mentions.ts
@@ -27,6 +27,9 @@ export const meta = {
 
 		untilId: $.type(ID).optional.note({
 		}),
+
+		visibility: $.str.optional.note({
+		}),
 	}
 };
 
@@ -52,6 +55,10 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 		_id: -1
 	};
 
+	if (ps.visibility) {
+		query.visibility = ps.visibility;
+	}
+
 	if (ps.following) {
 		const followingIds = await getFriendIds(user._id);
 
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 7daf83b294..7c1e71dcb3 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -142,6 +142,14 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 		mentionedUsers.push(await User.findOne({ _id: data.reply.userId }));
 	}
 
+	if (data.visibility == 'specified') {
+		data.visibleUsers.forEach(u => {
+			if (!mentionedUsers.some(x => x._id.equals(u._id))) {
+				mentionedUsers.push(u);
+			}
+		});
+	}
+
 	const note = await insertNote(user, data, tags, mentionedUsers);
 
 	res(note);
@@ -188,7 +196,7 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 	const nm = new NotificationManager(user, note);
 	const nmRelatedPromises = [];
 
-	createMentionedEvents(mentionedUsers, noteObj, nm);
+	createMentionedEvents(mentionedUsers, note, nm);
 
 	const noteActivity = await renderActivity(data, note);
 
@@ -318,7 +326,7 @@ async function publish(user: IUser, note: INote, noteObj: any, reply: INote, ren
 
 	if (['public', 'home', 'followers'].includes(note.visibility)) {
 		// フォロワーに配信
-		publishToFollowers(note, noteObj, user, noteActivity);
+		publishToFollowers(note, user, noteActivity);
 	}
 
 	// リストに配信
@@ -456,7 +464,7 @@ async function publishToUserLists(note: INote, noteObj: any) {
 	});
 }
 
-async function publishToFollowers(note: INote, noteObj: any, user: IUser, noteActivity: any) {
+async function publishToFollowers(note: INote, user: IUser, noteActivity: any) {
 	const detailPackedNote = await pack(note, null, {
 		detail: true,
 		skipHide: true
@@ -505,9 +513,13 @@ function deliverNoteToMentionedRemoteUsers(mentionedUsers: IUser[], user: ILocal
 	});
 }
 
-function createMentionedEvents(mentionedUsers: IUser[], noteObj: any, nm: NotificationManager) {
+function createMentionedEvents(mentionedUsers: IUser[], note: INote, nm: NotificationManager) {
 	mentionedUsers.filter(u => isLocalUser(u)).forEach(async (u) => {
-		publishUserStream(u._id, 'mention', noteObj);
+		const detailPackedNote = await pack(note, u, {
+			detail: true
+		});
+
+		publishUserStream(u._id, 'mention', detailPackedNote);
 
 		// Create notification
 		nm.push(u._id, 'mention');
-- 
cgit v1.2.3-freya


From 31ce3aa31296a1809cabc02f1ed6c92b328f5b3e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 05:35:06 +0900
Subject: キーボードショートカットを強化するなど
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/hotkey.ts                    |  79 ++++++++++++
 src/client/app/common/keycode.ts                   | 139 +++++++++++++++++++++
 .../common/views/components/reaction-picker.vue    |  35 +++++-
 .../components/choose-file-from-drive-window.vue   |   2 +-
 .../components/choose-folder-from-drive-window.vue |   2 +-
 .../app/desktop/views/components/drive-window.vue  |   2 +-
 .../desktop/views/components/followers-window.vue  |   2 +-
 .../desktop/views/components/following-window.vue  |   2 +-
 .../app/desktop/views/components/game-window.vue   |   2 +-
 src/client/app/desktop/views/components/home.vue   |   4 +
 .../app/desktop/views/components/input-dialog.vue  |   2 +-
 .../views/components/messaging-room-window.vue     |   2 +-
 .../desktop/views/components/messaging-window.vue  |   2 +-
 .../app/desktop/views/components/notes.note.vue    |  65 ++++------
 src/client/app/desktop/views/components/notes.vue  |   4 +-
 .../desktop/views/components/post-form-window.vue  |   6 +-
 .../desktop/views/components/progress-dialog.vue   |   2 +-
 .../components/received-follow-requests-window.vue |   2 +-
 .../views/components/renote-form-window.vue        |  33 +++--
 .../desktop/views/components/settings-window.vue   |   2 +-
 .../app/desktop/views/components/timeline.core.vue |  11 --
 .../app/desktop/views/components/timeline.vue      |   4 +
 src/client/app/desktop/views/components/ui.vue     |  35 +++---
 .../desktop/views/components/user-lists-window.vue |   2 +-
 src/client/app/desktop/views/components/window.vue |   2 +-
 src/client/app/desktop/views/pages/home.vue        |  12 +-
 src/client/app/init.ts                             |   2 +
 27 files changed, 356 insertions(+), 101 deletions(-)
 create mode 100644 src/client/app/common/hotkey.ts
 create mode 100644 src/client/app/common/keycode.ts

(limited to 'src/client')

diff --git a/src/client/app/common/hotkey.ts b/src/client/app/common/hotkey.ts
new file mode 100644
index 0000000000..10cbeea543
--- /dev/null
+++ b/src/client/app/common/hotkey.ts
@@ -0,0 +1,79 @@
+import keyCode from './keycode';
+
+const getKeyMap = keymap => Object.keys(keymap).map(input => {
+	const result = {} as any;
+
+	const { keyup, keydown } = keymap[input];
+
+	input.split('+').forEach(keyName => {
+		switch (keyName.toLowerCase()) {
+			case 'ctrl':
+			case 'alt':
+			case 'shift':
+			case 'meta':
+				result[keyName] = true;
+				break;
+			default:
+				result.keyCode = keyCode(keyName);
+		}
+	});
+
+	result.callback = {
+		keydown: keydown || keymap[input],
+		keyup
+	};
+
+	return result;
+});
+
+const ignoreElemens = ['input', 'textarea'];
+
+export default {
+	install(Vue) {
+		Vue.directive('hotkey', {
+			bind(el, binding) {
+				el._hotkey_global = binding.modifiers.global === true;
+
+				el._keymap = getKeyMap(binding.value);
+
+				el.dataset.reservedKeyCodes = el._keymap.map(key => `'${key.keyCode}'`).join(' ');
+
+				el._keyHandler = e => {
+					const reservedKeyCodes = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeyCodes || '' : '';
+					if (document.activeElement && ignoreElemens.some(el => document.activeElement.matches(el))) return;
+
+					for (const hotkey of el._keymap) {
+						if (el._hotkey_global && reservedKeyCodes.includes(`'${e.keyCode}'`)) break;
+
+						const callback = hotkey.keyCode === e.keyCode &&
+							!!hotkey.ctrl === e.ctrlKey &&
+							!!hotkey.alt === e.altKey &&
+							!!hotkey.shift === e.shiftKey &&
+							!!hotkey.meta === e.metaKey &&
+							hotkey.callback[e.type];
+
+						if (callback) {
+							e.preventDefault();
+							e.stopPropagation();
+							callback(e);
+						}
+					}
+				};
+
+				if (el._hotkey_global) {
+					document.addEventListener('keydown', el._keyHandler);
+				} else {
+					el.addEventListener('keydown', el._keyHandler);
+				}
+			},
+
+			unbind(el) {
+				if (el._hotkey_global) {
+					document.removeEventListener('keydown', el._keyHandler);
+				} else {
+					el.removeEventListener('keydown', el._keyHandler);
+				}
+			}
+		});
+	}
+};
diff --git a/src/client/app/common/keycode.ts b/src/client/app/common/keycode.ts
new file mode 100644
index 0000000000..c5ea6cb484
--- /dev/null
+++ b/src/client/app/common/keycode.ts
@@ -0,0 +1,139 @@
+export default searchInput => {
+	// Keyboard Events
+	if (searchInput && typeof searchInput === 'object') {
+		const hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
+		if (hasKeyCode) {
+			searchInput = hasKeyCode;
+		}
+	}
+
+	// Numbers
+	// if (typeof searchInput === 'number') {
+	//   return names[searchInput]
+	// }
+
+	// Everything else (cast to string)
+	const search = String(searchInput);
+
+	// check codes
+	const foundNamedKeyCodes = codes[search.toLowerCase()];
+	if (foundNamedKeyCodes) {
+		return foundNamedKeyCodes;
+	}
+
+	// check aliases
+	const foundNamedKeyAliases = aliases[search.toLowerCase()];
+	if (foundNamedKeyAliases) {
+		return foundNamedKeyAliases;
+	}
+
+	// weird character?
+	if (search.length === 1) {
+		return search.charCodeAt(0);
+	}
+
+	return undefined;
+};
+
+/**
+ * Get by name
+ *
+ *   exports.code['enter'] // => 13
+ */
+
+export const codes = {
+	'backspace': 8,
+	'tab': 9,
+	'enter': 13,
+	'shift': 16,
+	'ctrl': 17,
+	'alt': 18,
+	'pause/break': 19,
+	'caps lock': 20,
+	'esc': 27,
+	'space': 32,
+	'page up': 33,
+	'page down': 34,
+	'end': 35,
+	'home': 36,
+	'left': 37,
+	'up': 38,
+	'right': 39,
+	'down': 40,
+	// 'add': 43,
+	'insert': 45,
+	'delete': 46,
+	'command': 91,
+	'left command': 91,
+	'right command': 93,
+	'numpad *': 106,
+	// 'numpad +': 107,
+	'numpad +': 43,
+	'numpad add': 43, // as a trick
+	'numpad -': 109,
+	'numpad .': 110,
+	'numpad /': 111,
+	'num lock': 144,
+	'scroll lock': 145,
+	'my computer': 182,
+	'my calculator': 183,
+	';': 186,
+	'=': 187,
+	',': 188,
+	'-': 189,
+	'.': 190,
+	'/': 191,
+	'`': 192,
+	'[': 219,
+	'\\': 220,
+	']': 221,
+	"'": 222
+};
+
+// Helper aliases
+
+export const aliases = {
+	'windows': 91,
+	'⇧': 16,
+	'⌥': 18,
+	'⌃': 17,
+	'⌘': 91,
+	'ctl': 17,
+	'control': 17,
+	'option': 18,
+	'pause': 19,
+	'break': 19,
+	'caps': 20,
+	'return': 13,
+	'escape': 27,
+	'spc': 32,
+	'pgup': 33,
+	'pgdn': 34,
+	'ins': 45,
+	'del': 46,
+	'cmd': 91
+};
+
+/*!
+* Programatically add the following
+*/
+
+// lower case chars
+for (let i = 97; i < 123; i++) {
+	codes[String.fromCharCode(i)] = i - 32;
+}
+
+// numbers
+for (let i = 48; i < 58; i++) {
+	codes[i - 48] = i;
+}
+
+// function keys
+for (let i = 1; i < 13; i++) {
+	codes['f' + i] = i + 111;
+}
+
+// numpad keys
+for (let i = 0; i < 10; i++) {
+	codes['numpad ' + i] = i + 96;
+}
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index a4828c987b..58985658c6 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-reaction-picker">
+<div class="mk-reaction-picker" v-hotkey.global="keymap">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ compact, big }" ref="popover">
 		<p v-if="!compact">{{ title }}</p>
@@ -31,28 +31,51 @@ export default Vue.extend({
 			type: Object,
 			required: true
 		},
+
 		source: {
 			required: true
 		},
+
 		compact: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
+
 		cb: {
 			required: false
 		},
+
 		big: {
 			type: Boolean,
 			required: false,
 			default: false
 		}
 	},
+
 	data() {
 		return {
 			title: placeholder
 		};
 	},
+
+	computed: {
+		keymap(): any {
+			return {
+				'1': () => this.react('like'),
+				'2': () => this.react('love'),
+				'3': () => this.react('laugh'),
+				'4': () => this.react('hmm'),
+				'5': () => this.react('surprise'),
+				'6': () => this.react('congrats'),
+				'7': () => this.react('angry'),
+				'8': () => this.react('confused'),
+				'9': () => this.react('rip'),
+				'0': () => this.react('pudding'),
+			};
+		}
+	},
+
 	mounted() {
 		this.$nextTick(() => {
 			const popover = this.$refs.popover as any;
@@ -88,6 +111,7 @@ export default Vue.extend({
 			});
 		});
 	},
+
 	methods: {
 		react(reaction) {
 			(this as any).api('notes/reactions/create', {
@@ -95,15 +119,19 @@ export default Vue.extend({
 				reaction: reaction
 			}).then(() => {
 				if (this.cb) this.cb();
+				this.$emit('closed');
 				this.destroyDom();
 			});
 		},
+
 		onMouseover(e) {
 			this.title = e.target.title;
 		},
+
 		onMouseout(e) {
 			this.title = placeholder;
 		},
+
 		close() {
 			(this.$refs.backdrop as any).style.pointerEvents = 'none';
 			anime({
@@ -120,7 +148,10 @@ export default Vue.extend({
 				scale: 0.5,
 				duration: 200,
 				easing: 'easeInBack',
-				complete: () => this.destroyDom()
+				complete: () => {
+					this.$emit('closed');
+					this.destroyDom();
+				}
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
index b894f0e109..933d31f299 100644
--- a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="800px" height="500px" @closed="$destroy">
+<mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
 	<span slot="header">
 		<span v-html="title" :class="$style.title"></span>
 		<span :class="$style.count" v-if="multiple && files.length > 0">({{ files.length }}%i18n:@choose-file%)</span>
diff --git a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
index 0c4643fdcb..03d6fd1636 100644
--- a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="800px" height="500px" @closed="$destroy">
+<mk-window ref="window" is-modal width="800px" height="500px" @closed="destroyDom">
 	<span slot="header">
 		<span v-html="title" :class="$style.title"></span>
 	</span>
diff --git a/src/client/app/desktop/views/components/drive-window.vue b/src/client/app/desktop/views/components/drive-window.vue
index 1f45b64324..191579538d 100644
--- a/src/client/app/desktop/views/components/drive-window.vue
+++ b/src/client/app/desktop/views/components/drive-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" @closed="$destroy" width="800px" height="500px" :popout-url="popout">
+<mk-window ref="window" @closed="destroyDom" width="800px" height="500px" :popout-url="popout">
 	<template slot="header">
 		<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:@used%</p>
 		<span :class="$style.title">%fa:cloud%%i18n:@drive%</span>
diff --git a/src/client/app/desktop/views/components/followers-window.vue b/src/client/app/desktop/views/components/followers-window.vue
index fdab7bc1ce..d5214adb2f 100644
--- a/src/client/app/desktop/views/components/followers-window.vue
+++ b/src/client/app/desktop/views/components/followers-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window width="400px" height="550px" @closed="$destroy">
+<mk-window width="400px" height="550px" @closed="destroyDom">
 	<span slot="header" :class="$style.header">
 		<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@followers%'.replace('{}', name) }}
 	</span>
diff --git a/src/client/app/desktop/views/components/following-window.vue b/src/client/app/desktop/views/components/following-window.vue
index 7cca833a82..aa9f2bde7b 100644
--- a/src/client/app/desktop/views/components/following-window.vue
+++ b/src/client/app/desktop/views/components/following-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window width="400px" height="550px" @closed="$destroy">
+<mk-window width="400px" height="550px" @closed="destroyDom">
 	<span slot="header" :class="$style.header">
 		<img :src="user.avatarUrl" alt=""/>{{ '%i18n:@following%'.replace('{}', name) }}
 	</span>
diff --git a/src/client/app/desktop/views/components/game-window.vue b/src/client/app/desktop/views/components/game-window.vue
index 7c6cb9cd40..594eae58f8 100644
--- a/src/client/app/desktop/views/components/game-window.vue
+++ b/src/client/app/desktop/views/components/game-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
+<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
 	<span slot="header" :class="$style.header">%fa:gamepad%%i18n:@game%</span>
 	<mk-reversi :class="$style.content" @gamed="g => game = g"/>
 </mk-window>
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index d45cc82e13..79c9a9a517 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -237,6 +237,10 @@ export default Vue.extend({
 
 		warp(date) {
 			(this.$refs.tl as any).warp(date);
+		},
+
+		focus() {
+			(this.$refs.tl as any).focus();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/input-dialog.vue b/src/client/app/desktop/views/components/input-dialog.vue
index e2cf4e48fd..cf7c09ea56 100644
--- a/src/client/app/desktop/views/components/input-dialog.vue
+++ b/src/client/app/desktop/views/components/input-dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="$destroy">
+<mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="destroyDom">
 	<span slot="header" :class="$style.header">
 		%fa:i-cursor%{{ title }}
 	</span>
diff --git a/src/client/app/desktop/views/components/messaging-room-window.vue b/src/client/app/desktop/views/components/messaging-room-window.vue
index 41b421b0e7..3706377607 100644
--- a/src/client/app/desktop/views/components/messaging-room-window.vue
+++ b/src/client/app/desktop/views/components/messaging-room-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="$destroy">
+<mk-window ref="window" width="500px" height="560px" :popout-url="popout" @closed="destroyDom">
 	<span slot="header" :class="$style.header">%fa:comments%%i18n:@title% {{ user | userName }}</span>
 	<mk-messaging-room :user="user" :class="$style.content"/>
 </mk-window>
diff --git a/src/client/app/desktop/views/components/messaging-window.vue b/src/client/app/desktop/views/components/messaging-window.vue
index 9580c5061d..a8f0fc68b9 100644
--- a/src/client/app/desktop/views/components/messaging-window.vue
+++ b/src/client/app/desktop/views/components/messaging-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" width="500px" height="560px" @closed="$destroy">
+<mk-window ref="window" width="500px" height="560px" @closed="destroyDom">
 	<span slot="header" :class="$style.header">%fa:comments%%i18n:@title%</span>
 	<mk-messaging :class="$style.content" @navigate="navigate"/>
 </mk-window>
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 46a866f9a7..fadf47e628 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="note" tabindex="-1" :title="title" @keydown="onKeydown">
+<div class="note" tabindex="-1" v-hotkey="keymap" :title="title">
 	<div class="reply-to" v-if="p.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
 		<x-sub :note="p.reply"/>
 	</div>
@@ -111,6 +111,18 @@ export default Vue.extend({
 	},
 
 	computed: {
+		keymap(): any {
+			return {
+				'r': this.reply,
+				'a': this.react,
+				'n': this.renote,
+				'up': this.focusBefore,
+				'shift+tab': this.focusBefore,
+				'down': this.focusAfter,
+				'tab': this.focusAfter,
+			};
+		},
+
 		isRenote(): boolean {
 			return (this.note.renote &&
 				this.note.text == null &&
@@ -223,64 +235,39 @@ export default Vue.extend({
 		reply() {
 			(this as any).os.new(MkPostFormWindow, {
 				reply: this.p
-			});
+			}).$once('closed', this.focus);
 		},
 
 		renote() {
 			(this as any).os.new(MkRenoteFormWindow, {
 				note: this.p
-			});
+			}).$once('closed', this.focus);
 		},
 
 		react() {
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				note: this.p
-			});
+			}).$once('closed', this.focus);
 		},
 
 		menu() {
 			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
 				note: this.p
-			});
+			}).$once('closed', this.focus);
 		},
 
-		onKeydown(e) {
-			let shouldBeCancel = true;
-
-			switch (true) {
-				case e.which == 38: // [↑]
-				case e.which == 74: // [j]
-				case e.which == 9 && e.shiftKey: // [Shift] + [Tab]
-					focus(this.$el, e => e.previousElementSibling);
-					break;
-
-				case e.which == 40: // [↓]
-				case e.which == 75: // [k]
-				case e.which == 9: // [Tab]
-					focus(this.$el, e => e.nextElementSibling);
-					break;
-
-				case e.which == 81: // [q]
-				case e.which == 69: // [e]
-					this.renote();
-					break;
-
-				case e.which == 70: // [f]
-				case e.which == 76: // [l]
-					//this.like();
-					break;
-
-				case e.which == 82: // [r]
-					this.reply();
-					break;
-
-				default:
-					shouldBeCancel = false;
-			}
+		focus() {
+			this.$el.focus();
+		},
+
+		focusBefore() {
+			focus(this.$el, e => e.previousElementSibling);
+		},
 
-			if (shouldBeCancel) e.preventDefault();
+		focusAfter() {
+			focus(this.$el, e => e.nextElementSibling);
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index ec9aa285d0..469f62c080 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -12,7 +12,7 @@
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
 	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
 		<template v-for="(note, i) in _notes">
-			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)"/>
+			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" ref="note"/>
 			<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>
@@ -89,7 +89,7 @@ export default Vue.extend({
 		},
 
 		focus() {
-			(this.$el as any).children[0].focus();
+			(this.$refs.note as any)[0].focus();
 		},
 
 		onNoteUpdated(i, note) {
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index a88c96d1bf..ade84f6bb9 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window class="mk-post-form-window" ref="window" is-modal @closed="$destroy">
+<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed">
 	<span slot="header" class="mk-post-form-window--header">
 		<span class="icon" v-if="geo">%fa:map-marker-alt%</span>
 		<span v-if="!reply">%i18n:@note%</span>
@@ -53,6 +53,10 @@ export default Vue.extend({
 		},
 		onPosted() {
 			(this.$refs.window as any).close();
+		},
+		onWindowClosed() {
+			this.$emit('closed');
+			this.destroyDom();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/progress-dialog.vue b/src/client/app/desktop/views/components/progress-dialog.vue
index 2f59733d99..cc25ba8e30 100644
--- a/src/client/app/desktop/views/components/progress-dialog.vue
+++ b/src/client/app/desktop/views/components/progress-dialog.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="$destroy">
+<mk-window ref="window" :is-modal="false" :can-close="false" width="500px" @closed="destroyDom">
 	<span slot="header">{{ title }}<mk-ellipsis/></span>
 	<div :class="$style.body">
 		<p :class="$style.init" v-if="isNaN(value)">%i18n:@waiting%<mk-ellipsis/></p>
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
index 26b7ec2590..d8a94f6cbe 100644
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
+<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:envelope R% %i18n:@title%</span>
 
 	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode">
diff --git a/src/client/app/desktop/views/components/renote-form-window.vue b/src/client/app/desktop/views/components/renote-form-window.vue
index df9d2f7fc7..6c9cb59d4a 100644
--- a/src/client/app/desktop/views/components/renote-form-window.vue
+++ b/src/client/app/desktop/views/components/renote-form-window.vue
@@ -1,7 +1,7 @@
 <template>
-<mk-window ref="window" is-modal @closed="$destroy">
+<mk-window ref="window" is-modal @closed="onWindowClosed">
 	<span slot="header" :class="$style.header">%fa:retweet%%i18n:@title%</span>
-	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled"/>
+	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
 </mk-window>
 </template>
 
@@ -10,25 +10,32 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	props: ['note'],
-	mounted() {
-		document.addEventListener('keydown', this.onDocumentKeydown);
-	},
-	beforeDestroy() {
-		document.removeEventListener('keydown', this.onDocumentKeydown);
+
+	computed: {
+		keymap(): any {
+			return {
+				'esc': this.close,
+				'ctrl+enter': this.post
+			};
+		}
 	},
+
 	methods: {
-		onDocumentKeydown(e) {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 27) { // Esc
-					(this.$refs.window as any).close();
-				}
-			}
+		post() {
+			(this.$refs.form as any).ok();
+		},
+		close() {
+			(this.$refs.window as any).close();
 		},
 		onPosted() {
 			(this.$refs.window as any).close();
 		},
 		onCanceled() {
 			(this.$refs.window as any).close();
+		},
+		onWindowClosed() {
+			this.$emit('closed');
+			this.destroyDom();
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/settings-window.vue b/src/client/app/desktop/views/components/settings-window.vue
index b4cc570282..4247717748 100644
--- a/src/client/app/desktop/views/components/settings-window.vue
+++ b/src/client/app/desktop/views/components/settings-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="700px" height="550px" @closed="$destroy">
+<mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom">
 	<span slot="header" :class="$style.header">%fa:cog%%i18n:@settings%</span>
 	<mk-settings :initial-page="initialPage" @done="close"/>
 </mk-window>
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index c8aa36f171..ff73bde95c 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -152,14 +152,11 @@ export default Vue.extend({
 			});
 		}
 
-		document.addEventListener('keydown', this.onKeydown);
-
 		this.fetch();
 	},
 
 	beforeDestroy() {
 		this.$emit('beforeDestroy');
-		document.removeEventListener('keydown', this.onKeydown);
 	},
 
 	methods: {
@@ -212,14 +209,6 @@ export default Vue.extend({
 		warp(date) {
 			this.date = date;
 			this.fetch();
-		},
-
-		onKeydown(e) {
-			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-				if (e.which == 84) { // t
-					this.focus();
-				}
-			}
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index ccc35f95ff..9f421a68ed 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -92,6 +92,10 @@ export default Vue.extend({
 			});
 		},
 
+		focus() {
+			(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.vue b/src/client/app/desktop/views/components/ui.vue
index d410c3d980..a28cb3029e 100644
--- a/src/client/app/desktop/views/components/ui.vue
+++ b/src/client/app/desktop/views/components/ui.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-ui" :style="style">
+<div class="mk-ui" :style="style" v-hotkey.global="keymap">
 	<x-header class="header" v-show="!zenMode"/>
 	<div class="content">
 		<slot></slot>
@@ -16,11 +16,13 @@ export default Vue.extend({
 	components: {
 		XHeader
 	},
+
 	data() {
 		return {
 			zenMode: false
 		};
 	},
+
 	computed: {
 		style(): any {
 			if (!this.$store.getters.isSignedIn || this.$store.state.i.wallpaperUrl == null) return {};
@@ -28,27 +30,24 @@ export default Vue.extend({
 				backgroundColor: this.$store.state.i.wallpaperColor && this.$store.state.i.wallpaperColor.length == 3 ? `rgb(${ this.$store.state.i.wallpaperColor.join(',') })` : null,
 				backgroundImage: `url(${ this.$store.state.i.wallpaperUrl })`
 			};
+		},
+
+		keymap(): any {
+			return {
+				'p': this.post,
+				'n': this.post,
+				'z': this.toggleZenMode
+			};
 		}
 	},
-	mounted() {
-		document.addEventListener('keydown', this.onKeydown);
-	},
-	beforeDestroy() {
-		document.removeEventListener('keydown', this.onKeydown);
-	},
-	methods: {
-		onKeydown(e) {
-			if (e.target.tagName == 'INPUT' || e.target.tagName == 'TEXTAREA') return;
 
-			if (e.which == 80 || e.which == 78) { // p or n
-				e.preventDefault();
-				(this as any).apis.post();
-			}
+	methods: {
+		post() {
+			(this as any).apis.post();
+		},
 
-			if (e.which == 90) { // z
-				e.preventDefault();
-				this.zenMode = !this.zenMode;
-			}
+		toggleZenMode() {
+			this.zenMode = !this.zenMode;
 		}
 	}
 });
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 72ae9cf4e4..75253e0788 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal width="450px" height="500px" @closed="$destroy">
+<mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:list% %i18n:@title%</span>
 
 	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp" :data-darkmode="$store.state.device.darkmode">
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 30f0ec558f..e6886956eb 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -190,8 +190,8 @@ export default Vue.extend({
 			});
 
 			setTimeout(() => {
-				this.destroyDom();
 				this.$emit('closed');
+				this.destroyDom();
 			}, 300);
 		},
 
diff --git a/src/client/app/desktop/views/pages/home.vue b/src/client/app/desktop/views/pages/home.vue
index c7ff0904e0..e595ef4c36 100644
--- a/src/client/app/desktop/views/pages/home.vue
+++ b/src/client/app/desktop/views/pages/home.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<mk-home :mode="mode" @loaded="loaded"/>
+	<mk-home :mode="mode" @loaded="loaded" ref="home" v-hotkey.global="keymap"/>
 </mk-ui>
 </template>
 
@@ -15,6 +15,13 @@ export default Vue.extend({
 			default: 'timeline'
 		}
 	},
+	computed: {
+		keymap(): any {
+			return {
+				't': this.focus
+			};
+		}
+	},
 	mounted() {
 		document.title = (this as any).os.instanceName;
 
@@ -23,6 +30,9 @@ export default Vue.extend({
 	methods: {
 		loaded() {
 			Progress.done();
+		},
+		focus() {
+			this.$refs.home.focus();
 		}
 	}
 });
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index db3852da60..3a03f8492e 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -8,6 +8,7 @@ import VueRouter from 'vue-router';
 import * as TreeView from 'vue-json-tree-view';
 import VAnimateCss from 'v-animate-css';
 import VModal from 'vue-js-modal';
+import VueHotkey from './common/hotkey';
 
 import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
@@ -19,6 +20,7 @@ Vue.use(VueRouter);
 Vue.use(TreeView);
 Vue.use(VAnimateCss);
 Vue.use(VModal);
+Vue.use(VueHotkey);
 
 // Register global directives
 require('./common/views/directives');
-- 
cgit v1.2.3-freya


From fcea9dacb7c94296e875c2bfe92d671468718050 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 06:20:49 +0900
Subject: Clean up: Remove unused import

---
 src/client/app/desktop/views/pages/user/user.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index afb5e674d9..28ccd78074 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -28,7 +28,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import parseAcct from '../../../../../../misc/acct/parse';
-import getUserName from '../../../../../../misc/get-user-name';
 import Progress from '../../../../common/scripts/loading';
 import XHeader from './user.header.vue';
 import XTimeline from './user.timeline.vue';
-- 
cgit v1.2.3-freya


From 1f2ebce8ed749d7e81e999944fc8a22ff39b87b7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 06:29:47 +0900
Subject: Resolve #1302

---
 src/client/app/desktop/views/pages/user/user.vue |  2 +-
 src/client/app/mobile/views/pages/user/home.vue  |  2 +-
 src/docs/api/entities/user.yaml                  |  8 +++---
 src/models/user.ts                               | 32 ++++++++++++++++++++----
 src/server/api/endpoints/i/pin.ts                | 14 ++++++++++-
 5 files changed, 46 insertions(+), 12 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 28ccd78074..89dbd41b84 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -6,7 +6,7 @@
 		<main>
 			<div class="main">
 				<x-header :user="user"/>
-				<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
+				<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
 				<x-timeline class="timeline" ref="tl" :user="user"/>
 			</div>
 			<div class="side">
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index 8b57276b17..4118afef19 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="root home">
-	<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
+	<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
 	<section class="recent-notes">
 		<h2>%fa:R comments%%i18n:@recent-notes%</h2>
 		<div>
diff --git a/src/docs/api/entities/user.yaml b/src/docs/api/entities/user.yaml
index c90b55ee88..e3755d8585 100644
--- a/src/docs/api/entities/user.yaml
+++ b/src/docs/api/entities/user.yaml
@@ -101,15 +101,15 @@ props:
       ja-JP: "投稿の数"
       en-US: "The number of the notes of this user"
 
-  pinnedNote:
-    type: "entity(Note)"
+  pinnedNotes:
+    type: "entity(Note)[]"
     optional: true
     desc:
       ja-JP: "ピン留めされた投稿"
       en-US: "The pinned note of this user"
 
-  pinnedNoteId:
-    type: "id(Note)"
+  pinnedNoteIds:
+    type: "id(Note)[]"
     optional: true
     desc:
       ja-JP: "ピン留めされた投稿のID"
diff --git a/src/models/user.ts b/src/models/user.ts
index 64197c91c2..b595fa8d71 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -35,6 +35,28 @@ User.createIndex('uri', { sparse: true, unique: true });
 
 export default User;
 
+// 後方互換性のため
+User.findOne({
+	pinnedNoteId: { $exists: true }
+}).then(async x => {
+	if (x == null) return;
+
+	const users = await User.find({
+		pinnedNoteId: { $exists: true }
+	});
+
+	users.forEach(u => {
+		User.update({ _id: u._id }, {
+			$set: {
+				pinnedNoteIds: [(u as any).pinnedNoteId]
+			},
+			$unset: {
+				pinnedNoteId: ''
+			}
+		});
+	});
+});
+
 type IUserBase = {
 	_id: mongo.ObjectID;
 	createdAt: Date;
@@ -53,7 +75,7 @@ type IUserBase = {
 	wallpaperUrl?: string;
 	data: any;
 	description: string;
-	pinnedNoteId: mongo.ObjectID;
+	pinnedNoteIds: mongo.ObjectID[];
 
 	/**
 	 * 凍結されているか否か
@@ -464,11 +486,11 @@ export const pack = (
 	}
 
 	if (opts.detail) {
-		if (_user.pinnedNoteId) {
-			// Populate pinned note
-			_user.pinnedNote = packNote(_user.pinnedNoteId, meId, {
+		if (_user.pinnedNoteIds) {
+			// Populate pinned notes
+			_user.pinnedNotes = Promise.all(_user.pinnedNoteIds.map((id: mongo.ObjectId) => packNote(id, meId, {
 				detail: true
-			});
+			})));
 		}
 
 		if (meId && !meId.equals(_user.id)) {
diff --git a/src/server/api/endpoints/i/pin.ts b/src/server/api/endpoints/i/pin.ts
index ae03a86336..8804d5aa70 100644
--- a/src/server/api/endpoints/i/pin.ts
+++ b/src/server/api/endpoints/i/pin.ts
@@ -21,9 +21,21 @@ export default async (params: any, user: ILocalUser) => new Promise(async (res,
 		return rej('note not found');
 	}
 
+	const pinnedNoteIds = user.pinnedNoteIds || [];
+
+	if (pinnedNoteIds.some(id => id.equals(note._id))) {
+		return rej('already exists');
+	}
+
+	pinnedNoteIds.unshift(note._id);
+
+	if (pinnedNoteIds.length > 5) {
+		pinnedNoteIds.pop();
+	}
+
 	await User.update(user._id, {
 		$set: {
-			pinnedNoteId: note._id
+			pinnedNoteIds: pinnedNoteIds
 		}
 	});
 
-- 
cgit v1.2.3-freya


From 19c72627fc6e9f3c89b649b2f88bf5e066961e7a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 08:19:45 +0900
Subject: Improve keyboard shortcut

---
 src/client/app/common/views/components/reaction-picker.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 58985658c6..c329241d8a 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -62,16 +62,27 @@ export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
+				'esc': this.close,
 				'1': () => this.react('like'),
+				'numpad 1': () => this.react('like'),
 				'2': () => this.react('love'),
+				'numpad 2': () => this.react('love'),
 				'3': () => this.react('laugh'),
+				'numpad 3': () => this.react('laugh'),
 				'4': () => this.react('hmm'),
+				'numpad 4': () => this.react('hmm'),
 				'5': () => this.react('surprise'),
+				'numpad 5': () => this.react('surprise'),
 				'6': () => this.react('congrats'),
+				'numpad 6': () => this.react('congrats'),
 				'7': () => this.react('angry'),
+				'numpad 7': () => this.react('angry'),
 				'8': () => this.react('confused'),
+				'numpad 8': () => this.react('confused'),
 				'9': () => this.react('rip'),
+				'numpad 9': () => this.react('rip'),
 				'0': () => this.react('pudding'),
+				'numpad 0': () => this.react('pudding'),
 			};
 		}
 	},
-- 
cgit v1.2.3-freya


From 55e2ae1408e056295d37681814b62f24a50a617e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 09:11:52 +0900
Subject: Improve usability

---
 src/client/app/common/hotkey.ts                    |  6 ++-
 src/client/app/common/keycode.ts                   |  3 +-
 .../common/views/components/reaction-picker.vue    | 61 +++++++++++++++++++++-
 .../app/desktop/views/components/notes.note.vue    | 15 ++++--
 4 files changed, 75 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/hotkey.ts b/src/client/app/common/hotkey.ts
index 10cbeea543..62726887d1 100644
--- a/src/client/app/common/hotkey.ts
+++ b/src/client/app/common/hotkey.ts
@@ -13,8 +13,10 @@ const getKeyMap = keymap => Object.keys(keymap).map(input => {
 			case 'meta':
 				result[keyName] = true;
 				break;
-			default:
+			default: {
 				result.keyCode = keyCode(keyName);
+				if (!Array.isArray(result.keyCode)) result.keyCode = [result.keyCode];
+			}
 		}
 	});
 
@@ -45,7 +47,7 @@ export default {
 					for (const hotkey of el._keymap) {
 						if (el._hotkey_global && reservedKeyCodes.includes(`'${e.keyCode}'`)) break;
 
-						const callback = hotkey.keyCode === e.keyCode &&
+						const callback = hotkey.keyCode.includes(e.keyCode) &&
 							!!hotkey.ctrl === e.ctrlKey &&
 							!!hotkey.alt === e.altKey &&
 							!!hotkey.shift === e.shiftKey &&
diff --git a/src/client/app/common/keycode.ts b/src/client/app/common/keycode.ts
index c5ea6cb484..0324a5389a 100644
--- a/src/client/app/common/keycode.ts
+++ b/src/client/app/common/keycode.ts
@@ -67,8 +67,7 @@ export const codes = {
 	'left command': 91,
 	'right command': 93,
 	'numpad *': 106,
-	// 'numpad +': 107,
-	'numpad +': 43,
+	'numpad plus': [43, 107],
 	'numpad add': 43, // as a trick
 	'numpad -': 109,
 	'numpad .': 110,
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index c329241d8a..4e27fb36e3 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -3,7 +3,7 @@
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ compact, big }" ref="popover">
 		<p v-if="!compact">{{ title }}</p>
-		<div>
+		<div ref="buttons" :class="{ showFocus }">
 			<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
 			<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
 			<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
@@ -50,12 +50,19 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+
+		showFocus: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 
 	data() {
 		return {
-			title: placeholder
+			title: placeholder,
+			focus: null
 		};
 	},
 
@@ -63,6 +70,9 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'esc': this.close,
+				'enter': this.choose,
+				'space': this.choose,
+				'numpad plus': this.choose,
 				'1': () => this.react('like'),
 				'numpad 1': () => this.react('like'),
 				'2': () => this.react('love'),
@@ -83,12 +93,24 @@ export default Vue.extend({
 				'numpad 9': () => this.react('rip'),
 				'0': () => this.react('pudding'),
 				'numpad 0': () => this.react('pudding'),
+				'up': this.focusUp,
+				'right': this.focusRight,
+				'down': this.focusDown,
+				'left': this.focusLeft,
 			};
 		}
 	},
 
+	watch: {
+		focus(i) {
+			this.$refs.buttons.childNodes[i].focus();
+		}
+	},
+
 	mounted() {
 		this.$nextTick(() => {
+			this.focus = 0;
+
 			const popover = this.$refs.popover as any;
 
 			const rect = this.source.getBoundingClientRect();
@@ -164,6 +186,26 @@ export default Vue.extend({
 					this.destroyDom();
 				}
 			});
+		},
+
+		focusUp() {
+			this.focus = this.focus == 0 ? 9 : this.focus < 5 ? (this.focus + 4) : (this.focus - 5);
+		},
+
+		focusDown() {
+			this.focus = this.focus == 9 ? 0 : this.focus >= 5 ? (this.focus - 4) : (this.focus + 5);
+		},
+
+		focusRight() {
+			this.focus = this.focus == 9 ? 0 : (this.focus + 1);
+		},
+
+		focusLeft() {
+			this.focus = this.focus == 0 ? 9 : (this.focus - 1);
+		},
+
+		choose() {
+			this.$refs.buttons.childNodes[this.focus].click();
 		}
 	}
 });
@@ -249,6 +291,21 @@ root(isDark)
 			width 240px
 			text-align center
 
+			&.showFocus
+				> button:focus
+					z-index 1
+
+					&:after
+						content ""
+						pointer-events none
+						position absolute
+						top 0
+						right 0
+						bottom 0
+						left 0
+						border 2px solid rgba($theme-color, 0.3)
+						border-radius 4px
+
 			> button
 				padding 0
 				width 40px
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index fadf47e628..b8c5f31511 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -48,7 +48,7 @@
 				<button class="renoteButton" @click="renote" title="%i18n:@renote%">
 					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 				</button>
-				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
+				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
 					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 				</button>
 				<button @click="menu" ref="menuButton">
@@ -114,7 +114,8 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'r': this.reply,
-				'a': this.react,
+				'a': () => this.react(true),
+				'numpad plus': () => this.react(true),
 				'n': this.renote,
 				'up': this.focusBefore,
 				'shift+tab': this.focusBefore,
@@ -244,10 +245,12 @@ export default Vue.extend({
 			}).$once('closed', this.focus);
 		},
 
-		react() {
+		react(viaKeyboard = false) {
+			this.blur();
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				note: this.p
+				note: this.p,
+				showFocus: viaKeyboard
 			}).$once('closed', this.focus);
 		},
 
@@ -262,6 +265,10 @@ export default Vue.extend({
 			this.$el.focus();
 		},
 
+		blur() {
+			this.$el.blur();
+		},
+
 		focusBefore() {
 			focus(this.$el, e => e.previousElementSibling);
 		},
-- 
cgit v1.2.3-freya


From f66c31c771d31678472dde87712c7109532c930f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 09:20:06 +0900
Subject: Improve usability & refactoring

---
 src/client/app/common/keycode.ts                   |  7 +------
 .../common/views/components/reaction-picker.vue    | 22 ++++++++--------------
 2 files changed, 9 insertions(+), 20 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/keycode.ts b/src/client/app/common/keycode.ts
index 0324a5389a..55043ad76b 100644
--- a/src/client/app/common/keycode.ts
+++ b/src/client/app/common/keycode.ts
@@ -124,15 +124,10 @@ for (let i = 97; i < 123; i++) {
 
 // numbers
 for (let i = 48; i < 58; i++) {
-	codes[i - 48] = i;
+	codes[i - 48] = [i, (i - 48) + 96];
 }
 
 // function keys
 for (let i = 1; i < 13; i++) {
 	codes['f' + i] = i + 111;
 }
-
-// numpad keys
-for (let i = 0; i < 10; i++) {
-	codes['numpad ' + i] = i + 96;
-}
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 4e27fb36e3..f415e89d0e 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -73,30 +73,20 @@ export default Vue.extend({
 				'enter': this.choose,
 				'space': this.choose,
 				'numpad plus': this.choose,
+				'up': this.focusUp,
+				'right': this.focusRight,
+				'down': this.focusDown,
+				'left': this.focusLeft,
 				'1': () => this.react('like'),
-				'numpad 1': () => this.react('like'),
 				'2': () => this.react('love'),
-				'numpad 2': () => this.react('love'),
 				'3': () => this.react('laugh'),
-				'numpad 3': () => this.react('laugh'),
 				'4': () => this.react('hmm'),
-				'numpad 4': () => this.react('hmm'),
 				'5': () => this.react('surprise'),
-				'numpad 5': () => this.react('surprise'),
 				'6': () => this.react('congrats'),
-				'numpad 6': () => this.react('congrats'),
 				'7': () => this.react('angry'),
-				'numpad 7': () => this.react('angry'),
 				'8': () => this.react('confused'),
-				'numpad 8': () => this.react('confused'),
 				'9': () => this.react('rip'),
-				'numpad 9': () => this.react('rip'),
 				'0': () => this.react('pudding'),
-				'numpad 0': () => this.react('pudding'),
-				'up': this.focusUp,
-				'right': this.focusRight,
-				'down': this.focusDown,
-				'left': this.focusLeft,
 			};
 		}
 	},
@@ -104,6 +94,10 @@ export default Vue.extend({
 	watch: {
 		focus(i) {
 			this.$refs.buttons.childNodes[i].focus();
+
+			if (this.showFocus) {
+				this.title = this.$refs.buttons.childNodes[i].title;
+			}
 		}
 	},
 
-- 
cgit v1.2.3-freya


From 6ed3f9e41478b59bd27a3b8ae930091430b85e5b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 12:34:41 +0900
Subject: リファクタリングなど
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/hotkey.ts                    |  98 +++++++++------
 src/client/app/common/keycode.ts                   | 134 +++------------------
 .../common/views/components/reaction-picker.vue    |   2 +-
 .../app/desktop/views/components/notes.note.vue    |   2 +-
 4 files changed, 80 insertions(+), 156 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/hotkey.ts b/src/client/app/common/hotkey.ts
index 62726887d1..66336fca6e 100644
--- a/src/client/app/common/hotkey.ts
+++ b/src/client/app/common/hotkey.ts
@@ -1,29 +1,42 @@
 import keyCode from './keycode';
+import { concat } from '../../../prelude/array';
 
-const getKeyMap = keymap => Object.keys(keymap).map(input => {
-	const result = {} as any;
-
-	const { keyup, keydown } = keymap[input];
-
-	input.split('+').forEach(keyName => {
-		switch (keyName.toLowerCase()) {
-			case 'ctrl':
-			case 'alt':
-			case 'shift':
-			case 'meta':
-				result[keyName] = true;
-				break;
-			default: {
-				result.keyCode = keyCode(keyName);
-				if (!Array.isArray(result.keyCode)) result.keyCode = [result.keyCode];
+type pattern = {
+	which: string[];
+	ctrl?: boolean;
+	shift?: boolean;
+	alt?: boolean;
+};
+
+type action = {
+	patterns: pattern[];
+
+	callback: Function;
+};
+
+const getKeyMap = keymap => Object.entries(keymap).map(([patterns, callback]): action => {
+	const result = {
+		patterns: [],
+		callback: callback
+	} as action;
+
+	result.patterns = patterns.split('|').map(part => {
+		const pattern = {
+			which: []
+		} as pattern;
+
+		part.trim().split('+').forEach(key => {
+			key = key.trim().toLowerCase();
+			switch (key) {
+				case 'ctrl': pattern.ctrl = true; break;
+				case 'alt': pattern.alt = true; break;
+				case 'shift': pattern.shift = true; break;
+				default: pattern.which = keyCode(key).map(k => k.toLowerCase());
 			}
-		}
-	});
+		});
 
-	result.callback = {
-		keydown: keydown || keymap[input],
-		keyup
-	};
+		return pattern;
+	});
 
 	return result;
 });
@@ -36,28 +49,39 @@ export default {
 			bind(el, binding) {
 				el._hotkey_global = binding.modifiers.global === true;
 
-				el._keymap = getKeyMap(binding.value);
+				const actions = getKeyMap(binding.value);
 
-				el.dataset.reservedKeyCodes = el._keymap.map(key => `'${key.keyCode}'`).join(' ');
+				const reservedKeys = concat(actions.map(a => a.patterns.map(p => p.which)));
+
+				el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' ');
 
 				el._keyHandler = e => {
-					const reservedKeyCodes = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeyCodes || '' : '';
+					const key = e.code.toLowerCase();
+
+					const targetReservedKeys = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeys || '' : '';
 					if (document.activeElement && ignoreElemens.some(el => document.activeElement.matches(el))) return;
 
-					for (const hotkey of el._keymap) {
-						if (el._hotkey_global && reservedKeyCodes.includes(`'${e.keyCode}'`)) break;
+					for (const action of actions) {
+						if (el._hotkey_global && targetReservedKeys.includes(`'${key}'`)) break;
+
+						const matched = action.patterns.some(pattern => {
+							let matched = pattern.which.includes(key);
+							if (pattern.ctrl && !e.ctrlKey) matched = false;
+							if (pattern.shift && !e.shiftKey) matched = false;
+							if (pattern.alt && !e.altKey) matched = false;
 
-						const callback = hotkey.keyCode.includes(e.keyCode) &&
-							!!hotkey.ctrl === e.ctrlKey &&
-							!!hotkey.alt === e.altKey &&
-							!!hotkey.shift === e.shiftKey &&
-							!!hotkey.meta === e.metaKey &&
-							hotkey.callback[e.type];
+							if (matched) {
+								e.preventDefault();
+								e.stopPropagation();
+								action.callback(e);
+								return true;
+							} else {
+								return false;
+							}
+						});
 
-						if (callback) {
-							e.preventDefault();
-							e.stopPropagation();
-							callback(e);
+						if (matched) {
+							break;
 						}
 					}
 				};
diff --git a/src/client/app/common/keycode.ts b/src/client/app/common/keycode.ts
index 55043ad76b..5786c1dc0a 100644
--- a/src/client/app/common/keycode.ts
+++ b/src/client/app/common/keycode.ts
@@ -1,116 +1,20 @@
-export default searchInput => {
-	// Keyboard Events
-	if (searchInput && typeof searchInput === 'object') {
-		const hasKeyCode = searchInput.which || searchInput.keyCode || searchInput.charCode;
-		if (hasKeyCode) {
-			searchInput = hasKeyCode;
-		}
+export default (input: string): string[] => {
+	if (Object.keys(aliases).some(a => a.toLowerCase() == input.toLowerCase())) {
+		const codes = aliases[input];
+		return Array.isArray(codes) ? codes : [codes];
+	} else {
+		return [input];
 	}
-
-	// Numbers
-	// if (typeof searchInput === 'number') {
-	//   return names[searchInput]
-	// }
-
-	// Everything else (cast to string)
-	const search = String(searchInput);
-
-	// check codes
-	const foundNamedKeyCodes = codes[search.toLowerCase()];
-	if (foundNamedKeyCodes) {
-		return foundNamedKeyCodes;
-	}
-
-	// check aliases
-	const foundNamedKeyAliases = aliases[search.toLowerCase()];
-	if (foundNamedKeyAliases) {
-		return foundNamedKeyAliases;
-	}
-
-	// weird character?
-	if (search.length === 1) {
-		return search.charCodeAt(0);
-	}
-
-	return undefined;
-};
-
-/**
- * Get by name
- *
- *   exports.code['enter'] // => 13
- */
-
-export const codes = {
-	'backspace': 8,
-	'tab': 9,
-	'enter': 13,
-	'shift': 16,
-	'ctrl': 17,
-	'alt': 18,
-	'pause/break': 19,
-	'caps lock': 20,
-	'esc': 27,
-	'space': 32,
-	'page up': 33,
-	'page down': 34,
-	'end': 35,
-	'home': 36,
-	'left': 37,
-	'up': 38,
-	'right': 39,
-	'down': 40,
-	// 'add': 43,
-	'insert': 45,
-	'delete': 46,
-	'command': 91,
-	'left command': 91,
-	'right command': 93,
-	'numpad *': 106,
-	'numpad plus': [43, 107],
-	'numpad add': 43, // as a trick
-	'numpad -': 109,
-	'numpad .': 110,
-	'numpad /': 111,
-	'num lock': 144,
-	'scroll lock': 145,
-	'my computer': 182,
-	'my calculator': 183,
-	';': 186,
-	'=': 187,
-	',': 188,
-	'-': 189,
-	'.': 190,
-	'/': 191,
-	'`': 192,
-	'[': 219,
-	'\\': 220,
-	']': 221,
-	"'": 222
 };
 
-// Helper aliases
-
 export const aliases = {
-	'windows': 91,
-	'⇧': 16,
-	'⌥': 18,
-	'⌃': 17,
-	'⌘': 91,
-	'ctl': 17,
-	'control': 17,
-	'option': 18,
-	'pause': 19,
-	'break': 19,
-	'caps': 20,
-	'return': 13,
-	'escape': 27,
-	'spc': 32,
-	'pgup': 33,
-	'pgdn': 34,
-	'ins': 45,
-	'del': 46,
-	'cmd': 91
+	'esc': 'Escape',
+	'enter': ['Enter', 'NumpadEnter'],
+	'up': 'ArrowUp',
+	'down': 'ArrowDown',
+	'left': 'ArrowLeft',
+	'right': 'ArrowRight',
+	'plus': ['NumpadAdd', 'Semicolon'],
 };
 
 /*!
@@ -119,15 +23,11 @@ export const aliases = {
 
 // lower case chars
 for (let i = 97; i < 123; i++) {
-	codes[String.fromCharCode(i)] = i - 32;
+	const char = String.fromCharCode(i);
+	aliases[char] = `Key${char.toUpperCase()}`;
 }
 
 // numbers
-for (let i = 48; i < 58; i++) {
-	codes[i - 48] = [i, (i - 48) + 96];
-}
-
-// function keys
-for (let i = 1; i < 13; i++) {
-	codes['f' + i] = i + 111;
+for (let i = 0; i < 10; i++) {
+	aliases[i] = [`Numpad${i}`, `Digit${i}`];
 }
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index f415e89d0e..811f82283d 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -72,7 +72,7 @@ export default Vue.extend({
 				'esc': this.close,
 				'enter': this.choose,
 				'space': this.choose,
-				'numpad plus': this.choose,
+				'plus': this.choose,
 				'up': this.focusUp,
 				'right': this.focusRight,
 				'down': this.focusDown,
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index b8c5f31511..26f6ef4554 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -115,7 +115,7 @@ export default Vue.extend({
 			return {
 				'r': this.reply,
 				'a': () => this.react(true),
-				'numpad plus': () => this.react(true),
+				'plus': () => this.react(true),
 				'n': this.renote,
 				'up': this.focusBefore,
 				'shift+tab': this.focusBefore,
-- 
cgit v1.2.3-freya


From 71a93b2b435a1747a710a593588c1daec8ef7878 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 12:42:56 +0900
Subject: Refactor & Usability improvements

---
 src/client/app/common/hotkey.ts                        |  3 ++-
 .../app/common/views/components/reaction-picker.vue    | 18 +++++++++++-------
 src/client/app/desktop/views/components/notes.note.vue | 16 +++++++---------
 3 files changed, 20 insertions(+), 17 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/hotkey.ts b/src/client/app/common/hotkey.ts
index 66336fca6e..03806fb184 100644
--- a/src/client/app/common/hotkey.ts
+++ b/src/client/app/common/hotkey.ts
@@ -51,7 +51,8 @@ export default {
 
 				const actions = getKeyMap(binding.value);
 
-				const reservedKeys = concat(actions.map(a => a.patterns.map(p => p.which)));
+				// flatten
+				const reservedKeys = concat(concat(actions.map(a => a.patterns.map(p => p.which))));
 
 				el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' ');
 
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 811f82283d..ce0d2a8ea3 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -56,6 +56,12 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
 		}
 	},
 
@@ -70,9 +76,7 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'esc': this.close,
-				'enter': this.choose,
-				'space': this.choose,
-				'plus': this.choose,
+				'enter|space|plus': this.choose,
 				'up': this.focusUp,
 				'right': this.focusRight,
 				'down': this.focusDown,
@@ -126,7 +130,7 @@ export default Vue.extend({
 			anime({
 				targets: this.$refs.backdrop,
 				opacity: 1,
-				duration: 100,
+				duration: this.animation ? 100 : 0,
 				easing: 'linear'
 			});
 
@@ -134,7 +138,7 @@ export default Vue.extend({
 				targets: this.$refs.popover,
 				opacity: 1,
 				scale: [0.5, 1],
-				duration: 500
+				duration: this.animation ? 500 : 0
 			});
 		});
 	},
@@ -164,7 +168,7 @@ export default Vue.extend({
 			anime({
 				targets: this.$refs.backdrop,
 				opacity: 0,
-				duration: 200,
+				duration: this.animation ? 200 : 0,
 				easing: 'linear'
 			});
 
@@ -173,7 +177,7 @@ export default Vue.extend({
 				targets: this.$refs.popover,
 				opacity: 0,
 				scale: 0.5,
-				duration: 200,
+				duration: this.animation ? 200 : 0,
 				easing: 'easeInBack',
 				complete: () => {
 					this.$emit('closed');
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 26f6ef4554..18a1ce9e52 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -113,14 +113,11 @@ export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
-				'r': this.reply,
-				'a': () => this.react(true),
-				'plus': () => this.react(true),
-				'n': this.renote,
-				'up': this.focusBefore,
-				'shift+tab': this.focusBefore,
-				'down': this.focusAfter,
-				'tab': this.focusAfter,
+				'r|left': this.reply,
+				'a|plus': () => this.react(true),
+				'n|right': this.renote,
+				'up|shift+tab': this.focusBefore,
+				'down|tab': this.focusAfter,
 			};
 		},
 
@@ -250,7 +247,8 @@ export default Vue.extend({
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				note: this.p,
-				showFocus: viaKeyboard
+				showFocus: viaKeyboard,
+				animation: !viaKeyboard
 			}).$once('closed', this.focus);
 		},
 
-- 
cgit v1.2.3-freya


From 8ba3fb13ebb780255f9b6f4ca89dc2f70b770098 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 13:12:41 +0900
Subject: Fix bug

---
 src/client/app/mobile/views/pages/home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index e61916fe18..43afc98b45 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -35,7 +35,7 @@
 					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
 					<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%</span>
 					<template v-if="lists">
-						<div class="hr"></div>
+						<div class="hr" v-if="lists.length > 0"></div>
 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
 					</template>
 					<div class="hr" v-if="$store.state.settings.tagTimelines && $store.state.settings.tagTimelines.length > 0"></div>
-- 
cgit v1.2.3-freya


From 1ac033ff184a82840a584a12bed1e74960619f57 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 14:30:50 +0900
Subject: Improve keyboard shortcut

---
 .../app/desktop/views/components/notes.note.vue       | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 18a1ce9e52..e53dbe1215 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -115,9 +115,19 @@ export default Vue.extend({
 			return {
 				'r|left': this.reply,
 				'a|plus': () => this.react(true),
-				'n|right': this.renote,
+				'q|n|right': this.renote,
 				'up|shift+tab': this.focusBefore,
 				'down|tab': this.focusAfter,
+				'1': () => this.reactDirectly('like'),
+				'2': () => this.reactDirectly('love'),
+				'3': () => this.reactDirectly('laugh'),
+				'4': () => this.reactDirectly('hmm'),
+				'5': () => this.reactDirectly('surprise'),
+				'6': () => this.reactDirectly('congrats'),
+				'7': () => this.reactDirectly('angry'),
+				'8': () => this.reactDirectly('confused'),
+				'9': () => this.reactDirectly('rip'),
+				'0': () => this.reactDirectly('pudding'),
 			};
 		},
 
@@ -252,6 +262,13 @@ export default Vue.extend({
 			}).$once('closed', this.focus);
 		},
 
+		reactDirectly(reaction) {
+			(this as any).api('notes/reactions/create', {
+				noteId: this.p.id,
+				reaction: reaction
+			});
+		},
+
 		menu() {
 			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-- 
cgit v1.2.3-freya


From 16c36163b4eedabdba337697cc85c2e513eae439 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 14:35:46 +0900
Subject: Fix bug

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 469f62c080..e6267ed204 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -10,7 +10,7 @@
 	</div>
 
 	<!-- トランジションを有効にするとなぜかメモリリークする -->
-	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div">
+	<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notes" class="notes transition" tag="div" ref="notes">
 		<template v-for="(note, i) in _notes">
 			<x-note :note="note" :key="note.id" @update:note="onNoteUpdated(i, $event)" ref="note"/>
 			<p class="date" :key="note.id + '_date'" v-if="i != notes.length - 1 && note._date != _notes[i + 1]._date">
@@ -89,7 +89,7 @@ export default Vue.extend({
 		},
 
 		focus() {
-			(this.$refs.note as any)[0].focus();
+			(this.$refs.notes as any).children[0].focus ? (this.$refs.notes as any).children[0].focus() : (this.$refs.notes as any).$el.children[0].focus();
 		},
 
 		onNoteUpdated(i, note) {
-- 
cgit v1.2.3-freya


From f4045fb5b32b69664427d844a66d37258e19c5b1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 14:39:18 +0900
Subject: Improve keyboard shortcuts

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index e53dbe1215..b96f3ab998 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -115,7 +115,7 @@ export default Vue.extend({
 			return {
 				'r|left': this.reply,
 				'a|plus': () => this.react(true),
-				'q|n|right': this.renote,
+				'q|right': this.renote,
 				'up|shift+tab': this.focusBefore,
 				'down|tab': this.focusAfter,
 				'1': () => this.reactDirectly('like'),
diff --git a/src/client/app/desktop/views/components/renote-form-window.vue b/src/client/app/desktop/views/components/renote-form-window.vue
index 6c9cb59d4a..44ad2da800 100644
--- a/src/client/app/desktop/views/components/renote-form-window.vue
+++ b/src/client/app/desktop/views/components/renote-form-window.vue
@@ -15,7 +15,8 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'esc': this.close,
-				'ctrl+enter': this.post
+				'enter': this.post,
+				'q': this.quote,
 			};
 		}
 	},
@@ -24,6 +25,9 @@ export default Vue.extend({
 		post() {
 			(this.$refs.form as any).ok();
 		},
+		quote() {
+			(this.$refs.form as any).onQuote();
+		},
 		close() {
 			(this.$refs.window as any).close();
 		},
-- 
cgit v1.2.3-freya


From dba04cc59cb30d3acc9dd03be5c2be63718453e9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 14:43:54 +0900
Subject: Improve keyboard shortcuts

---
 src/client/app/common/views/components/reaction-picker.vue | 8 ++++----
 src/client/app/desktop/views/components/notes.note.vue     | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index ce0d2a8ea3..fff2c56f00 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -77,10 +77,10 @@ export default Vue.extend({
 			return {
 				'esc': this.close,
 				'enter|space|plus': this.choose,
-				'up': this.focusUp,
-				'right': this.focusRight,
-				'down': this.focusDown,
-				'left': this.focusLeft,
+				'up|k': this.focusUp,
+				'left|h|shift+tab': this.focusLeft,
+				'right|l|tab': this.focusRight,
+				'down|j': this.focusDown,
 				'1': () => this.react('like'),
 				'2': () => this.react('love'),
 				'3': () => this.react('laugh'),
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index b96f3ab998..d60bce2545 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -116,8 +116,8 @@ export default Vue.extend({
 				'r|left': this.reply,
 				'a|plus': () => this.react(true),
 				'q|right': this.renote,
-				'up|shift+tab': this.focusBefore,
-				'down|tab': this.focusAfter,
+				'up|k|shift+tab': this.focusBefore,
+				'down|j|tab': this.focusAfter,
 				'1': () => this.reactDirectly('like'),
 				'2': () => this.reactDirectly('love'),
 				'3': () => this.reactDirectly('laugh'),
-- 
cgit v1.2.3-freya


From 5184a07cf2ba3e5faa703e2f0cfcf465187585ea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 14:50:13 +0900
Subject: Improve usability

---
 src/client/app/desktop/views/components/notes.note.vue | 18 ++++++++++--------
 .../app/desktop/views/components/post-form-window.vue  | 18 ++++++++++++++++--
 .../desktop/views/components/renote-form-window.vue    | 15 +++++++++++++--
 src/client/app/desktop/views/components/window.vue     | 17 +++++++++++------
 4 files changed, 50 insertions(+), 18 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index d60bce2545..bffa6affc9 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -40,12 +40,12 @@
 			</div>
 			<footer>
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
-				<button class="replyButton" @click="reply" title="%i18n:@reply%">
+				<button class="replyButton" @click="reply()" title="%i18n:@reply%">
 					<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 class="renoteButton" @click="renote" title="%i18n:@renote%">
+				<button class="renoteButton" @click="renote()" title="%i18n:@renote%">
 					%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
 				</button>
 				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
@@ -113,9 +113,9 @@ export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
-				'r|left': this.reply,
+				'r|left': () => this.reply(true),
 				'a|plus': () => this.react(true),
-				'q|right': this.renote,
+				'q|right': () => this.renote(true),
 				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
 				'1': () => this.reactDirectly('like'),
@@ -240,15 +240,17 @@ export default Vue.extend({
 			}
 		},
 
-		reply() {
+		reply(viaKeyboard = false) {
 			(this as any).os.new(MkPostFormWindow, {
-				reply: this.p
+				reply: this.p,
+				animation: !viaKeyboard
 			}).$once('closed', this.focus);
 		},
 
-		renote() {
+		renote(viaKeyboard = false) {
 			(this as any).os.new(MkRenoteFormWindow, {
-				note: this.p
+				note: this.p,
+				animation: !viaKeyboard
 			}).$once('closed', this.focus);
 		},
 
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index ade84f6bb9..6b6bf3a24a 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed">
+<mk-window class="mk-post-form-window" ref="window" is-modal @closed="onWindowClosed" :animation="animation">
 	<span slot="header" class="mk-post-form-window--header">
 		<span class="icon" v-if="geo">%fa:map-marker-alt%</span>
 		<span v-if="!reply">%i18n:@note%</span>
@@ -25,7 +25,19 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['reply'],
+	props: {
+		reply: {
+			type: Object,
+			required: true
+		},
+
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+
 	data() {
 		return {
 			uploadings: [],
@@ -33,11 +45,13 @@ export default Vue.extend({
 			geo: null
 		};
 	},
+
 	mounted() {
 		this.$nextTick(() => {
 			(this.$refs.form as any).focus();
 		});
 	},
+
 	methods: {
 		onChangeUploadings(files) {
 			this.uploadings = files;
diff --git a/src/client/app/desktop/views/components/renote-form-window.vue b/src/client/app/desktop/views/components/renote-form-window.vue
index 44ad2da800..b9760fcbe9 100644
--- a/src/client/app/desktop/views/components/renote-form-window.vue
+++ b/src/client/app/desktop/views/components/renote-form-window.vue
@@ -1,5 +1,5 @@
 <template>
-<mk-window ref="window" is-modal @closed="onWindowClosed">
+<mk-window ref="window" is-modal @closed="onWindowClosed" :animation="animation">
 	<span slot="header" :class="$style.header">%fa:retweet%%i18n:@title%</span>
 	<mk-renote-form ref="form" :note="note" @posted="onPosted" @canceled="onCanceled" v-hotkey.global="keymap"/>
 </mk-window>
@@ -9,7 +9,18 @@
 import Vue from 'vue';
 
 export default Vue.extend({
-	props: ['note'],
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
 
 	computed: {
 		keymap(): any {
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index e6886956eb..5eece3795f 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -76,6 +76,11 @@ export default Vue.extend({
 		name: {
 			type: String,
 			default: null
+		},
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
 		}
 	},
 
@@ -142,7 +147,7 @@ export default Vue.extend({
 				anime({
 					targets: bg,
 					opacity: 1,
-					duration: 100,
+					duration: this.animation ? 100 : 0,
 					easing: 'linear'
 				});
 			}
@@ -152,7 +157,7 @@ export default Vue.extend({
 				targets: main,
 				opacity: 1,
 				scale: [1.1, 1],
-				duration: 200,
+				duration: this.animation ? 200 : 0,
 				easing: 'easeOutQuad'
 			});
 
@@ -160,7 +165,7 @@ export default Vue.extend({
 
 			setTimeout(() => {
 				this.$emit('opened');
-			}, 300);
+			}, this.animation ? 300 : 0);
 		},
 
 		close() {
@@ -174,7 +179,7 @@ export default Vue.extend({
 				anime({
 					targets: bg,
 					opacity: 0,
-					duration: 300,
+					duration: this.animation ? 300 : 0,
 					easing: 'linear'
 				});
 			}
@@ -185,14 +190,14 @@ export default Vue.extend({
 				targets: main,
 				opacity: 0,
 				scale: 0.8,
-				duration: 300,
+				duration: this.animation ? 300 : 0,
 				easing: [0.5, -0.5, 1, 0.5]
 			});
 
 			setTimeout(() => {
 				this.$emit('closed');
 				this.destroyDom();
-			}, 300);
+			}, this.animation ? 300 : 0);
 		},
 
 		popout() {
-- 
cgit v1.2.3-freya


From 87b6ef0ec52b684b60a4d99d1fe9b4a82db6bc52 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 14:53:17 +0900
Subject: Improve keyboard shortcut

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index bffa6affc9..a2ba85bdf9 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -115,6 +115,7 @@ export default Vue.extend({
 			return {
 				'r|left': () => this.reply(true),
 				'a|plus': () => this.react(true),
+				'ctrl+q|ctrl+right': this.renoteDirectly,
 				'q|right': () => this.renote(true),
 				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
@@ -254,6 +255,12 @@ export default Vue.extend({
 			}).$once('closed', this.focus);
 		},
 
+		renoteDirectly() {
+			(this as any).api('notes/create', {
+				renoteId: this.p.id
+			});
+		},
+
 		react(viaKeyboard = false) {
 			this.blur();
 			(this as any).os.new(MkReactionPicker, {
-- 
cgit v1.2.3-freya


From 3b628ec3c464951a47896dca550ae1da66c05ec5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 15:02:15 +0900
Subject: 将来的にバグに繋がりかねない挙動を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/hotkey.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/hotkey.ts b/src/client/app/common/hotkey.ts
index 03806fb184..e63fcc9f97 100644
--- a/src/client/app/common/hotkey.ts
+++ b/src/client/app/common/hotkey.ts
@@ -22,7 +22,10 @@ const getKeyMap = keymap => Object.entries(keymap).map(([patterns, callback]): a
 
 	result.patterns = patterns.split('|').map(part => {
 		const pattern = {
-			which: []
+			which: [],
+			ctrl: false,
+			alt: false,
+			shift: false
 		} as pattern;
 
 		part.trim().split('+').forEach(key => {
@@ -66,10 +69,10 @@ export default {
 						if (el._hotkey_global && targetReservedKeys.includes(`'${key}'`)) break;
 
 						const matched = action.patterns.some(pattern => {
-							let matched = pattern.which.includes(key);
-							if (pattern.ctrl && !e.ctrlKey) matched = false;
-							if (pattern.shift && !e.shiftKey) matched = false;
-							if (pattern.alt && !e.altKey) matched = false;
+							const matched = pattern.which.includes(key) &&
+								pattern.ctrl == e.ctrlKey &&
+								pattern.shift == e.shiftKey &&
+								pattern.alt == e.altKey;
 
 							if (matched) {
 								e.preventDefault();
-- 
cgit v1.2.3-freya


From 6ead1de383764bf4c7cbd3b2e453ed8bde6da0d3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 15:02:26 +0900
Subject: Improve readability

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index a2ba85bdf9..e2c61dabe8 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -115,8 +115,8 @@ export default Vue.extend({
 			return {
 				'r|left': () => this.reply(true),
 				'a|plus': () => this.react(true),
-				'ctrl+q|ctrl+right': this.renoteDirectly,
 				'q|right': () => this.renote(true),
+				'ctrl+q|ctrl+right': this.renoteDirectly,
 				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
 				'1': () => this.reactDirectly('like'),
-- 
cgit v1.2.3-freya


From 8bf4e5533851886057687b46a41f1cd88e4cd810 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 18 Sep 2018 16:45:20 +0900
Subject: Improve keyboard shortcuts

---
 src/client/app/common/views/components/menu.vue            |  4 ++--
 src/client/app/common/views/components/reaction-picker.vue |  4 ++--
 src/client/app/desktop/views/components/notes.note.vue     | 10 ++++++----
 3 files changed, 10 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index fba7e235e0..ad5ec619ba 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -2,9 +2,9 @@
 <div class="onchrpzrvnoruiaenfcqvccjfuupzzwv">
 	<div class="backdrop" ref="backdrop" @click="close"></div>
 	<div class="popover" :class="{ hukidasi }" ref="popover">
-		<template v-for="item in items">
+		<template v-for="item, i in items">
 			<div v-if="item === null"></div>
-			<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text"></button>
+			<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text" :tabindex="i"></button>
 		</template>
 	</div>
 </div>
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index fff2c56f00..f732e40b9d 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -97,10 +97,10 @@ export default Vue.extend({
 
 	watch: {
 		focus(i) {
-			this.$refs.buttons.childNodes[i].focus();
+			this.$refs.buttons.children[i].focus();
 
 			if (this.showFocus) {
-				this.title = this.$refs.buttons.childNodes[i].title;
+				this.title = this.$refs.buttons.children[i].title;
 			}
 		}
 	},
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index e2c61dabe8..d1178a933a 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -51,7 +51,7 @@
 				<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react()" ref="reactButton" title="%i18n:@add-reaction%">
 					%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
 				</button>
-				<button @click="menu" ref="menuButton">
+				<button @click="menu()" ref="menuButton">
 					%fa:ellipsis-h%
 				</button>
 				<!-- <button title="%i18n:@detail">
@@ -114,11 +114,12 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'r|left': () => this.reply(true),
-				'a|plus': () => this.react(true),
+				'e|a|plus': () => this.react(true),
 				'q|right': () => this.renote(true),
 				'ctrl+q|ctrl+right': this.renoteDirectly,
 				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
+				'm|o': () => this.menu(true),
 				'1': () => this.reactDirectly('like'),
 				'2': () => this.reactDirectly('love'),
 				'3': () => this.reactDirectly('laugh'),
@@ -278,10 +279,11 @@ export default Vue.extend({
 			});
 		},
 
-		menu() {
+		menu(viaKeyboard = false) {
 			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
-				note: this.p
+				note: this.p,
+				animation: !viaKeyboard
 			}).$once('closed', this.focus);
 		},
 
-- 
cgit v1.2.3-freya


From 7b9cea06ef94de28216ab9921879cd3c24ccca0f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Sep 2018 02:26:06 +0900
Subject: Fix

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index 6b6bf3a24a..466d5e1fd8 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
 	props: {
 		reply: {
 			type: Object,
-			required: true
+			required: false
 		},
 
 		animation: {
-- 
cgit v1.2.3-freya


From b0d60ef2c2a4f7a3cc25730a19791aed8fcc1a35 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Sep 2018 02:27:19 +0900
Subject: Add new shortcut

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index d1178a933a..1a670a9e7a 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -120,6 +120,7 @@ export default Vue.extend({
 				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
 				'm|o': () => this.menu(true),
+				's': this.toggleShowContent,
 				'1': () => this.reactDirectly('like'),
 				'2': () => this.reactDirectly('love'),
 				'3': () => this.reactDirectly('laugh'),
@@ -287,6 +288,10 @@ export default Vue.extend({
 			}).$once('closed', this.focus);
 		},
 
+		toggleShowContent() {
+			this.showContent = !this.showContent;
+		},
+
 		focus() {
 			this.$el.focus();
 		},
-- 
cgit v1.2.3-freya


From fd770b008e3b4a71c83dba71d588f9a6399a771c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Sep 2018 02:32:44 +0900
Subject: Add new shortcut

---
 .../app/desktop/views/components/ui.header.notifications.vue   | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src/client')

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 59a16df9ec..74dcd4111f 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="notifications">
+<div class="notifications" v-hotkey.global="keymap">
 	<button :data-active="isOpen" @click="toggle" title="%i18n:@title%">
 		%fa:R bell%<template v-if="hasUnreadNotification">%fa:circle%</template>
 	</button>
@@ -19,11 +19,19 @@ export default Vue.extend({
 			isOpen: false
 		};
 	},
+
 	computed: {
 		hasUnreadNotification(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
+		},
+
+		keymap(): any {
+			return {
+				'shift+n': this.toggle
+			};
 		}
 	},
+
 	methods: {
 		toggle() {
 			this.isOpen ? this.close() : this.open();
-- 
cgit v1.2.3-freya


From 3c865d6054b0efdcd32fdde7fd0997dfa85694d5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Sep 2018 02:35:32 +0900
Subject: Add new shortcut

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 1a670a9e7a..fdf41a52c9 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -119,6 +119,7 @@ export default Vue.extend({
 				'ctrl+q|ctrl+right': this.renoteDirectly,
 				'up|k|shift+tab': this.focusBefore,
 				'down|j|tab': this.focusAfter,
+				'esc': this.blur,
 				'm|o': () => this.menu(true),
 				's': this.toggleShowContent,
 				'1': () => this.reactDirectly('like'),
-- 
cgit v1.2.3-freya


From 609d68933e16852dc4779266bce4860d2ef72448 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Sep 2018 02:51:06 +0900
Subject: Add new shortcut

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

(limited to 'src/client')

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 5e26389d89..1e8a45beaf 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="account">
+<div class="account" v-hotkey.global="keymap">
 	<button class="header" :data-active="isOpen" @click="toggle">
 		<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
 		<mk-avatar class="avatar" :user="$store.state.i"/>
@@ -63,6 +63,13 @@ export default Vue.extend({
 			isOpen: false
 		};
 	},
+	computed: {
+		keymap(): any {
+			return {
+				'a|m': this.toggle
+			};
+		}
+	},
 	beforeDestroy() {
 		this.close();
 	},
-- 
cgit v1.2.3-freya


From a9a2f4820bc02620917aa6b1703bc5cfff4c36c9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Sep 2018 08:36:06 +0900
Subject: Add keyboard shortcut doc

---
 src/client/app/app.vue              | 23 ++++++++-
 src/docs/keyboard-shortcut.ja-JP.md | 96 +++++++++++++++++++++++++++++++++++++
 src/docs/style.styl                 | 21 ++++++++
 3 files changed, 139 insertions(+), 1 deletion(-)
 create mode 100644 src/docs/keyboard-shortcut.ja-JP.md

(limited to 'src/client')

diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index 7a46e7dea0..9de01ef060 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -1,3 +1,24 @@
 <template>
-<router-view id="app"></router-view>
+<router-view id="app" v-hotkey.global="keymap"></router-view>
 </template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { url, lang } from './config';
+
+export default Vue.extend({
+	computed: {
+		keymap(): any {
+			return {
+				'h|slash': this.help
+			};
+		}
+	},
+
+	methods: {
+		help() {
+			window.open(`${url}/docs/${lang}/keyboard-shortcut`, '_blank');
+		}
+	}
+});
+</script>
diff --git a/src/docs/keyboard-shortcut.ja-JP.md b/src/docs/keyboard-shortcut.ja-JP.md
new file mode 100644
index 0000000000..59101dc290
--- /dev/null
+++ b/src/docs/keyboard-shortcut.ja-JP.md
@@ -0,0 +1,96 @@
+# Misskeyキーボードショートカットまとめ
+
+## グローバル
+これらのショートカットは基本的にどこでも使えます。
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>新規投稿</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
+		<tr><td><kbd class="key">T</kbd></td><td>タイムラインの最も新しい投稿にフォーカス</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
+		<tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>通知を表示/隠す</td><td><b>N</b>otifications</td></tr>
+		<tr><td><kbd class="key">A</kbd>, <kbd class="key">M</kbd></td><td>アカウントメニューを表示/隠す</td><td><b>A</b>ccount, <b>M</b>y, <b>M</b>e, <b>M</b>enu</td></tr>
+		<tr><td><kbd class="key">Z</kbd></td><td>上部のバーを隠す</td><td><b>Z</b>en</td></tr>
+		<tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>ヘルプを表示</td><td><b>H</b>elp</td></tr>
+	</tbody>
+</table>
+
+## 投稿にフォーカスされた状態
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>上の投稿にフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd>, <kbd class="key">Tab</kbd></td><td>下の投稿にフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">←</kbd>, <kbd class="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</td></tr>
+		<tr><td><kbd class="key">→</kbd>, <kbd class="key">Q</kbd></td><td>Renoteフォームを開く</td><td><b>Q</b>uote</td></tr>
+		<tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">→</kbd></kbd>, <kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>即刻Renoteする(フォームを開かずに)</td><td>-</td></tr>
+		<tr><td><kbd class="key">E</kbd>, <kbd class="key">A</kbd>, <kbd class="key">+</kbd></td><td>リアクションフォームを開く</td><td><b>E</b>mote, re<b>A</b>ction</td></tr>
+		<tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションをする(対応については後述)</td><td>-</td></tr>
+		<tr><td><kbd class="key">M</kbd>, <kbd class="key">O</kbd></td><td>投稿に対するメニューを開く</td><td><b>M</b>ore, <b>O</b>ther</td></tr>
+		<tr><td><kbd class="key">S</kbd></td><td>CWで隠された部分を表示 or 隠す</td><td><b>S</b>how, <b>S</b>ee</td></tr>
+		<tr><td><kbd class="key">Esc</kbd></td><td>フォーカスを外す</td><td>-</td></tr>
+	</tbody>
+</table>
+
+## Renoteフォーム
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">Enter</kbd></td><td>Renoteする</td><td>-</td></tr>
+		<tr><td><kbd class="key">Q</kbd></td><td>フォームを展開する</td><td><b>Q</b>uote</td></tr>
+		<tr><td><kbd class="key">Esc</kbd></td><td>フォームを閉じる</td><td>-</td></tr>
+	</tbody>
+</table>
+
+## リアクションフォーム
+デフォルトで「👍」にフォーカスが当たっている状態です。
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd></td><td>上のリアクションにフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd></td><td>下のリアクションにフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">←</kbd>, <kbd class="key">H</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>左のリアクションにフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">→</kbd>, <kbd class="key">L</kbd>, <kbd class="key">Tab</kbd></td><td>右のリアクションにフォーカスを移動</td><td>-</td></tr>
+		<tr><td><kbd class="key">Enter</kbd>, <kbd class="key">Space</kbd>, <kbd class="key">+</kbd></td><td>リアクション確定</td><td>-</td></tr>
+		<tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションで確定(対応については後述)</td><td>-</td></tr>
+		<tr><td><kbd class="key">Esc</kbd></td><td>リアクションするのをやめる</td><td>-</td></tr>
+	</tbody>
+</table>
+
+## リアクションと数字キーの対応
+<table>
+	<thead>
+		<tr><th>数字キー</th><th>リアクション</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">1</kbd></td><td>👍</td></tr>
+		<tr><td><kbd class="key">2</kbd></td><td>❤️</td></tr>
+		<tr><td><kbd class="key">3</kbd></td><td>😆</td></tr>
+		<tr><td><kbd class="key">4</kbd></td><td>🤔</td></tr>
+		<tr><td><kbd class="key">5</kbd></td><td>😮</td></tr>
+		<tr><td><kbd class="key">6</kbd></td><td>🎉</td></tr>
+		<tr><td><kbd class="key">7</kbd></td><td>💢</td></tr>
+		<tr><td><kbd class="key">8</kbd></td><td>😥</td></tr>
+		<tr><td><kbd class="key">9</kbd></td><td>😇</td></tr>
+		<tr><td><kbd class="key">0</kbd></td><td>🍮 or 🍣</td></tr>
+	</tbody>
+</table>
+
+# 例
+<table>
+	<thead>
+		<tr><th>ショートカット</th><th>動作</th></tr>
+	</thead>
+	<tbody>
+		<tr><td><kbd class="key">t</kbd><kbd class="key">+</kbd><kbd class="key">+</kbd></td><td>タイムラインの最新の投稿に👍する</td></tr>
+		<tr><td><kbd class="key">t</kbd><kbd class="key">1</kbd></td><td>タイムラインの最新の投稿に👍する</td></tr>
+		<tr><td><kbd class="key">t</kbd><kbd class="key">0</kbd></td><td>タイムラインの最新の投稿に🍮する</td></tr>
+	</tbody>
+</table>
diff --git a/src/docs/style.styl b/src/docs/style.styl
index b01fe493ac..70d77b5499 100644
--- a/src/docs/style.styl
+++ b/src/docs/style.styl
@@ -128,3 +128,24 @@ pre
 	> code
 		display block
 		padding 16px
+
+kbd.group
+	display inline-block
+	padding 4px
+	background #fbfbfb
+	border 1px solid #d6d6d6
+	border-radius 4px
+	box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)
+
+kbd.key
+	display inline-block
+	padding 6px 8px
+	background #fff
+	border solid 1px #cecece
+	border-radius 4px
+	box-shadow 0 1px 1px rgba(0, 0, 0, 0.1)
+
+td
+	> kbd.group,
+	> kbd.key
+		margin 4px
-- 
cgit v1.2.3-freya


From d9f0e158a35eec183da77e84a3b038fab645bf62 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Sep 2018 14:18:34 +0900
Subject: Implement #2736

---
 src/client/app/common/scripts/streaming/home.ts    | 24 +++++++++
 .../app/desktop/views/components/notes.note.vue    |  8 ++-
 .../app/desktop/views/components/timeline.vue      | 11 +++-
 .../app/desktop/views/pages/deck/deck.note.vue     |  8 ++-
 src/client/app/mobile/views/components/note.vue    |  8 ++-
 .../app/mobile/views/components/ui.header.vue      |  3 --
 src/client/app/mobile/views/pages/drive.vue        |  6 +--
 src/client/app/mobile/views/pages/favorites.vue    |  2 +-
 .../app/mobile/views/pages/games/reversi.vue       |  2 +-
 src/client/app/mobile/views/pages/home.vue         | 27 ++++++++--
 .../app/mobile/views/pages/messaging-room.vue      |  2 +-
 src/client/app/mobile/views/pages/messaging.vue    |  2 +-
 src/client/app/mobile/views/pages/note.vue         |  2 +-
 .../app/mobile/views/pages/notifications.vue       |  2 +-
 src/client/app/mobile/views/pages/settings.vue     |  2 +-
 src/client/app/mobile/views/pages/tag.vue          |  2 +-
 src/client/app/mobile/views/pages/widgets.vue      |  2 +-
 src/models/note-unread.ts                          | 17 ++++++
 src/models/note.ts                                 |  4 +-
 src/models/user.ts                                 |  8 ++-
 src/server/api/endpoints/i.ts                      |  1 +
 src/server/api/stream/home.ts                      |  4 ++
 src/services/note/create.ts                        | 22 ++++----
 src/services/note/read.ts                          | 62 ++++++++++++++++++++++
 src/services/note/unread.ts                        | 47 ++++++++++++++++
 25 files changed, 239 insertions(+), 39 deletions(-)
 create mode 100644 src/models/note-unread.ts
 create mode 100644 src/services/note/read.ts
 create mode 100644 src/services/note/unread.ts

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
index dd18c70d70..26729507fb 100644
--- a/src/client/app/common/scripts/streaming/home.ts
+++ b/src/client/app/common/scripts/streaming/home.ts
@@ -50,6 +50,30 @@ export class HomeStream extends Stream {
 			});
 		});
 
+		this.on('unreadMention', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadMentions: true
+			});
+		});
+
+		this.on('readAllUnreadMentions', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadMentions: false
+			});
+		});
+
+		this.on('unreadSpecifiedNote', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadSpecifiedNotes: true
+			});
+		});
+
+		this.on('readAllUnreadSpecifiedNotes', () => {
+			os.store.dispatch('mergeMe', {
+				hasUnreadSpecifiedNotes: false
+			});
+		});
+
 		this.on('clientSettingUpdated', x => {
 			os.store.commit('settings/set', {
 				key: x.key,
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index fdf41a52c9..ac2c1ce97f 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -213,10 +213,14 @@ export default Vue.extend({
 	methods: {
 		capture(withHandler = false) {
 			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
+				const data = {
 					type: 'capture',
 					id: this.p.id
-				});
+				} as any;
+				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
+					data.read = true;
+				}
+				this.connection.send(data);
 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 9f421a68ed..7d683236bb 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -8,8 +8,8 @@
 		<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl">%fa:hashtag% {{ tagTl.title }}</span>
 		<span :data-active="src == 'list'" @click="src = 'list'" v-if="list">%fa:list% {{ list.title }}</span>
 		<div class="buttons">
-			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%</button>
-			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%</button>
+			<button :data-active="src == 'mentions'" @click="src = 'mentions'" title="%i18n:@mentions%">%fa:at%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></button>
+			<button :data-active="src == 'messages'" @click="src = 'messages'" title="%i18n:@messages%">%fa:envelope R%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></button>
 			<button @click="chooseTag" title="%i18n:@hashtag%" ref="tagButton">%fa:hashtag%</button>
 			<button @click="chooseList" title="%i18n:@list%" ref="listButton">%fa:list%</button>
 		</div>
@@ -202,6 +202,13 @@ root(isDark)
 				line-height 42px
 				color isDark ? #9baec8 : #ccc
 
+				> .badge
+					position absolute
+					top -4px
+					right 4px
+					font-size 10px
+					color $theme-color
+
 				&:hover
 					color isDark ? #b2c1d5 : #aaa
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 980fb03136..99274b0f41 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -147,10 +147,14 @@ export default Vue.extend({
 	methods: {
 		capture(withHandler = false) {
 			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
+				const data = {
 					type: 'capture',
 					id: this.p.id
-				});
+				} as any;
+				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
+					data.read = true;
+				}
+				this.connection.send(data);
 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 8787b39a93..0ce72cab11 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -160,10 +160,14 @@ export default Vue.extend({
 	methods: {
 		capture(withHandler = false) {
 			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
+				const data = {
 					type: 'capture',
 					id: this.p.id
-				});
+				} as any;
+				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
+					data.read = true;
+				}
+				this.connection.send(data);
 				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
 			}
 		},
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index c9b3ab51ae..15c8299c2e 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -188,9 +188,6 @@ root(isDark)
 				overflow hidden
 				text-overflow ellipsis
 
-				[data-fa], [data-icon]
-					margin-right 4px
-
 				> img
 					display inline-block
 					vertical-align bottom
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index 27ac956043..c0fc7b48dc 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -1,9 +1,9 @@
 <template>
 <mk-ui>
 	<span slot="header">
-		<template v-if="folder">%fa:R folder-open%{{ folder.name }}</template>
-		<template v-if="file"><mk-file-type-icon data-icon :type="file.type"/>{{ file.name }}</template>
-		<template v-if="!folder && !file">%fa:cloud%%i18n:@drive%</template>
+		<template v-if="folder"><span style="margin-right:4px;">%fa:R folder-open%</span>{{ folder.name }}</template>
+		<template v-if="file"><mk-file-type-icon data-icon :type="file.type" style="margin-right:4px;"/>{{ file.name }}</template>
+		<template v-if="!folder && !file"><span style="margin-right:4px;">%fa:cloud%</span>%i18n:@drive%</template>
 	</span>
 	<template slot="func"><button @click="fn">%fa:ellipsis-h%</button></template>
 	<mk-drive
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 6b9aec6a0c..53512e804c 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:star%%i18n:@title%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:star%</span>%i18n:@title%</span>
 
 	<main>
 		<template v-for="favorite in favorites">
diff --git a/src/client/app/mobile/views/pages/games/reversi.vue b/src/client/app/mobile/views/pages/games/reversi.vue
index bdadc88a43..f3bba586de 100644
--- a/src/client/app/mobile/views/pages/games/reversi.vue
+++ b/src/client/app/mobile/views/pages/games/reversi.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:gamepad%%i18n:@reversi%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:gamepad%</span>%i18n:@reversi%</span>
 	<mk-reversi :game-id="$route.params.game" @nav="nav" :self-nav="false"/>
 </mk-ui>
 </template>
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 43afc98b45..ca62d4e2f8 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header" @click="showNav = true">
-		<span>
+		<span :class="$style.title">
 			<span v-if="src == 'home'">%fa:home%%i18n:@home%</span>
 			<span v-if="src == 'local'">%fa:R comments%%i18n:@local%</span>
 			<span v-if="src == 'hybrid'">%fa:share-alt%%i18n:@hybrid%</span>
@@ -15,6 +15,7 @@
 			<template v-if="!showNav">%fa:angle-down%</template>
 			<template v-else>%fa:angle-up%</template>
 		</span>
+		<i :class="$style.badge" v-if="$store.state.i.hasUnreadMentions || $store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i>
 	</span>
 
 	<template slot="func">
@@ -32,8 +33,8 @@
 					<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline">%fa:share-alt% %i18n:@hybrid%</span>
 					<span :data-active="src == 'global'" @click="src = 'global'">%fa:globe% %i18n:@global%</span>
 					<div class="hr"></div>
-					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%</span>
-					<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%</span>
+					<span :data-active="src == 'mentions'" @click="src = 'mentions'">%fa:at% %i18n:@mentions%<i class="badge" v-if="$store.state.i.hasUnreadMentions">%fa:circle%</i></span>
+					<span :data-active="src == 'messages'" @click="src = 'messages'">%fa:envelope R% %i18n:@messages%<i class="badge" v-if="$store.state.i.hasUnreadSpecifiedNotes">%fa:circle%</i></span>
 					<template v-if="lists">
 						<div class="hr" v-if="lists.length > 0"></div>
 						<span v-for="l in lists" :data-active="src == 'list' && list == l" @click="src = 'list'; list = l" :key="l.id">%fa:list% {{ l.title }}</span>
@@ -220,6 +221,11 @@ root(isDark)
 					&:not([data-active]):hover
 						background isDark ? #353e4a : #eee
 
+					> .badge
+						margin-left 6px
+						font-size 10px
+						color $theme-color
+
 	> .tl
 		max-width 680px
 		margin 0 auto
@@ -238,3 +244,18 @@ main:not([data-darkmode])
 	root(false)
 
 </style>
+
+<style lang="stylus" module>
+@import '~const.styl'
+
+.title
+	i
+		margin-right 4px
+
+.badge
+	margin-left 6px
+	font-size 10px
+	color $theme-color
+	vertical-align middle
+
+</style>
diff --git a/src/client/app/mobile/views/pages/messaging-room.vue b/src/client/app/mobile/views/pages/messaging-room.vue
index 401397d856..750ba26294 100644
--- a/src/client/app/mobile/views/pages/messaging-room.vue
+++ b/src/client/app/mobile/views/pages/messaging-room.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header">
-		<template v-if="user">%fa:R comments%{{ user | userName }}</template>
+		<template v-if="user"><span style="margin-right:4px;">%fa:R comments%</span>{{ user | userName }}</template>
 		<template v-else><mk-ellipsis/></template>
 	</span>
 	<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
diff --git a/src/client/app/mobile/views/pages/messaging.vue b/src/client/app/mobile/views/pages/messaging.vue
index 3883505281..98ae79fe6c 100644
--- a/src/client/app/mobile/views/pages/messaging.vue
+++ b/src/client/app/mobile/views/pages/messaging.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:R comments%%i18n:@messaging%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:R comments%</span>%i18n:@messaging%</span>
 	<mk-messaging @navigate="navigate" :header-top="48"/>
 </mk-ui>
 </template>
diff --git a/src/client/app/mobile/views/pages/note.vue b/src/client/app/mobile/views/pages/note.vue
index fee60b350e..d7307c79a8 100644
--- a/src/client/app/mobile/views/pages/note.vue
+++ b/src/client/app/mobile/views/pages/note.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:R sticky-note%%i18n:@title%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:R sticky-note%</span>%i18n:@title%</span>
 	<main v-if="!fetching">
 		<div>
 			<mk-note-detail :note="note"/>
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index 4d3c8ee534..bddcd457bb 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:R bell%%i18n:@notifications%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:R bell%</span>%i18n:@notifications%</span>
 	<template slot="func"><button @click="fn">%fa:check%</button></template>
 
 	<main>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index f315c058df..9e90416370 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:cog%%i18n:@settings%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span>
 	<main :data-darkmode="$store.state.device.darkmode">
 		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
 
diff --git a/src/client/app/mobile/views/pages/tag.vue b/src/client/app/mobile/views/pages/tag.vue
index a545e2b839..3f963501e0 100644
--- a/src/client/app/mobile/views/pages/tag.vue
+++ b/src/client/app/mobile/views/pages/tag.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:hashtag%{{ $route.params.tag }}</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:hashtag%</span>{{ $route.params.tag }}</span>
 
 	<main>
 		<p v-if="!fetching && empty">%fa:search% {{ '%i18n:no-posts-found%'.split('{}')[0] }}{{ q }}{{ '%i18n:no-posts-found%'.split('{}')[1] }}</p>
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index a83103632e..c649529c0e 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<span slot="header">%fa:home%%i18n:@dashboard%</span>
+	<span slot="header"><span style="margin-right:4px;">%fa:home%</span>%i18n:@dashboard%</span>
 	<template slot="func">
 		<button @click="customizing = !customizing">%fa:cog%</button>
 	</template>
diff --git a/src/models/note-unread.ts b/src/models/note-unread.ts
new file mode 100644
index 0000000000..62408d23b6
--- /dev/null
+++ b/src/models/note-unread.ts
@@ -0,0 +1,17 @@
+import * as mongo from 'mongodb';
+import db from '../db/mongodb';
+
+const NoteUnread = db.get<INoteUnread>('noteUnreads');
+NoteUnread.createIndex(['userId', 'noteId'], { unique: true });
+export default NoteUnread;
+
+export interface INoteUnread {
+	_id: mongo.ObjectID;
+	noteId: mongo.ObjectID;
+	userId: mongo.ObjectID;
+	isSpecified: boolean;
+
+	_note: {
+		userId: mongo.ObjectID;
+	};
+}
diff --git a/src/models/note.ts b/src/models/note.ts
index ce307d061a..ba88e9f481 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -295,8 +295,8 @@ export const pack = async (
 
 	delete _note._user;
 	delete _note._reply;
-	delete _note.repost;
-	delete _note.mentions;
+	delete _note._renote;
+	delete _note._files;
 	if (_note.geo) delete _note.geo.type;
 
 	// Populate user
diff --git a/src/models/user.ts b/src/models/user.ts
index b595fa8d71..bacae485a8 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -348,7 +348,8 @@ export const pack = (
 	me?: string | mongo.ObjectID | IUser,
 	options?: {
 		detail?: boolean,
-		includeSecrets?: boolean
+		includeSecrets?: boolean,
+		includeHasUnreadNotes?: boolean
 	}
 ) => new Promise<any>(async (resolve, reject) => {
 
@@ -510,6 +511,11 @@ export const pack = (
 		}
 	}
 
+	if (!opts.includeHasUnreadNotes) {
+		delete _user.hasUnreadSpecifiedNotes;
+		delete _user.hasUnreadMentions;
+	}
+
 	// resolve promises in _user object
 	_user = await rap(_user);
 
diff --git a/src/server/api/endpoints/i.ts b/src/server/api/endpoints/i.ts
index 1f99ef2d8d..5aa2070650 100644
--- a/src/server/api/endpoints/i.ts
+++ b/src/server/api/endpoints/i.ts
@@ -22,6 +22,7 @@ export default (params: any, user: ILocalUser, app: IApp) => new Promise(async (
 	// Serialize
 	res(await pack(user, user, {
 		detail: true,
+		includeHasUnreadNotes: true,
 		includeSecrets: isSecure
 	}));
 
diff --git a/src/server/api/stream/home.ts b/src/server/api/stream/home.ts
index f1fced42d7..5575d0d523 100644
--- a/src/server/api/stream/home.ts
+++ b/src/server/api/stream/home.ts
@@ -9,6 +9,7 @@ import readNotification from '../common/read-notification';
 import call from '../call';
 import { IApp } from '../../../models/app';
 import shouldMuteThisNote from '../../../misc/should-mute-this-note';
+import readNote from '../../../services/note/read';
 
 const log = debug('misskey');
 
@@ -94,6 +95,9 @@ export default async function(
 				if (!msg.id) return;
 				log(`CAPTURE: ${msg.id} by @${user.username}`);
 				subscriber.on(`note-stream:${msg.id}`, onNoteStream);
+				if (msg.read) {
+					readNote(user._id, msg.id);
+				}
 				break;
 
 			case 'decapture':
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 7c1e71dcb3..b62b8c43ba 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -25,6 +25,7 @@ import { TextElementMention } from '../../mfm/parse/elements/mention';
 import { TextElementHashtag } from '../../mfm/parse/elements/hashtag';
 import { updateNoteStats } from '../update-chart';
 import { erase, unique } from '../../prelude/array';
+import insertNoteUnread from './unread';
 
 type NotificationType = 'reply' | 'renote' | 'quote' | 'mention';
 
@@ -170,6 +171,17 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 	// Increment notes count (user)
 	incNotesCountOfUser(user);
 
+	// 未読通知を作成
+	if (data.visibility == 'specified') {
+		data.visibleUsers.forEach(u => {
+			insertNoteUnread(u, note, true);
+		});
+	} else {
+		mentionedUsers.forEach(u => {
+			insertNoteUnread(u, note, false);
+		});
+	}
+
 	if (data.reply) {
 		saveReply(data.reply, note);
 	}
@@ -314,16 +326,6 @@ async function publish(user: IUser, note: INote, noteObj: any, reply: INote, ren
 		publishGlobalTimelineStream(noteObj);
 	}
 
-	if (note.visibility == 'specified') {
-		visibleUsers.forEach(async (u) => {
-			const n = await pack(note, u, {
-				detail: true
-			});
-			publishUserStream(u._id, 'note', n);
-			publishHybridTimelineStream(u._id, n);
-		});
-	}
-
 	if (['public', 'home', 'followers'].includes(note.visibility)) {
 		// フォロワーに配信
 		publishToFollowers(note, user, noteActivity);
diff --git a/src/services/note/read.ts b/src/services/note/read.ts
new file mode 100644
index 0000000000..46918bc38c
--- /dev/null
+++ b/src/services/note/read.ts
@@ -0,0 +1,62 @@
+import * as mongo from 'mongodb';
+import { publishUserStream } from '../../stream';
+import User from '../../models/user';
+import NoteUnread from '../../models/note-unread';
+
+/**
+ * Mark a note as read
+ */
+export default (
+	user: string | mongo.ObjectID,
+	note: string | mongo.ObjectID
+) => new Promise<any>(async (resolve, reject) => {
+
+	const userId: mongo.ObjectID = mongo.ObjectID.prototype.isPrototypeOf(user)
+		? user as mongo.ObjectID
+		: new mongo.ObjectID(user);
+
+	const noteId: mongo.ObjectID = mongo.ObjectID.prototype.isPrototypeOf(note)
+		? note as mongo.ObjectID
+		: new mongo.ObjectID(note);
+
+	// Remove document
+	await NoteUnread.remove({
+		userId: userId,
+		noteId: noteId
+	});
+
+	const count1 = await NoteUnread
+		.count({
+			userId: userId,
+			isSpecified: false
+		}, {
+			limit: 1
+		});
+
+	const count2 = await NoteUnread
+		.count({
+			userId: userId,
+			isSpecified: true
+		}, {
+			limit: 1
+		});
+
+	if (count1 == 0 || count2 == 0) {
+		User.update({ _id: userId }, {
+			$set: {
+				hasUnreadMentions: count1 != 0 || count2 != 0,
+				hasUnreadSpecifiedNotes: count2 != 0
+			}
+		});
+	}
+
+	if (count1 == 0) {
+		// 全て既読になったイベントを発行
+		publishUserStream(userId, 'readAllUnreadMentions');
+	}
+
+	if (count2 == 0) {
+		// 全て既読になったイベントを発行
+		publishUserStream(userId, 'readAllUnreadSpecifiedNotes');
+	}
+});
diff --git a/src/services/note/unread.ts b/src/services/note/unread.ts
new file mode 100644
index 0000000000..6e10c8b248
--- /dev/null
+++ b/src/services/note/unread.ts
@@ -0,0 +1,47 @@
+import NoteUnread from '../../models/note-unread';
+import User, { IUser } from '../../models/user';
+import { INote } from '../../models/note';
+import Mute from '../../models/mute';
+import { publishUserStream } from '../../stream';
+
+export default async function(user: IUser, note: INote, isSpecified = false) {
+	const unread = await NoteUnread.insert({
+		noteId: note._id,
+		userId: user._id,
+		isSpecified,
+		_note: {
+			userId: note.userId
+		}
+	});
+
+	// 3秒経っても既読にならなかったら「未読の投稿がありますよ」イベントを発行する
+	setTimeout(async () => {
+		const exist = await NoteUnread.findOne({ _id: unread._id });
+		if (exist == null) return;
+
+		//#region ただしミュートされているなら発行しない
+		const mute = await Mute.find({
+			muterId: user._id
+		});
+		const mutedUserIds = mute.map(m => m.muteeId.toString());
+		if (mutedUserIds.includes(note.userId.toString())) return;
+		//#endregion
+
+		User.update({
+			_id: user._id
+		}, {
+			$set: isSpecified ? {
+				hasUnreadSpecifiedNotes: true,
+				hasUnreadMentions: true
+			} : {
+				hasUnreadMentions: true
+			}
+		});
+
+		publishUserStream(user._id, 'unreadMention', note._id);
+
+		if (isSpecified) {
+			publishUserStream(user._id, 'unreadSpecifiedNote', note._id);
+		}
+	}, 3000);
+}
-- 
cgit v1.2.3-freya


From faf29b768f0d774401b234a40eb227bf33cbe034 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 19 Sep 2018 17:29:03 +0900
Subject: Make admin can delete any note

---
 src/client/app/common/views/components/note-menu.vue | 5 +++++
 src/server/api/endpoints/notes/delete.ts             | 7 +++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index c9912fb1e2..08fae46dd6 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -33,12 +33,16 @@ export default Vue.extend({
 					text: '%i18n:@pin%',
 					action: this.pin
 				});
+			}
+
+			if (this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin) {
 				items.push({
 					icon: '%fa:trash-alt R%',
 					text: '%i18n:@delete%',
 					action: this.del
 				});
 			}
+
 			if (this.note.uri) {
 				items.push({
 					icon: '%fa:external-link-square-alt%',
@@ -48,6 +52,7 @@ export default Vue.extend({
 					}
 				});
 			}
+
 			return items;
 		}
 	},
diff --git a/src/server/api/endpoints/notes/delete.ts b/src/server/api/endpoints/notes/delete.ts
index 6d9826cf7b..741a8a1dc0 100644
--- a/src/server/api/endpoints/notes/delete.ts
+++ b/src/server/api/endpoints/notes/delete.ts
@@ -21,14 +21,17 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 
 	// Fetch note
 	const note = await Note.findOne({
-		_id: noteId,
-		userId: user._id
+		_id: noteId
 	});
 
 	if (note === null) {
 		return rej('note not found');
 	}
 
+	if (!user.isAdmin && !note.userId.equals(user._id)) {
+		return rej('access denied');
+	}
+
 	await deleteNote(user, note);
 
 	res();
-- 
cgit v1.2.3-freya


From 6341807d02f17f420435194801476fa2cbb069c9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 20 Sep 2018 16:16:01 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 79c9a9a517..db1e404352 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -38,7 +38,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="main">
+	<div class="main" :class="{ withBg: $store.state.i.wallpaperUrl != null }">
 		<template v-if="customize">
 			<x-draggable v-for="place in ['left', 'right']"
 				:list="widgets[place]"
@@ -340,7 +340,10 @@ root(isDark)
 		display flex
 		justify-content center
 		margin 0 auto
-		max-width 1220px
+		max-width 1230px
+
+		&.withBg
+			background rgba(isDark ? #000 : #fff, 0.5)
 
 		> *
 			.customize-container
-- 
cgit v1.2.3-freya


From 77a0450b5d84d83d39b45485d9fe60103e30808e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 20 Sep 2018 16:21:51 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index db1e404352..4f4f894065 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -340,7 +340,7 @@ root(isDark)
 		display flex
 		justify-content center
 		margin 0 auto
-		max-width 1230px
+		max-width 1240px
 
 		&.withBg
 			background rgba(isDark ? #000 : #fff, 0.5)
@@ -358,7 +358,7 @@ root(isDark)
 
 		> .main
 			padding 16px
-			width calc(100% - 275px * 2)
+			width calc(100% - 280px * 2)
 			order 2
 
 			> .form
@@ -374,7 +374,7 @@ root(isDark)
 					border-radius 0
 
 		> *:not(.main)
-			width 275px
+			width 280px
 			padding 16px 0 16px 0
 
 			> *:not(:last-child)
-- 
cgit v1.2.3-freya


From d058ecc4ea0bb2b242ba5cc525dc9442964b5939 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 20 Sep 2018 17:21:16 +0900
Subject: Resolve #2698

---
 .../desktop/views/pages/admin/admin.dashboard.vue  | 14 +++++++++++-
 src/client/app/desktop/views/pages/welcome.vue     | 24 ++++++++++++++++++++
 src/client/app/mobile/views/pages/welcome.vue      | 26 +++++++++++++++++++++-
 src/models/meta.ts                                 |  1 +
 src/server/api/endpoints/admin/update-meta.ts      | 10 +++++++++
 src/server/api/endpoints/meta.ts                   |  3 ++-
 6 files changed, 75 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
index c86c30db17..5d0f6d451e 100644
--- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
@@ -14,6 +14,14 @@
 	</div>
 
 	<div class="form">
+		<div>
+			<label>
+				<p>%i18n:@banner-url%</p>
+				<input v-model="bannerUrl">
+			</label>
+			<button class="ui" @click="updateMeta">%i18n:@save%</button>
+		</div>
+
 		<div>
 			<label>
 				<input type="checkbox" v-model="disableRegistration" @change="updateMeta">
@@ -46,6 +54,7 @@ export default Vue.extend({
 			stats: null,
 			disableRegistration: false,
 			disableLocalTimeline: false,
+			bannerUrl: null,
 			inviteCode: null,
 			connection: null,
 			connectionId: null
@@ -58,6 +67,7 @@ export default Vue.extend({
 		(this as any).os.getMeta().then(meta => {
 			this.disableRegistration = meta.disableRegistration;
 			this.disableLocalTimeline = meta.disableLocalTimeline;
+			this.bannerUrl = meta.bannerUrl;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -76,7 +86,8 @@ export default Vue.extend({
 		updateMeta() {
 			(this as any).api('admin/update-meta', {
 				disableRegistration: this.disableRegistration,
-				disableLocalTimeline: this.disableLocalTimeline
+				disableLocalTimeline: this.disableLocalTimeline,
+				bannerUrl: this.bannerUrl
 			});
 		}
 	}
@@ -114,6 +125,7 @@ export default Vue.extend({
 
 	> .form
 		> div
+			padding 16px
 			border-bottom solid 1px #eee
 
 </style>
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index ea1734f8c7..913fa6b21b 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -1,5 +1,7 @@
 <template>
 <div class="mk-welcome">
+	<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
+
 	<button @click="dark">
 		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
 		<template v-else>%fa:R moon%</template>
@@ -154,6 +156,7 @@ export default Vue.extend({
 		return {
 			meta: null,
 			stats: null,
+			banner: null,
 			copyright,
 			host,
 			name: 'Misskey',
@@ -169,6 +172,7 @@ export default Vue.extend({
 			this.name = meta.name;
 			this.description = meta.description;
 			this.announcements = meta.broadcasts;
+			this.banner = meta.bannerUrl;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -308,6 +312,26 @@ root(isDark)
 	//background-position center
 	//background-size cover
 
+	> .banner
+		position absolute
+		top 0
+		left 0
+		width 100%
+		height 400px
+		background-position center
+		background-size cover
+		opacity 0.7
+
+		&:after
+			content ""
+			display block
+			position absolute
+			bottom 0
+			left 0
+			width 100%
+			height 100px
+			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+
 	> .forkit
 		position absolute
 		top 0
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 74f43f2c71..65a7af93a9 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -1,5 +1,7 @@
 <template>
 <div class="wgwfgvvimdjvhjfwxropcwksnzftjqes">
+	<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
+
 	<div>
 		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
 		<p class="host">{{ host }}</p>
@@ -80,6 +82,7 @@ export default Vue.extend({
 			meta: null,
 			copyright,
 			stats: null,
+			banner: null,
 			host,
 			name: 'Misskey',
 			description: '',
@@ -93,6 +96,7 @@ export default Vue.extend({
 			this.name = meta.name;
 			this.description = meta.description;
 			this.announcements = meta.broadcasts;
+			this.banner = meta.bannerUrl;
 		});
 
 		(this as any).api('stats').then(stats => {
@@ -121,7 +125,27 @@ root(isDark)
 	text-align center
 	//background #fff
 
-	> div
+	> .banner
+		position absolute
+		top 0
+		left 0
+		width 100%
+		height 300px
+		background-position center
+		background-size cover
+		opacity 0.7
+
+		&:after
+			content ""
+			display block
+			position absolute
+			bottom 0
+			left 0
+			width 100%
+			height 100px
+			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+
+	> div:not(.banner)
 		padding 32px
 		margin 0 auto
 		max-width 500px
diff --git a/src/models/meta.ts b/src/models/meta.ts
index 8ca68416f8..3c0347485c 100644
--- a/src/models/meta.ts
+++ b/src/models/meta.ts
@@ -14,4 +14,5 @@ export type IMeta = {
 	disableRegistration?: boolean;
 	disableLocalTimeline?: boolean;
 	hidedTags?: string[];
+	bannerUrl?: string;
 };
diff --git a/src/server/api/endpoints/admin/update-meta.ts b/src/server/api/endpoints/admin/update-meta.ts
index 3f5cd56b2f..f0ebfbe936 100644
--- a/src/server/api/endpoints/admin/update-meta.ts
+++ b/src/server/api/endpoints/admin/update-meta.ts
@@ -34,6 +34,12 @@ export const meta = {
 				'ja-JP': '統計などで無視するハッシュタグ'
 			}
 		}),
+
+		bannerUrl: $.str.optional.nullable.note({
+			desc: {
+				'ja-JP': 'インスタンスのバナー画像URL'
+			}
+		}),
 	}
 };
 
@@ -59,6 +65,10 @@ export default (params: any) => new Promise(async (res, rej) => {
 		set.hidedTags = ps.hidedTags;
 	}
 
+	if (ps.bannerUrl !== undefined) {
+		set.bannerUrl = ps.bannerUrl;
+	}
+
 	await Meta.update({}, {
 		$set: set
 	}, { upsert: true });
diff --git a/src/server/api/endpoints/meta.ts b/src/server/api/endpoints/meta.ts
index 18b0882f76..6c585d2c3a 100644
--- a/src/server/api/endpoints/meta.ts
+++ b/src/server/api/endpoints/meta.ts
@@ -38,6 +38,7 @@ export default (params: any, me: ILocalUser) => new Promise(async (res, rej) =>
 		driveCapacityPerLocalUserMb: config.localDriveCapacityMb,
 		recaptchaSitekey: config.recaptcha ? config.recaptcha.site_key : null,
 		swPublickey: config.sw ? config.sw.public_key : null,
-		hidedTags: (me && me.isAdmin) ? meta.hidedTags : undefined
+		hidedTags: (me && me.isAdmin) ? meta.hidedTags : undefined,
+		bannerUrl: meta.bannerUrl
 	});
 });
-- 
cgit v1.2.3-freya


From 82d94b59634306fa8c76080af4fa1f2189b52ff2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 22 Sep 2018 08:49:14 +0900
Subject: Fix #2747

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

(limited to 'src/client')

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 c5cd9e24fe..d4c5a47f92 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -4,7 +4,7 @@
 	<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:@loading%<mk-ellipsis/></p>
 	<div class="stream" v-if="!fetching && images.length > 0">
 		<div v-for="image in images" class="img"
-			:style="`background-image: url(${image.url})`"
+			:style="`background-image: url(${image.thumbnailUrl})`"
 		></div>
 	</div>
 	<p class="empty" v-if="!fetching && images.length == 0">%i18n:@no-photos%</p>
diff --git a/src/client/app/mobile/views/pages/user/home.photos.vue b/src/client/app/mobile/views/pages/user/home.photos.vue
index e9025ec816..261a3f796c 100644
--- a/src/client/app/mobile/views/pages/user/home.photos.vue
+++ b/src/client/app/mobile/views/pages/user/home.photos.vue
@@ -4,7 +4,7 @@
 	<div class="stream" v-if="!fetching && images.length > 0">
 		<a v-for="image in images"
 			class="img"
-			:style="`background-image: url(${image.media.url})`"
+			:style="`background-image: url(${image.media.thumbnailUrl})`"
 			:href="image.note | notePage"
 		></a>
 	</div>
-- 
cgit v1.2.3-freya


From 251629ab612e3345843b9a49dd29e01787310972 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 22 Sep 2018 15:58:11 +0900
Subject: :art:

---
 src/client/app/common/views/widgets/broadcast.vue  | 58 ++++++++++++----------
 .../app/desktop/views/components/calendar.vue      |  3 +-
 .../app/desktop/views/components/note-detail.vue   |  3 +-
 .../app/desktop/views/components/timeline.vue      |  4 +-
 .../app/desktop/views/components/ui.header.vue     |  2 +-
 .../desktop/views/components/widget-container.vue  |  5 +-
 .../views/pages/user/user.followers-you-know.vue   |  3 +-
 .../app/desktop/views/pages/user/user.friends.vue  |  3 +-
 .../app/desktop/views/pages/user/user.header.vue   |  3 +-
 .../app/desktop/views/pages/user/user.photos.vue   |  3 +-
 .../app/desktop/views/pages/user/user.profile.vue  |  3 +-
 src/client/app/desktop/views/pages/user/user.vue   |  6 +--
 src/client/app/desktop/views/widgets/profile.vue   | 48 +++++++++---------
 13 files changed, 67 insertions(+), 77 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index f2fa720f52..c471229f15 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -1,25 +1,30 @@
 <template>
-<div class="anltbovirfeutcigvwgmgxipejaeozxi"
-	:data-found="announcements && announcements.length != 0"
-	:data-melt="props.design == 1"
-	:data-mobile="platform == 'mobile'"
->
-	<div class="icon">
-		<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
-			<path class="tower" d="M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z"></path>
-			<path class="wave a" d="M4.66,1.04c-0.508-0.508-1.332-0.508-1.84,0c-1.86,1.92-2.8,4.44-2.8,6.94c0,2.52,0.94,5.04,2.8,6.96 c0.5,0.52,1.32,0.52,1.82,0s0.5-1.36,0-1.88C3.28,11.66,2.6,9.82,2.6,7.98S3.28,4.3,4.64,2.9C5.157,2.391,5.166,1.56,4.66,1.04z"></path>
-			<path class="wave b" d="M9.58,12.22c0.5-0.5,0.5-1.34,0-1.84C8.94,9.72,8.62,8.86,8.62,8s0.32-1.72,0.96-2.38c0.5-0.52,0.5-1.34,0-1.84 C9.346,3.534,9.02,3.396,8.68,3.4c-0.32,0-0.66,0.12-0.9,0.38C6.64,4.94,6.08,6.48,6.08,8s0.58,3.06,1.7,4.22 C8.28,12.72,9.1,12.72,9.58,12.22z"></path>
-			<path class="wave c" d="M22.42,3.78c-0.5,0.5-0.5,1.34,0,1.84c0.641,0.66,0.96,1.52,0.96,2.38s-0.319,1.72-0.96,2.38c-0.5,0.52-0.5,1.34,0,1.84 c0.487,0.497,1.285,0.505,1.781,0.018c0.007-0.006,0.013-0.012,0.02-0.018c1.139-1.16,1.699-2.7,1.699-4.22s-0.561-3.06-1.699-4.22 c-0.494-0.497-1.297-0.5-1.794-0.007C22.424,3.775,22.422,3.778,22.42,3.78z"></path>
-			<path class="wave d" d="M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z"></path>
-		</svg>
-	</div>
-	<p class="fetching" v-if="fetching">%i18n:@fetching%<mk-ellipsis/></p>
-	<h1 v-if="!fetching">{{ announcements.length == 0 ? '%i18n:@no-broadcasts%' : announcements[i].title }}</h1>
-	<p v-if="!fetching">
-		<span v-if="announcements.length != 0" v-html="announcements[i].text"></span>
-		<template v-if="announcements.length == 0">%i18n:@have-a-nice-day%</template>
-	</p>
-	<a v-if="announcements.length > 1" @click="next">%i18n:@next% &gt;&gt;</a>
+<div class="anltbovirfeutcigvwgmgxipejaeozxi">
+	<mk-widget-container :show-header="false" :naked="props.design == 1">
+		<div class="anltbovirfeutcigvwgmgxipejaeozxi-body"
+			:data-found="announcements && announcements.length != 0"
+			:data-melt="props.design == 1"
+			:data-mobile="platform == 'mobile'"
+			:data-darkmode="$store.state.device.darkmode"
+		>
+			<div class="icon">
+				<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
+					<path class="tower" d="M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z"></path>
+					<path class="wave a" d="M4.66,1.04c-0.508-0.508-1.332-0.508-1.84,0c-1.86,1.92-2.8,4.44-2.8,6.94c0,2.52,0.94,5.04,2.8,6.96 c0.5,0.52,1.32,0.52,1.82,0s0.5-1.36,0-1.88C3.28,11.66,2.6,9.82,2.6,7.98S3.28,4.3,4.64,2.9C5.157,2.391,5.166,1.56,4.66,1.04z"></path>
+					<path class="wave b" d="M9.58,12.22c0.5-0.5,0.5-1.34,0-1.84C8.94,9.72,8.62,8.86,8.62,8s0.32-1.72,0.96-2.38c0.5-0.52,0.5-1.34,0-1.84 C9.346,3.534,9.02,3.396,8.68,3.4c-0.32,0-0.66,0.12-0.9,0.38C6.64,4.94,6.08,6.48,6.08,8s0.58,3.06,1.7,4.22 C8.28,12.72,9.1,12.72,9.58,12.22z"></path>
+					<path class="wave c" d="M22.42,3.78c-0.5,0.5-0.5,1.34,0,1.84c0.641,0.66,0.96,1.52,0.96,2.38s-0.319,1.72-0.96,2.38c-0.5,0.52-0.5,1.34,0,1.84 c0.487,0.497,1.285,0.505,1.781,0.018c0.007-0.006,0.013-0.012,0.02-0.018c1.139-1.16,1.699-2.7,1.699-4.22s-0.561-3.06-1.699-4.22 c-0.494-0.497-1.297-0.5-1.794-0.007C22.424,3.775,22.422,3.778,22.42,3.78z"></path>
+					<path class="wave d" d="M29.18,1.06c-0.479-0.502-1.273-0.522-1.775-0.044c-0.016,0.015-0.029,0.029-0.045,0.044c-0.5,0.52-0.5,1.36,0,1.88 c1.361,1.4,2.041,3.24,2.041,5.08s-0.68,3.66-2.041,5.08c-0.5,0.52-0.5,1.36,0,1.88c0.509,0.508,1.332,0.508,1.841,0 c1.86-1.92,2.8-4.44,2.8-6.96C31.99,5.424,30.98,2.931,29.18,1.06z"></path>
+				</svg>
+			</div>
+			<p class="fetching" v-if="fetching">%i18n:@fetching%<mk-ellipsis/></p>
+			<h1 v-if="!fetching">{{ announcements.length == 0 ? '%i18n:@no-broadcasts%' : announcements[i].title }}</h1>
+			<p v-if="!fetching">
+				<span v-if="announcements.length != 0" v-html="announcements[i].text"></span>
+				<template v-if="announcements.length == 0">%i18n:@have-a-nice-day%</template>
+			</p>
+			<a v-if="announcements.length > 1" @click="next">%i18n:@next% &gt;&gt;</a>
+		</div>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -68,11 +73,10 @@ export default define({
 <style lang="stylus" scoped>
 root(isDark)
 	padding 10px
-	border solid 1px #4078c0
-	border-radius 6px
+	background isDark ? #253a50 : #f3f9ff
 
 	&[data-melt]
-		border none
+		background transparent
 
 	&[data-found]
 		padding-left 50px
@@ -133,7 +137,7 @@ root(isDark)
 		z-index 1
 		margin 0
 		font-size 0.7em
-		color isDark ? #fff : #555
+		color isDark ? #fff : #57616f
 
 		&.fetching
 			text-align center
@@ -146,10 +150,10 @@ root(isDark)
 		> p
 			color #fff
 
-.anltbovirfeutcigvwgmgxipejaeozxi[data-darkmode]
+.anltbovirfeutcigvwgmgxipejaeozxi-body[data-darkmode]
 	root(true)
 
-.anltbovirfeutcigvwgmgxipejaeozxi:not([data-darkmode])
+.anltbovirfeutcigvwgmgxipejaeozxi-body:not([data-darkmode])
 	root(false)
 
 </style>
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index de9650b21b..0280f07a61 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -133,8 +133,7 @@ export default Vue.extend({
 root(isDark)
 	color isDark ? #c5ced6 : #777
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 	overflow hidden
 
 	&[data-melt]
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 7307eeb7dc..670be422fe 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -231,8 +231,7 @@ root(isDark)
 	overflow hidden
 	text-align left
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.1)
-	border-radius 8px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	> .read-more
 		display block
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 7d683236bb..75324c6b1d 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -179,14 +179,12 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	> header
 		padding 0 8px
 		z-index 10
 		background isDark ? #313543 : #fff
-		border-radius 6px 6px 0 0
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> .buttons
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index ac8a6c7765..f1e37cc577 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -125,7 +125,7 @@ root(isDark)
 	top 0
 	z-index 1000
 	width 100%
-	box-shadow 0 1px 1px rgba(#000, 0.075)
+	box-shadow 0 0px 8px rgba(#000, 0.2)
 
 	> .warn
 		display block
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 7cfcd68eba..f9f07a919c 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -36,13 +36,12 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, isDark ? 0.2 : 0.075)
-	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 	overflow hidden
 
 	&.naked
 		background transparent !important
-		border none !important
+		box-shadow none !important
 
 	> header
 		background isDark ? #313543 : #fff
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 0e7e3f1d77..1c848000b2 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,8 +38,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	> .title
 		z-index 1
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 a238565588..499a276bfe 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -42,8 +42,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 	overflow hidden
 
 	> .title
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 4b434ec219..ac7057d3b4 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -104,8 +104,7 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border 1px solid rgba(#000, 0.075)
-	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 	overflow hidden
 
 	&[data-is-dark-background]
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 d4c5a47f92..fd4e5813b2 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -41,8 +41,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 	overflow hidden
 
 	> .title
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 efd5be4672..7674df3884 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -87,8 +87,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
+	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 	> *:first-child
 		border-top none !important
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 89dbd41b84..89e7dbd47b 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -118,8 +118,7 @@ root(isDark)
 			margin-right 16px
 
 			> .timeline
-				border 1px solid rgba(#000, 0.075)
-				border-radius 6px
+				box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 		> .side
 			width 275px
@@ -138,8 +137,7 @@ root(isDark)
 				font-size 12px
 				color #aaa
 				background isDark ? #21242f : #fff
-				border solid 1px rgba(#000, 0.075)
-				border-radius 6px
+				box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
 				a
 					color #999
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index a22607b612..04ef18c8e3 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -1,20 +1,25 @@
 <template>
-<div class="mkw-profile"
-	:data-compact="props.design == 1 || props.design == 2"
-	:data-melt="props.design == 2"
->
-	<div class="banner"
-		:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
-		title="%i18n:@update-banner%"
-		@click="() => os.apis.updateBanner()"
-	></div>
-	<mk-avatar class="avatar" :user="$store.state.i"
-		:disable-link="true"
-		@click="() => os.apis.updateAvatar()"
-		title="%i18n:@update-avatar%"
-	/>
-	<router-link class="name" :to="$store.state.i | userPage">{{ $store.state.i | userName }}</router-link>
-	<p class="username">@{{ $store.state.i | acct }}</p>
+<div class="egwyvoaaryotefqhqtmiyawwefemjfsd">
+	<mk-widget-container :show-header="false" :naked="props.design == 2">
+		<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
+			:data-compact="props.design == 1 || props.design == 2"
+			:data-melt="props.design == 2"
+			:data-darkmode="$store.state.device.darkmode"
+		>
+			<div class="banner"
+				:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
+				title="%i18n:@update-banner%"
+				@click="() => os.apis.updateBanner()"
+			></div>
+			<mk-avatar class="avatar" :user="$store.state.i"
+				:disable-link="true"
+				@click="() => os.apis.updateAvatar()"
+				title="%i18n:@update-avatar%"
+			/>
+			<router-link class="name" :to="$store.state.i | userPage">{{ $store.state.i | userName }}</router-link>
+			<p class="username">@{{ $store.state.i | acct }}</p>
+		</div>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -42,10 +47,6 @@ export default define({
 
 <style lang="stylus" scoped>
 root(isDark)
-	overflow hidden
-	background isDark ? #282c37 : #fff
-	border solid 1px rgba(#000, 0.075)
-	border-radius 6px
 
 	&[data-compact]
 		> .banner:before
@@ -75,9 +76,6 @@ root(isDark)
 			display none
 
 	&[data-melt]
-		background transparent !important
-		border none !important
-
 		> .banner
 			visibility hidden
 
@@ -120,10 +118,10 @@ root(isDark)
 		font-size 0.9em
 		color isDark ? #606984 : #999
 
-.mkw-profile[data-darkmode]
+.egwyvoaaryotefqhqtmiyawwefemjfsd-body[data-darkmode]
 	root(true)
 
-.mkw-profile:not([data-darkmode])
+.egwyvoaaryotefqhqtmiyawwefemjfsd-body:not([data-darkmode])
 	root(false)
 
 </style>
-- 
cgit v1.2.3-freya


From aa5528d11eacbecc1310227f2671580cac02cc65 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 22 Sep 2018 19:59:37 +0900
Subject: :art:

---
 src/client/app/desktop/views/components/home.vue   |  5 +--
 .../app/desktop/views/components/ui.header.vue     |  5 ++-
 src/client/app/desktop/views/components/ui.vue     | 37 +++++++++++++++-------
 3 files changed, 28 insertions(+), 19 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 4f4f894065..7d6a1e28a0 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -38,7 +38,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="main" :class="{ withBg: $store.state.i.wallpaperUrl != null }">
+	<div class="main">
 		<template v-if="customize">
 			<x-draggable v-for="place in ['left', 'right']"
 				:list="widgets[place]"
@@ -342,9 +342,6 @@ root(isDark)
 		margin 0 auto
 		max-width 1240px
 
-		&.withBg
-			background rgba(isDark ? #000 : #fff, 0.5)
-
 		> *
 			.customize-container
 				cursor move
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index f1e37cc577..c8b9bdb2a2 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -55,7 +55,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.$store.commit('setUiHeaderHeight', 48);
+		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
 
 		if (this.$store.getters.isSignedIn) {
 			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
@@ -120,8 +120,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	position -webkit-sticky
-	position sticky
+	position fixed
 	top 0
 	z-index 1000
 	width 100%
diff --git a/src/client/app/desktop/views/components/ui.vue b/src/client/app/desktop/views/components/ui.vue
index a28cb3029e..740eedf43f 100644
--- a/src/client/app/desktop/views/components/ui.vue
+++ b/src/client/app/desktop/views/components/ui.vue
@@ -1,5 +1,6 @@
 <template>
-<div class="mk-ui" :style="style" v-hotkey.global="keymap">
+<div class="mk-ui" v-hotkey.global="keymap">
+	<div class="bg" v-if="$store.getters.isSignedIn && $store.state.i.wallpaperUrl" :style="style"></div>
 	<x-header class="header" v-show="!zenMode"/>
 	<div class="content">
 		<slot></slot>
@@ -41,6 +42,16 @@ export default Vue.extend({
 		}
 	},
 
+	watch: {
+		'$store.state.uiHeaderHeight'() {
+			this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+		}
+	},
+
+	mounted() {
+		this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
+	},
+
 	methods: {
 		post() {
 			(this as any).apis.post();
@@ -55,20 +66,22 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-ui
-	display flex
-	flex-direction column
-	flex 1
-	background-size cover
-	background-position center
-	background-attachment fixed
+	min-height 100vh
+	padding-top 48px
+
+	> .bg
+		position fixed
+		top 0
+		left 0
+		width 100%
+		height 100vh
+		background-size cover
+		background-position center
+		background-attachment fixed
+		opacity 0.3
 
 	> .header
 		@media (max-width 1000px)
 			display none
 
-	> .content
-		display flex
-		flex-direction column
-		flex 1
-		overflow hidden
 </style>
-- 
cgit v1.2.3-freya


From 93e5e4afc0d6c5175b1904eec1a6bd6e27d9f8c6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 22 Sep 2018 20:11:13 +0900
Subject: :art:

---
 src/client/app/desktop/views/components/ui.vue          | 5 ++++-
 src/client/app/desktop/views/pages/deck/deck.column.vue | 2 +-
 src/client/app/desktop/views/pages/deck/deck.vue        | 7 ++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/ui.vue b/src/client/app/desktop/views/components/ui.vue
index 740eedf43f..2d1e98447b 100644
--- a/src/client/app/desktop/views/components/ui.vue
+++ b/src/client/app/desktop/views/components/ui.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-ui" v-hotkey.global="keymap">
 	<div class="bg" v-if="$store.getters.isSignedIn && $store.state.i.wallpaperUrl" :style="style"></div>
-	<x-header class="header" v-show="!zenMode"/>
+	<x-header class="header" v-show="!zenMode" ref="header"/>
 	<div class="content">
 		<slot></slot>
 	</div>
@@ -59,6 +59,9 @@ export default Vue.extend({
 
 		toggleZenMode() {
 			this.zenMode = !this.zenMode;
+			this.$nextTick(() => {
+				this.$store.commit('setUiHeaderHeight', this.$refs.header.$el.offsetHeight);
+			});
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index abb09775fb..04aa5e82d1 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -279,7 +279,7 @@ root(isDark)
 	height 100%
 	background isDark ? #282C37 : #fff
 	border-radius 6px
-	box-shadow 0 2px 16px rgba(#000, 0.1)
+	//box-shadow 0 2px 16px rgba(#000, 0.1)
 	overflow hidden
 
 	&.draghover
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index e5aeba251a..810770a022 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui :class="$style.root">
-	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode">
+	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode" :style="style">
 		<template v-for="ids in layout">
 			<div v-if="ids.length > 1" class="folder">
 				<template v-for="id, i in ids">
@@ -35,6 +35,11 @@ export default Vue.extend({
 			if (this.$store.state.settings.deck == null) return [];
 			if (this.$store.state.settings.deck.layout == null) return this.$store.state.settings.deck.columns.map(c => [c.id]);
 			return this.$store.state.settings.deck.layout;
+		},
+		style(): any {
+			return {
+				height: `calc(100vh - ${this.$store.state.uiHeaderHeight}px)`
+			};
 		}
 	},
 
-- 
cgit v1.2.3-freya


From 3e5330a92bc19f0b0e6ff6dd1a4c4670b508dbf3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 22 Sep 2018 20:39:12 +0900
Subject: :art:

---
 locales/ja-JP.yml                                    |  2 ++
 src/client/app/desktop/views/components/calendar.vue |  3 ++-
 .../app/desktop/views/components/note-detail.vue     |  3 ++-
 src/client/app/desktop/views/components/settings.vue | 12 ++++++++++++
 src/client/app/desktop/views/components/timeline.vue |  4 +++-
 .../app/desktop/views/components/ui.header.vue       | 11 +++++++++--
 .../desktop/views/components/widget-container.vue    |  3 ++-
 .../views/pages/user/user.followers-you-know.vue     |  3 ++-
 .../app/desktop/views/pages/user/user.friends.vue    |  3 ++-
 .../app/desktop/views/pages/user/user.header.vue     |  3 ++-
 .../app/desktop/views/pages/user/user.photos.vue     |  3 ++-
 .../app/desktop/views/pages/user/user.profile.vue    |  3 ++-
 .../app/desktop/views/pages/user/user.timeline.vue   |  3 ++-
 src/client/app/desktop/views/pages/user/user.vue     | 10 +++++-----
 src/client/app/desktop/views/pages/welcome.vue       |  2 +-
 src/client/app/init.ts                               | 20 ++++++++++++++++++++
 src/client/app/store.ts                              |  2 ++
 17 files changed, 72 insertions(+), 18 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 11dd76d0e6..6ae38d45fd 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -779,6 +779,8 @@ desktop/views/components/settings.vue:
   choose-wallpaper: "壁紙を選択"
   delete-wallpaper: "壁紙を削除"
   dark-mode: "ダークモード"
+  use-shadow: "UIに影を使用"
+  rounded-corners: "UIの角を丸める"
   circle-icons: "円形のアイコンを使用"
   contrasted-acct: "ユーザー名にコントラストを付ける"
   gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 0280f07a61..e71983f821 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -133,7 +133,8 @@ export default Vue.extend({
 root(isDark)
 	color isDark ? #c5ced6 : #777
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	&[data-melt]
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 670be422fe..80faae0d42 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -231,7 +231,8 @@ root(isDark)
 	overflow hidden
 	text-align left
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 
 	> .read-more
 		display block
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 312a7ed56e..cf10ea0f56 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -60,6 +60,8 @@
 				<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
 				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
+				<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
+				<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
 				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
 				<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
 				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
@@ -316,6 +318,16 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
 		},
 
+		useShadow: {
+			get() { return this.$store.state.settings.useShadow; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'useShadow', value }); }
+		},
+
+		roundedCorners: {
+			get() { return this.$store.state.settings.roundedCorners; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'roundedCorners', value }); }
+		},
+
 		fetchOnScroll: {
 			get() { return this.$store.state.settings.fetchOnScroll; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 75324c6b1d..c008c175de 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -179,7 +179,9 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
+	overflow hidden
 
 	> header
 		padding 0 8px
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index c8b9bdb2a2..bec0ee37ad 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="header">
+<div class="header" :style="style">
 	<p class="warn" v-if="env != 'production'">%i18n:common.do-not-use-in-production%</p>
 	<mk-special-message/>
 	<div class="main" ref="main">
@@ -54,6 +54,14 @@ export default Vue.extend({
 		};
 	},
 
+	computed: {
+		style(): any {
+			return {
+				'box-shadow': this.$store.state.settings.useShadow ? '0 0px 8px rgba(0, 0, 0, 0.2)' : 'none'
+			};
+		}
+	},
+
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
 
@@ -124,7 +132,6 @@ root(isDark)
 	top 0
 	z-index 1000
 	width 100%
-	box-shadow 0 0px 8px rgba(#000, 0.2)
 
 	> .warn
 		display block
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index f9f07a919c..fbf7691cd3 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -36,7 +36,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	&.naked
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 1c848000b2..0965d801c9 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,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 
 	> .title
 		z-index 1
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 499a276bfe..de37dc95c9 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -42,7 +42,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	> .title
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 ac7057d3b4..f727910e77 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -104,7 +104,8 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	&[data-is-dark-background]
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 fd4e5813b2..591edfd829 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,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 	overflow hidden
 
 	> .title
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 7674df3884..1ea242270a 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -87,7 +87,8 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 root(isDark)
 	background isDark ? #282C37 : #fff
-	box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+	box-shadow var(--shadow)
+	border-radius var(--round)
 
 	> *:first-child
 		border-top none !important
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 54221380a7..be6adaac93 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -116,12 +116,13 @@ export default Vue.extend({
 
 root(isDark)
 	background isDark ? #282C37 : #fff
+	border-radius var(--round)
+	overflow hidden
 
 	> header
 		padding 0 8px
 		z-index 10
 		background isDark ? #313543 : #fff
-		border-radius 6px 6px 0 0
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> span
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index 89e7dbd47b..b1ebe2392e 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -88,17 +88,16 @@ root(isDark)
 		margin-bottom 16px
 		padding 14px 16px
 		font-size 14px
-		border-radius 6px
+		box-shadow var(--shadow)
+		border-radius var(--round)
 
 		&.is-suspended
 			color isDark ? #ffb4b4 : #570808
 			background isDark ? #611d1d : #ffdbdb
-			border solid 1px isDark ? #d64a4a : #e09696
 
 		&.is-remote
 			color isDark ? #ffbd3e : #573c08
 			background isDark ? #42321c : #fff0db
-			border solid 1px isDark ? #90733c : #dcbb7b
 
 		> a
 			font-weight bold
@@ -118,7 +117,7 @@ root(isDark)
 			margin-right 16px
 
 			> .timeline
-				box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+				box-shadow var(--shadow)
 
 		> .side
 			width 275px
@@ -137,7 +136,8 @@ root(isDark)
 				font-size 12px
 				color #aaa
 				background isDark ? #21242f : #fff
-				box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+				box-shadow var(--shadow)
+				border-radius var(--round)
 
 				a
 					color #999
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 913fa6b21b..baa27dd8df 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -355,7 +355,7 @@ root(isDark)
 		.block
 			color isDark ? #fff : #444
 			background isDark ? #282C37 : #fff
-			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+			box-shadow var(--shadow)
 			//border-radius 8px
 			overflow auto
 
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 3a03f8492e..4e1d1b70c7 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -125,6 +125,26 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 			});
 			//#endregion
 
+			//#region shadow
+			const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
+			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
+			os.store.watch(s => {
+				return s.settings.useShadow;
+			}, v => {
+				document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
+			});
+			//#endregion
+
+			//#region rounded corners
+			const round = '6px';
+			if (os.store.state.settings.roundedCorners) document.documentElement.style.setProperty('--round', round);
+			os.store.watch(s => {
+				return s.settings.roundedCorners;
+			}, v => {
+				document.documentElement.style.setProperty('--round', v ? round : '0');
+			});
+			//#endregion
+
 			Vue.mixin({
 				data() {
 					return {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 171620ae30..00c08409a6 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -16,6 +16,8 @@ const defaultSettings = {
 	showPostFormOnTopOfTl: false,
 	suggestRecentHashtags: true,
 	showClockOnHeader: true,
+	useShadow: true,
+	roundedCorners: false,
 	circleIcons: true,
 	contrastedAcct: true,
 	showFullAcct: false,
-- 
cgit v1.2.3-freya


From 8028c85c67737d7d6e19a2aacbd3a3f861bc1cb6 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 23 Sep 2018 07:59:48 +0900
Subject: ダークモードのキーボードショートカット追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/app.vue              | 10 +++++++++-
 src/docs/keyboard-shortcut.ja-JP.md |  3 ++-
 2 files changed, 11 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index 9de01ef060..e639c9f9ac 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -10,7 +10,8 @@ export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
-				'h|slash': this.help
+				'h|slash': this.help,
+				'd': this.dark
 			};
 		}
 	},
@@ -18,6 +19,13 @@ export default Vue.extend({
 	methods: {
 		help() {
 			window.open(`${url}/docs/${lang}/keyboard-shortcut`, '_blank');
+		},
+
+		dark() {
+			this.$store.commit('device/set', {
+				key: 'darkmode',
+				value: !this.$store.state.device.darkmode
+			});
 		}
 	}
 });
diff --git a/src/docs/keyboard-shortcut.ja-JP.md b/src/docs/keyboard-shortcut.ja-JP.md
index 59101dc290..264387242c 100644
--- a/src/docs/keyboard-shortcut.ja-JP.md
+++ b/src/docs/keyboard-shortcut.ja-JP.md
@@ -1,4 +1,4 @@
-# Misskeyキーボードショートカットまとめ
+# キーボードショートカット
 
 ## グローバル
 これらのショートカットは基本的にどこでも使えます。
@@ -11,6 +11,7 @@
 		<tr><td><kbd class="key">T</kbd></td><td>タイムラインの最も新しい投稿にフォーカス</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
 		<tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>通知を表示/隠す</td><td><b>N</b>otifications</td></tr>
 		<tr><td><kbd class="key">A</kbd>, <kbd class="key">M</kbd></td><td>アカウントメニューを表示/隠す</td><td><b>A</b>ccount, <b>M</b>y, <b>M</b>e, <b>M</b>enu</td></tr>
+		<tr><td><kbd class="key">D</kbd></td><td>ダークモード切り替え</td><td><b>D</b>ark</td></tr>
 		<tr><td><kbd class="key">Z</kbd></td><td>上部のバーを隠す</td><td><b>Z</b>en</td></tr>
 		<tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>ヘルプを表示</td><td><b>H</b>elp</td></tr>
 	</tbody>
-- 
cgit v1.2.3-freya


From a2e2d5ba776bc27c31a3fd3cd45f563975f764bc Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 23 Sep 2018 19:55:15 +0900
Subject: 非ログイン時のユーザーページにインスタンスの紹介を表示するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/views/components/index.ts    |  2 +
 .../app/common/views/components/instance.vue       | 57 ++++++++++++++++++++++
 src/client/app/desktop/views/pages/user/user.vue   |  5 ++
 3 files changed, 64 insertions(+)
 create mode 100644 src/client/app/common/views/components/instance.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 6f8152cea2..0a3d0d0ae6 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import instance from './instance.vue';
 import cwButton from './cw-button.vue';
 import tagCloud from './tag-cloud.vue';
 import trends from './trends.vue';
@@ -43,6 +44,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-instance', instance);
 Vue.component('mk-cw-button', cwButton);
 Vue.component('mk-tag-cloud', tagCloud);
 Vue.component('mk-trends', trends);
diff --git a/src/client/app/common/views/components/instance.vue b/src/client/app/common/views/components/instance.vue
new file mode 100644
index 0000000000..14c6664eff
--- /dev/null
+++ b/src/client/app/common/views/components/instance.vue
@@ -0,0 +1,57 @@
+<template>
+<div class="nhasjydimbopojusarffqjyktglcuxjy" v-if="meta">
+	<div class="banner" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"></div>
+
+	<h1>{{ meta.name }}</h1>
+	<p v-html="meta.description || '%i18n:common.about%'"></p>
+	<router-link to="/">%i18n:@start%</router-link>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			meta: null
+		}
+	},
+	created() {
+		(this as any).os.getMeta().then(meta => {
+			this.meta = meta;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	color isDark ? #fff : #5b646f
+	background isDark ? #21242f : #fff
+	text-align center
+
+	> .banner
+		height 100px
+		background-position center
+		background-size cover
+
+	> h1
+		margin 16px
+		font-size 16px
+
+	> p
+		margin 16px
+		font-size 14px
+
+	> a
+		display block
+		padding-bottom 16px
+
+.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode]
+	root(true)
+
+.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index b1ebe2392e..a7065af5e7 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -10,6 +10,7 @@
 				<x-timeline class="timeline" ref="tl" :user="user"/>
 			</div>
 			<div class="side">
+				<div class="instance" v-if="!$store.getters.isSignedIn"><mk-instance/></div>
 				<x-profile :user="user"/>
 				<x-twitter :user="user" v-if="user.host === null && user.twitter"/>
 				<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
@@ -131,6 +132,10 @@ root(isDark)
 				font-size 0.8em
 				color #aaa
 
+			> .instance
+				box-shadow var(--shadow)
+				border-radius var(--round)
+
 			> .nav
 				padding 16px
 				font-size 12px
-- 
cgit v1.2.3-freya


From d93f76c1af1d9d632e834db51cf46c0fc8be5bd4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 24 Sep 2018 08:00:10 +0900
Subject: ブロッカーへの警告はログイン時のみ表示するように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/scripts/fuck-ad-block.ts |  4 ++--
 src/client/app/desktop/script.ts               | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/fuck-ad-block.ts b/src/client/app/common/scripts/fuck-ad-block.ts
index ed0904aeb3..0c802f1648 100644
--- a/src/client/app/common/scripts/fuck-ad-block.ts
+++ b/src/client/app/common/scripts/fuck-ad-block.ts
@@ -1,8 +1,8 @@
-require('fuckadblock');
-
 declare const fuckAdBlock: any;
 
 export default (os) => {
+	require('fuckadblock');
+
 	function adBlockDetected() {
 		os.apis.dialog({
 			title: '%fa:exclamation-triangle%%i18n:common.adblock.detected%',
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index e32682286c..8b184a4aae 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -87,10 +87,12 @@ init(async (launch) => {
 		updateBanner: updateBanner(os)
 	}));
 
-	/**
-	 * Fuck AD Block
-	 */
-	fuckAdBlock(os);
+	if (os.store.getters.isSignedIn) {
+		/**
+		 * Fuck AD Block
+		 */
+		fuckAdBlock(os);
+	}
 
 	/**
 	 * Init Notification
-- 
cgit v1.2.3-freya


From 722de350372d1ca0e13abd1d5c4e6cc71766f11a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 24 Sep 2018 08:02:07 +0900
Subject: Add stats link

---
 src/client/app/common/views/components/nav.vue | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/nav.vue b/src/client/app/common/views/components/nav.vue
index 27e66358e4..d52c8e27a4 100644
--- a/src/client/app/common/views/components/nav.vue
+++ b/src/client/app/common/views/components/nav.vue
@@ -2,6 +2,8 @@
 <span class="mk-nav">
 	<a :href="aboutUrl">%i18n:@about%</a>
 	<i>・</i>
+	<a href="/stats">%i18n:@stats%</a>
+	<i>・</i>
 	<a :href="repositoryUrl">%i18n:@repository%</a>
 	<i>・</i>
 	<a :href="feedbackUrl" target="_blank">%i18n:@feedback%</a>
-- 
cgit v1.2.3-freya


From 7b4c307c467281a0cedfb35f18a2446bf33e9a85 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 24 Sep 2018 16:07:23 +0900
Subject: :art:

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 7d6a1e28a0..c9b868422e 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -360,8 +360,8 @@ root(isDark)
 
 			> .form
 				margin-bottom 16px
-				border solid 1px rgba(#000, 0.075)
-				border-radius 4px
+				box-shadow var(--shadow)
+				border-radius var(--round)
 
 			@media (max-width 700px)
 				padding 0
-- 
cgit v1.2.3-freya


From 59d67d314069c19dcc5c2c7d82f260a9f8c661cd Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 24 Sep 2018 16:26:12 +0900
Subject: ピン留めを解除することができるようにしたり
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |  1 +
 .../app/common/views/components/note-menu.vue      | 27 ++++++++--
 src/server/api/endpoints/i/pin.ts                  | 49 +++++++++++--------
 src/server/api/endpoints/i/unpin.ts                | 57 ++++++++++++++++++++++
 src/server/api/endpoints/notes/favorites/create.ts | 18 +++++--
 src/services/i/pin.ts                              | 22 +++------
 6 files changed, 128 insertions(+), 46 deletions(-)
 create mode 100644 src/server/api/endpoints/i/unpin.ts

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 6ae38d45fd..db2a155221 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -328,6 +328,7 @@ common/views/components/note-menu.vue:
   copy-link: "リンクをコピー"
   favorite: "お気に入り"
   pin: "ピン留め"
+  unpin: "ピン留め解除"
   delete: "削除"
   delete-confirm: "この投稿を削除しますか？"
   remote: "投稿元で見る"
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index 08fae46dd6..a3e80e33de 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -28,11 +28,19 @@ export default Vue.extend({
 			}];
 
 			if (this.note.userId == this.$store.state.i.id) {
-				items.push({
-					icon: '%fa:thumbtack%',
-					text: '%i18n:@pin%',
-					action: this.pin
-				});
+				if (this.$store.state.i.pinnedNoteIds.includes(this.note.id)) {
+					items.push({
+						icon: '%fa:thumbtack%',
+						text: '%i18n:@unpin%',
+						action: this.unpin
+					});
+				} else {
+					items.push({
+						icon: '%fa:thumbtack%',
+						text: '%i18n:@pin%',
+						action: this.pin
+					});
+				}
 			}
 
 			if (this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin) {
@@ -56,6 +64,7 @@ export default Vue.extend({
 			return items;
 		}
 	},
+
 	methods: {
 		detail() {
 			this.$router.push(`/notes/${ this.note.id }`);
@@ -73,6 +82,14 @@ export default Vue.extend({
 			});
 		},
 
+		unpin() {
+			(this as any).api('i/unpin', {
+				noteId: this.note.id
+			}).then(() => {
+				this.destroyDom();
+			});
+		},
+
 		del() {
 			if (!window.confirm('%i18n:@delete-confirm%')) return;
 			(this as any).api('notes/delete', {
diff --git a/src/server/api/endpoints/i/pin.ts b/src/server/api/endpoints/i/pin.ts
index d075976b74..f9ae032b11 100644
--- a/src/server/api/endpoints/i/pin.ts
+++ b/src/server/api/endpoints/i/pin.ts
@@ -1,21 +1,35 @@
-import * as mongo from 'mongodb';
 import $ from 'cafy'; import ID from '../../../../misc/cafy-id';
 import User, { ILocalUser } from '../../../../models/user';
 import Note from '../../../../models/note';
 import { pack } from '../../../../models/user';
 import { deliverPinnedChange } from '../../../../services/i/pin';
+import getParams from '../../get-params';
+
+export const meta = {
+	desc: {
+		'ja-JP': '指定した投稿をピン留めします。'
+	},
+
+	requireCredential: true,
+
+	kind: 'account-write',
+
+	params: {
+		noteId: $.type(ID).note({
+			desc: {
+				'ja-JP': '対象の投稿のID'
+			}
+		})
+	}
+};
 
-/**
- * Pin note
- */
 export default async (params: any, user: ILocalUser) => new Promise(async (res, rej) => {
-	// Get 'noteId' parameter
-	const [noteId, noteIdErr] = $.type(ID).get(params.noteId);
-	if (noteIdErr) return rej('invalid noteId param');
+	const [ps, psErr] = getParams(meta, params);
+	if (psErr) return rej(psErr);
 
 	// Fetch pinee
 	const note = await Note.findOne({
-		_id: noteId,
+		_id: ps.noteId,
 		userId: user._id
 	});
 
@@ -23,21 +37,17 @@ export default async (params: any, user: ILocalUser) => new Promise(async (res,
 		return rej('note not found');
 	}
 
-	let addedId: mongo.ObjectID;
-	let removedId: mongo.ObjectID;
-
 	const pinnedNoteIds = user.pinnedNoteIds || [];
 
+	if (pinnedNoteIds.length > 5) {
+		return rej('cannot pin more notes');
+	}
+
 	if (pinnedNoteIds.some(id => id.equals(note._id))) {
 		return rej('already exists');
 	}
 
 	pinnedNoteIds.unshift(note._id);
-	addedId = note._id;
-
-	if (pinnedNoteIds.length > 5) {
-		removedId = pinnedNoteIds.pop();
-	}
 
 	await User.update(user._id, {
 		$set: {
@@ -45,14 +55,13 @@ export default async (params: any, user: ILocalUser) => new Promise(async (res,
 		}
 	});
 
-	// Serialize
 	const iObj = await pack(user, user, {
 		detail: true
 	});
 
-	// Send Add/Remove to followers
-	deliverPinnedChange(user._id, removedId, addedId);
-
 	// Send response
 	res(iObj);
+
+	// Send Add to followers
+	deliverPinnedChange(user._id, note._id, true);
 });
diff --git a/src/server/api/endpoints/i/unpin.ts b/src/server/api/endpoints/i/unpin.ts
new file mode 100644
index 0000000000..82625ae5fb
--- /dev/null
+++ b/src/server/api/endpoints/i/unpin.ts
@@ -0,0 +1,57 @@
+import $ from 'cafy'; import ID from '../../../../misc/cafy-id';
+import User, { ILocalUser } from '../../../../models/user';
+import Note from '../../../../models/note';
+import { pack } from '../../../../models/user';
+import { deliverPinnedChange } from '../../../../services/i/pin';
+import getParams from '../../get-params';
+
+export const meta = {
+	desc: {
+		'ja-JP': '指定した投稿のピン留めを解除します。'
+	},
+
+	requireCredential: true,
+
+	kind: 'account-write',
+
+	params: {
+		noteId: $.type(ID).note({
+			desc: {
+				'ja-JP': '対象の投稿のID'
+			}
+		})
+	}
+};
+
+export default async (params: any, user: ILocalUser) => new Promise(async (res, rej) => {
+	const [ps, psErr] = getParams(meta, params);
+	if (psErr) return rej(psErr);
+
+	// Fetch unpinee
+	const note = await Note.findOne({
+		_id: ps.noteId,
+		userId: user._id
+	});
+
+	if (note === null) {
+		return rej('note not found');
+	}
+
+	const pinnedNoteIds = (user.pinnedNoteIds || []).filter(id => !id.equals(note._id));
+
+	await User.update(user._id, {
+		$set: {
+			pinnedNoteIds: pinnedNoteIds
+		}
+	});
+
+	const iObj = await pack(user, user, {
+		detail: true
+	});
+
+	// Send response
+	res(iObj);
+
+	// Send Remove to followers
+	deliverPinnedChange(user._id, note._id, false);
+});
diff --git a/src/server/api/endpoints/notes/favorites/create.ts b/src/server/api/endpoints/notes/favorites/create.ts
index daf7780abc..9aefb701ae 100644
--- a/src/server/api/endpoints/notes/favorites/create.ts
+++ b/src/server/api/endpoints/notes/favorites/create.ts
@@ -2,6 +2,7 @@ import $ from 'cafy'; import ID from '../../../../../misc/cafy-id';
 import Favorite from '../../../../../models/favorite';
 import Note from '../../../../../models/note';
 import { ILocalUser } from '../../../../../models/user';
+import getParams from '../../../get-params';
 
 export const meta = {
 	desc: {
@@ -11,17 +12,24 @@ export const meta = {
 
 	requireCredential: true,
 
-	kind: 'favorite-write'
+	kind: 'favorite-write',
+
+	params: {
+		noteId: $.type(ID).note({
+			desc: {
+				'ja-JP': '対象の投稿のID'
+			}
+		})
+	}
 };
 
 export default (params: any, user: ILocalUser) => new Promise(async (res, rej) => {
-	// Get 'noteId' parameter
-	const [noteId, noteIdErr] = $.type(ID).get(params.noteId);
-	if (noteIdErr) return rej('invalid noteId param');
+	const [ps, psErr] = getParams(meta, params);
+	if (psErr) return rej(psErr);
 
 	// Get favoritee
 	const note = await Note.findOne({
-		_id: noteId
+		_id: ps.noteId
 	});
 
 	if (note === null) {
diff --git a/src/services/i/pin.ts b/src/services/i/pin.ts
index 5bf8d166bb..8b7287e68d 100644
--- a/src/services/i/pin.ts
+++ b/src/services/i/pin.ts
@@ -7,7 +7,7 @@ import renderRemove from '../../remote/activitypub/renderer/remove';
 import packAp from '../../remote/activitypub/renderer';
 import { deliver } from '../../queue';
 
-export async function deliverPinnedChange(userId: mongo.ObjectID, oldId?: mongo.ObjectID, newId?: mongo.ObjectID) {
+export async function deliverPinnedChange(userId: mongo.ObjectID, noteId: mongo.ObjectID, isAddition: boolean) {
 	const user = await User.findOne({
 		_id: userId
 	});
@@ -20,21 +20,11 @@ export async function deliverPinnedChange(userId: mongo.ObjectID, oldId?: mongo.
 
 	const target = `${config.url}/users/${user._id}/collections/featured`;
 
-	if (oldId) {
-		const oldItem = `${config.url}/notes/${oldId}`;
-		const content = packAp(renderRemove(user, target, oldItem));
-		queue.forEach(inbox => {
-			deliver(user, content, inbox);
-		});
-	}
-
-	if (newId) {
-		const newItem = `${config.url}/notes/${newId}`;
-		const content = packAp(renderAdd(user, target, newItem));
-		queue.forEach(inbox => {
-			deliver(user, content, inbox);
-		});
-	}
+	const item = `${config.url}/notes/${noteId}`;
+	const content = packAp(isAddition ? renderAdd(user, target, item) : renderRemove(user, target, item));
+	queue.forEach(inbox => {
+		deliver(user, content, inbox);
+	});
 }
 
 /**
-- 
cgit v1.2.3-freya


From e6cc937ac26cd3fe0042b3068d3898b30110136f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 24 Sep 2018 20:57:32 +0900
Subject: Check meta key

---
 src/client/app/common/hotkey.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/hotkey.ts b/src/client/app/common/hotkey.ts
index e63fcc9f97..dc1a34338a 100644
--- a/src/client/app/common/hotkey.ts
+++ b/src/client/app/common/hotkey.ts
@@ -59,7 +59,7 @@ export default {
 
 				el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' ');
 
-				el._keyHandler = e => {
+				el._keyHandler = (e: KeyboardEvent) => {
 					const key = e.code.toLowerCase();
 
 					const targetReservedKeys = document.activeElement ? ((document.activeElement as any).dataset || {}).reservedKeys || '' : '';
@@ -72,7 +72,8 @@ export default {
 							const matched = pattern.which.includes(key) &&
 								pattern.ctrl == e.ctrlKey &&
 								pattern.shift == e.shiftKey &&
-								pattern.alt == e.altKey;
+								pattern.alt == e.altKey &&
+								e.metaKey == false;
 
 							if (matched) {
 								e.preventDefault();
-- 
cgit v1.2.3-freya


From 5da18ba535244ad4d4b4498c39e495d4428b5dff Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 25 Sep 2018 20:44:26 +0900
Subject: Fix #2766

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

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index a3e80e33de..c8ed1225cc 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
 			}];
 
 			if (this.note.userId == this.$store.state.i.id) {
-				if (this.$store.state.i.pinnedNoteIds.includes(this.note.id)) {
+				if ((this.$store.state.i.pinnedNoteIds || []).includes(this.note.id)) {
 					items.push({
 						icon: '%fa:thumbtack%',
 						text: '%i18n:@unpin%',
-- 
cgit v1.2.3-freya


From afdacf14b7d114e542dbed60c029948b2ea5910d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 25 Sep 2018 21:09:38 +0900
Subject: Add excludeNsfw option

---
 src/client/app/desktop/views/pages/welcome.vue   |  1 +
 src/client/app/mobile/views/pages/welcome.vue    |  1 +
 src/models/note.ts                               |  1 +
 src/server/api/endpoints/drive/files/update.ts   | 13 +++++++++++++
 src/server/api/endpoints/notes/local-timeline.ts | 13 +++++++++++++
 5 files changed, 29 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index baa27dd8df..7f5f4b9c37 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -187,6 +187,7 @@ export default Vue.extend({
 
 		(this as any).api('notes/local-timeline', {
 			fileType: image,
+			excludeNsfw: true,
 			limit: 6
 		}).then((notes: any[]) => {
 			const files = concat(notes.map((n: any): any[] => n.files));
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 65a7af93a9..82ccfeaff5 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -111,6 +111,7 @@ export default Vue.extend({
 
 		(this as any).api('notes/local-timeline', {
 			fileType: image,
+			excludeNsfw: true,
 			limit: 6
 		}).then((notes: any[]) => {
 			const files = concat(notes.map((n: any): any[] => n.files));
diff --git a/src/models/note.ts b/src/models/note.ts
index ba88e9f481..f67eeaaf6e 100644
--- a/src/models/note.ts
+++ b/src/models/note.ts
@@ -20,6 +20,7 @@ Note.createIndex('userId');
 Note.createIndex('mentions');
 Note.createIndex('visibleUserIds');
 Note.createIndex('tagsLower');
+Note.createIndex('_files._id');
 Note.createIndex('_files.contentType');
 Note.createIndex({
 	createdAt: -1
diff --git a/src/server/api/endpoints/drive/files/update.ts b/src/server/api/endpoints/drive/files/update.ts
index ba9abfec61..3c7932c341 100644
--- a/src/server/api/endpoints/drive/files/update.ts
+++ b/src/server/api/endpoints/drive/files/update.ts
@@ -4,6 +4,7 @@ import DriveFile, { validateFileName, pack } from '../../../../../models/drive-f
 import { publishDriveStream } from '../../../../../stream';
 import { ILocalUser } from '../../../../../models/user';
 import getParams from '../../../get-params';
+import Note from '../../../../../models/note';
 
 export const meta = {
 	desc: {
@@ -93,6 +94,18 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 		}
 	});
 
+	// ドライブのファイルが非正規化されているドキュメントも更新
+	Note.find({
+		'_files._id': file._id
+	}).then(notes => {
+		notes.forEach(note => {
+			note._files[note._files.findIndex(f => f._id.equals(file._id))] = file;
+			Note.findOneAndUpdate({ _id: note._id }, {
+				_files: note._files
+			});
+		});
+	});
+
 	// Serialize
 	const fileObj = await pack(file);
 
diff --git a/src/server/api/endpoints/notes/local-timeline.ts b/src/server/api/endpoints/notes/local-timeline.ts
index ff10e6fbaa..505454a82f 100644
--- a/src/server/api/endpoints/notes/local-timeline.ts
+++ b/src/server/api/endpoints/notes/local-timeline.ts
@@ -30,6 +30,13 @@ export const meta = {
 			}
 		}),
 
+		excludeNsfw: $.bool.optional.note({
+			default: false,
+			desc: {
+				'ja-JP': 'true にすると、NSFW指定されたファイルを除外します(fileTypeが指定されている場合のみ有効)'
+			}
+		}),
+
 		limit: $.num.optional.range(1, 100).note({
 			default: 10
 		}),
@@ -97,6 +104,12 @@ export default async (params: any, user: ILocalUser) => {
 		query['_files.contentType'] = {
 			$in: ps.fileType
 		};
+
+		if (ps.excludeNsfw) {
+			query['_files.metadata.isSensitive'] = {
+				$ne: true
+			};
+		}
 	}
 
 	if (ps.sinceId) {
-- 
cgit v1.2.3-freya


From 9ca6a6bf064634bab6611f4e70d20a62fd3b48ed Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 25 Sep 2018 21:23:26 +0900
Subject: サーバーへの接続が不安定な時にサインアウトしないように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/mios.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index 0f72cd2f34..ed9e3a6aeb 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -265,7 +265,7 @@ export default class MiOS extends EventEmitter {
 			// When success
 			.then(res => {
 				// When failed to authenticate user
-				if (res.status !== 200) {
+				if (res.status !== 200 && res.status < 500) {
 					return this.signout();
 				}
 
-- 
cgit v1.2.3-freya


From 2b07b3a873e5693556b56dd310944bf744f7d103 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 18:59:37 +0900
Subject: wip

---
 src/client/app/app.vue                 |  7 ++--
 src/client/app/boot.js                 | 17 +++++----
 src/client/app/common/scripts/theme.ts | 63 ++++++++++++++++++++++++++++++++++
 src/client/app/desktop/style.styl      | 27 ++++-----------
 src/client/app/init.ts                 | 39 ---------------------
 src/client/theme/dark.json             | 10 ++++++
 src/client/theme/light.json            | 10 ++++++
 7 files changed, 103 insertions(+), 70 deletions(-)
 create mode 100644 src/client/app/common/scripts/theme.ts
 create mode 100644 src/client/theme/dark.json
 create mode 100644 src/client/theme/light.json

(limited to 'src/client')

diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index e639c9f9ac..d8cd4f0796 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -5,6 +5,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import { url, lang } from './config';
+import applyTheme from './common/scripts/theme';
+import darkTheme from '../theme/dark.json';
 
 export default Vue.extend({
 	computed: {
@@ -22,10 +24,7 @@ export default Vue.extend({
 		},
 
 		dark() {
-			this.$store.commit('device/set', {
-				key: 'darkmode',
-				value: !this.$store.state.device.darkmode
-			});
+			applyTheme(darkTheme);
 		}
 	}
 });
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 25aa26dd19..e122e0423a 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -20,6 +20,16 @@
 
 	const langs = LANGS;
 
+	//#region Apply theme
+	const theme = localStorage.getItem('theme');
+	if (theme) {
+		Object.entries(JSON.parse(theme)).forEach(([k, v]) => {
+			if (k == 'meta') return;
+			document.documentElement.style.setProperty(`--${k}`, v.toString());
+		});
+	}
+	//#endregion
+
 	//#region Load settings
 	let settings = null;
 	const vuex = localStorage.getItem('vuex');
@@ -84,13 +94,6 @@
 		app = isMobile ? 'mobile' : 'desktop';
 	}
 
-	// Dark/Light
-	if (settings) {
-		if (settings.device.darkmode) {
-			document.documentElement.setAttribute('data-darkmode', 'true');
-		}
-	}
-
 	// Script version
 	const ver = localStorage.getItem('v') || VERSION;
 
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
new file mode 100644
index 0000000000..bc70223519
--- /dev/null
+++ b/src/client/app/common/scripts/theme.ts
@@ -0,0 +1,63 @@
+export default function(theme: { [key: string]: string }) {
+	const props = compile(theme);
+
+	Object.entries(props).forEach(([k, v]) => {
+		if (k == 'meta') return;
+		document.documentElement.style.setProperty(`--${k}`, v.toString());
+	});
+}
+
+function compile(theme: { [key: string]: string }): { [key: string]: string } {
+	function getRgba(code: string): number[] {
+		// ref
+		if (code[0] == '@') {
+			return getRgba(theme[code.substr(1)]);
+		}
+
+		let m;
+
+		//#region #RGB
+		m = code.match(/^#([0-9a-f]{3})$/i)[1];
+		if (m) {
+			return [
+				parseInt(m.charAt(0), 16) * 0x11,
+				parseInt(m.charAt(1), 16) * 0x11,
+				parseInt(m.charAt(2), 16) * 0x11,
+				255
+			];
+		}
+		//#endregion
+
+		//#region #RRGGBB
+		m = code.match(/^#([0-9a-f]{6})$/i)[1];
+		if (m) {
+			return [
+				parseInt(m.substr(0, 2), 16),
+				parseInt(m.substr(2, 2), 16),
+				parseInt(m.substr(4, 2), 16),
+				255
+			];
+		}
+		//#endregion
+
+		return [0, 0, 0, 255];
+	}
+
+	const props = {};
+
+	Object.entries(theme).forEach(([k, v]) => {
+		if (k == 'meta') return;
+		const [r, g, b, a] = getRgba(v);
+		props[k] = genValue(r, g, b, a);
+		props[`${k}-r`] = r;
+		props[`${k}-g`] = g;
+		props[`${k}-b`] = b;
+		props[`${k}-a`] = a;
+	});
+
+	return props;
+}
+
+function genValue(r: number, g: number, b: number, a: number): string {
+	return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+}
diff --git a/src/client/app/desktop/style.styl b/src/client/app/desktop/style.styl
index 3cd36482e4..626671fd25 100644
--- a/src/client/app/desktop/style.styl
+++ b/src/client/app/desktop/style.styl
@@ -11,34 +11,21 @@
 
 html
 	height 100%
-	background #f7f7f7
+	background var(--bg)
 
 	&, *
 		&::-webkit-scrollbar
 			width 6px
 			height 6px
 
+		&::-webkit-scrollbar-track
+			background var(--scrollbarTrack)
+
 		&::-webkit-scrollbar-thumb
-			background rgba(0, 0, 0, 0.2)
+			background var(--scrollbarHandle)
 
 			&:hover
-				background rgba(0, 0, 0, 0.4)
+				background var(--scrollbarHandleHover)
 
 			&:active
-				background $theme-color
-
-	&[data-darkmode]
-		background #191B22
-
-		&, *
-			&::-webkit-scrollbar-track
-				background-color #282C37
-
-			&::-webkit-scrollbar-thumb
-				background-color #454954
-
-				&:hover
-					background-color #535660
-
-				&:active
-					background-color $theme-color
+				background var(--primary)
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 4e1d1b70c7..7468484b35 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -86,45 +86,6 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 		const launch = (router: VueRouter, api?: (os: MiOS) => API) => {
 			os.apis = api ? api(os) : null;
 
-			//#region Dark/Light
-			Vue.mixin({
-				data() {
-					return {
-						_unwatchDarkmode_: null
-					};
-				},
-				mounted() {
-					const apply = v => {
-						if (this.$el.setAttribute == null) return;
-						if (v) {
-							this.$el.setAttribute('data-darkmode', 'true');
-						} else {
-							this.$el.removeAttribute('data-darkmode');
-						}
-					};
-
-					apply(os.store.state.device.darkmode);
-
-					this._unwatchDarkmode_ = os.store.watch(s => {
-						return s.device.darkmode;
-					}, apply);
-				},
-				beforeDestroy() {
-					this._unwatchDarkmode_();
-				}
-			});
-
-			os.store.watch(s => {
-				return s.device.darkmode;
-			}, v => {
-				if (v) {
-					document.documentElement.setAttribute('data-darkmode', 'true');
-				} else {
-					document.documentElement.removeAttribute('data-darkmode');
-				}
-			});
-			//#endregion
-
 			//#region shadow
 			const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
 			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
new file mode 100644
index 0000000000..4ea0a1a649
--- /dev/null
+++ b/src/client/theme/dark.json
@@ -0,0 +1,10 @@
+{
+	"meta": {
+		"name": "Dark"
+	},
+	"primary": "#fb4e4e",
+	"bg": "#191B22",
+	"scrollbarTrack": "#282C37",
+	"scrollbarHandle": "#454954",
+	"scrollbarHandleHover": "#535660"
+}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
new file mode 100644
index 0000000000..00a74a53c5
--- /dev/null
+++ b/src/client/theme/light.json
@@ -0,0 +1,10 @@
+{
+	"meta": {
+		"name": "Light"
+	},
+	"primary": "#fb4e4e",
+	"bg": "#f7f7f7",
+	"scrollbarTrack": "#fff",
+	"scrollbarHandle": "#00000033",
+	"scrollbarHandleHover": "#00000066"
+}
-- 
cgit v1.2.3-freya


From d2d3f7810eaa319fa562377436ad6c70e4736c06 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 19:14:11 +0900
Subject: wip

---
 src/client/app/app.vue                 |  2 +-
 src/client/app/common/scripts/theme.ts | 18 ++++++++++--------
 src/client/app/init.ts                 |  8 +++++++-
 3 files changed, 18 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index d8cd4f0796..bb8377c237 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -6,7 +6,7 @@
 import Vue from 'vue';
 import { url, lang } from './config';
 import applyTheme from './common/scripts/theme';
-import darkTheme from '../theme/dark.json';
+const darkTheme = require('../theme/dark');
 
 export default Vue.extend({
 	computed: {
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index bc70223519..7fbac7f574 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -5,6 +5,8 @@ export default function(theme: { [key: string]: string }) {
 		if (k == 'meta') return;
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	});
+
+	localStorage.setItem('theme', JSON.stringify(props));
 }
 
 function compile(theme: { [key: string]: string }): { [key: string]: string } {
@@ -17,24 +19,24 @@ function compile(theme: { [key: string]: string }): { [key: string]: string } {
 		let m;
 
 		//#region #RGB
-		m = code.match(/^#([0-9a-f]{3})$/i)[1];
+		m = code.match(/^#([0-9a-f]{3})$/i);
 		if (m) {
 			return [
-				parseInt(m.charAt(0), 16) * 0x11,
-				parseInt(m.charAt(1), 16) * 0x11,
-				parseInt(m.charAt(2), 16) * 0x11,
+				parseInt(m[1].charAt(0), 16) * 0x11,
+				parseInt(m[1].charAt(1), 16) * 0x11,
+				parseInt(m[1].charAt(2), 16) * 0x11,
 				255
 			];
 		}
 		//#endregion
 
 		//#region #RRGGBB
-		m = code.match(/^#([0-9a-f]{6})$/i)[1];
+		m = code.match(/^#([0-9a-f]{6})$/i);
 		if (m) {
 			return [
-				parseInt(m.substr(0, 2), 16),
-				parseInt(m.substr(2, 2), 16),
-				parseInt(m.substr(4, 2), 16),
+				parseInt(m[1].substr(0, 2), 16),
+				parseInt(m[1].substr(2, 2), 16),
+				parseInt(m[1].substr(4, 2), 16),
 				255
 			];
 		}
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 7468484b35..8d430ad7ff 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -8,12 +8,18 @@ import VueRouter from 'vue-router';
 import * as TreeView from 'vue-json-tree-view';
 import VAnimateCss from 'v-animate-css';
 import VModal from 'vue-js-modal';
-import VueHotkey from './common/hotkey';
 
+import VueHotkey from './common/hotkey';
 import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
 import MiOS, { API } from './mios';
 import { version, codename, lang } from './config';
+import applyTheme from './common/scripts/theme';
+const defaultTheme = require('../theme/light.json');
+
+if (localStorage.getItem('theme') == null) {
+	applyTheme(defaultTheme);
+}
 
 Vue.use(Vuex);
 Vue.use(VueRouter);
-- 
cgit v1.2.3-freya


From 904114740b2f87743c332e029a4c6817ebb9e17d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 20:19:35 +0900
Subject: wip

---
 package.json                                       |  2 +
 src/client/app/app.styl                            |  8 +--
 src/client/app/common/scripts/theme.ts             | 67 ++++++++----------
 .../app/common/views/components/autocomplete.vue   |  6 +-
 .../app/common/views/components/connect-failed.vue | 12 ++--
 src/client/app/common/views/components/forkit.vue  |  6 +-
 .../components/games/reversi/reversi.game.vue      | 10 +--
 .../components/games/reversi/reversi.index.vue     |  4 +-
 .../components/games/reversi/reversi.room.vue      |  4 +-
 .../views/components/games/reversi/reversi.vue     |  2 +-
 src/client/app/common/views/components/menu.vue    | 10 +--
 .../views/components/messaging-room.form.vue       | 10 +--
 .../views/components/messaging-room.message.vue    |  4 +-
 .../app/common/views/components/messaging-room.vue | 10 +--
 .../app/common/views/components/messaging.vue      | 10 +--
 .../app/common/views/components/note-header.vue    |  2 +-
 .../app/common/views/components/poll-editor.vue    | 22 +++---
 src/client/app/common/views/components/poll.vue    |  4 +-
 .../common/views/components/reaction-picker.vue    |  6 +-
 src/client/app/common/views/components/signin.vue  |  2 +-
 src/client/app/common/views/components/signup.vue  |  2 +-
 src/client/app/common/views/components/switch.vue  | 16 ++---
 .../app/common/views/components/ui/button.vue      | 16 ++---
 src/client/app/common/views/components/ui/card.vue |  2 +-
 src/client/app/common/views/components/ui/form.vue |  2 +-
 .../app/common/views/components/ui/form/button.vue | 28 ++++----
 .../app/common/views/components/ui/form/radio.vue  |  8 +--
 .../app/common/views/components/ui/input.vue       |  6 +-
 .../app/common/views/components/ui/radio.vue       |  6 +-
 .../app/common/views/components/ui/select.vue      |  6 +-
 .../app/common/views/components/ui/switch.vue      |  8 +--
 .../app/common/views/components/ui/textarea.vue    |  6 +-
 .../app/common/views/components/uploader.vue       | 30 ++++----
 .../common/views/components/visibility-chooser.vue |  6 +-
 src/client/app/common/views/pages/follow.vue       | 22 +++---
 .../app/common/views/widgets/analog-clock.vue      |  2 +-
 src/client/app/common/views/widgets/calendar.vue   |  4 +-
 src/client/app/common/views/widgets/memo.vue       | 10 +--
 src/client/app/desktop/ui.styl                     | 36 +++++-----
 .../app/desktop/views/components/calendar.vue      | 10 +--
 src/client/app/desktop/views/components/charts.vue |  4 +-
 .../components/choose-file-from-drive-window.vue   | 32 ++++-----
 .../components/choose-folder-from-drive-window.vue | 20 +++---
 .../desktop/views/components/context-menu.menu.vue | 12 ++--
 .../app/desktop/views/components/crop-window.vue   | 24 +++----
 src/client/app/desktop/views/components/dialog.vue | 10 +--
 .../app/desktop/views/components/drive.file.vue    | 12 ++--
 .../app/desktop/views/components/drive.folder.vue  | 14 ++--
 src/client/app/desktop/views/components/drive.vue  |  8 +--
 .../app/desktop/views/components/follow-button.vue | 18 ++---
 src/client/app/desktop/views/components/home.vue   | 10 +--
 .../app/desktop/views/components/input-dialog.vue  | 30 ++++----
 .../app/desktop/views/components/note-detail.vue   |  2 +-
 .../app/desktop/views/components/notes.note.vue    |  8 +--
 src/client/app/desktop/views/components/notes.vue  |  4 +-
 .../app/desktop/views/components/post-form.vue     | 80 +++++++++++-----------
 .../desktop/views/components/progress-dialog.vue   | 22 +++---
 .../app/desktop/views/components/renote-form.vue   |  4 +-
 .../app/desktop/views/components/settings.vue      |  4 +-
 .../app/desktop/views/components/timeline.core.vue |  2 +-
 .../app/desktop/views/components/timeline.vue      | 12 ++--
 .../desktop/views/components/ui.header.account.vue | 12 ++--
 .../app/desktop/views/components/ui.header.nav.vue |  6 +-
 .../views/components/ui.header.notifications.vue   |  4 +-
 .../desktop/views/components/ui.header.post.vue    | 10 +--
 .../desktop/views/components/ui.header.search.vue  |  4 +-
 .../app/desktop/views/components/user-preview.vue  |  4 +-
 .../app/desktop/views/components/users-list.vue    |  6 +-
 src/client/app/desktop/views/components/window.vue |  6 +-
 .../views/pages/admin/admin.announcements.vue      |  2 +-
 .../desktop/views/pages/admin/admin.dashboard.vue  |  4 +-
 .../desktop/views/pages/admin/admin.hashtags.vue   |  2 +-
 .../views/pages/admin/admin.suspend-user.vue       |  2 +-
 .../views/pages/admin/admin.unsuspend-user.vue     |  2 +-
 .../views/pages/admin/admin.unverify-user.vue      |  2 +-
 .../views/pages/admin/admin.verify-user.vue        |  2 +-
 src/client/app/desktop/views/pages/admin/admin.vue |  4 +-
 .../app/desktop/views/pages/deck/deck.column.vue   |  8 +--
 .../app/desktop/views/pages/deck/deck.note.vue     |  8 +--
 .../app/desktop/views/pages/deck/deck.notes.vue    |  2 +-
 src/client/app/desktop/views/pages/deck/deck.vue   |  2 +-
 .../views/pages/deck/deck.widgets-column.vue       |  2 +-
 src/client/app/desktop/views/pages/selectdrive.vue | 32 ++++-----
 src/client/app/desktop/views/pages/stats/stats.vue |  4 +-
 .../app/desktop/views/pages/user/user.header.vue   |  4 +-
 .../app/desktop/views/pages/user/user.timeline.vue |  6 +-
 src/client/app/desktop/views/pages/welcome.vue     |  6 +-
 src/client/app/desktop/views/widgets/post-form.vue | 10 +--
 src/client/app/mobile/views/components/dialog.vue  | 10 +--
 .../app/mobile/views/components/drive.file.vue     |  4 +-
 .../app/mobile/views/components/follow-button.vue  | 22 +++---
 .../app/mobile/views/components/mute-button.vue    | 24 +++----
 .../app/mobile/views/components/note-detail.vue    |  4 +-
 src/client/app/mobile/views/components/note.vue    |  8 +--
 src/client/app/mobile/views/components/notes.vue   |  2 +-
 .../app/mobile/views/components/post-form.vue      |  6 +-
 .../app/mobile/views/components/ui.header.vue      |  6 +-
 src/client/app/mobile/views/components/ui.nav.vue  | 10 +--
 .../app/mobile/views/components/users-list.vue     |  6 +-
 src/client/app/mobile/views/pages/favorites.vue    |  2 +-
 src/client/app/mobile/views/pages/home.vue         | 12 ++--
 .../app/mobile/views/pages/notifications.vue       |  2 +-
 .../views/pages/received-follow-requests.vue       |  2 +-
 src/client/app/mobile/views/pages/user-list.vue    |  2 +-
 src/client/app/mobile/views/pages/user-lists.vue   |  2 +-
 src/client/app/mobile/views/pages/user.vue         |  6 +-
 src/client/const.styl                              |  4 --
 src/client/style.styl                              | 14 ++--
 src/client/theme/dark.json                         |  1 +
 src/client/theme/light.json                        |  1 +
 110 files changed, 529 insertions(+), 536 deletions(-)
 delete mode 100644 src/client/const.styl

(limited to 'src/client')

diff --git a/package.json b/package.json
index 1b786d1a38..a3e3b56be4 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
 		"@types/single-line-log": "1.1.0",
 		"@types/speakeasy": "2.0.2",
 		"@types/systeminformation": "3.23.0",
+		"@types/tinycolor2": "1.4.1",
 		"@types/tmp": "0.0.33",
 		"@types/uuid": "3.4.4",
 		"@types/webpack": "4.4.12",
@@ -194,6 +195,7 @@
 		"systeminformation": "3.45.6",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
+		"tinycolor2": "1.4.1",
 		"tmp": "0.0.33",
 		"ts-loader": "4.4.1",
 		"ts-node": "7.0.1",
diff --git a/src/client/app/app.styl b/src/client/app/app.styl
index 3911f83a61..2f0095944c 100644
--- a/src/client/app/app.styl
+++ b/src/client/app/app.styl
@@ -27,7 +27,7 @@ body
 	z-index 65536
 
 	.bar
-		background $theme-color
+		background var(--primary)
 
 		position fixed
 		z-index 65537
@@ -44,7 +44,7 @@ body
 		right 0px
 		width 100px
 		height 100%
-		box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color
+		box-shadow 0 0 10px var(--primary), 0 0 5px var(--primary)
 		opacity 1
 
 		transform rotate(3deg) translate(0px, -4px)
@@ -64,8 +64,8 @@ body
 		box-sizing border-box
 
 		border solid 2px transparent
-		border-top-color $theme-color
-		border-left-color $theme-color
+		border-top-color var(--primary)
+		border-left-color var(--primary)
 		border-radius 50%
 
 		animation progress-spinner 400ms linear infinite
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index 7fbac7f574..2cad547c01 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -1,3 +1,5 @@
+import * as tinycolor from 'tinycolor2';
+
 export default function(theme: { [key: string]: string }) {
 	const props = compile(theme);
 
@@ -10,56 +12,47 @@ export default function(theme: { [key: string]: string }) {
 }
 
 function compile(theme: { [key: string]: string }): { [key: string]: string } {
-	function getRgba(code: string): number[] {
+	function getColor(code: string): tinycolor.Instance {
 		// ref
 		if (code[0] == '@') {
-			return getRgba(theme[code.substr(1)]);
-		}
-
-		let m;
-
-		//#region #RGB
-		m = code.match(/^#([0-9a-f]{3})$/i);
-		if (m) {
-			return [
-				parseInt(m[1].charAt(0), 16) * 0x11,
-				parseInt(m[1].charAt(1), 16) * 0x11,
-				parseInt(m[1].charAt(2), 16) * 0x11,
-				255
-			];
+			return getColor(theme[code.substr(1)]);
 		}
-		//#endregion
 
-		//#region #RRGGBB
-		m = code.match(/^#([0-9a-f]{6})$/i);
-		if (m) {
-			return [
-				parseInt(m[1].substr(0, 2), 16),
-				parseInt(m[1].substr(2, 2), 16),
-				parseInt(m[1].substr(4, 2), 16),
-				255
-			];
-		}
-		//#endregion
-
-		return [0, 0, 0, 255];
+		return tinycolor(code);
 	}
 
 	const props = {};
 
 	Object.entries(theme).forEach(([k, v]) => {
 		if (k == 'meta') return;
-		const [r, g, b, a] = getRgba(v);
-		props[k] = genValue(r, g, b, a);
-		props[`${k}-r`] = r;
-		props[`${k}-g`] = g;
-		props[`${k}-b`] = b;
-		props[`${k}-a`] = a;
+		const c = getColor(v);
+		props[k] = genValue(c);
+		props[`${k}-r`] = c.toRgb().r;
+		props[`${k}-g`] = c.toRgb().g;
+		props[`${k}-b`] = c.toRgb().b;
+		props[`${k}-a`] = c.toRgb().a;
 	});
 
+	const primary = getColor(props['primary']);
+
+	for (let i = 1; i < 10; i++) {
+		const color = primary.clone().setAlpha(i / 10);
+		props['primaryAlpha0' + i] = genValue(color);
+	}
+
+	for (let i = 1; i < 100; i++) {
+		const color = primary.clone().lighten(i);
+		props['primaryLighten' + i] = genValue(color);
+	}
+
+	for (let i = 1; i < 100; i++) {
+		const color = primary.clone().darken(i);
+		props['primaryDarken' + i] = genValue(color);
+	}
+
 	return props;
 }
 
-function genValue(r: number, g: number, b: number, a: number): string {
-	return a != 255 ? `rgba(${r}, ${g}, ${b}, ${a})` : `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
+function genValue(c: tinycolor.Instance): string {
+	return c.toRgbString();
 }
diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index ea05afd6dc..99a87520a4 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -259,7 +259,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	position fixed
@@ -302,13 +302,13 @@ root(isDark)
 				background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
 
 			&[data-selected='true']
-				background $theme-color
+				background var(--primary)
 
 				&, *
 					color #fff !important
 
 			&:active
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
 
 				&, *
 					color #fff !important
diff --git a/src/client/app/common/views/components/connect-failed.vue b/src/client/app/common/views/components/connect-failed.vue
index 0f686926b0..36cae05665 100644
--- a/src/client/app/common/views/components/connect-failed.vue
+++ b/src/client/app/common/views/components/connect-failed.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-connect-failed
 	width 100%
@@ -70,17 +70,17 @@ export default Vue.extend({
 		display block
 		margin 1em auto 0 auto
 		padding 8px 10px
-		color $theme-color-foreground
-		background $theme-color
+		color var(--primaryForeground)
+		background var(--primary)
 
 		&:focus
-			outline solid 3px rgba($theme-color, 0.3)
+			outline solid 3px var(--primaryAlpha03)
 
 		&:hover
-			background lighten($theme-color, 10%)
+			background var(--primaryLighten10)
 
 		&:active
-			background darken($theme-color, 10%)
+			background var(--primaryDarken10)
 
 	> .thanks
 		display block
diff --git a/src/client/app/common/views/components/forkit.vue b/src/client/app/common/views/components/forkit.vue
index de627181ef..b303b48b79 100644
--- a/src/client/app/common/views/components/forkit.vue
+++ b/src/client/app/common/views/components/forkit.vue
@@ -9,7 +9,7 @@
 </template>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .a
 	display block
@@ -18,8 +18,8 @@
 		display block
 		//fill #151513
 		//color #fff
-		fill $theme-color
-		color $theme-color-foreground
+		fill var(--primary)
+		color var(--primaryForeground)
 
 		.octo-arm
 			transform-origin 130px 106px
diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index fea19d917e..bc230496a6 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -304,7 +304,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	text-align center
@@ -399,14 +399,14 @@ root(isDark)
 							cursor pointer
 
 							&:hover
-								border-color darken($theme-color, 10%)
-								background $theme-color
+								border-color var(--primaryDarken10)
+								background var(--primary)
 
 							&:active
-								background darken($theme-color, 10%)
+								background var(--primaryDarken10)
 
 					&.prev
-						box-shadow 0 0 0 4px rgba($theme-color, 0.7)
+						box-shadow 0 0 0 4px var(--primaryAlpha07)
 
 					&.isEnded
 						border-color isDark ? #6a767f : #ddd
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index d23902aae7..f6c7f0e3c2 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -138,7 +138,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	> h1
@@ -200,7 +200,7 @@ root(isDark)
 			user-select none
 
 		&:focus
-			border-color $theme-color
+			border-color var(--primary)
 
 		&:hover
 			background isDark ? #313543 : #f5f5f5
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index fef833d63e..d4b91ae7a7 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -252,7 +252,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	text-align center
@@ -288,7 +288,7 @@ root(isDark)
 
 						&:focus
 						&:active
-							border-color $theme-color
+							border-color var(--primary)
 
 				> div
 					> .random
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index 223ec4597a..75d7d574c1 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -156,7 +156,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	color isDark ? #fff : #677f84
diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index ad5ec619ba..3b9f07d1ee 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -117,7 +117,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$bg-color = isDark ? #2c303c : #fff
@@ -182,13 +182,13 @@ root(isDark)
 			color isDark ? #d6dce2 : #111
 
 			&:hover
-				color $theme-color-foreground
-				background $theme-color
+				color var(--primaryForeground)
+				background var(--primary)
 				text-decoration none
 
 			&:active
-				color $theme-color-foreground
-				background darken($theme-color, 10%)
+				color var(--primaryForeground)
+				background var(--primaryDarken10)
 
 		> div
 			margin 8px 0
diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index f183749fad..90668aee6e 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -195,7 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	> textarea
@@ -234,10 +234,10 @@ root(isDark)
 		transition color 0.1s ease
 
 		&:hover
-			color $theme-color
+			color var(--primary)
 
 		&:active
-			color darken($theme-color, 10%)
+			color var(--primaryDarken10)
 			transition color 0s ease
 
 	.files
@@ -293,10 +293,10 @@ root(isDark)
 		transition color 0.1s ease
 
 		&:hover
-			color $theme-color
+			color var(--primary)
 
 		&:active
-			color darken($theme-color, 10%)
+			color var(--primaryDarken10)
 			transition color 0s ease
 
 	input[type=file]
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 648d0eee18..e0528d5432 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -59,10 +59,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
-	$me-balloon-color = $theme-color
+	$me-balloon-color = var(--primary)
 
 	padding 10px 12px 10px 12px
 	background-color transparent
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 1de41855df..5bdf8b9034 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -262,7 +262,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -386,15 +386,15 @@ root(isDark)
 				cursor pointer
 				line-height 32px
 				font-size 12px
-				color $theme-color-foreground
-				background $theme-color
+				color var(--primaryForeground)
+				background var(--primary)
 				border-radius 16px
 
 				&:hover
-					background lighten($theme-color, 10%)
+					background var(--primaryLighten10)
 
 				&:active
-					background darken($theme-color, 10%)
+					background var(--primaryDarken10)
 
 				> [data-fa]
 					position absolute
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 6abfc92dca..7181ddd01c 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -167,7 +167,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -252,8 +252,8 @@ root(isDark)
 					transition border 0.2s ease
 
 				&:focus
-					color darken($theme-color, 20%)
-					border solid 1px $theme-color
+					color var(--primaryDarken20)
+					border solid 1px var(--primary)
 					transition color 0, border 0
 
 		> .result
@@ -287,7 +287,7 @@ root(isDark)
 					&:hover
 					&:focus
 						color #fff
-						background $theme-color
+						background var(--primary)
 
 						.name
 							color #fff
@@ -297,7 +297,7 @@ root(isDark)
 
 					&:active
 						color #fff
-						background darken($theme-color, 10%)
+						background var(--primaryDarken10)
 
 						.name
 							color #fff
diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
index d25bd430f2..f4a2f00876 100644
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 30d9799fec..219f0a7fd5 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -68,7 +68,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	padding 8px
@@ -105,42 +105,42 @@ root(isDark)
 				font-size 14px
 				color isDark ? #fff : #000
 				background isDark ? #191b22 : #fff
-				border solid 1px rgba($theme-color, 0.1)
+				border solid 1px var(--primaryAlpha01)
 				border-radius 4px
 
 				&:hover
-					border-color rgba($theme-color, 0.2)
+					border-color var(--primaryAlpha02)
 
 				&:focus
-					border-color rgba($theme-color, 0.5)
+					border-color var(--primaryAlpha05)
 
 			> button
 				padding 4px 8px
-				color rgba($theme-color, 0.4)
+				color var(--primaryAlpha04)
 
 				&:hover
-					color rgba($theme-color, 0.6)
+					color var(--primaryAlpha06)
 
 				&:active
-					color darken($theme-color, 30%)
+					color var(--primaryDarken30)
 
 	> .add
 		margin 8px 0 0 0
 		vertical-align top
-		color $theme-color
+		color var(--primary)
 
 	> .destroy
 		position absolute
 		top 0
 		right 0
 		padding 4px 8px
-		color rgba($theme-color, 0.4)
+		color var(--primaryAlpha04)
 
 		&:hover
-			color rgba($theme-color, 0.6)
+			color var(--primaryAlpha06)
 
 		&:active
-			color darken($theme-color, 30%)
+			color var(--primaryDarken30)
 
 .mk-poll-editor[data-darkmode]
 	root(true)
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 4fe51d219b..0e60932796 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -67,7 +67,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -99,7 +99,7 @@ root(isDark)
 				top 0
 				left 0
 				height 100%
-				background $theme-color
+				background var(--primary)
 				transition width 1s ease
 
 			> span
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index f732e40b9d..a86850ac7c 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -210,7 +210,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 $border-color = rgba(27, 31, 35, 0.15)
 
@@ -301,7 +301,7 @@ root(isDark)
 						right 0
 						bottom 0
 						left 0
-						border 2px solid rgba($theme-color, 0.3)
+						border 2px solid var(--primaryAlpha03)
 						border-radius 4px
 
 			> button
@@ -315,7 +315,7 @@ root(isDark)
 					background isDark ? #252731 : #eee
 
 				&:active
-					background $theme-color
+					background var(--primary)
 					box-shadow inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
 
 .mk-reaction-picker[data-darkmode]
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index b1c6782e93..e02af8154c 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -68,7 +68,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-signin
 	color #555
diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue
index f603b9545c..e55d7ee3e3 100644
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -151,7 +151,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-signup
 	min-width 302px
diff --git a/src/client/app/common/views/components/switch.vue b/src/client/app/common/views/components/switch.vue
index 32caab638a..aa60331cbc 100644
--- a/src/client/app/common/views/components/switch.vue
+++ b/src/client/app/common/views/components/switch.vue
@@ -85,7 +85,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -102,21 +102,21 @@ root(isDark)
 
 	&.checked
 		> .button
-			background-color $theme-color
-			border-color $theme-color
+			background-color var(--primary)
+			border-color var(--primary)
 
 		> .label
 			> span
-				color $theme-color
+				color var(--primary)
 
 		&:hover
 			> .label
 				> span
-					color darken($theme-color, 10%)
+					color var(--primaryDarken10)
 
 			> .button
-				background darken($theme-color, 10%)
-				border-color darken($theme-color, 10%)
+				background var(--primaryDarken10)
+				border-color var(--primaryDarken10)
 
 	&:hover
 		> .label
@@ -144,7 +144,7 @@ root(isDark)
 				right -5px
 				bottom -5px
 				left -5px
-				border 2px solid rgba($theme-color, 0.3)
+				border 2px solid var(--primaryAlpha03)
 				border-radius 14px
 
 	> .button
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index e778750354..ae59214038 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark, fill)
 	> button
@@ -49,23 +49,23 @@ root(isDark, fill)
 		box-shadow none
 
 		if fill
-			color $theme-color-foreground
-			background $theme-color
+			color var(--primaryForeground)
+			background var(--primary)
 
 			&:hover
-				background lighten($theme-color, 5%)
+				background var(--primaryLighten5)
 
 			&:active
-				background darken($theme-color, 5%)
+				background var(--primaryDarken5)
 		else
-			color $theme-color
+			color var(--primary)
 			background none
 
 			&:hover
-				color darken($theme-color, 5%)
+				color var(--primaryDarken5)
 
 			&:active
-				background rgba($theme-color, 0.3)
+				background var(--primaryAlpha03)
 
 .ui-button[data-darkmode]
 	&.fill
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index aa16b557e1..a9e0493810 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -20,7 +20,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	margin 16px
diff --git a/src/client/app/common/views/components/ui/form.vue b/src/client/app/common/views/components/ui/form.vue
index fc8fdad9c4..5c5bbd7256 100644
--- a/src/client/app/common/views/components/ui/form.vue
+++ b/src/client/app/common/views/components/ui/form.vue
@@ -19,7 +19,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .ui-form
 	> fieldset
diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue
index 9c37b3118b..bccf36e52f 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display inline-block
@@ -50,30 +50,30 @@ root(isDark)
 
 		&:hover
 		&:focus
-			color $theme-color
-			background rgba($theme-color, isDark ? 0.2 : 0.12)
-			border-color rgba($theme-color, isDark ? 0.5 : 0.3)
+			color var(--primary)
+			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
+			//border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
 
 		&:active
-			color darken($theme-color, 20%)
-			background rgba($theme-color, 0.12)
-			border-color $theme-color
+			color var(--primaryDarken20)
+			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
+			border-color var(--primary)
 			transition all 0s
 
 	&.primary
 		> button
-			border 1px solid $theme-color
-			background $theme-color
-			color $theme-color-foreground
+			border 1px solid var(--primary)
+			background var(--primary)
+			color var(--primaryForeground)
 
 			&:hover
 			&:focus
-				background lighten($theme-color, 20%)
-				border-color lighten($theme-color, 20%)
+				background var(--primaryLighten20)
+				border-color var(--primaryLighten20)
 
 			&:active
-				background darken($theme-color, 20%)
-				border-color darken($theme-color, 20%)
+				background var(--primaryDarken20)
+				border-color var(--primaryDarken20)
 				transition all 0s
 
 	&.round
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 831981bb3e..13cabbdc04 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -49,7 +49,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display inline-flex
@@ -70,15 +70,15 @@ root(isDark)
 
 	&.checked
 		> .button
-			border-color $theme-color
+			border-color var(--primary)
 
 			&:after
-				background-color $theme-color
+				background-color var(--primary)
 				transform scale(1)
 				opacity 1
 
 		> .label
-			color $theme-color
+			color var(--primary)
 
 	> input
 		position absolute
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index ce28bfb12a..98c9bf7f5a 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -155,7 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark, fill)
 	margin 32px 0
@@ -193,7 +193,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 2px
-				background $theme-color
+				background var(--primary)
 				opacity 0
 				transform scaleX(0.12)
 				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -325,7 +325,7 @@ root(isDark, fill)
 					transform scaleX(1)
 
 			> .label
-				color $theme-color
+				color var(--primary)
 
 	&.focused
 	&.filled
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index dcdda1cf0e..ded6b5650c 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display inline-block
@@ -68,10 +68,10 @@ root(isDark)
 
 	&.checked
 		> .button
-			border-color $theme-color
+			border-color var(--primary)
 
 			&:after
-				background-color $theme-color
+				background-color var(--primary)
 				transform scale(1)
 				opacity 1
 
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index 4273a4a0de..c32865c690 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -70,7 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark, fill)
 	margin 32px 0
@@ -113,7 +113,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 2px
-				background $theme-color
+				background var(--primary)
 				opacity 0
 				transform scaleX(0.12)
 				transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -190,7 +190,7 @@ root(isDark, fill)
 					transform scaleX(1)
 
 			> .label
-				color $theme-color
+				color var(--primary)
 
 	&.focused
 	&.filled
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index e88b867801..e358713d8f 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -56,7 +56,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -79,11 +79,11 @@ root(isDark)
 
 	&.checked
 		> .button
-			background-color rgba($theme-color, 0.4)
-			border-color rgba($theme-color, 0.4)
+			background-color var(--primaryAlpha04)
+			border-color var(--primaryAlpha04)
 
 			> *
-				background-color $theme-color
+				background-color var(--primary)
 				transform translateX(14px)
 
 	> input
diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue
index 60fe1cdd82..53b7dcaf8c 100644
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark, fill)
 	margin 42px 0 32px 0
@@ -97,7 +97,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				background none
-				border solid 2px $theme-color
+				border solid 2px var(--primary)
 				border-radius 3px
 				opacity 0
 				transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
@@ -149,7 +149,7 @@ root(isDark, fill)
 					opacity 1
 
 			> .label
-				color $theme-color
+				color var(--primary)
 
 	&.focused
 	&.filled
diff --git a/src/client/app/common/views/components/uploader.vue b/src/client/app/common/views/components/uploader.vue
index f4797d89f7..19b0d15708 100644
--- a/src/client/app/common/views/components/uploader.vue
+++ b/src/client/app/common/views/components/uploader.vue
@@ -81,7 +81,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-uploader
 	overflow auto
@@ -100,7 +100,7 @@ export default Vue.extend({
 			margin 8px 0 0 0
 			padding 0
 			height 36px
-			box-shadow 0 -1px 0 rgba($theme-color, 0.1)
+			box-shadow 0 -1px 0 var(--primaryAlpha01)
 			border-top solid 8px transparent
 
 			&:first-child
@@ -127,7 +127,7 @@ export default Vue.extend({
 				padding 0
 				max-width 256px
 				font-size 0.8em
-				color rgba($theme-color, 0.7)
+				color var(--primaryAlpha07)
 				white-space nowrap
 				text-overflow ellipsis
 				overflow hidden
@@ -145,17 +145,17 @@ export default Vue.extend({
 				font-size 0.8em
 
 				> .initing
-					color rgba($theme-color, 0.5)
+					color var(--primaryAlpha05)
 
 				> .kb
-					color rgba($theme-color, 0.5)
+					color var(--primaryAlpha05)
 
 				> .percentage
 					display inline-block
 					width 48px
 					text-align right
 
-					color rgba($theme-color, 0.7)
+					color var(--primaryAlpha07)
 
 					&:after
 						content '%'
@@ -174,10 +174,10 @@ export default Vue.extend({
 				overflow hidden
 
 				&::-webkit-progress-value
-					background $theme-color
+					background var(--primary)
 
 				&::-webkit-progress-bar
-					background rgba($theme-color, 0.1)
+					background var(--primaryAlpha01)
 
 			> .progress
 				display block
@@ -191,13 +191,13 @@ export default Vue.extend({
 				border-radius 4px
 				background linear-gradient(
 					45deg,
-					lighten($theme-color, 30%) 25%,
-					$theme-color               25%,
-					$theme-color               50%,
-					lighten($theme-color, 30%) 50%,
-					lighten($theme-color, 30%) 75%,
-					$theme-color               75%,
-					$theme-color
+					var(--primaryLighten30) 25%,
+					var(--primary)               25%,
+					var(--primary)               50%,
+					var(--primaryLighten30) 50%,
+					var(--primaryLighten30) 75%,
+					var(--primary)               75%,
+					var(--primary)
 				)
 				background-size 32px 32px
 				animation bg 1.5s linear infinite
diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index 1830b1832e..d0a892fd56 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -127,7 +127,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 $border-color = rgba(27, 31, 35, 0.15)
 
@@ -199,8 +199,8 @@ root(isDark)
 				background isDark ? #21242b : #ddd
 
 			&.active
-				color $theme-color-foreground
-				background $theme-color
+				color var(--primaryForeground)
+				background var(--primary)
 
 			> *
 				user-select none
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 80a870a257..d81e4c0820 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -107,7 +107,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	padding 32px
@@ -173,29 +173,29 @@ root(isDark)
 		min-width 150px
 		font-size 14px
 		font-weight bold
-		color $theme-color
+		color var(--primary)
 		background transparent
 		outline none
-		border solid 1px $theme-color
+		border solid 1px var(--primary)
 		border-radius 36px
 
 		&:hover
-			background rgba($theme-color, 0.1)
+			background var(--primaryAlpha01)
 
 		&:active
-			background rgba($theme-color, 0.2)
+			background var(--primaryAlpha02)
 
 		&.active
-			color $theme-color-foreground
-			background $theme-color
+			color var(--primaryForeground)
+			background var(--primary)
 
 			&:hover
-				background lighten($theme-color, 10%)
-				border-color lighten($theme-color, 10%)
+				background var(--primaryLighten10)
+				border-color var(--primaryLighten10)
 
 			&:active
-				background darken($theme-color, 10%)
-				border-color darken($theme-color, 10%)
+				background var(--primaryDarken10)
+				border-color var(--primaryDarken10)
 
 		&.wait
 			cursor wait !important
diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue
index 04223f0d21..1725c2f1af 100644
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -26,7 +26,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.mkw-analog-clock--body
diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index eb15030370..a24524d1c5 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -116,7 +116,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	&[data-special='on-new-years-day']
@@ -182,7 +182,7 @@ root(isDark)
 
 					> .val
 						height 4px
-						background $theme-color
+						background var(--primary)
 						transition width .3s cubic-bezier(0.23, 1, 0.32, 1)
 
 				&:nth-child(1)
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 30f0d3b009..079522d39b 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -57,7 +57,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.mkw-memo--body
@@ -83,8 +83,8 @@ root(isDark)
 			margin 0
 			padding 0 10px
 			height 28px
-			color $theme-color-foreground
-			background $theme-color !important
+			color var(--primaryForeground)
+			background var(--primary) !important
 			outline none
 			border none
 			border-radius 4px
@@ -92,10 +92,10 @@ root(isDark)
 			cursor pointer
 
 			&:hover
-				background lighten($theme-color, 10%) !important
+				background var(--primaryLighten10) !important
 
 			&:active
-				background darken($theme-color, 10%) !important
+				background var(--primaryDarken10) !important
 				transition background 0s ease
 
 			&:disabled
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
index b66c8f4025..3ab5d79c5d 100644
--- a/src/client/app/desktop/ui.styl
+++ b/src/client/app/desktop/ui.styl
@@ -1,5 +1,3 @@
-@import "../../const"
-
 button
 	font-family sans-serif
 
@@ -34,7 +32,7 @@ button.ui
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -50,20 +48,20 @@ button.ui
 		border-color #dcdcdc
 
 	&.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%)
+		color var(--primaryForeground)
+		//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+		border solid 1px var(--primaryLighten15)
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-			border-color $theme-color
+			//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+			border-color var(--primary)
 
 		&:active:not(:disabled)
-			background $theme-color
-			border-color $theme-color
+			background var(--primary)
+			border-color var(--primary)
 
 input:not([type]).ui
 input[type='text'].ui
@@ -86,7 +84,7 @@ textarea.ui
 		border-color #b0b0b0
 
 	&:focus
-		border-color $theme-color
+		border-color var(--primary)
 
 textarea.ui
 	min-width 100%
@@ -140,17 +138,17 @@ html[data-darkmode]
 			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%)
+			color var(--primaryForeground)
+			//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+			border solid 1px var(--primaryLighten15)
 
 			&:hover:not(:disabled)
-				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-				border-color $theme-color
+				//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+				border-color var(--primary)
 
 			&:active:not(:disabled)
-				background $theme-color
-				border-color $theme-color
+				background var(--primary)
+				border-color var(--primary)
 
 	input:not([type]).ui
 	input[type='text'].ui
@@ -174,7 +172,7 @@ html[data-darkmode]
 			border-color #b0b0b0
 
 		&:focus
-			border-color $theme-color
+			border-color var(--primary)
 
 	.ui.from.group
 		> p:first-child
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index e71983f821..2414ced0c9 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -128,7 +128,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	color isDark ? #c5ced6 : #777
@@ -241,14 +241,14 @@ root(isDark)
 
 				&[data-today]
 					> div
-						color $theme-color-foreground
-						background $theme-color
+						color var(--primaryForeground)
+						background var(--primary)
 
 					&:hover > div
-						background lighten($theme-color, 10%)
+						background var(--primaryLighten10)
 
 					&:active > div
-						background darken($theme-color, 10%)
+						background var(--primaryDarken10)
 
 .mk-calendar[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue
index e401095363..6d6f3a3596 100644
--- a/src/client/app/desktop/views/components/charts.vue
+++ b/src/client/app/desktop/views/components/charts.vue
@@ -649,7 +649,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .gkgckalzgidaygcxnugepioremxvxvpt
 	padding 32px
@@ -675,7 +675,7 @@ export default Vue.extend({
 
 			*
 				&:not(.active)
-					color $theme-color
+					color var(--primary)
 					cursor pointer
 
 	> div
diff --git a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
index 933d31f299..806f7f5c3f 100644
--- a/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-file-from-drive-window.vue
@@ -59,7 +59,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .title
 	> [data-fa]
@@ -74,7 +74,7 @@ export default Vue.extend({
 
 .footer
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 
 .upload
 	display inline-block
@@ -87,7 +87,7 @@ export default Vue.extend({
 	width 40px
 	height 40px
 	font-size 1em
-	color rgba($theme-color, 0.5)
+	color var(--primaryAlpha05)
 	background transparent
 	outline none
 	border solid 1px transparent
@@ -95,13 +95,13 @@ export default Vue.extend({
 
 	&:hover
 		background transparent
-		border-color rgba($theme-color, 0.3)
+		border-color var(--primaryAlpha03)
 
 	&:active
-		color rgba($theme-color, 0.6)
+		color var(--primaryAlpha06)
 		background transparent
-		border-color rgba($theme-color, 0.5)
-		box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+		border-color var(--primaryAlpha05)
+		//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
 
 	&:focus
 		&:after
@@ -112,7 +112,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 .ok
@@ -138,7 +138,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -147,20 +147,20 @@ export default Vue.extend({
 
 .ok
 	right 16px
-	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%)
+	color var(--primaryForeground)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+	border solid 1px var(--primaryLighten15)
 
 	&:not(:disabled)
 		font-weight bold
 
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-		border-color $theme-color
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+		border-color var(--primary)
 
 	&:active:not(:disabled)
-		background $theme-color
-		border-color $theme-color
+		background var(--primary)
+		border-color var(--primary)
 
 .cancel
 	right 148px
diff --git a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
index 03d6fd1636..b970218e58 100644
--- a/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
+++ b/src/client/app/desktop/views/components/choose-folder-from-drive-window.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .title
 	> [data-fa]
@@ -48,7 +48,7 @@ export default Vue.extend({
 
 .footer
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 
 .ok
 .cancel
@@ -73,7 +73,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -82,20 +82,20 @@ export default Vue.extend({
 
 .ok
 	right 16px
-	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%)
+	color var(--primaryForeground)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+	border solid 1px var(--primaryLighten15)
 
 	&:not(:disabled)
 		font-weight bold
 
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-		border-color $theme-color
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+		border-color var(--primary)
 
 	&:active:not(:disabled)
-		background $theme-color
-		border-color $theme-color
+		background var(--primary)
+		border-color var(--primary)
 
 .cancel
 	right 148px
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 e7deec675e..b65a8e1dea 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({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$width = 240px
@@ -69,7 +69,7 @@ root(isDark)
 
 			&:active
 				> p, a
-					background $theme-color
+					background var(--primary)
 
 		> p, a
 			display block
@@ -90,14 +90,14 @@ root(isDark)
 		&:hover
 			> p, a
 				text-decoration none
-				background $theme-color
-				color $theme-color-foreground
+				background var(--primary)
+				color var(--primaryForeground)
 
 		&:active
 			> p, a
 				text-decoration none
-				background darken($theme-color, 10%)
-				color $theme-color-foreground
+				background var(--primaryDarken10)
+				color var(--primaryForeground)
 
 	li > ul
 		visibility hidden
diff --git a/src/client/app/desktop/views/components/crop-window.vue b/src/client/app/desktop/views/components/crop-window.vue
index 4fa258549f..629c3b013a 100644
--- a/src/client/app/desktop/views/components/crop-window.vue
+++ b/src/client/app/desktop/views/components/crop-window.vue
@@ -61,7 +61,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	> [data-fa]
@@ -73,7 +73,7 @@ export default Vue.extend({
 
 .actions
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 
 .ok
 .cancel
@@ -98,7 +98,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -111,20 +111,20 @@ export default Vue.extend({
 
 .ok
 	right 16px
-	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%)
+	color var(--primaryForeground)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+	border solid 1px var(--primaryLighten15)
 
 	&:not(:disabled)
 		font-weight bold
 
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-		border-color $theme-color
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+		border-color var(--primary)
 
 	&:active:not(:disabled)
-		background $theme-color
-		border-color $theme-color
+		background var(--primary)
+		border-color var(--primary)
 
 .cancel
 .skip
@@ -155,11 +155,11 @@ export default Vue.extend({
 }
 
 .cropper-view-box {
-	outline-color: $theme-color;
+	outline-color: var(--primary);
 }
 
 .cropper-line, .cropper-point {
-	background-color: $theme-color;
+	background-color: var(--primary);
 }
 
 .cropper-bg {
diff --git a/src/client/app/desktop/views/components/dialog.vue b/src/client/app/desktop/views/components/dialog.vue
index bbb1e0030c..baa6f911fe 100644
--- a/src/client/app/desktop/views/components/dialog.vue
+++ b/src/client/app/desktop/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-dialog
 	> .bg
@@ -144,20 +144,20 @@ export default Vue.extend({
 					margin 0 0.375em
 
 				&:hover
-					color $theme-color
+					color var(--primary)
 
 				&:active
-					color darken($theme-color, 10%)
+					color var(--primaryDarken10)
 					transition color 0s ease
 
 </style>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	margin 1em 0
-	color $theme-color
+	color var(--primary)
 	// color #43A4EC
 	font-weight bold
 
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 3ac8923c51..225130baf7 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -200,7 +200,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	padding 8px 0 0 0
@@ -237,13 +237,13 @@ root(isDark)
 					background #ce2212
 
 	&[data-is-selected]
-		background $theme-color
+		background var(--primary)
 
 		&:hover
-			background lighten($theme-color, 10%)
+			background var(--primaryLighten10)
 
 		&:active
-			background darken($theme-color, 10%)
+			background var(--primaryDarken10)
 
 		> .label
 			&:before
@@ -251,7 +251,7 @@ root(isDark)
 				display none
 
 		> .name
-			color $theme-color-foreground
+			color var(--primaryForeground)
 
 	&[data-is-contextmenu-showing]
 		&:after
@@ -262,7 +262,7 @@ root(isDark)
 			right -4px
 			bottom -4px
 			left -4px
-			border 2px dashed rgba($theme-color, 0.3)
+			border 2px dashed var(--primaryAlpha03)
 			border-radius 4px
 
 	> .label
diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index e6b71f9426..cb49215cbb 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -214,12 +214,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	padding 8px
 	height 64px
-	background isDark ? rgba($theme-color, 0.2) : lighten($theme-color, 95%)
+	background isDark ? var(--primaryAlpha02) : var(--primaryLighten95)
 	border-radius 4px
 
 	&, *
@@ -229,10 +229,10 @@ root(isDark)
 		pointer-events none
 
 	&:hover
-		background isDark ? rgba(lighten($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
+		//background isDark ? rgba(var(--primaryLighten10), 0.2) : var(--primaryLighten90)
 
 	&:active
-		background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 85%)
+		//background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten85)
 
 	&[data-is-contextmenu-showing]
 	&[data-draghover]
@@ -244,16 +244,16 @@ root(isDark)
 			right -4px
 			bottom -4px
 			left -4px
-			border 2px dashed rgba($theme-color, 0.3)
+			border 2px dashed var(--primaryAlpha03)
 			border-radius 4px
 
 	&[data-draghover]
-		background isDark ? rgba(darken($theme-color, 10%), 0.2) : lighten($theme-color, 90%)
+		//background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten90)
 
 	> .name
 		margin 0
 		font-size 0.9em
-		color isDark ? #fff : darken($theme-color, 30%)
+		color isDark ? #fff : var(--primaryDarken30)
 
 		> [data-fa]
 			margin-right 4px
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index cb289027d4..ccfdb3159f 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -585,7 +585,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -697,8 +697,8 @@ root(isDark)
 			z-index 128
 			top 0
 			left 0
-			border solid 1px $theme-color
-			background rgba($theme-color, 0.5)
+			border solid 1px var(--primary)
+			background var(--primaryAlpha05)
 			pointer-events none
 
 		> .contents
@@ -769,7 +769,7 @@ root(isDark)
 		top 38px
 		width 100%
 		height calc(100% - 38px)
-		border dashed 2px rgba($theme-color, 0.5)
+		border dashed 2px var(--primaryAlpha05)
 		pointer-events none
 
 	> .mk-uploader
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 1db4b0cfa4..014b536f59 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -101,7 +101,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
@@ -126,7 +126,7 @@ root(isDark)
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:not(.active)
@@ -143,20 +143,20 @@ root(isDark)
 			border-color isDark ? #151a1d : #dcdcdc
 
 	&.active
-		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%)
+		color var(--primaryForeground)
+		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+		border solid 1px var(--primaryLighten15)
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-			border-color $theme-color
+			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+			border-color var(--primary)
 
 		&:active:not(:disabled)
-			background $theme-color
-			border-color $theme-color
+			background var(--primary)
+			border-color var(--primary)
 
 	&.wait
 		cursor wait !important
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index c9b868422e..3d77da52d9 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -247,7 +247,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
@@ -292,15 +292,15 @@ root(isDark)
 			padding 0 16px
 			line-height 48px
 			text-decoration none
-			color $theme-color-foreground
-			background $theme-color
+			color var(--primaryForeground)
+			background var(--primary)
 			transition background 0.1s ease
 
 			&:hover
-				background lighten($theme-color, 10%)
+				background var(--primaryLighten10)
 
 			&:active
-				background darken($theme-color, 10%)
+				background var(--primaryDarken10)
 				transition background 0s ease
 
 			> [data-fa]
diff --git a/src/client/app/desktop/views/components/input-dialog.vue b/src/client/app/desktop/views/components/input-dialog.vue
index cf7c09ea56..976e897fe8 100644
--- a/src/client/app/desktop/views/components/input-dialog.vue
+++ b/src/client/app/desktop/views/components/input-dialog.vue
@@ -76,7 +76,7 @@ export default Vue.extend({
 
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	> [data-fa]
@@ -96,25 +96,25 @@ export default Vue.extend({
 		color #333
 		background #fff
 		outline none
-		border solid 1px rgba($theme-color, 0.1)
+		border solid 1px var(--primaryAlpha01)
 		border-radius 4px
 		transition border-color .3s ease
 
 		&:hover
-			border-color rgba($theme-color, 0.2)
+			border-color var(--primaryAlpha02)
 			transition border-color .1s ease
 
 		&:focus
-			color $theme-color
-			border-color rgba($theme-color, 0.5)
+			color var(--primary)
+			border-color var(--primaryAlpha05)
 			transition border-color 0s ease
 
 		&::-webkit-input-placeholder
-			color rgba($theme-color, 0.3)
+			color var(--primaryAlpha03)
 
 .actions
 	height 72px
-	background lighten($theme-color, 95%)
+	background var(--primaryLighten95)
 
 .ok
 .cancel
@@ -139,7 +139,7 @@ export default Vue.extend({
 			right -5px
 			bottom -5px
 			left -5px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 8px
 
 	&:disabled
@@ -148,20 +148,20 @@ export default Vue.extend({
 
 .ok
 	right 16px
-	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%)
+	color var(--primaryForeground)
+	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+	border solid 1px var(--primaryLighten15)
 
 	&:not(:disabled)
 		font-weight bold
 
 	&:hover:not(:disabled)
-		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-		border-color $theme-color
+		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+		border-color var(--primary)
 
 	&:active:not(:disabled)
-		background $theme-color
-		border-color $theme-color
+		background var(--primary)
+		border-color var(--primary)
 
 .cancel
 	right 148px
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 80faae0d42..f004ca88ee 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,7 +225,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	overflow hidden
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index ac2c1ce97f..a91212221b 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -317,7 +317,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	margin 0
@@ -348,7 +348,7 @@ root(isDark)
 			right 2px
 			bottom 2px
 			left 2px
-			border 2px solid rgba($theme-color, 0.3)
+			border 2px solid var(--primaryAlpha03)
 			border-radius 4px
 
 	> .renote
@@ -557,7 +557,7 @@ root(isDark)
 		padding 0 4px
 		margin-left 4px
 		font-size 80%
-		color $theme-color-foreground
-		background $theme-color
+		color var(--primaryForeground)
+		background var(--primary)
 		border-radius 4px
 </style>
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index e6267ed204..2e3ffd171b 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -216,7 +216,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.transition
@@ -250,7 +250,7 @@ root(isDark)
 		position sticky
 		z-index 100
 		height 3px
-		background $theme-color
+		background var(--primary)
 
 	> 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 8db85aeaca..fdd6e75318 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -434,12 +434,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
 	padding 16px
-	background isDark ? #282C37 : lighten($theme-color, 95%)
+	background isDark ? #282C37 : var(--primaryLighten95)
 
 	&:after
 		content ""
@@ -456,23 +456,23 @@ root(isDark)
 			color isDark ? #fff : #333
 			background isDark ? #191d23 : #fff
 			outline none
-			border solid 1px rgba($theme-color, 0.1)
+			border solid 1px var(--primaryAlpha01)
 			border-radius 4px
 			transition border-color .2s ease
 
 			&:hover
-				border-color rgba($theme-color, 0.2)
+				border-color var(--primaryAlpha02)
 				transition border-color .1s ease
 
 			&:focus
-				border-color rgba($theme-color, 0.5)
+				border-color var(--primaryAlpha05)
 				transition border-color 0s ease
 
 			&:disabled
 				opacity 0.5
 
 			&::-webkit-input-placeholder
-				color rgba($theme-color, 0.3)
+				color var(--primaryAlpha03)
 
 		> input
 			margin-bottom 8px
@@ -486,17 +486,17 @@ root(isDark)
 			&:hover
 				& + *
 				& + * + *
-					border-color rgba($theme-color, 0.2)
+					border-color var(--primaryAlpha02)
 					transition border-color .1s ease
 
 			&:focus
 				& + *
 				& + * + *
-					border-color rgba($theme-color, 0.5)
+					border-color var(--primaryAlpha05)
 					transition border-color 0s ease
 
 			&.with
-				border-bottom solid 1px rgba($theme-color, 0.1) !important
+				border-bottom solid 1px var(--primaryAlpha01) !important
 				border-radius 4px 4px 0 0
 
 		> .visibleUsers
@@ -514,7 +514,7 @@ root(isDark)
 			font-size 14px
 
 			> b
-				color isDark ? #9baec8 : darken($theme-color, 20%)
+				color isDark ? #9baec8 : var(--primaryDarken20)
 
 			> *
 				margin-right 8px
@@ -523,14 +523,14 @@ root(isDark)
 		> .files
 			margin 0
 			padding 0
-			background isDark ? #181b23 : lighten($theme-color, 98%)
-			border solid 1px rgba($theme-color, 0.1)
+			background isDark ? #181b23 : var(--primaryLighten98)
+			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
 			transition border-color .3s ease
 
 			&.with
-				border-bottom solid 1px rgba($theme-color, 0.1) !important
+				border-bottom solid 1px var(--primaryAlpha01) !important
 				border-radius 0
 
 			> .remain
@@ -540,7 +540,7 @@ root(isDark)
 				right 8px
 				margin 0
 				padding 0
-				color rgba($theme-color, 0.4)
+				color var(--primaryAlpha04)
 
 			> div
 				padding 4px
@@ -574,8 +574,8 @@ root(isDark)
 						cursor pointer
 
 		> .mk-poll-editor
-			background isDark ? #181b23 : lighten($theme-color, 98%)
-			border solid 1px rgba($theme-color, 0.1)
+			background isDark ? #181b23 : var(--primaryLighten98)
+			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
 			transition border-color .3s ease
@@ -583,7 +583,7 @@ root(isDark)
 	> .mk-uploader
 		margin 8px 0 0 0
 		padding 8px
-		border solid 1px rgba($theme-color, 0.2)
+		border solid 1px var(--primaryAlpha02)
 		border-radius 4px
 
 	input[type='file']
@@ -600,22 +600,22 @@ root(isDark)
 		width 110px
 		height 40px
 		font-size 1em
-		color $theme-color-foreground
-		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+		color var(--primaryForeground)
+		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
 		outline none
-		border solid 1px lighten($theme-color, 15%)
+		border solid 1px var(--primaryLighten15)
 		border-radius 4px
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-			border-color $theme-color
+			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+			border-color var(--primary)
 
 		&:active:not(:disabled)
-			background $theme-color
-			border-color $theme-color
+			background var(--primary)
+			border-color var(--primary)
 
 		&:focus
 			&:after
@@ -626,7 +626,7 @@ root(isDark)
 				right -5px
 				bottom -5px
 				left -5px
-				border 2px solid rgba($theme-color, 0.3)
+				border 2px solid var(--primaryAlpha03)
 				border-radius 8px
 
 		&:disabled
@@ -636,13 +636,13 @@ root(isDark)
 		&.wait
 			background linear-gradient(
 				45deg,
-				darken($theme-color, 10%) 25%,
-				$theme-color              25%,
-				$theme-color              50%,
-				darken($theme-color, 10%) 50%,
-				darken($theme-color, 10%) 75%,
-				$theme-color              75%,
-				$theme-color
+				var(--primaryDarken10) 25%,
+				var(--primary)              25%,
+				var(--primary)              50%,
+				var(--primaryDarken10) 50%,
+				var(--primaryDarken10) 75%,
+				var(--primary)              75%,
+				var(--primary)
 			)
 			background-size 32px 32px
 			animation stripe-bg 1.5s linear infinite
@@ -661,7 +661,7 @@ root(isDark)
 		right 138px
 		margin 0
 		line-height 40px
-		color rgba($theme-color, 0.5)
+		color var(--primaryAlpha05)
 
 		&.over
 			color #ec3828
@@ -679,7 +679,7 @@ root(isDark)
 		width 40px
 		height 40px
 		font-size 1em
-		color isDark ? $theme-color : rgba($theme-color, 0.5)
+		color isDark ? var(--primary) : var(--primaryAlpha05)
 		background transparent
 		outline none
 		border solid 1px transparent
@@ -687,12 +687,12 @@ root(isDark)
 
 		&:hover
 			background transparent
-			border-color isDark ? rgba($theme-color, 0.5) : rgba($theme-color, 0.3)
+			border-color isDark ? var(--primaryAlpha05) : var(--primaryAlpha03)
 
 		&:active
-			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)
+			color var(--primaryAlpha06)
+			background isDark ? transparent : linear-gradient(to bottom, var(--primaryLighten80) 0%, var(--primaryLighten90) 100%)
+			border-color var(--primaryAlpha05)
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
 		&:focus
@@ -704,7 +704,7 @@ root(isDark)
 				right -5px
 				bottom -5px
 				left -5px
-				border 2px solid rgba($theme-color, 0.3)
+				border 2px solid var(--primaryAlpha03)
 				border-radius 8px
 
 	> .dropzone
@@ -713,7 +713,7 @@ root(isDark)
 		top 0
 		width 100%
 		height 100%
-		border dashed 2px rgba($theme-color, 0.5)
+		border dashed 2px var(--primaryAlpha05)
 		pointer-events none
 
 .mk-post-form[data-darkmode]
diff --git a/src/client/app/desktop/views/components/progress-dialog.vue b/src/client/app/desktop/views/components/progress-dialog.vue
index cc25ba8e30..feda6050bc 100644
--- a/src/client/app/desktop/views/components/progress-dialog.vue
+++ b/src/client/app/desktop/views/components/progress-dialog.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .body
 	padding 18px 24px 24px 24px
@@ -53,7 +53,7 @@ export default Vue.extend({
 	margin 0 0 4px 0
 	text-align center
 	line-height 16px
-	color rgba($theme-color, 0.7)
+	color var(--primaryAlpha07)
 
 	&:after
 		content '%'
@@ -69,21 +69,21 @@ export default Vue.extend({
 	overflow hidden
 
 	&::-webkit-progress-value
-		background $theme-color
+		background var(--primary)
 
 	&::-webkit-progress-bar
-		background rgba($theme-color, 0.1)
+		background var(--primaryAlpha01)
 
 .waiting
 	background linear-gradient(
 		45deg,
-		lighten($theme-color, 30%) 25%,
-		$theme-color               25%,
-		$theme-color               50%,
-		lighten($theme-color, 30%) 50%,
-		lighten($theme-color, 30%) 75%,
-		$theme-color               75%,
-		$theme-color
+		var(--primaryLighten30) 25%,
+		var(--primary)               25%,
+		var(--primary)               50%,
+		var(--primaryLighten30) 50%,
+		var(--primaryLighten30) 75%,
+		var(--primary)               75%,
+		var(--primary)
 	)
 	background-size 32px 32px
 	animation progress-dialog-tag-progress-waiting 1.5s linear infinite
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index c5192ecaac..ad23740f13 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -57,7 +57,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -66,7 +66,7 @@ root(isDark)
 
 	> footer
 		height 72px
-		background isDark ? #313543 : lighten($theme-color, 95%)
+		background isDark ? #313543 : var(--primaryLighten95)
 
 		> .quote
 			position absolute
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index cf10ea0f56..4b8ee3c9cd 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -492,7 +492,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -524,7 +524,7 @@ root(isDark)
 
 			&.active
 				margin-left 8px
-				color $theme-color !important
+				color var(--primary) !important
 
 	> .pages
 		width 100%
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index ff73bde95c..aef873dd11 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -215,7 +215,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-timeline-core
 	> .mk-friends-maker
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index c008c175de..32ed89ef0b 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -175,7 +175,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	background isDark ? #282C37 : #fff
@@ -207,7 +207,7 @@ root(isDark)
 					top -4px
 					right 4px
 					font-size 10px
-					color $theme-color
+					color var(--primary)
 
 				&:hover
 					color isDark ? #b2c1d5 : #aaa
@@ -216,7 +216,7 @@ root(isDark)
 					color isDark ? #b2c1d5 : #999
 
 				&[data-active]
-					color $theme-color
+					color var(--primary)
 					cursor default
 
 					&:before
@@ -227,7 +227,7 @@ root(isDark)
 						left 0
 						width 100%
 						height 2px
-						background $theme-color
+						background var(--primary)
 
 		> span
 			display inline-block
@@ -237,7 +237,7 @@ root(isDark)
 			user-select none
 
 			&[data-active]
-				color $theme-color
+				color var(--primary)
 				cursor default
 				font-weight bold
 
@@ -249,7 +249,7 @@ root(isDark)
 					left -8px
 					width calc(100% + 16px)
 					height 2px
-					background $theme-color
+					background var(--primary)
 
 			&:not([data-active])
 				color isDark ? #9aa2a7 : #6f7477
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 1e8a45beaf..301efeb3e2 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -127,7 +127,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	> .header
@@ -249,8 +249,8 @@ root(isDark)
 							padding 2px 8px
 							font-size 90%
 							font-style normal
-							background $theme-color
-							color $theme-color-foreground
+							background var(--primary)
+							color var(--primaryForeground)
 							border-radius 8px
 
 					> [data-fa]:first-child
@@ -269,11 +269,11 @@ root(isDark)
 
 					&:hover, &:active
 						text-decoration none
-						background $theme-color
-						color $theme-color-foreground
+						background var(--primary)
+						color var(--primaryForeground)
 
 					&:active
-						background darken($theme-color, 10%)
+						background var(--primaryDarken10)
 
 					&.signout
 						$color = #e64137
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 6292b764c6..f41d4b8ecf 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display inline-block
@@ -120,7 +120,7 @@ root(isDark)
 
 			&.active
 				> a
-					border-bottom solid 3px $theme-color
+					border-bottom solid 3px var(--primary)
 
 			> a
 				display inline-block
@@ -147,7 +147,7 @@ root(isDark)
 				> [data-fa]:last-child
 					margin-left 5px
 					font-size 10px
-					color $theme-color
+					color var(--primary)
 
 					@media (max-width 1100px)
 						margin-left -5px
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 74dcd4111f..f9b68fa0e9 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -61,7 +61,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 
@@ -93,7 +93,7 @@ root(isDark)
 			margin-left -5px
 			vertical-align super
 			font-size 10px
-			color $theme-color
+			color var(--primary)
 
 	> .pop
 		$bgcolor = isDark ? #282c37 : #fff
diff --git a/src/client/app/desktop/views/components/ui.header.post.vue b/src/client/app/desktop/views/components/ui.header.post.vue
index 3665488542..9527792a34 100644
--- a/src/client/app/desktop/views/components/ui.header.post.vue
+++ b/src/client/app/desktop/views/components/ui.header.post.vue
@@ -17,7 +17,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .note
 	display inline-block
@@ -33,8 +33,8 @@ export default Vue.extend({
 		font-size 1.2em
 		font-weight normal
 		text-decoration none
-		color $theme-color-foreground
-		background $theme-color !important
+		color var(--primaryForeground)
+		background var(--primary) !important
 		outline none
 		border none
 		border-radius 4px
@@ -45,10 +45,10 @@ export default Vue.extend({
 			pointer-events none
 
 		&:hover
-			background lighten($theme-color, 10%) !important
+			background var(--primaryLighten10) !important
 
 		&:active
-			background darken($theme-color, 10%) !important
+			background var(--primaryDarken10) !important
 			transition background 0s ease
 
 </style>
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 9a36e52fcc..d5794dc882 100644
--- a/src/client/app/desktop/views/components/ui.header.search.vue
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -28,7 +28,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 root(isDark)
 	> [data-fa]
 		display block
@@ -67,7 +67,7 @@ root(isDark)
 			background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
 
 		&:focus
-			box-shadow 0 0 0 2px rgba($theme-color, 0.5) !important
+			box-shadow 0 0 0 2px var(--primaryAlpha05) !important
 
 .search[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index f6d6d68a7f..f988bb21e9 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -83,7 +83,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	position absolute
@@ -151,7 +151,7 @@ root(isDark)
 
 			> span
 				font-size 1em
-				color $theme-color
+				color var(--primary)
 
 	> .mk-follow-button
 		position absolute
diff --git a/src/client/app/desktop/views/components/users-list.vue b/src/client/app/desktop/views/components/users-list.vue
index 05e2f4e5b3..1316f277b7 100644
--- a/src/client/app/desktop/views/components/users-list.vue
+++ b/src/client/app/desktop/views/components/users-list.vue
@@ -69,7 +69,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-users-list
 	height 100%
@@ -104,8 +104,8 @@ export default Vue.extend({
 
 				&[data-active]
 					font-weight bold
-					color $theme-color
-					border-color $theme-color
+					color var(--primary)
+					border-color var(--primary)
 					cursor default
 
 				> span
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 5eece3795f..2b01c24ca8 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -463,7 +463,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
@@ -494,9 +494,9 @@ root(isDark)
 			&:not([data-is-modal])
 				> .body
 					if isDark
-						box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 12px 0 rgba(#000, 0.5)
+						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 rgba(#000, 0.5)
 					else
-						box-shadow 0 0 0px 1px rgba($theme-color, 0.5), 0 2px 6px 0 rgba(#000, 0.2)
+						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 6px 0 rgba(#000, 0.2)
 
 		> .handle
 			$size = 8px
diff --git a/src/client/app/desktop/views/pages/admin/admin.announcements.vue b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
index 532400deb2..272016b3f9 100644
--- a/src/client/app/desktop/views/pages/admin/admin.announcements.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .qldxjjsrseehkusjuoooapmsprvfrxyl
 	textarea
diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
index 5d0f6d451e..f5734012bd 100644
--- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .obdskegsannmntldydackcpzezagxqfy
 	> .stats
@@ -112,7 +112,7 @@ export default Vue.extend({
 
 			> *:first-child
 				display block
-				color $theme-color
+				color var(--primary)
 
 			> *:last-child
 				font-size 70%
diff --git a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
index c6bf20361f..f491b85959 100644
--- a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .jdnqwkzlnxcfftthoybjxrebyolvoucw
 	textarea
diff --git a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
index 8d8e37e181..32295e3795 100644
--- a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 header
 	margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
index ec423969be..d6905fe9c0 100644
--- a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 header
 	margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
index e8204e69f4..d0cf635a98 100644
--- a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 header
 	margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
index 91fb04af80..9c0b0209b7 100644
--- a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 header
 	margin 10px 0
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index 510252b447..b874915f05 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -70,7 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus">
-@import '~const.styl'
+
 
 .mk-admin
 	display flex
@@ -106,7 +106,7 @@ export default Vue.extend({
 
 				&.active
 					margin-left 8px
-					color $theme-color !important
+					color var(--primary) !important
 
 	> main
 		width 100%
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 04aa5e82d1..10454b1cc6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -269,7 +269,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$header-height = 42px
@@ -283,10 +283,10 @@ root(isDark)
 	overflow hidden
 
 	&.draghover
-		box-shadow 0 0 0 2px rgba($theme-color, 0.8)
+		box-shadow 0 0 0 2px var(--primaryAlpha08)
 
 	&.dragging
-		box-shadow 0 0 0 2px rgba($theme-color, 0.4)
+		box-shadow 0 0 0 2px var(--primaryAlpha04)
 
 	&.dropready
 		*
@@ -329,7 +329,7 @@ root(isDark)
 			pointer-events none
 
 		&.indicate
-			box-shadow 0 3px 0 0 $theme-color
+			box-shadow 0 3px 0 0 var(--primary)
 
 		> span
 			[data-fa]
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 99274b0f41..82e816cc8c 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -214,7 +214,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 mediaRoot(isDark)
 	font-size 13px
@@ -368,8 +368,8 @@ root(isDark)
 							padding 0 4px
 							margin-left 4px
 							font-size 80%
-							color $theme-color-foreground
-							background $theme-color
+							color var(--primaryForeground)
+							background var(--primary)
 							border-radius 4px
 
 					.mk-url-preview
@@ -430,7 +430,7 @@ root(isDark)
 						color #999
 
 					&.reacted
-						color $theme-color
+						color var(--primary)
 
 .zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 2e7e30f12a..58f13dd57b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -195,7 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.transition
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 810770a022..48c80c82c4 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -221,7 +221,7 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index 15397232e0..fe190bf892 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -135,7 +135,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
diff --git a/src/client/app/desktop/views/pages/selectdrive.vue b/src/client/app/desktop/views/pages/selectdrive.vue
index c846f2418f..b82ed0a208 100644
--- a/src/client/app/desktop/views/pages/selectdrive.vue
+++ b/src/client/app/desktop/views/pages/selectdrive.vue
@@ -54,7 +54,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mkp-selectdrive
 	display block
@@ -72,7 +72,7 @@ export default Vue.extend({
 		left 0
 		width 100%
 		height 72px
-		background lighten($theme-color, 95%)
+		background var(--primaryLighten95)
 
 		.upload
 			display inline-block
@@ -85,7 +85,7 @@ export default Vue.extend({
 			width 40px
 			height 40px
 			font-size 1em
-			color rgba($theme-color, 0.5)
+			color var(--primaryAlpha05)
 			background transparent
 			outline none
 			border solid 1px transparent
@@ -93,13 +93,13 @@ export default Vue.extend({
 
 			&:hover
 				background transparent
-				border-color rgba($theme-color, 0.3)
+				border-color var(--primaryAlpha03)
 
 			&:active
-				color rgba($theme-color, 0.6)
+				color var(--primaryAlpha06)
 				background transparent
-				border-color rgba($theme-color, 0.5)
-				box-shadow 0 2px 4px rgba(darken($theme-color, 50%), 0.15) inset
+				border-color var(--primaryAlpha05)
+				//box-shadow 0 2px 4px rgba(var(--primaryDarken50), 0.15) inset
 
 			&:focus
 				&:after
@@ -110,7 +110,7 @@ export default Vue.extend({
 					right -5px
 					bottom -5px
 					left -5px
-					border 2px solid rgba($theme-color, 0.3)
+					border 2px solid var(--primaryAlpha03)
 					border-radius 8px
 
 		.ok
@@ -136,7 +136,7 @@ export default Vue.extend({
 					right -5px
 					bottom -5px
 					left -5px
-					border 2px solid rgba($theme-color, 0.3)
+					border 2px solid var(--primaryAlpha03)
 					border-radius 8px
 
 			&:disabled
@@ -145,20 +145,20 @@ export default Vue.extend({
 
 		.ok
 			right 16px
-			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%)
+			color var(--primaryForeground)
+			background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+			border solid 1px var(--primaryLighten15)
 
 			&:not(:disabled)
 				font-weight bold
 
 			&:hover:not(:disabled)
-				background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-				border-color $theme-color
+				background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
+				border-color var(--primary)
 
 			&:active:not(:disabled)
-				background $theme-color
-				border-color $theme-color
+				background var(--primary)
+				border-color var(--primary)
 
 		.cancel
 			right 148px
diff --git a/src/client/app/desktop/views/pages/stats/stats.vue b/src/client/app/desktop/views/pages/stats/stats.vue
index 7a4e4ab5ce..219885fb9e 100644
--- a/src/client/app/desktop/views/pages/stats/stats.vue
+++ b/src/client/app/desktop/views/pages/stats/stats.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus">
-@import '~const.styl'
+
 
 .tcrwdhwpuxrwmcttxjcsehgpagpstqey
 	width 100%
@@ -54,7 +54,7 @@ export default Vue.extend({
 
 			> *:first-child
 				display block
-				color $theme-color
+				color var(--primary)
 
 			> *:last-child
 				font-size 70%
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 f727910e77..30dc74212d 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -100,7 +100,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	background isDark ? #282C37 : #fff
@@ -208,7 +208,7 @@ root(isDark)
 					margin-right 4px
 					font-size 1rem
 					font-weight bold
-					color $theme-color
+					color var(--primary)
 
 .header[data-darkmode]
 	root(true)
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 be6adaac93..3cde6cc10c 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -112,7 +112,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	background isDark ? #282C37 : #fff
@@ -133,7 +133,7 @@ root(isDark)
 			user-select none
 
 			&[data-active]
-				color $theme-color
+				color var(--primary)
 				cursor default
 				font-weight bold
 
@@ -145,7 +145,7 @@ root(isDark)
 					left -8px
 					width calc(100% + 16px)
 					height 2px
-					background $theme-color
+					background var(--primary)
 
 			&:not([data-active])
 				color isDark ? #9aa2a7 : #6f7477
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 7f5f4b9c37..05c32a7bd1 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -303,7 +303,7 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display flex
@@ -385,7 +385,7 @@ root(isDark)
 			> .main
 				grid-row 1
 				grid-column 1 / 3
-				border-top solid 5px $theme-color
+				border-top solid 5px var(--primary)
 
 				> div
 					padding 32px
@@ -426,7 +426,7 @@ root(isDark)
 							cursor pointer
 
 							&:hover
-								color $theme-color
+								color var(--primary)
 
 					> .char
 						display block
diff --git a/src/client/app/desktop/views/widgets/post-form.vue b/src/client/app/desktop/views/widgets/post-form.vue
index 19a2790d95..a763f4d17c 100644
--- a/src/client/app/desktop/views/widgets/post-form.vue
+++ b/src/client/app/desktop/views/widgets/post-form.vue
@@ -68,7 +68,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mkw-post-form
 	background #fff
@@ -107,8 +107,8 @@ export default define({
 		margin 0
 		padding 0 10px
 		height 28px
-		color $theme-color-foreground
-		background $theme-color !important
+		color var(--primaryForeground)
+		background var(--primary) !important
 		outline none
 		border none
 		border-radius 4px
@@ -116,10 +116,10 @@ export default define({
 		cursor pointer
 
 		&:hover
-			background lighten($theme-color, 10%) !important
+			background var(--primaryLighten10) !important
 
 		&:active
-			background darken($theme-color, 10%) !important
+			background var(--primaryDarken10) !important
 			transition background 0s ease
 
 </style>
diff --git a/src/client/app/mobile/views/components/dialog.vue b/src/client/app/mobile/views/components/dialog.vue
index 6a0d74c752..fff44a28c3 100644
--- a/src/client/app/mobile/views/components/dialog.vue
+++ b/src/client/app/mobile/views/components/dialog.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-dialog
 	> .bg
@@ -145,20 +145,20 @@ export default Vue.extend({
 					margin 0 0.375em
 
 				&:hover
-					color $theme-color
+					color var(--primary)
 
 				&:active
-					color darken($theme-color, 10%)
+					color var(--primaryDarken10)
 					transition color 0s ease
 
 </style>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .header
 	margin 0 0 1em 0
-	color $theme-color
+	color var(--primary)
 	// color #43A4EC
 	font-weight bold
 
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index 4375cfdd7b..ba58cf59a0 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	display block
@@ -150,7 +150,7 @@ root(isDark)
 					color #bf4633
 
 	&[data-is-selected]
-		background $theme-color
+		background var(--primary)
 
 		&, *
 			color #fff !important
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index ff7260edb5..cff830d998 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -93,7 +93,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-follow-button
 	display block
@@ -105,29 +105,29 @@ export default Vue.extend({
 	line-height 36px
 	font-size 14px
 	font-weight bold
-	color $theme-color
+	color var(--primary)
 	background transparent
 	outline none
-	border solid 1px $theme-color
+	border solid 1px var(--primary)
 	border-radius 36px
 
 	&:hover
-		background rgba($theme-color, 0.1)
+		background var(--primaryAlpha01)
 
 	&:active
-		background rgba($theme-color, 0.2)
+		background var(--primaryAlpha02)
 
 	&.active
-		color $theme-color-foreground
-		background $theme-color
+		color var(--primaryForeground)
+		background var(--primary)
 
 		&:hover
-			background lighten($theme-color, 10%)
-			border-color lighten($theme-color, 10%)
+			background var(--primaryLighten10)
+			border-color var(--primaryLighten10)
 
 		&:active
-			background darken($theme-color, 10%)
-			border-color darken($theme-color, 10%)
+			background var(--primaryDarken10)
+			border-color var(--primaryDarken10)
 
 	&.wait
 		cursor wait !important
diff --git a/src/client/app/mobile/views/components/mute-button.vue b/src/client/app/mobile/views/components/mute-button.vue
index 3cb568615d..316fbda8f1 100644
--- a/src/client/app/mobile/views/components/mute-button.vue
+++ b/src/client/app/mobile/views/components/mute-button.vue
@@ -41,11 +41,11 @@ export default Vue.extend({
 
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-mute-button
   display block
-  user-select none 
+  user-select none
   cursor pointer
   padding 0 16px
   margin 0
@@ -53,27 +53,27 @@ export default Vue.extend({
   line-height 36px
   font-size 14px
   font-weight bold
-  color $theme-color
+  color var(--primary)
   background transparent
   outline none
-  border solid 1px $theme-color
+  border solid 1px var(--primary)
   border-radius 36px
 
   &:hover
-    background rgba($theme-color, 0.1)
+    background var(--primaryAlpha01)
 
   &:active
-    background rgba($theme-color, 0.2)
+    background var(--primaryAlpha02)
 
   &.active
-    color $theme-color-foreground
-    background $theme-color
+    color var(--primaryForeground)
+    background var(--primary)
 
     &:hover
-      background lighten($theme-color, 10%)
-      border-color lighten($theme-color, 10%)
+      background var(--primaryLighten10)
+      border-color var(--primaryLighten10)
     &:active
-      background darken($theme-color, 10%)
-      border-color darken($theme-color, 10%)
+      background var(--primaryDarken10)
+      border-color var(--primaryDarken10)
 
 </style>
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 68be9f8ac4..6daf375ed2 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,7 +223,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	overflow hidden
@@ -422,7 +422,7 @@ root(isDark)
 					color #999
 
 				&.reacted
-					color $theme-color
+					color var(--primary)
 
 	> .replies
 		> *
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 0ce72cab11..2bfd8f8acc 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -228,7 +228,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	font-size 12px
@@ -395,8 +395,8 @@ root(isDark)
 							padding 0 4px
 							margin-left 4px
 							font-size 80%
-							color $theme-color-foreground
-							background $theme-color
+							color var(--primaryForeground)
+							background var(--primary)
 							border-radius 4px
 
 					.mk-url-preview
@@ -457,7 +457,7 @@ root(isDark)
 						color #999
 
 					&.reacted
-						color $theme-color
+						color var(--primary)
 
 .note[data-darkmode]
 	root(true)
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 401df3ae5b..83674a33dc 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -217,7 +217,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	overflow hidden
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 1294273a2a..742163696e 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -324,7 +324,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	max-width 500px
@@ -376,8 +376,8 @@ root(isDark)
 					padding 0 16px
 					line-height 34px
 					vertical-align bottom
-					color $theme-color-foreground
-					background $theme-color
+					color var(--primaryForeground)
+					background var(--primary)
 					border-radius 4px
 
 					&:disabled
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 15c8299c2e..b859c22887 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -118,7 +118,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$height = 48px
@@ -134,7 +134,7 @@ root(isDark)
 
 	> .indicator
 		height 3px
-		background $theme-color
+		background var(--primary)
 
 	> .warn
 		display block
@@ -216,7 +216,7 @@ root(isDark)
 				left 8px
 				pointer-events none
 				font-size 10px
-				color $theme-color
+				color var(--primary)
 
 			> button:last-child
 				display block
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index c3ae05fef6..29dcf18021 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -121,7 +121,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$color = isDark ? #c9d2e0 : #777
@@ -198,11 +198,11 @@ root(isDark)
 				text-decoration none
 
 				&[data-active]
-					color $theme-color-foreground
-					background $theme-color
+					color var(--primaryForeground)
+					background var(--primary)
 
 					> [data-fa]:last-child
-						color $theme-color-foreground
+						color var(--primaryForeground)
 
 				> [data-fa]:first-child
 					margin-right 0.5em
@@ -212,7 +212,7 @@ root(isDark)
 				> [data-fa].circle
 					margin-left 6px
 					font-size 10px
-					color $theme-color
+					color var(--primary)
 
 				> [data-fa]:last-child
 					position absolute
diff --git a/src/client/app/mobile/views/components/users-list.vue b/src/client/app/mobile/views/components/users-list.vue
index a57b821293..f06f5245b8 100644
--- a/src/client/app/mobile/views/components/users-list.vue
+++ b/src/client/app/mobile/views/components/users-list.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 .mk-users-list
 
@@ -87,8 +87,8 @@ export default Vue.extend({
 
 			&[data-active]
 				font-weight bold
-				color $theme-color
-				border-color $theme-color
+				color var(--primary)
+				border-color var(--primary)
 
 			> span
 				display inline-block
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index 53512e804c..a25f70147b 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index ca62d4e2f8..c2ab5d5623 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -154,7 +154,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	> .nav
@@ -215,8 +215,8 @@ root(isDark)
 					color isDark ? #cdd0d8 : #666
 
 					&[data-active]
-						color $theme-color-foreground
-						background $theme-color
+						color var(--primaryForeground)
+						background var(--primary)
 
 					&:not([data-active]):hover
 						background isDark ? #353e4a : #eee
@@ -224,7 +224,7 @@ root(isDark)
 					> .badge
 						margin-left 6px
 						font-size 10px
-						color $theme-color
+						color var(--primary)
 
 	> .tl
 		max-width 680px
@@ -246,7 +246,7 @@ main:not([data-darkmode])
 </style>
 
 <style lang="stylus" module>
-@import '~const.styl'
+
 
 .title
 	i
@@ -255,7 +255,7 @@ main:not([data-darkmode])
 .badge
 	margin-left 6px
 	font-size 10px
-	color $theme-color
+	color var(--primary)
 	vertical-align middle
 
 </style>
diff --git a/src/client/app/mobile/views/pages/notifications.vue b/src/client/app/mobile/views/pages/notifications.vue
index bddcd457bb..ce33332faf 100644
--- a/src/client/app/mobile/views/pages/notifications.vue
+++ b/src/client/app/mobile/views/pages/notifications.vue
@@ -34,7 +34,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
index 77938c3d60..c2b2606fd8 100644
--- a/src/client/app/mobile/views/pages/received-follow-requests.vue
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -52,7 +52,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/user-list.vue b/src/client/app/mobile/views/pages/user-list.vue
index 1c6a829cd5..f8c8aafa61 100644
--- a/src/client/app/mobile/views/pages/user-list.vue
+++ b/src/client/app/mobile/views/pages/user-list.vue
@@ -53,7 +53,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/user-lists.vue b/src/client/app/mobile/views/pages/user-lists.vue
index 5ee0636dea..fc80f5d1c6 100644
--- a/src/client/app/mobile/views/pages/user-lists.vue
+++ b/src/client/app/mobile/views/pages/user-lists.vue
@@ -51,7 +51,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 main
 	width 100%
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index c1082f31a9..1ff81fc0c6 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -115,7 +115,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-@import '~const.styl'
+
 
 root(isDark)
 	$bg = isDark ? #22252f : #f7f7f7
@@ -275,8 +275,8 @@ root(isDark)
 
 				&[data-active]
 					font-weight bold
-					color $theme-color
-					border-color $theme-color
+					color var(--primary)
+					border-color var(--primary)
 
 	> .body
 		max-width 680px
diff --git a/src/client/const.styl b/src/client/const.styl
deleted file mode 100644
index b6560701d9..0000000000
--- a/src/client/const.styl
+++ /dev/null
@@ -1,4 +0,0 @@
-json('../const.json')
-
-$theme-color = themeColor
-$theme-color-foreground = themeColorForeground
diff --git a/src/client/style.styl b/src/client/style.styl
index 6d1e53e5a6..111e167204 100644
--- a/src/client/style.styl
+++ b/src/client/style.styl
@@ -1,10 +1,8 @@
 @charset 'utf-8'
 
-@import "./const"
-
 /*
 	::selection
-		background $theme-color
+		background var(--primary)
 		color #fff
 */
 
@@ -24,10 +22,8 @@ html, body
 
 a
 	text-decoration none
-	color $theme-color
+	color var(--primary)
 	cursor pointer
-	tap-highlight-color rgba($theme-color, 0.7) !important
-	-webkit-tap-highlight-color rgba($theme-color, 0.7) !important
 
 	&:hover
 		text-decoration underline
@@ -35,3 +31,9 @@ a
 	*
 		cursor pointer
 
+@css {
+	a {
+		tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
+		-webkit-tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
+	}
+}
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 4ea0a1a649..ffe0ffa3ce 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -3,6 +3,7 @@
 		"name": "Dark"
 	},
 	"primary": "#fb4e4e",
+	"primaryForeground": "#fff",
 	"bg": "#191B22",
 	"scrollbarTrack": "#282C37",
 	"scrollbarHandle": "#454954",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 00a74a53c5..f4d061e5ce 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -3,6 +3,7 @@
 		"name": "Light"
 	},
 	"primary": "#fb4e4e",
+	"primaryForeground": "#fff",
 	"bg": "#f7f7f7",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
-- 
cgit v1.2.3-freya


From f5f2215b47ce4590788dce2af1c8e4e586548e77 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 20:28:13 +0900
Subject: wip

---
 src/client/app/common/views/components/autocomplete.vue               | 2 +-
 .../app/common/views/components/games/reversi/reversi.index.vue       | 4 ++--
 src/client/app/common/views/components/games/reversi/reversi.room.vue | 4 ++--
 src/client/app/common/views/components/messaging-room.vue             | 2 +-
 src/client/app/common/views/components/messaging.vue                  | 2 +-
 src/client/app/common/views/components/ui/card.vue                    | 2 +-
 src/client/app/common/views/components/welcome-timeline.vue           | 2 +-
 src/client/app/common/views/pages/follow.vue                          | 2 +-
 src/client/app/common/views/widgets/donation.vue                      | 2 +-
 src/client/app/common/views/widgets/memo.vue                          | 2 +-
 src/client/app/common/views/widgets/nav.vue                           | 2 +-
 src/client/app/desktop/views/components/calendar.vue                  | 2 +-
 src/client/app/desktop/views/components/context-menu.vue              | 2 +-
 src/client/app/desktop/views/components/drive.vue                     | 2 +-
 src/client/app/desktop/views/components/note-detail.vue               | 2 +-
 src/client/app/desktop/views/components/notes.note.vue                | 2 +-
 src/client/app/desktop/views/components/notes.vue                     | 2 +-
 src/client/app/desktop/views/components/timeline.vue                  | 4 ++--
 src/client/app/desktop/views/components/ui-notification.vue           | 2 +-
 src/client/app/desktop/views/components/ui.header.account.vue         | 2 +-
 src/client/app/desktop/views/components/ui.header.notifications.vue   | 2 +-
 src/client/app/desktop/views/components/user-preview.vue              | 4 ++--
 src/client/app/desktop/views/components/widget-container.vue          | 4 ++--
 src/client/app/desktop/views/components/window.vue                    | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.column.vue               | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.notes.vue                | 2 +-
 src/client/app/desktop/views/pages/user/user.followers-you-know.vue   | 2 +-
 src/client/app/desktop/views/pages/user/user.friends.vue              | 2 +-
 src/client/app/desktop/views/pages/user/user.header.vue               | 2 +-
 src/client/app/desktop/views/pages/user/user.photos.vue               | 2 +-
 src/client/app/desktop/views/pages/user/user.profile.vue              | 2 +-
 src/client/app/desktop/views/pages/user/user.timeline.vue             | 4 ++--
 src/client/app/desktop/views/pages/welcome.vue                        | 4 ++--
 src/client/app/desktop/views/widgets/profile.vue                      | 2 +-
 src/client/app/mobile/views/components/drive-file-chooser.vue         | 2 +-
 src/client/app/mobile/views/components/drive.vue                      | 4 ++--
 src/client/app/mobile/views/components/note-card.vue                  | 2 +-
 src/client/app/mobile/views/components/note-detail.vue                | 2 +-
 src/client/app/mobile/views/components/notes.vue                      | 2 +-
 src/client/app/mobile/views/components/post-form.vue                  | 2 +-
 src/client/app/mobile/views/components/widget-container.vue           | 2 +-
 src/client/app/mobile/views/pages/user/home.vue                       | 2 +-
 src/client/theme/dark.json                                            | 4 +++-
 src/client/theme/light.json                                           | 4 +++-
 44 files changed, 58 insertions(+), 54 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index 99a87520a4..bba6f4f7b2 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -267,7 +267,7 @@ root(isDark)
 	max-width 100%
 	margin-top calc(1em + 8px)
 	overflow hidden
-	background isDark ? #313543 : #fff
+	background var(--faceHeader)
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
 	transition top 0.1s ease, left 0.1s ease
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index f6c7f0e3c2..44a1262636 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -190,7 +190,7 @@ root(isDark)
 		margin 8px 0
 		padding 8px
 		color isDark ? #fff : #677f84
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
@@ -222,7 +222,7 @@ root(isDark)
 		margin 8px 0
 		padding 8px
 		color isDark ? #fff : #677f84
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
 		border-radius 6px
 		cursor pointer
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index d4b91ae7a7..072f3eda12 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -273,7 +273,7 @@ root(isDark)
 					> select
 						width 100%
 						padding 12px 14px
-						background isDark ? #282C37 : #fff
+						background var(--face)
 						border 1px solid isDark ? #6a707d : #dcdfe6
 						border-radius 4px
 						color isDark ? #fff : #606266
@@ -331,7 +331,7 @@ root(isDark)
 		.card
 			max-width 400px
 			border-radius 4px
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			color isDark ? #fff : #303133
 			box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
 
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 5bdf8b9034..52abfa4e1d 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -369,7 +369,7 @@ root(isDark)
 		max-width 600px
 		margin 0 auto
 		padding 0
-		background rgba(isDark ? #282c37 : #fff, 0.95)
+		//background rgba(var(--face), 0.95)
 		background-clip content-box
 
 		> .new-message
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 7181ddd01c..a984c980b1 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -329,7 +329,7 @@ root(isDark)
 		> a
 			display block
 			text-decoration none
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-bottom solid 1px isDark ? #1c2023 : #eee
 
 			*
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index a9e0493810..be24027f6c 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
 root(isDark)
 	margin 16px
 	color isDark ? #fff : #000
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> header
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 965ec78559..938ab602f0 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 	transform translateY(-30px)
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 
 	> div
 		> *
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index d81e4c0820..5e2d448d8b 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -116,7 +116,7 @@ root(isDark)
 	text-align center
 	color isDark ? #9baec8 : #868c8c
 
-	$bg = isDark ? #282C37 : #fff
+	$bg = var(--face)
 
 	@media (max-width 400px)
 		padding 16px
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index 544ca1bd9d..a91aa8e749 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -31,7 +31,7 @@ export default define({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border solid 1px isDark ? #c3831c : #ead8bb
 	border-radius 6px
 
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 079522d39b..42df683883 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -70,7 +70,7 @@ root(isDark)
 			min-width 100%
 			padding 16px
 			color isDark ? #fff : #222
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border none
 			border-bottom solid 1px isDark ? #1c2023 : #eee
 			border-radius 0
diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue
index 0cbf7c158e..04dfe97c72 100644
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@@ -21,7 +21,7 @@ root(isDark)
 		padding 16px
 		font-size 12px
 		color isDark ? #9aa4b3 : #aaa
-		background isDark ? #282c37 : #fff
+		background var(--face)
 
 		a
 			color isDark ? #9aa4b3 : #999
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 2414ced0c9..cd73ab350b 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -132,7 +132,7 @@ export default Vue.extend({
 
 root(isDark)
 	color isDark ? #c5ced6 : #777
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
diff --git a/src/client/app/desktop/views/components/context-menu.vue b/src/client/app/desktop/views/components/context-menu.vue
index 49aeac143f..170dcf55a1 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -82,7 +82,7 @@ root(isDark)
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(#000, 0.2)
 	opacity 0
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index ccfdb3159f..a1748963aa 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -596,7 +596,7 @@ root(isDark)
 		overflow auto
 		font-size 0.9em
 		color isDark ? #d2d9dc : #555
-		background isDark ? #282c37 : #fff
+		background var(--face)
 		box-shadow 0 1px 0 rgba(#000, 0.05)
 
 		&, *
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index f004ca88ee..35eb6ac45d 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -230,7 +230,7 @@ export default Vue.extend({
 root(isDark)
 	overflow hidden
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index a91212221b..13a8641170 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -322,7 +322,7 @@ export default Vue.extend({
 root(isDark)
 	margin 0
 	padding 0
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
 	&[data-round]
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 2e3ffd171b..0bd45b1c21 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -260,7 +260,7 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 32ed89ef0b..7800eae52d 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -178,7 +178,7 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
@@ -186,7 +186,7 @@ root(isDark)
 	> header
 		padding 0 8px
 		z-index 10
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> .buttons
diff --git a/src/client/app/desktop/views/components/ui-notification.vue b/src/client/app/desktop/views/components/ui-notification.vue
index 7519124870..883a880e5d 100644
--- a/src/client/app/desktop/views/components/ui-notification.vue
+++ b/src/client/app/desktop/views/components/ui-notification.vue
@@ -47,7 +47,7 @@ root(isDark)
 	padding 128px 0 0 0
 	width 500px
 	color rgba(isDark ? #fff : #000, 0.6)
-	background rgba(isDark ? #282C37 : #fff, 0.9)
+	//background rgba(var(--face), 0.9)
 	border-radius 0 0 8px 8px
 	box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
 	transform translateY(-64px)
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 301efeb3e2..c728fa42be 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -177,7 +177,7 @@ root(isDark)
 			transition filter 100ms ease
 
 	> .menu
-		$bgcolor = isDark ? #282c37 : #fff
+		$bgcolor = var(--face)
 		display block
 		position absolute
 		top 56px
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 f9b68fa0e9..2a38655f3a 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -96,7 +96,7 @@ root(isDark)
 			color var(--primary)
 
 	> .pop
-		$bgcolor = isDark ? #282c37 : #fff
+		$bgcolor = var(--face)
 		display block
 		position absolute
 		top 56px
diff --git a/src/client/app/desktop/views/components/user-preview.vue b/src/client/app/desktop/views/components/user-preview.vue
index f988bb21e9..01b6cdbdc5 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -90,7 +90,7 @@ root(isDark)
 	z-index 2048
 	margin-top -8px
 	width 250px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	background-clip content-box
 	border solid 1px rgba(#000, 0.1)
 	border-radius 4px
@@ -111,7 +111,7 @@ root(isDark)
 		z-index 2
 		width 58px
 		height 58px
-		border solid 3px isDark ? #282c37 : #fff
+		border solid 3px var(--face)
 		border-radius 8px
 
 	> .title
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index fbf7691cd3..d17b9c91d8 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -35,7 +35,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
@@ -45,7 +45,7 @@ root(isDark)
 		box-shadow none !important
 
 	> header
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 
 		> .title
 			z-index 1
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 2b01c24ca8..15aa158073 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -562,7 +562,7 @@ root(isDark)
 		> .body
 			height 100%
 			overflow hidden
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-radius 6px
 
 			if isDark
@@ -578,7 +578,7 @@ root(isDark)
 				overflow hidden
 				white-space nowrap
 				cursor move
-				background isDark ? #313543 : #fff
+				background var(--faceHeader)
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 10454b1cc6..1cf8900ee5 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -277,7 +277,7 @@ root(isDark)
 	width 330px
 	min-width 330px
 	height 100%
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 6px
 	//box-shadow 0 2px 16px rgba(#000, 0.1)
 	overflow hidden
@@ -318,7 +318,7 @@ root(isDark)
 		padding 0 16px
 		font-size 14px
 		color isDark ? #e3e5e8 : #888
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.15)
 		cursor pointer
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 58f13dd57b..1217e0d4da 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -232,7 +232,7 @@ root(isDark)
 			width 100%
 			text-align center
 			color #ccc
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			border-top solid 1px isDark ? #1c2023 : #eaeaea
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
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 0965d801c9..212e21a7a9 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
@@ -37,7 +37,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
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 de37dc95c9..0a329b3d8e 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -41,7 +41,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
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 30dc74212d..ec46e955b5 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -103,7 +103,7 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
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 591edfd829..99e064446d 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 	overflow hidden
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 1ea242270a..e5ea8d1cc9 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -86,7 +86,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
 
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 3cde6cc10c..fe3ca9154b 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -115,14 +115,14 @@ export default Vue.extend({
 
 
 root(isDark)
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius var(--round)
 	overflow hidden
 
 	> header
 		padding 0 8px
 		z-index 10
-		background isDark ? #313543 : #fff
+		background var(--faceHeader)
 		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
 
 		> span
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 05c32a7bd1..405fcb76d0 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -355,7 +355,7 @@ root(isDark)
 
 		.block
 			color isDark ? #fff : #444
-			background isDark ? #282C37 : #fff
+			background var(--face)
 			box-shadow var(--shadow)
 			//border-radius 8px
 			overflow auto
@@ -364,7 +364,7 @@ root(isDark)
 				z-index 1
 				padding 0 16px
 				line-height 48px
-				background isDark ? #313543 : #fff
+				background var(--faceHeader)
 
 				if !isDark
 					box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 04ef18c8e3..aea0c90e34 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -100,7 +100,7 @@ root(isDark)
 		left 16px
 		width 58px
 		height 58px
-		border solid 3px isDark ? #282c37 : #fff
+		border solid 3px var(--face)
 		border-radius 8px
 		cursor pointer
 
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 92ac211af2..6d3fc2343a 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -59,7 +59,7 @@ root(isDark)
 	> .body
 		width 100%
 		height 100%
-		background isDark ? #282c37 : #fff
+		background var(--face)
 
 		> header
 			border-bottom solid 1px isDark ? #1b1f29 : #eee
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 36a6ea2f40..76d6c2737d 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -474,7 +474,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
-	background isDark ? #282c37 : #fff
+	background var(--face)
 
 	> nav
 		display block
@@ -490,7 +490,7 @@ root(isDark)
 		color rgba(isDark ? #fff : #000, 0.67)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		background-color rgba(isDark ? #313543 : #fff, 0.75)
+		//background-color rgba(var(--faceHeader), 0.75)
 		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index e8427798cd..e30e6c1c8f 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -32,7 +32,7 @@ root(isDark)
 	width 150px
 	//height 120px
 	font-size 12px
-	background isDark ? #282c37 : #fff
+	background var(--face)
 	border-radius 4px
 
 	> a
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 6daf375ed2..f0a91e82d4 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -229,7 +229,7 @@ root(isDark)
 	overflow hidden
 	width 100%
 	text-align left
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 83674a33dc..539141954b 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -221,7 +221,7 @@ export default Vue.extend({
 
 root(isDark)
 	overflow hidden
-	background isDark ? #282C37 : #fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 742163696e..6ada5e60ee 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -342,7 +342,7 @@ root(isDark)
 		margin 32px auto
 
 	> .form
-		background isDark ? #282C37 : #fff
+		background var(--face)
 		border-radius 8px
 		box-shadow 0 0 2px rgba(#000, 0.1)
 
diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index a713a10621..bf7adf5fcb 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@@ -45,7 +45,7 @@ root(isDark)
 			font-size 15px
 			font-weight normal
 			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-radius 8px 8px 0 0
 
 			> [data-fa]
diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index 4118afef19..d19ccfd522 100644
--- a/src/client/app/mobile/views/pages/user/home.vue
+++ b/src/client/app/mobile/views/pages/user/home.vue
@@ -81,7 +81,7 @@ root(isDark)
 			font-size 15px
 			font-weight normal
 			color isDark ? #b8c5cc : #465258
-			background isDark ? #282c37 : #fff
+			background var(--face)
 			border-radius 8px 8px 0 0
 
 			@media (min-width 500px)
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index ffe0ffa3ce..fca316c5bc 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -7,5 +7,7 @@
 	"bg": "#191B22",
 	"scrollbarTrack": "#282C37",
 	"scrollbarHandle": "#454954",
-	"scrollbarHandleHover": "#535660"
+	"scrollbarHandleHover": "#535660",
+	"face": "#282c37",
+	"faceHeader": "#313543"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f4d061e5ce..b091d87389 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -7,5 +7,7 @@
 	"bg": "#f7f7f7",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
-	"scrollbarHandleHover": "#00000066"
+	"scrollbarHandleHover": "#00000066",
+	"face": "#fff",
+	"faceHeader": "#fff"
 }
-- 
cgit v1.2.3-freya


From 297019c22c06de45d66a68cc855227c5def56f1c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 20:38:16 +0900
Subject: example commit

---
 src/client/app/mobile/views/pages/settings.vue | 4 ++--
 src/client/theme/dark.json                     | 4 +++-
 src/client/theme/light.json                    | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 9e90416370..9849c82490 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -331,8 +331,8 @@ root(isDark)
 		margin 16px
 		padding 16px
 		text-align center
-		color isDark ? #49ab63 : #2c662d
-		background isDark ? #273c34 : #fcfff5
+		color var(--mobileSignedInAsFg)
+		background var(--mobileSignedInAsBg)
 		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> .signout
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index fca316c5bc..f94f3d7f9c 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -9,5 +9,7 @@
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
-	"faceHeader": "#313543"
+	"faceHeader": "#313543",
+	"mobileSignedInAsBg": "#273c34",
+	"mobileSignedInAsFg": "#49ab63"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index b091d87389..4a3db8a308 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -9,5 +9,7 @@
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
-	"faceHeader": "#fff"
+	"faceHeader": "#fff",
+	"mobileSignedInAsBg": "#fcfff5",
+	"mobileSignedInAsFg": "#2c662d"
 }
-- 
cgit v1.2.3-freya


From 77b441f14c9823cf8caac7eb5f0146435fea06b3 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Wed, 26 Sep 2018 20:39:59 +0900
Subject: リプライで元の公開範囲を引き継ぐ (#2775)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ホーム/フォロワー限定へのリプライは公開範囲を引き継ぐように

* ダイレクトへのリプライはダイレクトでリプライ先ユーザーを初期設定するように

* 非公開へのリプライでも元の公開範囲を引き継ぐ
---
 src/client/app/desktop/views/components/post-form.vue | 12 ++++++++++++
 src/client/app/mobile/views/components/post-form.vue  | 12 ++++++++++++
 2 files changed, 24 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 8db85aeaca..7bf76e4829 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -178,6 +178,18 @@ export default Vue.extend({
 			});
 		}
 
+		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
+		if (this.reply && ['home', 'followers', 'specified', 'private'].includes(this.reply.visibility)) {
+			this.visibility = this.reply.visibility;
+		}
+
+		// ダイレクトへのリプライはリプライ先ユーザーを初期設定
+		if (this.reply && this.reply.visibility === 'specified') {
+			(this as any).api('users/show', {	userId: this.reply.userId }).then(user => {
+				this.visibleUsers.push(user);
+			});
+		}
+
 		this.$nextTick(() => {
 			// 書きかけの投稿を復元
 			if (!this.instant) {
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 1294273a2a..72ec142572 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -173,6 +173,18 @@ export default Vue.extend({
 			});
 		}
 
+		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
+		if (this.reply && ['home', 'followers', 'specified', 'private'].includes(this.reply.visibility)) {
+			this.visibility = this.reply.visibility;
+		}
+
+		// ダイレクトへのリプライはリプライ先ユーザーを初期設定
+		if (this.reply && this.reply.visibility === 'specified') {
+			(this as any).api('users/show', {	userId: this.reply.userId }).then(user => {
+				this.visibleUsers.push(user);
+			});
+		}
+
 		this.focus();
 
 		this.$nextTick(() => {
-- 
cgit v1.2.3-freya


From b6e33e93dea72844e0efb2a66d0f8faada12ac6c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 26 Sep 2018 20:47:11 +0900
Subject: wip

---
 src/client/app/mobile/views/pages/settings.vue | 4 ++--
 src/client/theme/dark.json                     | 4 +++-
 src/client/theme/light.json                    | 4 +++-
 3 files changed, 8 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 9849c82490..0a44a592e1 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -339,8 +339,8 @@ root(isDark)
 		margin 16px
 		padding 16px
 		text-align center
-		color isDark ? #ff5f56 : #cc2727
-		background isDark ? #652222 : #fff6f5
+		color var(--mobileSignedInAsFg)
+		background var(--mobileSignedInAsBg)
 		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> footer
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index f94f3d7f9c..5d0272a375 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -11,5 +11,7 @@
 	"face": "#282c37",
 	"faceHeader": "#313543",
 	"mobileSignedInAsBg": "#273c34",
-	"mobileSignedInAsFg": "#49ab63"
+	"mobileSignedInAsFg": "#49ab63",
+	"mobileSignoutBg": "#652222",
+	"mobileSignoutFg": "#ff5f56"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4a3db8a308..4cba3be499 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -11,5 +11,7 @@
 	"face": "#fff",
 	"faceHeader": "#fff",
 	"mobileSignedInAsBg": "#fcfff5",
-	"mobileSignedInAsFg": "#2c662d"
+	"mobileSignedInAsFg": "#2c662d",
+	"mobileSignoutBg": "#fff6f5",
+	"mobileSignoutFg": "#cc2727"
 }
-- 
cgit v1.2.3-freya


From 3cbdfcb43d4b4435d9ecd50657607979317d2749 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 00:54:37 +0900
Subject: wip

---
 src/client/app/common/views/components/note-header.vue         | 2 +-
 src/client/app/desktop/views/components/notes.note.vue         | 2 +-
 src/client/app/desktop/views/components/notes.vue              | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.note.vue          | 2 +-
 src/client/app/desktop/views/pages/deck/deck.notes.vue         | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.notifications.vue | 4 ++--
 src/client/app/mobile/views/components/note.vue                | 2 +-
 src/client/app/mobile/views/components/notes.vue               | 4 ++--
 src/client/app/mobile/views/components/notifications.vue       | 4 ++--
 src/client/theme/dark.json                                     | 1 +
 src/client/theme/light.json                                    | 1 +
 11 files changed, 16 insertions(+), 14 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
index f4a2f00876..48dfae5f84 100644
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -110,7 +110,7 @@ root(isDark)
 		> .app
 			margin-right 8px
 			padding-right 8px
-			border-right solid 1px isDark ? #1c2023 : #eaeaea
+			border-right solid 1px var(--faceDivider)
 
 		> .visibility
 			margin-left 8px
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 13a8641170..4f2b0241e8 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -323,7 +323,7 @@ root(isDark)
 	margin 0
 	padding 0
 	background var(--face)
-	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	border-bottom solid 1px var(--faceDivider)
 
 	&[data-round]
 		&:first-child
diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 0bd45b1c21..d0148eef58 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -237,7 +237,7 @@ root(isDark)
 			text-align center
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -261,7 +261,7 @@ root(isDark)
 			text-align center
 			color #ccc
 			background var(--face)
-			border-top solid 1px isDark ? #1c2023 : #eaeaea
+			border-top solid 1px var(--faceDivider)
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 82e816cc8c..04ddcd488d 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -228,7 +228,7 @@ mediaRoot(isDark)
 
 root(isDark)
 	font-size 13px
-	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	border-bottom solid 1px var(--faceDivider)
 
 	&:last-of-type
 		border-bottom none
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 1217e0d4da..214ec3cdf7 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -216,7 +216,7 @@ root(isDark)
 			text-align center
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -233,7 +233,7 @@ root(isDark)
 			text-align center
 			color #ccc
 			background var(--face)
-			border-top solid 1px isDark ? #1c2023 : #eaeaea
+			border-top solid 1px var(--faceDivider)
 			border-bottom-left-radius 6px
 			border-bottom-right-radius 6px
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index f73f221b7b..8a28061260 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -169,7 +169,7 @@ root(isDark)
 	> .notifications
 
 		> .notification:not(:last-child)
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 		> .date
 			display block
@@ -179,7 +179,7 @@ root(isDark)
 			font-size 0.8em
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 2bfd8f8acc..a8b733fae7 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -232,7 +232,7 @@ export default Vue.extend({
 
 root(isDark)
 	font-size 12px
-	border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+	border-bottom solid 1px var(--faceDivider)
 
 	&:last-of-type
 		border-bottom none
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 539141954b..8841b0e6bf 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -245,7 +245,7 @@ root(isDark)
 			font-size 0.9em
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
@@ -276,7 +276,7 @@ root(isDark)
 
 	> footer
 		text-align center
-		border-top solid 1px isDark ? #1c2023 : #eaeaea
+		border-top solid 1px var(--faceDivider)
 
 		&:empty
 			display none
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 11ac23f4b1..8243a9bfb3 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -126,7 +126,7 @@ root(isDark)
 	> .notifications
 
 		> .mk-notification:not(:last-child)
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 		> .date
 			display block
@@ -136,7 +136,7 @@ root(isDark)
 			font-size 0.8em
 			color isDark ? #666b79 : #aaa
 			background isDark ? #242731 : #fdfdfd
-			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
+			border-bottom solid 1px var(--faceDivider)
 
 			span
 				margin 0 16px
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 5d0272a375..cf9306558b 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -10,6 +10,7 @@
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
 	"faceHeader": "#313543",
+	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4cba3be499..64ebd8e293 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -10,6 +10,7 @@
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
 	"faceHeader": "#fff",
+	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-- 
cgit v1.2.3-freya


From 0a64f638c64ff41075ec95d0305a196c7366a55a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 01:32:04 +0900
Subject: wip

---
 src/client/app/app.vue                              |  8 +++++++-
 src/client/app/common/scripts/theme.ts              | 21 +++++++++++++++++++--
 src/client/app/common/views/components/menu.vue     | 18 +++++-------------
 .../app/common/views/components/reaction-picker.vue | 20 ++++++--------------
 .../common/views/components/visibility-chooser.vue  |  2 +-
 src/client/app/desktop/views/components/home.vue    |  2 +-
 .../app/desktop/views/components/ui.header.vue      |  2 +-
 src/client/theme/dark.json                          | 10 ++++++++--
 src/client/theme/halloween.json                     | 17 +++++++++++++++++
 src/client/theme/light.json                         |  6 ++++++
 10 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 src/client/theme/halloween.json

(limited to 'src/client')

diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index bb8377c237..9b6af27ece 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -7,13 +7,15 @@ import Vue from 'vue';
 import { url, lang } from './config';
 import applyTheme from './common/scripts/theme';
 const darkTheme = require('../theme/dark');
+const halloweenTheme = require('../theme/halloween');
 
 export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
 				'h|slash': this.help,
-				'd': this.dark
+				'd': this.dark,
+				'x': this.test
 			};
 		}
 	},
@@ -25,6 +27,10 @@ export default Vue.extend({
 
 		dark() {
 			applyTheme(darkTheme);
+		},
+
+		test() {
+			applyTheme(halloweenTheme);
 		}
 	}
 });
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index 2cad547c01..a08028ff9a 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -1,6 +1,23 @@
 import * as tinycolor from 'tinycolor2';
+const lightTheme = require('../../../theme/light');
+const darkTheme = require('../../../theme/dark');
+
+type Theme = {
+	meta: {
+		id: string;
+		name: string;
+		inherit: string;
+	};
+} & {
+	[key: string]: string;
+};
+
+export default function(theme: Theme) {
+	if (theme.meta.inherit) {
+		const inherit = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.inherit);
+		theme = Object.assign({}, inherit, theme);
+	}
 
-export default function(theme: { [key: string]: string }) {
 	const props = compile(theme);
 
 	Object.entries(props).forEach(([k, v]) => {
@@ -11,7 +28,7 @@ export default function(theme: { [key: string]: string }) {
 	localStorage.setItem('theme', JSON.stringify(props));
 }
 
-function compile(theme: { [key: string]: string }): { [key: string]: string } {
+function compile(theme: Theme): { [key: string]: string } {
 	function getColor(code: string): tinycolor.Instance {
 		// ref
 		if (code[0] == '@') {
diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index 3b9f07d1ee..be2c03f54c 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -117,10 +117,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	$bg-color = isDark ? #2c303c : #fff
+.onchrpzrvnoruiaenfcqvccjfuupzzwv
+	$bg-color = var(--popupBg)
 	$border-color = rgba(27, 31, 35, 0.15)
 
 	position initial
@@ -132,7 +130,7 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background rgba(#000, isDark ? 0.5 : 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 
 	> .popover
@@ -179,7 +177,7 @@ root(isDark)
 			display block
 			padding 8px 16px
 			width 100%
-			color isDark ? #d6dce2 : #111
+			color var(--popupFg)
 
 			&:hover
 				color var(--primaryForeground)
@@ -193,12 +191,6 @@ root(isDark)
 		> div
 			margin 8px 0
 			height 1px
-			background isDark ? #1c2023 : #eee
-
-.onchrpzrvnoruiaenfcqvccjfuupzzwv[data-darkmode]
-	root(true)
-
-.onchrpzrvnoruiaenfcqvccjfuupzzwv:not([data-darkmode])
-	root(false)
+			background var(--faceDivider)
 
 </style>
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index a86850ac7c..13e8cf1f07 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -210,11 +210,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 $border-color = rgba(27, 31, 35, 0.15)
 
-root(isDark)
+.mk-reaction-picker
 	position initial
 
 	> .backdrop
@@ -224,11 +222,11 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 
 	> .popover
-		$bgcolor = isDark ? #2c303c : #fff
+		$bgcolor = var(--popupBg)
 		position absolute
 		z-index 10001
 		background $bgcolor
@@ -281,8 +279,8 @@ root(isDark)
 			margin 0
 			padding 8px 10px
 			font-size 14px
-			color isDark ? #d6dce2 : #586069
-			border-bottom solid 1px isDark ? #1c2023 : #e1e4e8
+			color var(--popupFg)
+			border-bottom solid 1px var(--faceDivider)
 
 		> div
 			padding 4px
@@ -312,16 +310,10 @@ root(isDark)
 				border-radius 2px
 
 				&:hover
-					background isDark ? #252731 : #eee
+					background var(--reactionPickerButtonHoverBg)
 
 				&:active
 					background var(--primary)
 					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/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index d0a892fd56..5faf09fa11 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -145,7 +145,7 @@ root(isDark)
 		opacity 0
 
 	> .popover
-		$bgcolor = isDark ? #2c303c : #fff
+		$bgcolor = var(--popupBg)
 		position absolute
 		z-index 10001
 		width 240px
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 3d77da52d9..a07af02ea6 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -280,7 +280,7 @@ root(isDark)
 		width 100%
 		height 48px
 		color isDark ? #fff : #000
-		background isDark ? #313543 : #f7f7f7
+		background var(--desktopHeaderBg)
 		box-shadow 0 1px 1px rgba(#000, 0.075)
 
 		> a
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index bec0ee37ad..264da8bef8 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -151,7 +151,7 @@ root(isDark)
 			z-index 1000
 			width 100%
 			height 48px
-			background isDark ? #313543 : #f7f7f7
+			background var(--desktopHeaderBg)
 
 		> .main
 			z-index 1001
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index cf9306558b..18b674fef4 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -1,16 +1,22 @@
 {
 	"meta": {
+		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
 		"name": "Dark"
 	},
 	"primary": "#fb4e4e",
 	"primaryForeground": "#fff",
-	"bg": "#191B22",
-	"scrollbarTrack": "#282C37",
+	"bg": "#191b22",
+	"scrollbarTrack": "#282c37",
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
 	"faceHeader": "#313543",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"popupBg": "#2c303c",
+	"popupFg": "#d6dce2",
+	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
+	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+	"desktopHeaderBg": "#313543",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
new file mode 100644
index 0000000000..d38bd849ed
--- /dev/null
+++ b/src/client/theme/halloween.json
@@ -0,0 +1,17 @@
+{
+	"meta": {
+		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
+		"name": "Halloween",
+		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
+	},
+	"primary": "#fb8d4e",
+	"primaryForeground": "#fff",
+	"bg": "#1b1a35",
+	"face": "#282c37",
+	"faceHeader": "#313543",
+	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"popupBg": "#2c303c",
+	"popupFg": "#d6dce2",
+	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
+	"desktopHeaderBg": "#0c0b19"
+}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 64ebd8e293..b012629faf 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -1,5 +1,6 @@
 {
 	"meta": {
+		"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
 		"name": "Light"
 	},
 	"primary": "#fb4e4e",
@@ -11,6 +12,11 @@
 	"face": "#fff",
 	"faceHeader": "#fff",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
+	"popupBg": "#fff",
+	"popupFg": "#586069",
+	"reactionPickerButtonHoverBg": "#eee",
+	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+	"desktopHeaderBg": "#f7f7f7",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-- 
cgit v1.2.3-freya


From dabda21eb7e67d098c789f22db22014143798e1e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 01:44:05 +0900
Subject: wip

---
 .../app/common/views/components/autocomplete.vue   | 22 +++++++---------------
 src/client/theme/dark.json                         |  6 +++++-
 src/client/theme/light.json                        |  6 +++++-
 3 files changed, 17 insertions(+), 17 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/autocomplete.vue b/src/client/app/common/views/components/autocomplete.vue
index bba6f4f7b2..bc0120c9ab 100644
--- a/src/client/app/common/views/components/autocomplete.vue
+++ b/src/client/app/common/views/components/autocomplete.vue
@@ -259,9 +259,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-autocomplete
 	position fixed
 	z-index 65535
 	max-width 100%
@@ -299,7 +297,7 @@ root(isDark)
 				text-overflow ellipsis
 
 			&:hover
-				background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.1)
+				background var(--autocompleteItemHoverBg)
 
 			&[data-selected='true']
 				background var(--primary)
@@ -325,15 +323,15 @@ root(isDark)
 
 		.name
 			margin 0 8px 0 0
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 		.username
-			color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
+			color var(--autocompleteItemTextSub)
 
 	> .hashtags > li
 
 		.name
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 	> .emojis > li
 
@@ -343,15 +341,9 @@ root(isDark)
 			width 24px
 
 		.name
-			color isDark ? rgba(#fff, 0.8) : rgba(#000, 0.8)
+			color var(--autocompleteItemText)
 
 		.alias
 			margin 0 0 0 8px
-			color isDark ? rgba(#fff, 0.3) : rgba(#000, 0.3)
-
-.mk-autocomplete[data-darkmode]
-	root(true)
-
-.mk-autocomplete:not([data-darkmode])
-	root(false)
+			color var(--autocompleteItemTextSub)
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 18b674fef4..5a8e1ce8f6 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,8 +14,12 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
-	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+
+	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
+	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
+	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index b012629faf..4ae10b5cad 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,8 +14,12 @@
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
-	"reactionPickerButtonHoverBg": "#eee",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+
+	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
+	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
+	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
-- 
cgit v1.2.3-freya


From 3304cc106ec75c2bfceeb47336afc250fc392c86 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 01:54:10 +0900
Subject: wip

---
 src/client/app/common/views/components/avatar.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index a2b0fc6bd3..ca09af87de 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -58,6 +58,9 @@ export default Vue.extend({
 			};
 		}
 	},
+	mounted() {
+		this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
+	},
 	methods: {
 		onClick(e) {
 			this.$emit('click', e);
@@ -67,8 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.mk-avatar
 	display inline-block
 	vertical-align bottom
 
@@ -79,7 +81,7 @@ root(isDark)
 	&.cat::before,
 	&.cat::after
 		background #df548f
-		border solid 4px isDark ? #e0eefd : #202224
+		border solid 4px currentColor
 		box-sizing border-box
 		content ''
 		display inline-block
@@ -105,9 +107,4 @@ root(isDark)
 		transition border-radius 1s ease
 		z-index 1
 
-.mk-avatar[data-darkmode]
-	root(true)
-
-.mk-avatar:not([data-darkmode])
-	root(false)
 </style>
-- 
cgit v1.2.3-freya


From 4dde54e344773d6e6a39713453292d3f128df3f9 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 01:58:37 +0900
Subject: Clean up

---
 src/client/app/desktop/views/pages/deck/deck.note.vue | 13 -------------
 1 file changed, 13 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 04ddcd488d..a02636a42d 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -314,19 +314,6 @@ root(isDark)
 					> .text
 						margin-right 8px
 
-					> .toggle
-						display inline-block
-						padding 4px 8px
-						font-size 0.7em
-						color isDark ? #393f4f : #fff
-						background isDark ? #687390 : #b1b9c1
-						border-radius 2px
-						cursor pointer
-						user-select none
-
-						&:hover
-							background isDark ? #707b97 : #bbc4ce
-
 				> .content
 
 					> .text
-- 
cgit v1.2.3-freya


From 97d68d7b31d4db1b0cdd07a0196c63d4493a621f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 02:02:07 +0900
Subject: example commit

---
 src/client/app/common/views/components/cw-button.vue | 14 ++++----------
 src/client/theme/dark.json                           |  3 +++
 src/client/theme/light.json                          |  3 +++
 3 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/cw-button.vue b/src/client/app/common/views/components/cw-button.vue
index 06087edc93..79917f82ab 100644
--- a/src/client/app/common/views/components/cw-button.vue
+++ b/src/client/app/common/views/components/cw-button.vue
@@ -22,23 +22,17 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.nrvgflfuaxwgkxoynpnumyookecqrrvh
 	display inline-block
 	padding 4px 8px
 	font-size 0.7em
-	color isDark ? #393f4f : #fff
-	background isDark ? #687390 : #b1b9c1
+	color var(--cwButtonFg)
+	background var(--cwButtonBg)
 	border-radius 2px
 	cursor pointer
 	user-select none
 
 	&:hover
-		background isDark ? #707b97 : #bbc4ce
-
-.nrvgflfuaxwgkxoynpnumyookecqrrvh[data-darkmode]
-	root(true)
-
-.nrvgflfuaxwgkxoynpnumyookecqrrvh:not([data-darkmode])
-	root(false)
+		background var(--cwButtonHoverBg)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 5a8e1ce8f6..14caf19224 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -19,6 +19,9 @@
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+	"cwButtonBg": "#687390",
+	"cwButtonFg": "#393f4f",
+	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
 	"mobileSignedInAsBg": "#273c34",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4ae10b5cad..7a039ef294 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -19,6 +19,9 @@
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+	"cwButtonBg": "#b1b9c1",
+	"cwButtonFg": "#fff",
+	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
 	"mobileSignedInAsBg": "#fcfff5",
-- 
cgit v1.2.3-freya


From 15a8b4c6e56c3a5e055cc007275b28bb8841e319 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 02:18:54 +0900
Subject: wip

---
 .../app/common/views/components/note-header.vue    | 24 ++++++++--------------
 src/client/theme/dark.json                         |  7 +++++++
 src/client/theme/light.json                        |  7 +++++++
 3 files changed, 22 insertions(+), 16 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/note-header.vue b/src/client/app/common/views/components/note-header.vue
index 48dfae5f84..8192d88412 100644
--- a/src/client/app/common/views/components/note-header.vue
+++ b/src/client/app/common/views/components/note-header.vue
@@ -42,9 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.bvonvjxbwzaiskogyhbwgyxvcgserpmu
 	display flex
 	align-items baseline
 	white-space nowrap
@@ -61,7 +59,7 @@ root(isDark)
 		margin 0 .5em 0 0
 		padding 0
 		overflow hidden
-		color isDark ? #fff : #627079
+		color var(--noteHeaderName)
 		font-size 1em
 		font-weight bold
 		text-decoration none
@@ -82,19 +80,19 @@ root(isDark)
 		margin 0 .5em 0 0
 		padding 1px 6px
 		font-size 80%
-		color isDark ? #758188 : #aaa
-		border solid 1px isDark ? #57616f : #ddd
+		color var(--noteHeaderBadgeFg)
+		background var(--noteHeaderBadgeBg)
 		border-radius 3px
 
 		&.is-admin
-			border-color isDark ? #d42c41 : #f56a7b
-			color isDark ? #d42c41 : #f56a7b
+			background var(--noteHeaderAdminBg)
+			color var(--noteHeaderAdminFg)
 
 	> .username
 		margin 0 .5em 0 0
 		overflow hidden
 		text-overflow ellipsis
-		color isDark ? #606984 : #ccc
+		color var(--noteHeaderAcct)
 		flex-shrink 2147483647
 
 	> .info
@@ -102,7 +100,7 @@ root(isDark)
 		font-size 0.9em
 
 		> *
-			color isDark ? #606984 : #c0c0c0
+			color var(--noteHeaderInfo)
 
 		> .mobile
 			margin-right 8px
@@ -115,10 +113,4 @@ root(isDark)
 		> .visibility
 			margin-left 8px
 
-.bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode]
-	root(true)
-
-.bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 14caf19224..aeaf547b72 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -16,6 +16,13 @@
 	"popupFg": "#d6dce2",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 
+	"noteHeaderName": "#fff",
+	"noteHeaderBadgeFg": "#758188",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#606984",
+	"noteHeaderInfo": "#606984",
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7a039ef294..d4803389da 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -16,6 +16,13 @@
 	"popupFg": "#586069",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 
+	"noteHeaderName": "#627079",
+	"noteHeaderBadgeFg": "#aaa",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#ccc",
+	"noteHeaderInfo": "#c0c0c0",
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
-- 
cgit v1.2.3-freya


From 49f8cfb0db79653caf0a1cb158041d51856912ef Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 02:35:13 +0900
Subject: wip

---
 src/client/app/desktop/views/components/notes.vue | 18 +++++-------------
 src/client/theme/dark.json                        |  4 ++++
 src/client/theme/light.json                       |  4 ++++
 3 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index d0148eef58..31b3a3ab18 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -216,9 +216,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-notes
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to
@@ -235,8 +233,8 @@ root(isDark)
 			line-height 32px
 			font-size 14px
 			text-align center
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
@@ -266,15 +264,9 @@ root(isDark)
 			border-bottom-right-radius 6px
 
 			&:hover
-				background isDark ? #2e3440 : #f5f5f5
+				background var(--footerButtonHover)
 
 			&:active
-				background isDark ? #21242b : #eee
-
-.mk-notes[data-darkmode]
-	root(true)
-
-.mk-notes:not([data-darkmode])
-	root(false)
+				background var(--footerButtonActive)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index aeaf547b72..b3d233d45f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -15,6 +15,10 @@
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+	"dateDividerBg": "#242731",
+	"dateDividerFg": "#666b79",
+	"footerButtonHover": "#2e3440",
+	"footerButtonActive": "#21242b",
 
 	"noteHeaderName": "#fff",
 	"noteHeaderBadgeFg": "#758188",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d4803389da..87f384a200 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -15,6 +15,10 @@
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+	"dateDividerBg": "#fdfdfd",
+	"dateDividerFg": "#aaa",
+	"footerButtonHover": "#f5f5f5",
+	"footerButtonActive": "#eee",
 
 	"noteHeaderName": "#627079",
 	"noteHeaderBadgeFg": "#aaa",
-- 
cgit v1.2.3-freya


From 1eb6ad58d5699ec22b41265b4b8c687641015109 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 02:46:53 +0900
Subject: wip

---
 src/client/app/desktop/views/components/note-detail.vue | 4 ++--
 src/client/app/desktop/views/components/notes.note.vue  | 4 ++--
 src/client/app/desktop/views/pages/deck/deck.note.vue   | 4 ++--
 src/client/app/mobile/views/components/note-detail.vue  | 4 ++--
 src/client/app/mobile/views/components/note.vue         | 4 ++--
 src/client/theme/dark.json                              | 2 ++
 src/client/theme/halloween.json                         | 2 ++
 src/client/theme/light.json                             | 2 ++
 8 files changed, 16 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 35eb6ac45d..5e7c8b42ca 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -263,8 +263,8 @@ root(isDark)
 			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		> p
 			margin 0
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 4f2b0241e8..17f7e2235a 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -357,8 +357,8 @@ root(isDark)
 		padding 16px 32px 8px 32px
 		line-height 28px
 		white-space pre
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		.avatar
 			display inline-block
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index a02636a42d..f1c4a5979a 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -246,8 +246,8 @@ root(isDark)
 		padding 8px 16px 0 16px
 		line-height 28px
 		white-space pre
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		.avatar
 			flex-shrink 0
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index f0a91e82d4..c56d10093d 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -266,8 +266,8 @@ root(isDark)
 			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
 
 	> .renote
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		> p
 			margin 0
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index a8b733fae7..8b7c559997 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -256,8 +256,8 @@ root(isDark)
 		padding 8px 16px
 		line-height 28px
 		white-space pre
-		color #9dbb00
-		background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
+		color var(--renoteText)
+		background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
 
 		@media (min-width 500px)
 			padding 16px
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index b3d233d45f..533910de76 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,6 +14,8 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
+	"renoteGradient": "#314027",
+	"renoteText": "#9dbb00",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index d38bd849ed..18d214d041 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -12,6 +12,8 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
+	"renoteGradient": "#5d2d1a",
+	"renoteText": "#ff6c00",
 	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
 	"desktopHeaderBg": "#0c0b19"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 87f384a200..df85fb973d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,6 +14,8 @@
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
+	"renoteGradient": "#edfde2",
+	"renoteText": "#9dbb00",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
-- 
cgit v1.2.3-freya


From 0ef64a6d0b7f95c2427536feee657164b759d0d3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 11:55:17 +0900
Subject: wip

---
 .../common/views/components/welcome-timeline.vue   |  2 +-
 .../app/desktop/views/components/note-detail.vue   | 36 ++++++++++------------
 .../desktop/views/components/notes.note.sub.vue    |  2 +-
 .../app/desktop/views/components/notes.note.vue    | 14 ++++-----
 .../app/desktop/views/pages/deck/deck.note.sub.vue |  2 +-
 .../app/desktop/views/pages/deck/deck.note.vue     |  2 +-
 .../app/mobile/views/components/note-detail.vue    | 22 ++++++-------
 .../app/mobile/views/components/note.sub.vue       |  2 +-
 src/client/app/mobile/views/components/note.vue    |  2 +-
 src/client/theme/dark.json                         |  7 +++++
 src/client/theme/halloween.json                    |  6 ++--
 src/client/theme/light.json                        |  7 +++++
 12 files changed, 57 insertions(+), 47 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 938ab602f0..ca1b6eb928 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -137,7 +137,7 @@ root(isDark)
 						overflow hidden
 						font-weight bold
 						text-overflow ellipsis
-						color isDark ? #fff : #627079
+						color var(--noteHeaderName)
 
 					> .username
 						margin 0 .5em 0 0
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 5e7c8b42ca..9222d8fab9 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,8 +225,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	overflow hidden
 	text-align left
@@ -243,24 +241,24 @@ root(isDark)
 		text-align center
 		color #999
 		cursor pointer
-		background isDark ? #21242d : #fafafa
+		background var(--subNoteBg)
 		outline none
 		border none
-		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
-		border-radius 6px 6px 0 0
+		border-bottom solid 1px var(--faceDivider)
+		border-radius var(--round) var(--round) 0 0
 
 		&:hover
-			background isDark ? #2e3440 : #f6f6f6
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 		&:active
-			background isDark ? #21242b : #f0f0f0
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 		&:disabled
-			color isDark ? #21242b : #ccc
+			cursor wait
 
 	> .conversation
 		> *
-			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+			border-bottom 1px solid var(--faceDivider)
 
 	> .renote
 		color var(--renoteText)
@@ -287,7 +285,7 @@ root(isDark)
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+		border-bottom 1px solid var(--faceDivider)
 
 	> article
 		padding 28px 32px 18px 32px
@@ -299,7 +297,7 @@ root(isDark)
 
 		&:hover
 			> footer > button
-				color isDark ? #707b97 : #888
+				color var(--noteActionsHighlighted)
 
 		> .avatar
 			width 60px
@@ -316,7 +314,7 @@ root(isDark)
 				display inline-block
 				margin 0
 				line-height 24px
-				color isDark ? #fff : #627079
+				color var(--noteHeaderName)
 				font-size 18px
 				font-weight 700
 				text-align left
@@ -394,20 +392,20 @@ root(isDark)
 				background transparent
 				border none
 				font-size 1em
-				color isDark ? #606984 : #ccc
+				color var(--noteActions)
 				cursor pointer
 
 				&:hover
-					color isDark ? #a1a8bf : #444
+					color var(--noteActionsHover)
 
 				&.replyButton:hover
-					color #0af
+					color var(--noteActionsReplyHover)
 
 				&.renoteButton:hover
-					color #8d0
+					color var(--noteActionsRenoteHover)
 
 				&.reactionButton:hover
-					color #fa0
+					color var(--noteActionsReactionHover)
 
 				> .count
 					display inline
@@ -415,11 +413,11 @@ root(isDark)
 					color #999
 
 				&.reacted, &.reacted:hover
-					color #fa0
+					color var(--noteActionsReactionHover)
 
 	> .replies
 		> *
-			border-top 1px solid isDark ? #1c2023 : #eef0f2
+			border-top 1px solid var(--faceDivider)
 
 .mk-note-detail[data-darkmode]
 	root(true)
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 8f01ddd43c..13e2991683 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -47,7 +47,7 @@ root(isDark)
 	margin 0
 	padding 16px 32px
 	font-size 0.9em
-	background isDark ? #21242d : #fcfcfc
+	background var(--subNoteBg)
 
 	> .avatar
 		flex-shrink 0
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 17f7e2235a..160de5199d 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -398,7 +398,7 @@ root(isDark)
 
 		&:hover
 			> .main > footer > button
-				color isDark ? #707b97 : #888
+				color var(--noteActionsHighlighted)
 
 		> .avatar
 			flex-shrink 0
@@ -500,22 +500,22 @@ root(isDark)
 					padding 0 8px
 					line-height 32px
 					font-size 1em
-					color isDark ? #606984 : #ddd
+					color var(--noteActions)
 					background transparent
 					border none
 					cursor pointer
 
 					&:hover
-						color isDark ? #a1a8bf : #444
+						color var(--noteActionsHover)
 
 					&.replyButton:hover
-						color #0af
+						color var(--noteActionsReplyHover)
 
 					&.renoteButton:hover
-						color #8d0
+						color var(--noteActionsRenoteHover)
 
 					&.reactionButton:hover
-						color #fa0
+						color var(--noteActionsReactionHover)
 
 					> .count
 						display inline
@@ -523,7 +523,7 @@ root(isDark)
 						color #999
 
 					&.reacted, &.reacted:hover
-						color #fa0
+						color var(--noteActionsReactionHover)
 
 	> .detail
 		padding-top 4px
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
index 3ba9ae914e..f1bf60d528 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
@@ -33,7 +33,7 @@ root(isDark)
 	display flex
 	padding 16px
 	font-size 10px
-	background isDark ? #21242d : #fcfcfc
+	background var(--subNoteBg)
 
 	&.smart
 		> .main
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index f1c4a5979a..ffb284fb42 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -402,7 +402,7 @@ root(isDark)
 					border none
 					box-shadow none
 					font-size 1em
-					color isDark ? #606984 : #ddd
+					color var(--noteActions)
 					cursor pointer
 
 					&:not(:last-child)
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index c56d10093d..472c18088d 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,8 +223,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	overflow hidden
 	width 100%
@@ -248,22 +246,22 @@ root(isDark)
 		text-align center
 		color #999
 		cursor pointer
-		background isDark ? #21242d : #fafafa
+		background var(--subNoteBg)
 		outline none
 		border none
-		border-bottom solid 1px isDark ? #1c2023 : #eef0f2
+		border-bottom solid 1px var(--faceDivider)
 		border-radius 6px 6px 0 0
 		box-shadow none
 
 		&:hover
-			background isDark ? #16181d : #f6f6f6
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
-		&:disabled
-			color #ccc
+		&:active
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 	> .conversation
 		> *
-			border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+			border-bottom 1px solid var(--faceDivider)
 
 	> .renote
 		color var(--renoteText)
@@ -290,7 +288,7 @@ root(isDark)
 			padding-top 8px
 
 	> .reply-to
-		border-bottom 1px solid isDark ? #1c2023 : #eef0f2
+		border-bottom 1px solid var(--faceDivider)
 
 	> article
 		padding 14px 16px 9px 16px
@@ -323,7 +321,7 @@ root(isDark)
 				> .name
 					display inline-block
 					margin .4em 0
-					color isDark ? #fff : #627079
+					color var(--noteHeaderName)
 					font-size 16px
 					font-weight bold
 					text-align left
@@ -407,7 +405,7 @@ root(isDark)
 				border none
 				box-shadow none
 				font-size 1em
-				color isDark ? #606984 : #ddd
+				color var(--noteActions)
 				cursor pointer
 
 				&:not(:last-child)
@@ -426,7 +424,7 @@ root(isDark)
 
 	> .replies
 		> *
-			border-top 1px solid isDark ? #1c2023 : #eef0f2
+			border-top 1px solid var(--faceDivider)
 
 .mk-note-detail[data-darkmode]
 	root(true)
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index c25f827dad..2f38c9e97d 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -45,7 +45,7 @@ root(isDark)
 	display flex
 	padding 16px
 	font-size 10px
-	background isDark ? #21242d : #fcfcfc
+	background var(--subNoteBg)
 
 	@media (min-width 350px)
 		font-size 12px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 8b7c559997..859fc88043 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -442,7 +442,7 @@ root(isDark)
 					border none
 					box-shadow none
 					font-size 1em
-					color isDark ? #606984 : #ddd
+					color var(--noteActions)
 					cursor pointer
 
 					&:not(:last-child)
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 533910de76..77a41228d0 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,8 +14,15 @@
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
+	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
+	"noteActions": "#606984",
+	"noteActionsHover": "#a1a8bf",
+	"noteActionsReplyHover": "#0af",
+	"noteActionsRenoteHover": "#8d0",
+	"noteActionsReactionHover": "#fa0",
+	"noteActionsHighlighted": "#707b97",
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 18d214d041..7c26fbf6e6 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -7,9 +7,9 @@
 	"primary": "#fb8d4e",
 	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
-	"face": "#282c37",
-	"faceHeader": "#313543",
-	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"face": "#2e2a3e",
+	"faceHeader": "#36314e",
+	"dateDividerBg": "#26253c",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"renoteGradient": "#5d2d1a",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index df85fb973d..28cc71bdb7 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,8 +14,15 @@
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
+	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
+	"noteActions": "#ddd",
+	"noteActionsHover": "#444",
+	"noteActionsReplyHover": "#0af",
+	"noteActionsRenoteHover": "#8d0",
+	"noteActionsReactionHover": "#fa0",
+	"noteActionsHighlighted": "#888",
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
-- 
cgit v1.2.3-freya


From df6c9b1a1cf7b4ff8cdbf562e004bbf3635d841b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 12:55:10 +0900
Subject: wip

---
 .../components/games/reversi/reversi.room.vue      |   6 +-
 src/client/app/common/views/components/index.ts    |   2 -
 src/client/app/common/views/components/switch.vue  | 199 ---------------------
 .../app/common/views/components/ui/button.vue      |   2 -
 .../app/common/views/components/ui/switch.vue      |  17 +-
 .../desktop/views/components/settings.profile.vue  |   8 +-
 .../app/desktop/views/components/settings.vue      |  44 ++---
 .../desktop/views/pages/deck/deck.tl-column.vue    |   4 +-
 src/client/theme/dark.json                         |   5 +-
 src/client/theme/halloween.json                    |   1 +
 src/client/theme/light.json                        |   5 +-
 11 files changed, 42 insertions(+), 251 deletions(-)
 delete mode 100644 src/client/app/common/views/components/switch.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index 072f3eda12..b407046ba9 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -47,9 +47,9 @@
 			</header>
 
 			<div>
-				<mk-switch v-model="game.settings.isLlotheo" @change="updateSettings" text="%i18n:@is-llotheo%"/>
-				<mk-switch v-model="game.settings.loopedBoard" @change="updateSettings" text="%i18n:@looped-map%"/>
-				<mk-switch v-model="game.settings.canPutEverywhere" @change="updateSettings" text="%i18n:@can-put-everywhere%"/>
+				<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
+				<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
+				<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
 			</div>
 		</div>
 
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 0a3d0d0ae6..4c1c0afa80 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -30,7 +30,6 @@ import messagingRoom from './messaging-room.vue';
 import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
-import Switch from './switch.vue';
 import Reversi from './games/reversi/reversi.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
@@ -74,7 +73,6 @@ Vue.component('mk-messaging-room', messagingRoom);
 Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
-Vue.component('mk-switch', Switch);
 Vue.component('mk-reversi', Reversi);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
diff --git a/src/client/app/common/views/components/switch.vue b/src/client/app/common/views/components/switch.vue
deleted file mode 100644
index aa60331cbc..0000000000
--- a/src/client/app/common/views/components/switch.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<template>
-<div
-	class="mk-switch"
-	:class="{ disabled, checked }"
-	role="switch"
-	:aria-checked="checked"
-	:aria-disabled="disabled"
-	@click="switchValue"
-	@mouseover="mouseenter"
->
-	<input
-		type="checkbox"
-		@change="handleChange"
-		ref="input"
-		:disabled="disabled"
-		@keydown.enter="switchValue"
-	>
-	<span class="button">
-		<span :style="{ transform }"></span>
-	</span>
-	<span class="label">
-		<span :aria-hidden="!checked">{{ text }}</span>
-		<p :aria-hidden="!checked">
-			<slot></slot>
-		</p>
-	</span>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	props: {
-		value: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		text: String
-	},/*
-	created() {
-		if (!~[true, false].indexOf(this.value)) {
-			this.$emit('input', false);
-		}
-	},*/
-	computed: {
-		checked(): boolean {
-			return this.value;
-		},
-		transform(): string {
-			return this.checked ? 'translate3d(20px, 0, 0)' : '';
-		}
-	},
-	watch: {
-		value() {
-			(this.$el).style.transition = 'all 0.3s';
-			(this.$refs.input as any).checked = this.checked;
-		}
-	},
-	mounted() {
-		(this.$refs.input as any).checked = this.checked;
-	},
-	methods: {
-		mouseenter() {
-			(this.$el).style.transition = 'all 0s';
-		},
-		handleChange() {
-			(this.$el).style.transition = 'all 0.3s';
-			this.$emit('input', !this.checked);
-			this.$emit('change', !this.checked);
-			this.$nextTick(() => {
-				// set input's checked property
-				// in case parent refuses to change component's value
-				(this.$refs.input as any).checked = this.checked;
-			});
-		},
-		switchValue() {
-			!this.disabled && this.handleChange();
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-
-
-root(isDark)
-	display flex
-	margin 12px 0
-	cursor pointer
-	transition all 0.3s
-
-	> *
-		user-select none
-
-	&.disabled
-		opacity 0.6
-		cursor not-allowed
-
-	&.checked
-		> .button
-			background-color var(--primary)
-			border-color var(--primary)
-
-		> .label
-			> span
-				color var(--primary)
-
-		&:hover
-			> .label
-				> span
-					color var(--primaryDarken10)
-
-			> .button
-				background var(--primaryDarken10)
-				border-color var(--primaryDarken10)
-
-	&:hover
-		> .label
-			> span
-				color isDark ? #fff : #2e3338
-
-		> .button
-			$color = isDark ? #15181d : #ced2da
-			background $color
-			border-color $color
-
-	> input
-		position absolute
-		width 0
-		height 0
-		opacity 0
-		margin 0
-
-		&:focus + .button
-			&:after
-				content ""
-				pointer-events none
-				position absolute
-				top -5px
-				right -5px
-				bottom -5px
-				left -5px
-				border 2px solid var(--primaryAlpha03)
-				border-radius 14px
-
-	> .button
-		$color = isDark ? #1c1f25 : #dcdfe6
-
-		display inline-block
-		margin 0
-		width 40px
-		min-width 40px
-		height 20px
-		min-height 20px
-		background $color
-		border 1px solid $color
-		outline none
-		border-radius 10px
-		transition inherit
-
-		> *
-			position absolute
-			top 1px
-			left 1px
-			border-radius 100%
-			transition transform 0.3s
-			width 16px
-			height 16px
-			background-color #fff
-
-	> .label
-		margin-left 8px
-		display block
-		font-size 15px
-		cursor pointer
-		transition inherit
-
-		> span
-			display block
-			line-height 20px
-			color isDark ? #c4ccd2 : #4a535a
-			transition inherit
-
-		> p
-			margin 0
-			//font-size 90%
-			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/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index ae59214038..c411f0f5c9 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -32,8 +32,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark, fill)
 	> button
 		display block
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index e358713d8f..2ee787cb76 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -56,9 +56,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ui-switch
 	display flex
 	margin 32px 0
 	cursor pointer
@@ -99,7 +97,7 @@ root(isDark)
 		margin 3px 0 0 0
 		width 34px
 		height 14px
-		background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
+		background var(--switchTrack)
 		outline none
 		border-radius 14px
 		transition inherit
@@ -125,18 +123,11 @@ root(isDark)
 		> span
 			display block
 			line-height 20px
-			color isDark ? #c4ccd2 : rgba(#000, 0.75)
+			color currentColor
 			transition inherit
 
 		> p
 			margin 0
-			//font-size 90%
-			color isDark ? #78858e : #9daab3
-
-.ui-switch[data-darkmode]
-	root(true)
-
-.ui-switch:not([data-darkmode])
-	root(false)
+			opacity 0.7
 
 </style>
diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
index d47b5b224b..9dd2798557 100644
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -24,13 +24,13 @@
 	<button class="ui primary" @click="save">%i18n:@save%</button>
 	<section>
 		<h2>%i18n:@locked-account%</h2>
-		<mk-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked" text="%i18n:@is-locked%"/>
+		<ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch>
 	</section>
 	<section>
 		<h2>%i18n:@other%</h2>
-		<mk-switch v-model="$store.state.i.isBot" @change="onChangeIsBot" text="%i18n:@is-bot%"/>
-		<mk-switch v-model="$store.state.i.isCat" @change="onChangeIsCat" text="%i18n:@is-cat%"/>
-		<mk-switch v-model="alwaysMarkNsfw" text="%i18n:common.always-mark-nsfw%"/>
+		<ui-switch v-model="$store.state.i.isBot" @change="onChangeIsBot">%i18n:@is-bot%</ui-switch>
+		<ui-switch v-model="$store.state.i.isCat" @change="onChangeIsCat">%i18n:@is-cat%</ui-switch>
+		<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
 	</section>
 </div>
 </template>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4b8ee3c9cd..4efaa75c4b 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -30,7 +30,7 @@
 
 			<section>
 				<header>%i18n:@note-visibility%</header>
-				<mk-switch v-model="rememberNoteVisibility" text="%i18n:@remember-note-visibility%"/>
+				<ui-switch v-model="rememberNoteVisibility">%i18n:@remember-note-visibility%</ui-switch>
 				<section>
 					<header>%i18n:@default-note-visibility%</header>
 					<ui-select v-model="defaultNoteVisibility">
@@ -59,30 +59,30 @@
 			<div class="div">
 				<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
 				<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
-				<mk-switch v-model="darkmode" text="%i18n:@dark-mode%"/>
-				<mk-switch v-model="useShadow" text="%i18n:@use-shadow%"/>
-				<mk-switch v-model="roundedCorners" text="%i18n:@rounded-corners%"/>
-				<mk-switch v-model="circleIcons" text="%i18n:@circle-icons%"/>
-				<mk-switch v-model="reduceMotion" text="%i18n:common.reduce-motion%"/>
-				<mk-switch v-model="contrastedAcct" text="%i18n:@contrasted-acct%"/>
-				<mk-switch v-model="showFullAcct" text="%i18n:common.show-full-acct%"/>
-				<mk-switch v-model="gradientWindowHeader" text="%i18n:@gradient-window-header%"/>
-				<mk-switch v-model="iLikeSushi" text="%i18n:common.i-like-sushi%"/>
+				<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
+				<ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
+				<ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
+				<ui-switch v-model="circleIcons">%i18n:@circle-icons%</ui-switch>
+				<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
+				<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
+				<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
+				<ui-switch v-model="gradientWindowHeader">%i18n:@gradient-window-header%</ui-switch>
+				<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 			</div>
-			<mk-switch v-model="showPostFormOnTopOfTl" text="%i18n:@post-form-on-timeline%"/>
-			<mk-switch v-model="suggestRecentHashtags" text="%i18n:@suggest-recent-hashtags%"/>
-			<mk-switch v-model="showClockOnHeader" text="%i18n:@show-clock-on-header%"/>
-			<mk-switch v-model="alwaysShowNsfw" text="%i18n:common.always-show-nsfw%"/>
-			<mk-switch v-model="showReplyTarget" text="%i18n:@show-reply-target%"/>
-			<mk-switch v-model="showMyRenotes" text="%i18n:@show-my-renotes%"/>
-			<mk-switch v-model="showRenotedMyNotes" text="%i18n:@show-renoted-my-notes%"/>
-			<mk-switch v-model="showLocalRenotes" text="%i18n:@show-local-renotes%"/>
+			<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
+			<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
+			<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
+			<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
+			<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
+			<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
+			<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
+			<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
 			<mk-switch v-model="showMaps" text="%i18n:@show-maps%">
 				<span>%i18n:@show-maps-desc%</span>
 			</mk-switch>
-			<mk-switch v-model="disableAnimatedMfm" text="%i18n:common.disable-animated-mfm%"/>
-			<mk-switch v-model="games_reversi_showBoardLabels" text="%i18n:common.show-reversi-board-labels%"/>
-			<mk-switch v-model="games_reversi_useContrastStones" text="%i18n:common.use-contrast-reversi-stones%"/>
+			<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
+			<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
+			<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
@@ -102,7 +102,7 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@mobile%</h1>
-			<mk-switch v-model="disableViaMobile" text="%i18n:@disable-via-mobile%"/>
+			<ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
 		</section>
 
 		<section class="web" v-show="page == 'web'">
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
index 550b1be628..d245e3ecf5 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl-column.vue
@@ -11,8 +11,8 @@
 	</span>
 
 	<div class="editor" style="padding:0 12px" v-if="edit">
-		<mk-switch v-model="column.isMediaOnly" @change="onChangeSettings" text="%i18n:@is-media-only%"/>
-		<mk-switch v-model="column.isMediaView" @change="onChangeSettings" text="%i18n:@is-media-view%"/>
+		<ui-switch v-model="column.isMediaOnly" @change="onChangeSettings">%i18n:@is-media-only%</ui-switch>
+		<ui-switch v-model="column.isMediaView" @change="onChangeSettings">%i18n:@is-media-view%</ui-switch>
 	</div>
 	<x-list-tl v-if="column.type == 'list'" :list="column.list" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
 	<x-hashtag-tl v-if="column.type == 'hashtag'" :tag-tl="$store.state.settings.tagTimelines.find(x => x.id == column.tagTlId)" :media-only="column.isMediaOnly" :media-view="column.isMediaView"/>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 77a41228d0..a3877093f5 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -1,7 +1,8 @@
 {
 	"meta": {
 		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
-		"name": "Dark"
+		"name": "Dark",
+		"author": "syuilo"
 	},
 	"primary": "#fb4e4e",
 	"primaryForeground": "#fff",
@@ -28,7 +29,7 @@
 	"dateDividerFg": "#666b79",
 	"footerButtonHover": "#2e3440",
 	"footerButtonActive": "#21242b",
-
+	"switchTrack": "rgba(255, 255, 255, 0.15)",
 	"noteHeaderName": "#fff",
 	"noteHeaderBadgeFg": "#758188",
 	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 7c26fbf6e6..b156eb1aa8 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -2,6 +2,7 @@
 	"meta": {
 		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
 		"name": "Halloween",
+		"author": "syuilo",
 		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
 	},
 	"primary": "#fb8d4e",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 28cc71bdb7..7dcf2d3f44 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -1,7 +1,8 @@
 {
 	"meta": {
 		"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
-		"name": "Light"
+		"name": "Light",
+		"author": "syuilo"
 	},
 	"primary": "#fb4e4e",
 	"primaryForeground": "#fff",
@@ -28,7 +29,7 @@
 	"dateDividerFg": "#aaa",
 	"footerButtonHover": "#f5f5f5",
 	"footerButtonActive": "#eee",
-
+	"switchTrack": "rgba(0, 0, 0, 0.25)",
 	"noteHeaderName": "#627079",
 	"noteHeaderBadgeFg": "#aaa",
 	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
-- 
cgit v1.2.3-freya


From 76a25917c03f3bd4e46ff53300f5a1a1fc8a883a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 13:54:53 +0900
Subject: wip

---
 src/client/app/desktop/views/components/notes.vue | 4 ++--
 src/client/theme/dark.json                        | 2 --
 src/client/theme/light.json                       | 2 --
 3 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.vue b/src/client/app/desktop/views/components/notes.vue
index 31b3a3ab18..84b13ed84e 100644
--- a/src/client/app/desktop/views/components/notes.vue
+++ b/src/client/app/desktop/views/components/notes.vue
@@ -264,9 +264,9 @@ export default Vue.extend({
 			border-bottom-right-radius 6px
 
 			&:hover
-				background var(--footerButtonHover)
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 			&:active
-				background var(--footerButtonActive)
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index a3877093f5..c9e9835136 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -27,8 +27,6 @@
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
-	"footerButtonHover": "#2e3440",
-	"footerButtonActive": "#21242b",
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
 	"noteHeaderName": "#fff",
 	"noteHeaderBadgeFg": "#758188",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7dcf2d3f44..6aef10d9a6 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -27,8 +27,6 @@
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
-	"footerButtonHover": "#f5f5f5",
-	"footerButtonActive": "#eee",
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
 	"noteHeaderName": "#627079",
 	"noteHeaderBadgeFg": "#aaa",
-- 
cgit v1.2.3-freya


From 4fe2f29478fbf81cb21450170b551ed21211a854 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 14:32:48 +0900
Subject: wip

---
 .../app/desktop/views/components/calendar.vue      |  4 ++--
 .../app/desktop/views/components/note-detail.vue   | 18 ++++++----------
 .../app/desktop/views/components/note-preview.vue  |  2 +-
 .../desktop/views/components/notes.note.sub.vue    |  2 +-
 .../app/desktop/views/components/notes.note.vue    |  6 +++---
 .../app/desktop/views/components/post-form.vue     |  8 +++-----
 .../app/desktop/views/components/timeline.vue      | 23 ++++++---------------
 .../desktop/views/components/widget-container.vue  |  4 ++--
 .../app/desktop/views/pages/deck/deck.column.vue   |  4 ++--
 .../app/desktop/views/pages/deck/deck.note.vue     |  6 +++---
 .../desktop/views/pages/deck/deck.notification.vue |  4 ++--
 .../app/mobile/views/components/note-detail.vue    | 20 +++++++-----------
 .../app/mobile/views/components/note-preview.vue   |  2 +-
 .../app/mobile/views/components/note.sub.vue       |  2 +-
 src/client/app/mobile/views/components/note.vue    |  6 +++---
 .../app/mobile/views/components/notification.vue   |  4 ++--
 src/client/theme/dark.json                         | 24 +++++++++++++++-------
 src/client/theme/halloween.json                    |  2 +-
 src/client/theme/light.json                        | 24 +++++++++++++++-------
 19 files changed, 80 insertions(+), 85 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index cd73ab350b..6b753068fa 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -166,10 +166,10 @@ root(isDark)
 		width 42px
 		font-size 0.9em
 		line-height 42px
-		color isDark ? #9baec8 : #ccc
+		color var(--faceTextButton)
 
 		&:hover
-			color isDark ? #b2c1d5 : #aaa
+			color var(--faceTextButtonHover)
 
 		&:active
 			color isDark ? #b2c1d5 : #999
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 9222d8fab9..50ad793f0b 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -225,7 +225,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-detail
 	overflow hidden
 	text-align left
 	background var(--face)
@@ -327,14 +327,14 @@ root(isDark)
 				display block
 				text-align left
 				margin 0
-				color isDark ? #606984 : #ccc
+				color var(--noteHeaderAcct)
 
 			> .time
 				position absolute
 				top 0
 				right 32px
 				font-size 1em
-				color isDark ? #606984 : #c0c0c0
+				color var(--noteHeaderInfo)
 
 		> .body
 			padding 8px 0
@@ -345,7 +345,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -358,14 +358,14 @@ root(isDark)
 					padding 0
 					overflow-wrap break-word
 					font-size 1.5em
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 				> .renote
 					margin 8px 0
 
 					> *
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px vat(--quoteBorder)
 						border-radius 8px
 
 				> .location
@@ -419,10 +419,4 @@ root(isDark)
 		> *
 			border-top 1px solid var(--faceDivider)
 
-.mk-note-detail[data-darkmode]
-	root(true)
-
-.mk-note-detail: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 6c84165356..f64657fb47 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -71,7 +71,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
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 13e2991683..70709f8738 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -72,7 +72,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 160de5199d..5daaadb971 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -426,7 +426,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -439,7 +439,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -491,7 +491,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 			> footer
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index fdd6e75318..5a5f9d63db 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -434,12 +434,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	display block
 	padding 16px
-	background isDark ? #282C37 : var(--primaryLighten95)
+	background var(--desktopPostFormBg)
 
 	&:after
 		content ""
@@ -453,8 +451,8 @@ root(isDark)
 			width 100%
 			padding 12px
 			font-size 16px
-			color isDark ? #fff : #333
-			background isDark ? #191d23 : #fff
+			color var(--desktopPostFormTextareaFg)
+			background var(--desktopPostFormTextareaBg)
 			outline none
 			border solid 1px var(--primaryAlpha01)
 			border-radius 4px
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index 7800eae52d..3e4c45d228 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -175,9 +175,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-timeline
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -187,7 +185,7 @@ root(isDark)
 		padding 0 8px
 		z-index 10
 		background var(--faceHeader)
-		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
+		box-shadow 0 1px var(--desktopTimelineHeaderShadow)
 
 		> .buttons
 			position absolute
@@ -200,7 +198,7 @@ root(isDark)
 				padding 0 8px
 				font-size 0.9em
 				line-height 42px
-				color isDark ? #9baec8 : #ccc
+				color var(--faceTextButton)
 
 				> .badge
 					position absolute
@@ -210,10 +208,7 @@ root(isDark)
 					color var(--primary)
 
 				&:hover
-					color isDark ? #b2c1d5 : #aaa
-
-				&:active
-					color isDark ? #b2c1d5 : #999
+					color var(--faceTextButtonHover)
 
 				&[data-active]
 					color var(--primary)
@@ -252,16 +247,10 @@ root(isDark)
 					background var(--primary)
 
 			&:not([data-active])
-				color isDark ? #9aa2a7 : #6f7477
+				color var(--desktopTimelineSrc)
 				cursor pointer
 
 				&:hover
-					color isDark ? #d9dcde : #525a5f
-
-.mk-timeline[data-darkmode]
-	root(true)
-
-.mk-timeline:not([data-darkmode])
-	root(false)
+					color var(--desktopTimelineSrcHover)
 
 </style>
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index d17b9c91d8..156823799f 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -72,10 +72,10 @@ root(isDark)
 			width 42px
 			font-size 0.9em
 			line-height 42px
-			color isDark ? #9baec8 : #ccc
+			color var(--faceTextButton)
 
 			&:hover
-				color isDark ? #b2c1d5 : #aaa
+				color var(--faceTextButtonHover)
 
 			&:active
 				color isDark ? #b2c1d5 : #999
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 1cf8900ee5..fb521db25b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -344,10 +344,10 @@ root(isDark)
 			width $header-height
 			line-height $header-height
 			font-size 16px
-			color isDark ? #9baec8 : #ccc
+			color var(--faceTextButton)
 
 			&:hover
-				color isDark ? #b2c1d5 : #aaa
+				color var(--faceTextButtonHover)
 
 			&:active
 				color isDark ? #b2c1d5 : #999
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index ffb284fb42..bdc4368e7b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -309,7 +309,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -321,7 +321,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -387,7 +387,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index d0093ff282..ff10ac2aa6 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -146,10 +146,10 @@ root(isDark)
 					font-size 0.9em
 
 			> .note-preview
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 			> .note-ref
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				[data-fa]
 					font-size 1em
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 472c18088d..ade518b1fc 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -223,7 +223,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-detail
 	overflow hidden
 	width 100%
 	text-align left
@@ -334,7 +334,7 @@ root(isDark)
 					display block
 					text-align left
 					margin 0
-					color isDark ? #606984 : #ccc
+					color var(--noteHeaderAcct)
 
 		> .body
 			padding 8px 0
@@ -345,7 +345,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
@@ -358,7 +358,7 @@ root(isDark)
 					padding 0
 					overflow-wrap break-word
 					font-size 16px
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					@media (min-width 500px)
 						font-size 24px
@@ -368,7 +368,7 @@ root(isDark)
 
 					> *
 						padding 16px
-						border dashed 1px #c0dac6
+						border dashed 1px vat(--quoteBorder)
 						border-radius 8px
 
 				> .location
@@ -393,7 +393,7 @@ root(isDark)
 
 		> .time
 			font-size 16px
-			color isDark ? #606984 : #c0c0c0
+			color var(--noteHeaderInfo)
 
 		> footer
 			font-size 1.2em
@@ -412,7 +412,7 @@ root(isDark)
 					margin-right 28px
 
 				&:hover
-					color isDark ? #9198af : #666
+					color var(--noteActionsHover)
 
 				> .count
 					display inline
@@ -426,10 +426,4 @@ root(isDark)
 		> *
 			border-top 1px solid var(--faceDivider)
 
-.mk-note-detail[data-darkmode]
-	root(true)
-
-.mk-note-detail:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 4c03593a9e..0b3278ff41 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -88,7 +88,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 2f38c9e97d..8c2e3b496d 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -95,7 +95,7 @@ root(isDark)
 				margin 0
 				padding 0
 				overflow-wrap break-word
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				> .text
 					margin-right 8px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 859fc88043..ed175b4f6f 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -349,7 +349,7 @@ root(isDark)
 					margin 0
 					padding 0
 					overflow-wrap break-word
-					color isDark ? #fff : #717171
+					color var(--noteText)
 
 					> .text
 						margin-right 8px
@@ -361,7 +361,7 @@ root(isDark)
 						margin 0
 						padding 0
 						overflow-wrap break-word
-						color isDark ? #fff : #717171
+						color var(--noteText)
 
 						>>> .title
 							display block
@@ -427,7 +427,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px isDark ? #4e945e : #c0dac6
+							border dashed 1px vat(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index ee90c6b46b..7b73012e06 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -158,10 +158,10 @@ root(isDark)
 					font-size 0.9em
 
 			> .note-preview
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 			> .note-ref
-				color isDark ? #fff : #717171
+				color var(--noteText)
 
 				[data-fa]
 					font-size 1em
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index c9e9835136..88bde9d684 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -13,11 +13,22 @@
 	"face": "#282c37",
 	"faceHeader": "#313543",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
+	"faceTextButton": "#9baec8",
+	"faceTextButtonHover": "#b2c1d5",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
+	"quoteBorder": "#4e945e",
+	"noteText": "#fff",
+	"noteHeaderName": "#fff",
+	"noteHeaderBadgeFg": "#758188",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#606984",
+	"noteHeaderInfo": "#606984",
 	"noteActions": "#606984",
 	"noteActionsHover": "#a1a8bf",
 	"noteActionsReplyHover": "#0af",
@@ -28,13 +39,6 @@
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
-	"noteHeaderName": "#fff",
-	"noteHeaderBadgeFg": "#758188",
-	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
-	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
-	"noteHeaderAcct": "#606984",
-	"noteHeaderInfo": "#606984",
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
@@ -43,6 +47,12 @@
 	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
+	"desktopPostFormBg": "@face",
+	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
+	"desktopPostFormTextareaFg": "#fff",
+	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
+	"desktopTimelineSrc": "@faceTextButton",
+	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index b156eb1aa8..474fc7ea8f 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -8,7 +8,7 @@
 	"primary": "#fb8d4e",
 	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
-	"face": "#2e2a3e",
+	"face": "#322e44",
 	"faceHeader": "#36314e",
 	"dateDividerBg": "#26253c",
 	"popupBg": "#2c303c",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 6aef10d9a6..3374a62e36 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -13,11 +13,22 @@
 	"face": "#fff",
 	"faceHeader": "#fff",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
+	"faceTextButton": "#ccc",
+	"faceTextButtonHover": "#aaa",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
+	"quoteBorder": "#c0dac6",
+	"noteText": "#717171",
+	"noteHeaderName": "#627079",
+	"noteHeaderBadgeFg": "#aaa",
+	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
+	"noteHeaderAdminFg": "#f15f71",
+	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAcct": "#ccc",
+	"noteHeaderInfo": "#c0c0c0",
 	"noteActions": "#ddd",
 	"noteActionsHover": "#444",
 	"noteActionsReplyHover": "#0af",
@@ -28,13 +39,6 @@
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
-	"noteHeaderName": "#627079",
-	"noteHeaderBadgeFg": "#aaa",
-	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
-	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
-	"noteHeaderAcct": "#ccc",
-	"noteHeaderInfo": "#c0c0c0",
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
@@ -43,6 +47,12 @@
 	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
+	"desktopPostFormBg": "#fff6f6",
+	"desktopPostFormTextareaBg": "#fff",
+	"desktopPostFormTextareaFg": "#333",
+	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
+	"desktopTimelineSrc": "#6f7477",
+	"desktopTimelineSrcHover": "#525a5f",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-- 
cgit v1.2.3-freya


From 7b8a2aef0f9ed4d848d749769fd9dc6774b1e65a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 14:52:10 +0900
Subject: wip

---
 locales/ja-JP.yml                                    |  1 -
 src/client/app/desktop/views/components/settings.vue |  8 +-------
 .../desktop/views/components/widget-container.vue    | 20 +++-----------------
 src/client/app/desktop/views/components/window.vue   | 15 ++++-----------
 .../app/desktop/views/pages/deck/deck.column.vue     |  2 +-
 .../views/pages/user/user.followers-you-know.vue     |  2 +-
 .../app/desktop/views/pages/user/user.friends.vue    |  2 +-
 .../app/desktop/views/pages/user/user.photos.vue     |  2 +-
 src/client/app/store.ts                              |  1 -
 src/client/theme/dark.json                           |  3 +++
 src/client/theme/light.json                          |  3 +++
 11 files changed, 18 insertions(+), 41 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index db2a155221..f5d0a180d8 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -784,7 +784,6 @@ desktop/views/components/settings.vue:
   rounded-corners: "UIの角を丸める"
   circle-icons: "円形のアイコンを使用"
   contrasted-acct: "ユーザー名にコントラストを付ける"
-  gradient-window-header: "ウィンドウのタイトルバーにグラデーションを使用"
   post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
   suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
   show-clock-on-header: "右上に時計を表示する"
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4efaa75c4b..e95e7a735d 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -66,7 +66,6 @@
 				<ui-switch v-model="reduceMotion">%i18n:common.reduce-motion%</ui-switch>
 				<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
 				<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
-				<ui-switch v-model="gradientWindowHeader">%i18n:@gradient-window-header%</ui-switch>
 				<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
 			</div>
 			<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
@@ -421,12 +420,7 @@ export default Vue.extend({
 		disableViaMobile: {
 			get() { return this.$store.state.settings.disableViaMobile; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
-		},
-
-		gradientWindowHeader: {
-			get() { return this.$store.state.settings.gradientWindowHeader; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'gradientWindowHeader', value }); }
-		},
+		}
 	},
 	created() {
 		(this as any).os.getMeta().then(meta => {
diff --git a/src/client/app/desktop/views/components/widget-container.vue b/src/client/app/desktop/views/components/widget-container.vue
index 156823799f..cfcb2785c5 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-widget-container" :class="{ naked }">
-	<header :class="{ withGradient }" v-if="showHeader">
+	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
 	</header>
@@ -20,15 +20,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: false
 		}
-	},
-	computed: {
-		withGradient(): boolean {
-			return this.$store.getters.isSignedIn
-				? this.$store.state.settings.gradientWindowHeader != null
-					? this.$store.state.settings.gradientWindowHeader
-					: false
-				: false;
-		}
 	}
 });
 </script>
@@ -54,7 +45,7 @@ root(isDark)
 			line-height 42px
 			font-size 0.9em
 			font-weight bold
-			color isDark ? #e3e5e8 : #888
+			color var(--faceHeaderText)
 			box-shadow 0 1px rgba(#000, 0.07)
 
 			> [data-fa]
@@ -78,12 +69,7 @@ root(isDark)
 				color var(--faceTextButtonHover)
 
 			&:active
-				color isDark ? #b2c1d5 : #999
-
-		&.withGradient
-			> .title
-				background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
-				box-shadow 0 1px rgba(#000, 0.11)
+				color var(--faceTextButtonActive)
 
 .mk-widget-container[data-darkmode]
 	root(true)
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index 15aa158073..5547445537 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -4,7 +4,6 @@
 	<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: $store.state.settings.gradientWindowHeader }"
 				@contextmenu.prevent="() => {}" @mousedown.prevent="onHeaderMousedown"
 			>
 				<h1><slot name="header"></slot></h1>
@@ -463,8 +462,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 root(isDark)
 	display block
 
@@ -582,10 +579,6 @@ root(isDark)
 				border-radius 6px 6px 0 0
 				box-shadow 0 1px 0 rgba(#000, 0.1)
 
-				&.withGradient
-					background isDark ? linear-gradient(to bottom, #313543, #1d2027) : linear-gradient(to bottom, #fff, #ececec)
-					box-shadow 0 1px 0 rgba(#000, 0.15)
-
 				&, *
 					user-select none
 
@@ -600,7 +593,7 @@ root(isDark)
 					font-size 1em
 					line-height $header-height
 					font-weight normal
-					color isDark ? #e3e5e8 : #666
+					color var(--desktopWindowTitle)
 
 				> div:last-child
 					position absolute
@@ -615,16 +608,16 @@ root(isDark)
 						padding 0
 						cursor pointer
 						font-size 1em
-						color isDark ? #9baec8 : rgba(#000, 0.4)
+						color var(--faceTextButton)
 						border none
 						outline none
 						background transparent
 
 						&:hover
-							color isDark ? #b2c1d5 : rgba(#000, 0.6)
+							color var(--faceTextButtonHover)
 
 						&:active
-							color isDark ? #b2c1d5 : darken(#000, 30%)
+							color var(--faceTextButtonActive)
 
 						> [data-fa]
 							padding 0
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index fb521db25b..2dba7d2522 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -317,7 +317,7 @@ root(isDark)
 		line-height $header-height
 		padding 0 16px
 		font-size 14px
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.15)
 		cursor pointer
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 212e21a7a9..b90d0a831e 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
@@ -48,7 +48,7 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
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 0a329b3d8e..9b466053f7 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -54,7 +54,7 @@ root(isDark)
 		font-size 0.9em
 		font-weight bold
 		background isDark ? #313543 : inherit
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
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 99e064446d..6e9d09e79f 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -53,7 +53,7 @@ root(isDark)
 		font-size 0.9em
 		font-weight bold
 		background: isDark ? #313543 : inherit
-		color isDark ? #e3e5e8 : #888
+		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
 		> i
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 00c08409a6..fbcc53d7be 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -21,7 +21,6 @@ const defaultSettings = {
 	circleIcons: true,
 	contrastedAcct: true,
 	showFullAcct: false,
-	gradientWindowHeader: false,
 	showReplyTarget: true,
 	showMyRenotes: true,
 	showRenotedMyNotes: true,
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 88bde9d684..d563409564 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -12,9 +12,11 @@
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
 	"faceHeader": "#313543",
+	"faceHeaderText": "#e3e5e8",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"faceTextButton": "#9baec8",
 	"faceTextButtonHover": "#b2c1d5",
+	"faceTextButtonActive": "#b2c1d5",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
@@ -53,6 +55,7 @@
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
+	"desktopWindowTitle": "@faceHeaderText",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 3374a62e36..bdcf282e3d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -12,9 +12,11 @@
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
 	"faceHeader": "#fff",
+	"faceHeaderText": "#888",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"faceTextButton": "#ccc",
 	"faceTextButtonHover": "#aaa",
+	"faceTextButtonActive": "#999",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
@@ -53,6 +55,7 @@
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
+	"desktopWindowTitle": "#666",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-- 
cgit v1.2.3-freya


From 9e319006f350e357e75654b2c5e28d803c08a617 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 15:19:11 +0900
Subject: wip

---
 .../desktop/views/components/ui.header.account.vue |  7 +--
 .../app/desktop/views/components/ui.header.nav.vue | 14 ++---
 .../views/components/ui.header.notifications.vue   | 18 ++-----
 .../desktop/views/components/ui.header.search.vue  | 19 +++----
 .../app/desktop/views/components/ui.header.vue     | 63 +---------------------
 src/client/theme/dark.json                         |  6 +++
 src/client/theme/light.json                        |  6 +++
 7 files changed, 27 insertions(+), 106 deletions(-)

(limited to 'src/client')

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 c728fa42be..77221f81d2 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -134,7 +134,7 @@ root(isDark)
 		display block
 		margin 0
 		padding 0
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		border none
 		background transparent
 		cursor pointer
@@ -144,14 +144,11 @@ root(isDark)
 
 		&:hover
 		&[data-active='true']
-			color isDark ? #fff : darken(#9eaba8, 20%)
+			color var(--desktopHeaderHoverFg)
 
 			> .avatar
 				filter saturate(150%)
 
-		&:active
-			color isDark ? #fff : darken(#9eaba8, 30%)
-
 		> .username
 			display block
 			float left
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 f41d4b8ecf..4f679db938 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -95,9 +95,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.nav
 	display inline-block
 	margin 0
 	padding 0
@@ -129,7 +127,7 @@ root(isDark)
 				padding 0 24px
 				font-size 13px
 				font-variant small-caps
-				color isDark ? #b8c5ca : #9eaba8
+				color var(--desktopHeaderFg)
 				text-decoration none
 				transition none
 				cursor pointer
@@ -138,7 +136,7 @@ root(isDark)
 					pointer-events none
 
 				&:hover
-					color isDark ? #fff : darken(#9eaba8, 20%)
+					color var(--desktopHeaderHoverFg)
 					text-decoration none
 
 				> [data-fa]:first-child
@@ -162,10 +160,4 @@ root(isDark)
 				@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/components/ui.header.notifications.vue b/src/client/app/desktop/views/components/ui.header.notifications.vue
index 2a38655f3a..c59a49556d 100644
--- a/src/client/app/desktop/views/components/ui.header.notifications.vue
+++ b/src/client/app/desktop/views/components/ui.header.notifications.vue
@@ -61,16 +61,13 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.notifications
 	> button
 		display block
 		margin 0
 		padding 0
 		width 32px
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		border none
 		background transparent
 		cursor pointer
@@ -80,10 +77,7 @@ root(isDark)
 
 		&:hover
 		&[data-active='true']
-			color isDark ? #fff : darken(#9eaba8, 20%)
-
-		&:active
-			color isDark ? #fff : darken(#9eaba8, 30%)
+			color var(--desktopHeaderHoverFg)
 
 		> [data-fa].bell
 			font-size 1.2em
@@ -135,10 +129,4 @@ root(isDark)
 			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/components/ui.header.search.vue b/src/client/app/desktop/views/components/ui.header.search.vue
index d5794dc882..d22efbf84f 100644
--- a/src/client/app/desktop/views/components/ui.header.search.vue
+++ b/src/client/app/desktop/views/components/ui.header.search.vue
@@ -28,8 +28,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.search
 	> [data-fa]
 		display block
 		position absolute
@@ -38,7 +37,7 @@ root(isDark)
 		width 48px
 		text-align center
 		line-height 48px
-		color #9eaba8
+		color var(--desktopHeaderFg)
 		pointer-events none
 
 		> *
@@ -52,26 +51,20 @@ root(isDark)
 		width 14em
 		height 32px
 		font-size 1em
-		background rgba(#000, 0.05)
+		background var(--desktopHeaderSearchBg)
 		outline none
-		//border solid 1px #ddd
 		border none
 		border-radius 16px
 		transition color 0.5s ease, border 0.5s ease
-		color isDark ? #fff : #000
+		color var(--desktopHeaderSearchFg)
 
 		&::placeholder
-			color #9eaba8
+			color var(--desktopHeaderFg)
 
 		&:hover
-			background isDark ? rgba(#fff, 0.04) : rgba(#000, 0.08)
+			background var(--desktopHeaderSearchHoverBg)
 
 		&:focus
 			box-shadow 0 0 0 2px var(--primaryAlpha05) !important
 
-.search[data-darkmode]
-	root(true)
-
-.search: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 264da8bef8..5089232b06 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -5,7 +5,6 @@
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
 		<div class="main">
-			<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
 			<div class="container" ref="mainContainer">
 				<div class="left">
 					<x-nav/>
@@ -64,55 +63,6 @@ export default Vue.extend({
 
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$el.offsetHeight);
-
-		if (this.$store.getters.isSignedIn) {
-			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
-			const isHisasiburi = ago >= 3600;
-			this.$store.state.i.lastUsedAt = new Date();
-
-			if (isHisasiburi) {
-				(this.$refs.welcomeback as any).style.display = 'block';
-				(this.$refs.main as any).style.overflow = 'hidden';
-
-				anime({
-					targets: this.$refs.welcomeback,
-					top: '0',
-					opacity: 1,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				anime({
-					targets: this.$refs.mainContainer,
-					opacity: 0,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				setTimeout(() => {
-					anime({
-						targets: this.$refs.welcomeback,
-						top: '-48px',
-						opacity: 0,
-						duration: 500,
-						complete: () => {
-							(this.$refs.welcomeback as any).style.display = 'none';
-							(this.$refs.main as any).style.overflow = 'initial';
-						},
-						easing: 'easeInQuad'
-					});
-
-					anime({
-						targets: this.$refs.mainContainer,
-						opacity: 1,
-						duration: 500,
-						easing: 'easeInQuad'
-					});
-				}, 2500);
-			}
-		}
 	},
 
 	methods: {
@@ -161,17 +111,6 @@ root(isDark)
 			font-size 0.9rem
 			user-select none
 
-			> p
-				display none
-				position absolute
-				top 48px
-				width 100%
-				line-height 48px
-				margin 0
-				text-align center
-				color isDark ? #fff : #888
-				opacity 0
-
 			> .container
 				display flex
 				width 100%
@@ -190,7 +129,7 @@ root(isDark)
 						display block
 						width 48px
 						height 48px
-						background-image isDark ? url('/assets/desktop/header-icon.dark.svg') : url('/assets/desktop/header-icon.light.svg')
+						background-image var(--desktopHeaderIcon)
 						background-size 24px
 						background-position center
 						background-repeat no-repeat
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index d563409564..403a5ded1d 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -49,6 +49,12 @@
 	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 	"desktopHeaderBg": "#313543",
+	"desktopHeaderFg": "#b8c5ca",
+	"desktopHeaderHoverFg": "#fff",
+	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
+	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
+	"desktopHeaderSearchFg": "#fff",
 	"desktopPostFormBg": "@face",
 	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
 	"desktopPostFormTextareaFg": "#fff",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index bdcf282e3d..f9f9a9a52d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -49,6 +49,12 @@
 	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
 	"desktopHeaderBg": "#f7f7f7",
+	"desktopHeaderFg": "#9eaba8",
+	"desktopHeaderHoverFg": "#7b8c88",
+	"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
+	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
+	"desktopHeaderSearchFg": "#000",
 	"desktopPostFormBg": "#fff6f6",
 	"desktopPostFormTextareaBg": "#fff",
 	"desktopPostFormTextareaFg": "#333",
-- 
cgit v1.2.3-freya


From a36d73cb5271b09a75d656043d8e928f9f821c66 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 16:49:18 +0900
Subject: wip

---
 src/client/app/common/views/widgets/calendar.vue   |  2 +-
 .../app/desktop/views/components/calendar.vue      | 45 ++++++++--------------
 .../app/desktop/views/components/notifications.vue | 22 ++++-------
 .../app/desktop/views/pages/deck/deck.notes.vue    |  4 +-
 .../views/pages/deck/deck.notifications.vue        |  4 +-
 src/client/app/mobile/views/components/notes.vue   |  4 +-
 .../app/mobile/views/components/notifications.vue  | 14 ++-----
 src/client/theme/dark.json                         |  7 +++-
 src/client/theme/halloween.json                    |  2 +-
 src/client/theme/light.json                        |  5 +++
 10 files changed, 47 insertions(+), 62 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue
index a24524d1c5..238b493a61 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -124,7 +124,7 @@ root(isDark)
 
 	.mkw-calendar--body
 		padding 16px 0
-		color isDark ? #c5ced6 : #777
+		color var(--calendarDay)
 
 		&:after
 			content ""
diff --git a/src/client/app/desktop/views/components/calendar.vue b/src/client/app/desktop/views/components/calendar.vue
index 6b753068fa..e2f1329b3b 100644
--- a/src/client/app/desktop/views/components/calendar.vue
+++ b/src/client/app/desktop/views/components/calendar.vue
@@ -128,10 +128,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	color isDark ? #c5ced6 : #777
+.mk-calendar
+	color var(--calendarDay)
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -149,12 +147,10 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		color isDark ? #c5ced6 : #888
+		color var(--faceHeaderText)
+		background var(--faceHeader)
 		box-shadow 0 1px rgba(#000, 0.07)
 
-		if isDark
-			background #313543
-
 		> [data-fa]
 			margin-right 4px
 
@@ -172,7 +168,7 @@ root(isDark)
 			color var(--faceTextButtonHover)
 
 		&:active
-			color isDark ? #b2c1d5 : #999
+			color var(--faceTextButtonActive)
 
 		&:first-of-type
 			left 0
@@ -195,49 +191,46 @@ root(isDark)
 			font-size 14px
 
 			&.weekday
-				color isDark ? #43d5dc : #19a2a9
+				color var(--calendarWeek)
 
 				&[data-is-donichi]
-					color isDark ? #ff6679 : #ef95a0
+					color var(--calendarSaturdayOrSunday)
 
 				&[data-today]
-					box-shadow 0 0 0 1px isDark ? #43d5dc : #19a2a9 inset
+					box-shadow 0 0 0 1px var(--calendarWeek) inset
 					border-radius 6px
 
 					&[data-is-donichi]
-						box-shadow 0 0 0 1px isDark ? #ff6679 : #ef95a0 inset
+						box-shadow 0 0 0 1px var(--calendarSaturdayOrSunday) inset
 
 			&.day
 				cursor pointer
-				color isDark ? #c5ced6 : #777
+				color var(--calendarDay)
 
 				> div
 					border-radius 6px
 
 				&:hover > div
-					background rgba(#000, isDark ? 0.1 : 0.025)
+					background var(--faceClearButtonHover)
 
 				&:active > div
-					background rgba(#000, isDark ? 0.2 : 0.05)
+					background var(--faceClearButtonActive)
 
 				&[data-is-donichi]
-					color isDark ? #ff6679 : #ef95a0
+					color var(--calendarSaturdayOrSunday)
 
 				&[data-is-out-of-range]
 					cursor default
-					color rgba(isDark ? #c5ced6 : #777, 0.5)
-
-					&[data-is-donichi]
-						color rgba(isDark ? #ff6679 : #ef95a0, 0.5)
+					opacity 0.5
 
 				&[data-selected]
 					font-weight bold
 
 					> div
-						background rgba(#000, isDark ? 0.1 : 0.025)
+						background var(--faceClearButtonHover)
 
 					&:active > div
-						background rgba(#000, isDark ? 0.2 : 0.05)
+						background var(--faceClearButtonActive)
 
 				&[data-today]
 					> div
@@ -250,10 +243,4 @@ root(isDark)
 					&:active > div
 						background var(--primaryDarken10)
 
-.mk-calendar[data-darkmode]
-	root(true)
-
-.mk-calendar:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 2eb80dcd01..1f3f62395a 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -191,7 +191,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notifications
 	.transition
 		.mk-notifications-enter
 		.mk-notifications-leave-to
@@ -208,7 +208,7 @@ root(isDark)
 				padding 16px
 				overflow-wrap break-word
 				font-size 13px
-				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
+				border-bottom solid 1px var(--faceDivider)
 
 				&:last-child
 					border-bottom none
@@ -219,7 +219,7 @@ root(isDark)
 					top 16px
 					right 12px
 					vertical-align top
-					color isDark ? #606984 : rgba(#000, 0.6)
+					color var(--noteHeaderInfo)
 					font-size small
 
 				&:after
@@ -249,10 +249,10 @@ root(isDark)
 							margin-right 4px
 
 				.note-preview
-					color isDark ? #c2cad4 : rgba(#000, 0.7)
+					color var(--noteText)
 
 				.note-ref
-					color isDark ? #c2cad4 : rgba(#000, 0.7)
+					color var(--noteText)
 
 					[data-fa]
 						font-size 1em
@@ -283,9 +283,9 @@ root(isDark)
 				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(#000, 0.05)
+				color var(--dateDividerFg)
+				background var(--dateDividerBg)
+				border-bottom solid 1px var(--faceDivider)
 
 				span
 					margin 0 16px
@@ -327,10 +327,4 @@ root(isDark)
 		> [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/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 214ec3cdf7..7e171a2397 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -214,8 +214,8 @@ root(isDark)
 			line-height 32px
 			font-size 14px
 			text-align center
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index 8a28061260..aa48571a5b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -177,8 +177,8 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.8em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 8841b0e6bf..9153b1d551 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -243,8 +243,8 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.9em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index 8243a9bfb3..bfb6c1e62a 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -104,9 +104,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notifications
 	margin 0 auto
-	background isDark ? #282C37 :#fff
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 0 2px rgba(#000, 0.1)
 	overflow hidden
@@ -134,8 +134,8 @@ root(isDark)
 			line-height 32px
 			text-align center
 			font-size 0.8em
-			color isDark ? #666b79 : #aaa
-			background isDark ? #242731 : #fdfdfd
+			color var(--dateDividerFg)
+			background var(--dateDividerBg)
 			border-bottom solid 1px var(--faceDivider)
 
 			span
@@ -169,10 +169,4 @@ root(isDark)
 		> [data-fa]
 			margin-right 4px
 
-.mk-notifications[data-darkmode]
-	root(true)
-
-.mk-notifications:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 403a5ded1d..ef5170e71e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -17,6 +17,8 @@
 	"faceTextButton": "#9baec8",
 	"faceTextButtonHover": "#b2c1d5",
 	"faceTextButtonActive": "#b2c1d5",
+	"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
+	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
 	"popupBg": "#2c303c",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
@@ -48,11 +50,14 @@
 	"cwButtonFg": "#393f4f",
 	"cwButtonHoverBg": "#707b97",
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
+	"calendarWeek": "#43d5dc",
+	"calendarSaturdayOrSunday": "#ff6679",
+	"calendarDay": "#c5ced6",
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",
 	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
-	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
+	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
 	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
 	"desktopHeaderSearchFg": "#fff",
 	"desktopPostFormBg": "@face",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 474fc7ea8f..420a03d2cd 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -16,5 +16,5 @@
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
 	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
-	"desktopHeaderBg": "#0c0b19"
+	"desktopHeaderBg": "#36314e"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f9f9a9a52d..bbffc8e143 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -17,6 +17,8 @@
 	"faceTextButton": "#ccc",
 	"faceTextButtonHover": "#aaa",
 	"faceTextButtonActive": "#999",
+	"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
+	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
 	"popupBg": "#fff",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
@@ -48,6 +50,9 @@
 	"cwButtonFg": "#fff",
 	"cwButtonHoverBg": "#bbc4ce",
 	"reactionPickerButtonHoverBg": "#eee",
+	"calendarWeek": "#19a2a9",
+	"calendarSaturdayOrSunday": "#ef95a0",
+	"calendarDay": "#777",
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",
-- 
cgit v1.2.3-freya


From 5f289e47676b790b6ac2d6c8cb887300e190fd73 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 16:58:00 +0900
Subject: wip

---
 .../common/views/components/visibility-chooser.vue    | 19 +++++--------------
 src/client/theme/halloween.json                       |  4 ++--
 2 files changed, 7 insertions(+), 16 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index 5faf09fa11..02f33bfbc0 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -127,11 +127,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 $border-color = rgba(27, 31, 35, 0.15)
 
-root(isDark)
+.mk-visibility-chooser
 	position initial
 
 	> .backdrop
@@ -141,7 +139,7 @@ root(isDark)
 		z-index 10000
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
+		background var(--modalBackdrop)
 		opacity 0
 
 	> .popover
@@ -189,14 +187,14 @@ root(isDark)
 			display flex
 			padding 8px 14px
 			font-size 12px
-			color isDark ? #fff : #666
+			color var(--popupFg)
 			cursor pointer
 
 			&:hover
-				background isDark ? #252731 : #eee
+				background var(--faceClearButtonHover)
 
 			&:active
-				background isDark ? #21242b : #ddd
+				background var(--faceClearButtonActive)
 
 			&.active
 				color var(--primaryForeground)
@@ -222,11 +220,4 @@ root(isDark)
 
 				> 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/theme/halloween.json b/src/client/theme/halloween.json
index 420a03d2cd..154755fe90 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -5,13 +5,13 @@
 		"author": "syuilo",
 		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
 	},
-	"primary": "#fb8d4e",
+	"primary": "#d67036",
 	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
 	"face": "#322e44",
 	"faceHeader": "#36314e",
 	"dateDividerBg": "#26253c",
-	"popupBg": "#2c303c",
+	"popupBg": "@face",
 	"popupFg": "#d6dce2",
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
-- 
cgit v1.2.3-freya


From 5b0b83faa7af45ddae740a203651eedff9863b41 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 17:29:57 +0900
Subject: wip

---
 .../app/common/views/components/messaging.vue      | 26 ++++++----------------
 src/client/app/common/views/components/ui/card.vue | 19 +++++-----------
 src/client/theme/dark.json                         |  1 +
 src/client/theme/light.json                        |  1 +
 4 files changed, 14 insertions(+), 33 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index a984c980b1..8e5393e6e5 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -204,12 +204,10 @@ root(isDark)
 		left 0
 		z-index 1
 		width 100%
-		background #fff
 		box-shadow 0 0px 2px rgba(#000, 0.2)
 
 		> .form
-			padding 8px
-			background isDark ? #282c37 : #f7f7f7
+			background rgba(0, 0, 0, 0.02)
 
 			> label
 				display block
@@ -229,32 +227,22 @@ root(isDark)
 					bottom 0
 					left 0
 					width 1em
-					line-height 56px
+					line-height 48px
 					margin auto
 					color #555
 
 			> input
 				margin 0
-				padding 0 0 0 32px
+				padding 0 0 0 42px
 				width 100%
 				font-size 1em
-				line-height 38px
-				color #000
+				line-height 48px
+				color var(--faceText)
 				outline none
-				background isDark ? #191b22 : #fff
-				border solid 1px isDark ? #495156 : #eee
+				background transparent
+				border none
 				border-radius 5px
 				box-shadow none
-				transition color 0.5s ease, border 0.5s ease
-
-				&:hover
-					border solid 1px isDark ? #b0b0b0 : #ddd
-					transition border 0.2s ease
-
-				&:focus
-					color var(--primaryDarken20)
-					border solid 1px var(--primary)
-					transition color 0, border 0
 
 		> .result
 			display block
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index be24027f6c..a37a38d340 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -20,11 +20,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ui-card
 	margin 16px
-	color isDark ? #fff : #000
+	color var(--faceText)
 	background var(--face)
 	box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
@@ -32,14 +30,14 @@ root(isDark)
 		padding 16px
 		font-weight bold
 		font-size 20px
-		color isDark ? #fff : #444
+		color var(--faceText)
 
 		@media (min-width 500px)
 			padding 24px 32px
 
 	> section
 		padding 20px 16px
-		border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+		border-top solid 1px var(--faceDivider)
 
 		@media (min-width 500px)
 			padding 32px
@@ -50,12 +48,5 @@ root(isDark)
 		> header
 			margin-bottom 16px
 			font-weight bold
-			color isDark ? #fff : #444
-
-.ui-card[data-darkmode]
-	root(true)
-
-.ui-card:not([data-darkmode])
-	root(false)
-
+			color var(--faceText)
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index ef5170e71e..7e0df42365 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -11,6 +11,7 @@
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
 	"face": "#282c37",
+	"faceText": "#fff",
 	"faceHeader": "#313543",
 	"faceHeaderText": "#e3e5e8",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index bbffc8e143..482276f638 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -11,6 +11,7 @@
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
 	"face": "#fff",
+	"faceText": "#444",
 	"faceHeader": "#fff",
 	"faceHeaderText": "#888",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
-- 
cgit v1.2.3-freya


From f3eeadcd8f3f0513250dc6ed13cabd6636da3a89 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 17:42:51 +0900
Subject: wip

---
 .../app/common/views/components/messaging.vue      | 28 ++++++++--------------
 .../app/desktop/views/components/post-form.vue     |  4 ++--
 2 files changed, 12 insertions(+), 20 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 8e5393e6e5..91453e16ec 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -167,9 +167,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging
 
 	&[data-compact]
 		font-size 0.8em
@@ -318,20 +316,20 @@ root(isDark)
 			display block
 			text-decoration none
 			background var(--face)
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			*
 				pointer-events none
 				user-select none
 
 			&:hover
-				background isDark ? #1e2129 : #fafafa
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
-				> .avatar
+				.avatar
 					filter saturate(200%)
 
 			&:active
-				background isDark ? #14161b : #eee
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 			&[data-is-read]
 			&[data-is-me]
@@ -371,17 +369,17 @@ root(isDark)
 						overflow hidden
 						text-overflow ellipsis
 						font-size 1em
-						color isDark ? #fff : rgba(#000, 0.9)
+						color var(--noteHeaderName)
 						font-weight bold
 						transition all 0.1s ease
 
 					> .username
 						margin 0 8px
-						color isDark ? #606984 : rgba(#000, 0.5)
+						color var(--noteHeaderAcct)
 
 					> .mk-time
 						margin 0 0 0 auto
-						color isDark ? #606984 : rgba(#000, 0.5)
+						color var(--noteHeaderInfo)
 						font-size 80%
 
 				> .avatar
@@ -401,10 +399,10 @@ root(isDark)
 						overflow hidden
 						overflow-wrap break-word
 						font-size 1.1em
-						color isDark ? #fff : rgba(#000, 0.8)
+						color var(--faceText)
 
 						.me
-							color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.4)
+							opacity 0.7
 
 					> .image
 						display block
@@ -449,10 +447,4 @@ root(isDark)
 					> .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/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 5a5f9d63db..0d600dd08e 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -503,7 +503,7 @@ root(isDark)
 
 			> span
 				margin-right 16px
-				color isDark ? #fff : #666
+				color var(--primary)
 
 		> .hashtags
 			margin 0 0 8px 0
@@ -512,7 +512,7 @@ root(isDark)
 			font-size 14px
 
 			> b
-				color isDark ? #9baec8 : var(--primaryDarken20)
+				color var(--primary)
 
 			> *
 				margin-right 8px
-- 
cgit v1.2.3-freya


From cc6af402be152702488645f87fa9464e52caf36e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 18:01:23 +0900
Subject: wip

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 0d600dd08e..5dd40c9ba5 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -521,7 +521,7 @@ root(isDark)
 		> .files
 			margin 0
 			padding 0
-			background isDark ? #181b23 : var(--primaryLighten98)
+			background var(--desktopPostFormTextareaBg)
 			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
@@ -572,7 +572,7 @@ root(isDark)
 						cursor pointer
 
 		> .mk-poll-editor
-			background isDark ? #181b23 : var(--primaryLighten98)
+			background var(--desktopPostFormTextareaBg)
 			border solid 1px var(--primaryAlpha01)
 			border-top none
 			border-radius 0 0 4px 4px
-- 
cgit v1.2.3-freya


From 459b374d612e53cfd4244649ac2c812618f827f5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 19:14:35 +0900
Subject: wip

---
 src/client/app/common/scripts/theme.ts            | 17 +++++++++++++++++
 src/client/app/common/views/widgets/broadcast.vue | 14 ++++----------
 src/client/theme/dark.json                        | 19 +++++++++++++------
 src/client/theme/halloween.json                   | 16 +++++++---------
 src/client/theme/light.json                       | 19 +++++++++++++------
 5 files changed, 54 insertions(+), 31 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index a08028ff9a..db1cd7c394 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -7,6 +7,7 @@ type Theme = {
 		id: string;
 		name: string;
 		inherit: string;
+		vars: any;
 	};
 } & {
 	[key: string]: string;
@@ -34,6 +35,22 @@ function compile(theme: Theme): { [key: string]: string } {
 		if (code[0] == '@') {
 			return getColor(theme[code.substr(1)]);
 		}
+		if (code[0] == '$') {
+			return getColor(theme.meta.vars[code.substr(1)]);
+		}
+
+		// func
+		if (code[0] == ':') {
+			const parts = code.split('<');
+			const func = parts.shift().substr(1);
+			const arg = parseInt(parts.shift(), 10);
+			const color = getColor(parts.join('<'));
+
+			switch (func) {
+				case 'darken': return color.darken(arg);
+				case 'lighten': return color.lighten(arg);
+			}
+		}
 
 		return tinycolor(code);
 	}
diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index c471229f15..65e37bfc69 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -71,9 +71,9 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.anltbovirfeutcigvwgmgxipejaeozxi-body
 	padding 10px
-	background isDark ? #253a50 : #f3f9ff
+	background var(--announcementsBg)
 
 	&[data-melt]
 		background transparent
@@ -130,14 +130,14 @@ root(isDark)
 		margin 0
 		font-size 0.95em
 		font-weight normal
-		color isDark ? #539eff : #4078c0
+		color var(--announcementsTitle)
 
 	> p
 		display block
 		z-index 1
 		margin 0
 		font-size 0.7em
-		color isDark ? #fff : #57616f
+		color var(--announcementsText)
 
 		&.fetching
 			text-align center
@@ -150,10 +150,4 @@ root(isDark)
 		> p
 			color #fff
 
-.anltbovirfeutcigvwgmgxipejaeozxi-body[data-darkmode]
-	root(true)
-
-.anltbovirfeutcigvwgmgxipejaeozxi-body:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 7e0df42365..c4d1fa9d62 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -2,17 +2,21 @@
 	"meta": {
 		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
 		"name": "Dark",
-		"author": "syuilo"
+		"author": "syuilo",
+		"vars": {
+			"primary": "#fb4e4e",
+			"secondary": "#282C37"
+		}
 	},
-	"primary": "#fb4e4e",
+	"primary": "$primary",
 	"primaryForeground": "#fff",
-	"bg": "#191b22",
+	"bg": ":darken<8<$secondary",
 	"scrollbarTrack": "#282c37",
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
-	"face": "#282c37",
+	"face": "$secondary",
 	"faceText": "#fff",
-	"faceHeader": "#313543",
+	"faceHeader": ":lighten<5<$secondary",
 	"faceHeaderText": "#e3e5e8",
 	"faceDivider": "rgba(0, 0, 0, 0.3)",
 	"faceTextButton": "#9baec8",
@@ -20,7 +24,7 @@
 	"faceTextButtonActive": "#b2c1d5",
 	"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
-	"popupBg": "#2c303c",
+	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#d6dce2",
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
@@ -54,6 +58,9 @@
 	"calendarWeek": "#43d5dc",
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
+	"announcementsBg": "#253a50",
+	"announcementsTitle": "#539eff",
+	"announcementsText": "#fff",
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 154755fe90..81c773f574 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -3,18 +3,16 @@
 		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
 		"name": "Halloween",
 		"author": "syuilo",
-		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63"
+		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63",
+		"vars": {
+			"primary": "#d67036",
+			"primaryForeground": "#fff",
+			"secondary": "#1f1d30",
+			"text": "#b1bee3"
+		}
 	},
-	"primary": "#d67036",
-	"primaryForeground": "#fff",
 	"bg": "#1b1a35",
-	"face": "#322e44",
-	"faceHeader": "#36314e",
-	"dateDividerBg": "#26253c",
-	"popupBg": "@face",
-	"popupFg": "#d6dce2",
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
-	"reactionPickerButtonHoverBg": "rgba(0, 0, 0, 0.18)",
 	"desktopHeaderBg": "#36314e"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 482276f638..a7037b8e54 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -2,17 +2,21 @@
 	"meta": {
 		"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
 		"name": "Light",
-		"author": "syuilo"
+		"author": "syuilo",
+		"vars": {
+			"primary": "#fb4e4e",
+			"secondary": "#fff"
+		}
 	},
-	"primary": "#fb4e4e",
+	"primary": "$primary",
 	"primaryForeground": "#fff",
-	"bg": "#f7f7f7",
+	"bg": ":darken<8<$secondary",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
-	"face": "#fff",
+	"face": "$secondary",
 	"faceText": "#444",
-	"faceHeader": "#fff",
+	"faceHeader": ":lighten<5<$secondary",
 	"faceHeaderText": "#888",
 	"faceDivider": "rgba(0, 0, 0, 0.082)",
 	"faceTextButton": "#ccc",
@@ -20,7 +24,7 @@
 	"faceTextButtonActive": "#999",
 	"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
-	"popupBg": "#fff",
+	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#586069",
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
@@ -54,6 +58,9 @@
 	"calendarWeek": "#19a2a9",
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
+	"announcementsBg": "#f3f9ff",
+	"announcementsTitle": "#4078c0",
+	"announcementsText": "#57616f",
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",
-- 
cgit v1.2.3-freya


From 7a0a8b5d2b1d9f4f0bbacdb6b30cfbedab75f59d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 19:32:06 +0900
Subject: wip

---
 src/client/app/common/views/components/google.vue | 20 +++++++-------------
 src/client/theme/dark.json                        | 16 ++++++++++++++++
 src/client/theme/light.json                       | 16 ++++++++++++++++
 3 files changed, 39 insertions(+), 13 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/google.vue b/src/client/app/common/views/components/google.vue
index 8272961ef2..ac71a5e56d 100644
--- a/src/client/app/common/views/components/google.vue
+++ b/src/client/app/common/views/components/google.vue
@@ -26,7 +26,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-google
 	display flex
 	margin 8px 0
 
@@ -37,31 +37,25 @@ root(isDark)
 		height 40px
 		font-family sans-serif
 		font-size 16px
-		color isDark ? #dee4e8 : #55595c
-		background isDark ? #191b22 : #fff
-		border solid 1px isDark ? #495156 : #dadada
+		color var(--googleSearchFg)
+		background var(--googleSearchBg)
+		border solid 1px var(--googleSearchBorder)
 		border-radius 4px 0 0 4px
 
 		&:hover
-			border-color isDark ? #777c86 : #b0b0b0
+			border-color var(--googleSearchHoverBorder)
 
 	> button
 		flex-shrink 0
 		padding 0 16px
-		border solid 1px isDark ? #495156 : #dadada
+		border solid 1px var(--googleSearchBorder)
 		border-left none
 		border-radius 0 4px 4px 0
 
 		&:hover
-			background-color isDark ? #2e3440 : #eee
+			background-color var(--googleSearchHoverButton)
 
 		&:active
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
-.mk-google[data-darkmode]
-	root(true)
-
-.mk-google:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index c4d1fa9d62..0422eb021b 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -38,29 +38,45 @@
 	"noteHeaderAdminBg": "#5d282e",
 	"noteHeaderAcct": "#606984",
 	"noteHeaderInfo": "#606984",
+
 	"noteActions": "#606984",
 	"noteActionsHover": "#a1a8bf",
 	"noteActionsReplyHover": "#0af",
 	"noteActionsRenoteHover": "#8d0",
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#707b97",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
+
 	"dateDividerBg": "#242731",
 	"dateDividerFg": "#666b79",
+
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
+
 	"cwButtonBg": "#687390",
 	"cwButtonFg": "#393f4f",
 	"cwButtonHoverBg": "#707b97",
+
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
+
 	"calendarWeek": "#43d5dc",
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
+
 	"announcementsBg": "#253a50",
 	"announcementsTitle": "#539eff",
 	"announcementsText": "#fff",
+
+	"googleSearchBg": "rgba(0, 0, 0, 0.2)",
+	"googleSearchFg": "#dee4e8",
+	"googleSearchBorder": "rgba(255, 255, 255, 0.2)",
+	"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
+	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
+
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index a7037b8e54..83e4ee05c3 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -38,29 +38,45 @@
 	"noteHeaderAdminBg": "#5d282e",
 	"noteHeaderAcct": "#ccc",
 	"noteHeaderInfo": "#c0c0c0",
+
 	"noteActions": "#ddd",
 	"noteActionsHover": "#444",
 	"noteActionsReplyHover": "#0af",
 	"noteActionsRenoteHover": "#8d0",
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#888",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
+
 	"dateDividerBg": "#fdfdfd",
 	"dateDividerFg": "#aaa",
+
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
+
 	"cwButtonBg": "#b1b9c1",
 	"cwButtonFg": "#fff",
 	"cwButtonHoverBg": "#bbc4ce",
+
 	"reactionPickerButtonHoverBg": "#eee",
+
 	"calendarWeek": "#19a2a9",
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
+
 	"announcementsBg": "#f3f9ff",
 	"announcementsTitle": "#4078c0",
 	"announcementsText": "#57616f",
+
+	"googleSearchBg": "#fff",
+	"googleSearchFg": "#55595c",
+	"googleSearchBorder": "rgba(0, 0, 0, 0.2)",
+	"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
+	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
+
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",
-- 
cgit v1.2.3-freya


From b032f78769d7d70b2265cb5318276fa582c20bf7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 21:43:11 +0900
Subject: wip

---
 .../views/components/messaging-room.message.vue    | 20 ++------
 .../app/common/views/components/messaging-room.vue | 36 ++++---------
 .../app/mobile/views/components/ui.header.vue      | 60 ----------------------
 src/client/theme/dark.json                         |  8 +++
 src/client/theme/halloween.json                    |  1 -
 src/client/theme/light.json                        |  8 +++
 6 files changed, 30 insertions(+), 103 deletions(-)

(limited to 'src/client')

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 e0528d5432..77bf55c52c 100644
--- a/src/client/app/common/views/components/messaging-room.message.vue
+++ b/src/client/app/common/views/components/messaging-room.message.vue
@@ -59,9 +59,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.message
 	$me-balloon-color = var(--primary)
 
 	padding 10px 12px 10px 12px
@@ -179,7 +177,7 @@ root(isDark)
 			display block
 			margin 2px 0 0 0
 			font-size 10px
-			color isDark ? rgba(#fff, 0.4) : rgba(#000, 0.4)
+			color var(--messagingRoomMessageInfo)
 
 			> [data-fa]
 				margin-left 4px
@@ -192,7 +190,7 @@ root(isDark)
 			padding-left 66px
 
 			> .balloon
-				$color = isDark ? #2d3338 : #eee
+				$color = var(--messagingRoomMessageBg)
 				float left
 				background $color
 
@@ -208,8 +206,7 @@ root(isDark)
 
 				> .content
 					> .text
-						if isDark
-							color #fff
+							color var(--messagingRoomMessageFg)
 
 			> footer
 				text-align left
@@ -250,18 +247,9 @@ root(isDark)
 
 				> .read
 					user-select none
-					margin 0 4px 0 0
-					color isDark ? rgba(#fff, 0.5) : rgba(#000, 0.5)
-					font-size 11px
 
 	&[data-is-deleted]
 		> .balloon
 			opacity 0.5
 
-.message[data-darkmode]
-	root(true)
-
-.message:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 52abfa4e1d..98661bc39d 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -262,14 +262,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging-room
 	display flex
 	flex 1
 	flex-direction column
 	height 100%
-	background isDark ? #191b22 : #fff
+	background var(--messagingRoomBg)
 
 	> .body
 		width 100%
@@ -277,24 +275,15 @@ root(isDark)
 		margin 0 auto
 		flex 1
 
-		> .init
-			width 100%
-			margin 0
-			padding 16px 8px 8px 8px
-			text-align center
-			font-size 0.8em
-			color rgba(isDark ? #fff : #000, 0.4)
-
-			[data-fa]
-				margin-right 4px
-
+		> .init,
 		> .empty
 			width 100%
 			margin 0
 			padding 16px 8px 8px 8px
 			text-align center
 			font-size 0.8em
-			color rgba(isDark ? #fff : #000, 0.4)
+			color var(--messagingRoomInfo)
+			opacity 0.5
 
 			[data-fa]
 				margin-right 4px
@@ -305,7 +294,8 @@ root(isDark)
 			padding 16px
 			text-align center
 			font-size 0.8em
-			color rgba(isDark ? #fff : #000, 0.4)
+			color var(--messagingRoomInfo)
+			opacity 0.5
 
 			[data-fa]
 				margin-right 4px
@@ -349,7 +339,7 @@ root(isDark)
 				left 0
 				right 0
 				margin 0 auto
-				background rgba(isDark ? #fff : #000, 0.1)
+				background var(--messagingRoomDateDividerLine)
 
 			> span
 				display inline-block
@@ -357,8 +347,8 @@ root(isDark)
 				padding 0 16px
 				//font-weight bold
 				line-height 32px
-				color rgba(isDark ? #fff : #000, 0.3)
-				background isDark ? #191b22 : #fff
+				color var(--messagingRoomDateDividerText)
+				background var(--messagingRoomBg)
 
 	> footer
 		position -webkit-sticky
@@ -410,10 +400,4 @@ root(isDark)
 	transition opacity 0.5s
 	opacity 0
 
-.mk-messaging-room[data-darkmode]
-	root(true)
-
-.mk-messaging-room: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 b859c22887..d3e258f052 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -4,7 +4,6 @@
 	<mk-special-message/>
 	<div class="main" ref="main">
 		<div class="backdrop"></div>
-		<p ref="welcomeback" v-if="$store.getters.isSignedIn">%i18n:@welcome-back%<b>{{ $store.state.i | userName }}</b>%i18n:@adjective%</p>
 		<div class="content" ref="mainContainer">
 			<button class="nav" @click="$parent.isDrawerOpening = true">%fa:bars%</button>
 			<template v-if="hasUnreadNotification || hasUnreadMessagingMessage || hasGameInvitation">%fa:circle%</template>
@@ -50,53 +49,6 @@ export default Vue.extend({
 
 			this.connection.on('reversi_invited', this.onReversiInvited);
 			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
-
-			const ago = (new Date().getTime() - new Date(this.$store.state.i.lastUsedAt).getTime()) / 1000;
-			const isHisasiburi = ago >= 3600;
-			this.$store.state.i.lastUsedAt = new Date();
-
-			if (isHisasiburi) {
-				(this.$refs.welcomeback as any).style.display = 'block';
-				(this.$refs.main as any).style.overflow = 'hidden';
-
-				anime({
-					targets: this.$refs.welcomeback,
-					top: '0',
-					opacity: 1,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				anime({
-					targets: this.$refs.mainContainer,
-					opacity: 0,
-					delay: 1000,
-					duration: 500,
-					easing: 'easeOutQuad'
-				});
-
-				setTimeout(() => {
-					anime({
-						targets: this.$refs.welcomeback,
-						top: '-48px',
-						opacity: 0,
-						duration: 500,
-						complete: () => {
-							(this.$refs.welcomeback as any).style.display = 'none';
-							(this.$refs.main as any).style.overflow = 'initial';
-						},
-						easing: 'easeInQuad'
-					});
-
-					anime({
-						targets: this.$refs.mainContainer,
-						opacity: 1,
-						duration: 500,
-						easing: 'easeInQuad'
-					});
-				}, 2500);
-			}
 		}
 	},
 	beforeDestroy() {
@@ -159,18 +111,6 @@ root(isDark)
 			//background-color rgba(#1b2023, 0.75)
 			background-color isDark ? #313543 : #595f6f
 
-		> p
-			display none
-			position absolute
-			z-index 1002
-			top $height
-			width 100%
-			line-height $height
-			margin 0
-			text-align center
-			color #fff
-			opacity 0
-
 		> .content
 			z-index 1001
 
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 0422eb021b..7a9a06187f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -77,6 +77,14 @@
 	"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
 	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
 
+	"messagingRoomBg": "@bg",
+	"messagingRoomInfo": "#fff",
+	"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
+	"messagingRoomDateDividerText": "rgba(255, 255, 255, 0.3)",
+	"messagingRoomMessageInfo": "rgba(255, 255, 255, 0.4)",
+	"messagingRoomMessageBg": "$secondary",
+	"messagingRoomMessageFg": "#fff",
+
 	"desktopHeaderBg": "#313543",
 	"desktopHeaderFg": "#b8c5ca",
 	"desktopHeaderHoverFg": "#fff",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 81c773f574..327d04cad6 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -11,7 +11,6 @@
 			"text": "#b1bee3"
 		}
 	},
-	"bg": "#1b1a35",
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
 	"desktopHeaderBg": "#36314e"
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 83e4ee05c3..ca0dad0718 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -77,6 +77,14 @@
 	"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
 	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
 
+	"messagingRoomBg": "#fff",
+	"messagingRoomInfo": "#000",
+	"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",
+	"messagingRoomDateDividerText": "rgba(0, 0, 0, 0.3)",
+	"messagingRoomMessageInfo": "rgba(0, 0, 0, 0.4)",
+	"messagingRoomMessageBg": "#eee",
+	"messagingRoomMessageFg": "#333",
+
 	"desktopHeaderBg": "#f7f7f7",
 	"desktopHeaderFg": "#9eaba8",
 	"desktopHeaderHoverFg": "#7b8c88",
-- 
cgit v1.2.3-freya


From ef74653a4bb80215482b25c2028924c5c04717e3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:25:10 +0900
Subject: wip

---
 src/client/app/common/scripts/theme.ts             |  3 ++-
 .../app/desktop/views/components/settings.vue      | 27 ++++++++--------------
 src/client/theme/dark.json                         |  7 +++++-
 src/client/theme/light.json                        |  7 +++++-
 4 files changed, 23 insertions(+), 21 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index db1cd7c394..f27ded8685 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -43,12 +43,13 @@ function compile(theme: Theme): { [key: string]: string } {
 		if (code[0] == ':') {
 			const parts = code.split('<');
 			const func = parts.shift().substr(1);
-			const arg = parseInt(parts.shift(), 10);
+			const arg = parseFloat(parts.shift());
 			const color = getColor(parts.join('<'));
 
 			switch (func) {
 				case 'darken': return color.darken(arg);
 				case 'lighten': return color.lighten(arg);
+				case 'alpha': return color.setAlpha(arg);
 			}
 		}
 
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index e95e7a735d..4d839f1dc9 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -486,9 +486,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-settings
 	display flex
 	width 100%
 	height 100%
@@ -499,13 +497,13 @@ root(isDark)
 		height 100%
 		padding 16px 0 0 0
 		overflow auto
-		border-right solid 1px isDark ? #1c2023 : #ddd
+		border-right solid 1px var(--faceDivider)
 
 		> p
 			display block
 			padding 10px 16px
 			margin 0
-			color isDark ? #9aa2a7 : #666
+			color var(--desktopSettingsNavItem)
 			cursor pointer
 			user-select none
 			transition margin-left 0.2s ease
@@ -514,7 +512,7 @@ root(isDark)
 				margin-right 4px
 
 			&:hover
-				color isDark ? #fff : #555
+				color var(--desktopSettingsNavItemHover)
 
 			&.active
 				margin-left 8px
@@ -528,14 +526,13 @@ root(isDark)
 
 		> section
 			margin 32px
-			color isDark ? #c4ccd2 : #4a535a
+			color var(--text)
 
 			> h1
 				margin 0 0 1em 0
 				padding 0 0 8px 0
 				font-size 1em
-				color isDark ? #e3e7ea : #555
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			&, >>> *
 				.ui.button.block
@@ -548,18 +545,12 @@ root(isDark)
 						margin 0 0 1em 0
 						padding 0 0 8px 0
 						font-size 1em
-						color isDark ? #e3e7ea : #555
-						border-bottom solid 1px isDark ? #1c2023 : #eee
+						color var(--text)
+						border-bottom solid 1px var(--faceDivider)
 
 		> .web
 			> .div
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 				margin 16px 0
 
-.mk-settings[data-darkmode]
-	root(true)
-
-.mk-settings:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 7a9a06187f..8962235f2f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -5,12 +5,14 @@
 		"author": "syuilo",
 		"vars": {
 			"primary": "#fb4e4e",
-			"secondary": "#282C37"
+			"secondary": "#282C37",
+			"text": "#d0e0ea"
 		}
 	},
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
+	"text": "$text",
 	"scrollbarTrack": "#282c37",
 	"scrollbarHandle": "#454954",
 	"scrollbarHandleHover": "#535660",
@@ -99,6 +101,9 @@
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
+	"desktopSettingsNavItem": ":alpha<0.8<$text",
+	"desktopSettingsNavItemHover": ":lighten<10<$text",
+
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index ca0dad0718..11b001ceb1 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -5,12 +5,14 @@
 		"author": "syuilo",
 		"vars": {
 			"primary": "#fb4e4e",
-			"secondary": "#fff"
+			"secondary": "#fff",
+			"text": "#666"
 		}
 	},
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
+	"text": "$text",
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
@@ -99,6 +101,9 @@
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
+	"desktopSettingsNavItem": ":alpha<0.8<$text",
+	"desktopSettingsNavItemHover": ":darken<10<$text",
+
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-- 
cgit v1.2.3-freya


From 0c7111b438d8a1242008412dfa01504f2a116cd7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:30:52 +0900
Subject: wip

---
 src/client/app/common/scripts/theme.ts | 4 ----
 src/client/style.styl                  | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
index f27ded8685..7a1c6abb76 100644
--- a/src/client/app/common/scripts/theme.ts
+++ b/src/client/app/common/scripts/theme.ts
@@ -62,10 +62,6 @@ function compile(theme: Theme): { [key: string]: string } {
 		if (k == 'meta') return;
 		const c = getColor(v);
 		props[k] = genValue(c);
-		props[`${k}-r`] = c.toRgb().r;
-		props[`${k}-g`] = c.toRgb().g;
-		props[`${k}-b`] = c.toRgb().b;
-		props[`${k}-a`] = c.toRgb().a;
 	});
 
 	const primary = getColor(props['primary']);
diff --git a/src/client/style.styl b/src/client/style.styl
index 111e167204..8ebba2f15e 100644
--- a/src/client/style.styl
+++ b/src/client/style.styl
@@ -33,7 +33,7 @@ a
 
 @css {
 	a {
-		tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
-		-webkit-tap-highlight-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.7) !important;
+		tap-highlight-color: var(--primaryAlpha07) !important;
+		-webkit-tap-highlight-color: var(--primaryAlpha07) !important;
 	}
 }
-- 
cgit v1.2.3-freya


From 1e9eeeb980fc416efcda68b4020d65425c0e8e31 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:50:34 +0900
Subject: wip

---
 .../views/components/messaging-room.form.vue       |  2 +-
 .../app/common/views/components/poll-editor.vue    |  2 +-
 .../app/common/views/components/ui/form/radio.vue  |  2 +-
 .../app/common/views/components/ui/input.vue       | 10 ++++-----
 .../app/common/views/components/ui/radio.vue       |  2 +-
 .../app/common/views/components/ui/select.vue      |  4 ++--
 .../app/common/views/components/ui/textarea.vue    | 26 ++++++++--------------
 .../app/common/views/components/url-preview.vue    | 18 +++++----------
 src/client/theme/dark.json                         | 12 +++++++++-
 src/client/theme/halloween.json                    |  1 +
 src/client/theme/light.json                        | 10 +++++++++
 11 files changed, 48 insertions(+), 41 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index 90668aee6e..8e62587c20 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -209,7 +209,7 @@ root(isDark)
 		padding 8px
 		resize none
 		font-size 1em
-		color isDark ? #fff : #000
+		color var(--inputText)
 		outline none
 		border none
 		border-top solid 1px isDark ? #4b5056 : #eee
diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 219f0a7fd5..7f52c62c23 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -103,7 +103,7 @@ root(isDark)
 				padding 6px 8px
 				width 300px
 				font-size 14px
-				color isDark ? #fff : #000
+				color var(--inputText)
 				background isDark ? #191b22 : #fff
 				border solid 1px var(--primaryAlpha01)
 				border-radius 4px
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 13cabbdc04..5728a8171b 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -62,7 +62,7 @@ root(isDark)
 
 	&:hover
 		> .button
-			border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			border solid 2px var(--inputLabel)
 
 	&.disabled
 		opacity 0.6
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 98c9bf7f5a..d7b83d81cd 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -167,7 +167,7 @@ root(isDark, fill)
 		width 24px
 		text-align center
 		line-height 32px
-		color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		color var(--inputLabel)
 
 		&:not(:empty) + .input
 			margin-left 28px
@@ -183,7 +183,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				background var(--inputBorder)
 
 			&:after
 				content ''
@@ -242,7 +242,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -257,7 +257,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			line-height 32px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@@ -280,7 +280,7 @@ root(isDark, fill)
 			top 0
 			font-size 16px
 			line-height fill ? 44px : 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 
 			&:empty
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index ded6b5650c..3a4407abc0 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -87,7 +87,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+		border solid 2px var(--inputLabel)
 		border-radius 100%
 		transition inherit
 
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index c32865c690..bdb730fea9 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -103,7 +103,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				height 1px
-				background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				background var(--inputBorder)
 
 			&:after
 				content ''
@@ -143,7 +143,7 @@ root(isDark, fill)
 			font-weight fill ? bold : normal
 			font-size 16px
 			height 32px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
diff --git a/src/client/app/common/views/components/ui/textarea.vue b/src/client/app/common/views/components/ui/textarea.vue
index 53b7dcaf8c..67898ee059 100644
--- a/src/client/app/common/views/components/ui/textarea.vue
+++ b/src/client/app/common/views/components/ui/textarea.vue
@@ -63,9 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 42px 0 32px 0
 
 	> .input
@@ -84,7 +82,7 @@ root(isDark, fill)
 				left 0
 				right 0
 				background none
-				border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
+				border solid 1px var(--inputBorder)
 				border-radius 3px
 				pointer-events none
 
@@ -112,7 +110,7 @@ root(isDark, fill)
 			transition-duration 0.3s
 			font-size 16px
 			line-height 32px
-			color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
+			color var(--inputLabel)
 			pointer-events none
 			//will-change transform
 			transform-origin top left
@@ -126,7 +124,7 @@ root(isDark, fill)
 			font inherit
 			font-weight fill ? bold : normal
 			font-size 16px
-			color isDark ? #fff : #000
+			color var(--inputText)
 			background transparent
 			border none
 			border-radius 0
@@ -159,16 +157,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
 
-.ui-textarea[data-darkmode]
-	&.fill
-		root(true, true)
-	&:not(.fill)
-		root(true, false)
-
-.ui-textarea:not([data-darkmode])
-	&.fill
-		root(false, true)
-	&:not(.fill)
-		root(false, false)
+.ui-textarea.fill
+	root(true)
+
+.ui-textarea:not(.fill)
+	root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index f9b8415b5b..86489cf8be 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -200,17 +200,17 @@ export default Vue.extend({
 		top 0
 		width 100%
 
-root(isDark)
+.mk-url-preview
 	> a
 		display block
 		font-size 14px
-		border solid 1px isDark ? #191b1f : #eee
+		border solid 1px var(--urlPreviewBorder)
 		border-radius 4px
 		overflow hidden
 
 		&:hover
 			text-decoration none
-			border-color isDark ? #4f5561 : #ddd
+			border-color var(--urlPreviewBorderHover)
 
 			> article > header > h1
 				text-decoration underline
@@ -235,11 +235,11 @@ root(isDark)
 				> h1
 					margin 0
 					font-size 1em
-					color isDark ? #d6dae0 : #555
+					color var(--urlPreviewTitle)
 
 			> p
 				margin 0
-				color isDark ? #a4aab3 : #777
+				color var(--urlPreviewText)
 				font-size 0.8em
 
 			> footer
@@ -256,7 +256,7 @@ root(isDark)
 				> p
 					display inline-block
 					margin 0
-					color isDark ? #b0b4bf : #666
+					color var(--urlPreviewInfo)
 					font-size 0.8em
 					line-height 16px
 					vertical-align top
@@ -322,10 +322,4 @@ root(isDark)
 						width 12px
 						height 12px
 
-.mk-url-preview[data-darkmode]
-	root(true)
-
-.mk-url-preview:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 8962235f2f..44a8e0e568 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -6,9 +6,10 @@
 		"vars": {
 			"primary": "#fb4e4e",
 			"secondary": "#282C37",
-			"text": "#d0e0ea"
+			"text": "#d6dae0"
 		}
 	},
+
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
@@ -54,6 +55,9 @@
 	"dateDividerFg": "#666b79",
 
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+	"inputBorder": "rgba(255, 255, 255, 0.7)",
+	"inputLabel": "rgba(255, 255, 255, 0.7)",
+	"inputText": "#fff",
 
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
@@ -65,6 +69,12 @@
 
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 
+	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
+	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
+	"urlPreviewTitle": "$text",
+	"urlPreviewText": ":alpha<0.7<$text",
+	"urlPreviewInfo": ":alpha<0.8<$text",
+
 	"calendarWeek": "#43d5dc",
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 327d04cad6..1fc60c00ad 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -11,6 +11,7 @@
 			"text": "#b1bee3"
 		}
 	},
+
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
 	"desktopHeaderBg": "#36314e"
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 11b001ceb1..8dd4b1fe7b 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -9,6 +9,7 @@
 			"text": "#666"
 		}
 	},
+
 	"primary": "$primary",
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
@@ -54,6 +55,9 @@
 	"dateDividerFg": "#aaa",
 
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+	"inputBorder": "rgba(0, 0, 0, 0.42)",
+	"inputLabel": "rgba(0, 0, 0, 0.54)",
+	"inputText": "#000",
 
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
@@ -65,6 +69,12 @@
 
 	"reactionPickerButtonHoverBg": "#eee",
 
+	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
+	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
+	"urlPreviewTitle": "$text",
+	"urlPreviewText": ":alpha<0.7<$text",
+	"urlPreviewInfo": ":alpha<0.8<$text",
+
 	"calendarWeek": "#19a2a9",
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
-- 
cgit v1.2.3-freya


From e82a44c03d9b17bb3a9852cccec5edbb2cf76be2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:55:17 +0900
Subject: wip

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

(limited to 'src/client')

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 77221f81d2..a541dea121 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -127,9 +127,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.account
 	> .header
 		display block
 		margin 0
@@ -217,7 +215,7 @@ root(isDark)
 
 			& + ul
 				padding-top 10px
-				border-top solid 1px isDark ? #1c2023 : #eee
+				border-top solid 1px var(--faceDivider)
 
 			> li
 				display block
@@ -231,7 +229,7 @@ root(isDark)
 					padding 0 28px
 					margin 0
 					line-height 40px
-					color isDark ? #c8cece : #868C8C
+					color var(--text)
 					cursor pointer
 
 					*
@@ -287,10 +285,4 @@ root(isDark)
 	transform-origin: center -16px;
 }
 
-.account[data-darkmode]
-	root(true)
-
-.account:not([data-darkmode])
-	root(false)
-
 </style>
-- 
cgit v1.2.3-freya


From 74be1c81b111bca81047b21083249d8be4b35ed8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 22:59:56 +0900
Subject: wip

---
 .../app/common/views/components/reactions-viewer.vue      | 15 ++++-----------
 src/client/theme/dark.json                                |  2 ++
 src/client/theme/light.json                               |  2 ++
 3 files changed, 8 insertions(+), 11 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue
index c30fa2a1dc..9212a84b31 100644
--- a/src/client/app/common/views/components/reactions-viewer.vue
+++ b/src/client/app/common/views/components/reactions-viewer.vue
@@ -39,10 +39,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	$borderColor = isDark ? #5e6673 : #eee
-	border-top dashed 1px $borderColor
-	border-bottom dashed 1px $borderColor
+.mk-reactions-viewer
+	border-top dashed 1px var(--reactionViewerBorder)
+	border-bottom dashed 1px var(--reactionViewerBorder)
 	margin 4px 0
 
 	&:empty
@@ -60,12 +59,6 @@ root(isDark)
 		> span
 			margin-left 4px
 			font-size 1.2em
-			color isDark ? #d1d5dc : #444
-
-.mk-reactions-viewer[data-darkmode]
-	root(true)
-
-.mk-reactions-viewer:not([data-darkmode])
-	root(false)
+			color var(--text)
 
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 44a8e0e568..39828e364e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -69,6 +69,8 @@
 
 	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
 
+	"reactionViewerBorder": "rgba(255, 255, 255, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
 	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
 	"urlPreviewTitle": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 8dd4b1fe7b..2c45a57705 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -69,6 +69,8 @@
 
 	"reactionPickerButtonHoverBg": "#eee",
 
+	"reactionViewerBorder": "rgba(0, 0, 0, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
 	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
 	"urlPreviewTitle": "$text",
-- 
cgit v1.2.3-freya


From a0305c4c040f769f1992cdd2eea70095af802365 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 23:02:59 +0900
Subject: wip

---
 src/client/app/common/views/components/instance.vue | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/instance.vue b/src/client/app/common/views/components/instance.vue
index 14c6664eff..c3935cce0e 100644
--- a/src/client/app/common/views/components/instance.vue
+++ b/src/client/app/common/views/components/instance.vue
@@ -26,9 +26,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	color isDark ? #fff : #5b646f
-	background isDark ? #21242f : #fff
+.nhasjydimbopojusarffqjyktglcuxjy
+	color var(--text)
+	background var(--face)
 	text-align center
 
 	> .banner
@@ -48,10 +48,4 @@ root(isDark)
 		display block
 		padding-bottom 16px
 
-.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode]
-	root(true)
-
-.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode])
-	root(false)
-
 </style>
-- 
cgit v1.2.3-freya


From 32942709bfdb799f1ac26a087ffd4d73b558fcb5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 23:09:23 +0900
Subject: wip

---
 src/client/app/desktop/views/components/note-detail.vue      | 2 +-
 src/client/app/desktop/views/components/notes.note.vue       | 8 ++++----
 src/client/app/desktop/views/components/sub-note-content.vue | 2 +-
 src/client/app/desktop/views/pages/deck/deck.note.vue        | 6 +++---
 src/client/app/mobile/views/components/note-detail.vue       | 2 +-
 src/client/app/mobile/views/components/note.vue              | 6 +++---
 src/client/app/mobile/views/components/sub-note-content.vue  | 2 +-
 src/client/theme/dark.json                                   | 2 ++
 src/client/theme/halloween.json                              | 1 +
 src/client/theme/light.json                                  | 2 ++
 10 files changed, 19 insertions(+), 14 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 50ad793f0b..0c4b560e98 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -365,7 +365,7 @@ export default Vue.extend({
 
 					> *
 						padding 16px
-						border dashed 1px vat(--quoteBorder)
+						border dashed 1px var(--quoteBorder)
 						border-radius 8px
 
 				> .location
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 5daaadb971..7e4f42533f 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -447,7 +447,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background isDark ? #2f3944 : #eef1f3
+							background var(--mfmTitleBg)
 							border-radius 4px
 
 						>>> .code
@@ -461,12 +461,12 @@ root(isDark)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--text)
 
 						> .rp
 							margin-left 4px
 							font-style oblique
-							color #a0bf46
+							color var(--renoteText)
 
 					> .location
 						margin 4px 0
@@ -491,7 +491,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px vat(--quoteBorder)
+							border dashed 1px var(--quoteBorder)
 							border-radius 8px
 
 			> footer
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 6889dc231e..fd8e658056 100644
--- a/src/client/app/desktop/views/components/sub-note-content.vue
+++ b/src/client/app/desktop/views/components/sub-note-content.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 		> .rp
 			margin-left 4px
 			font-style oblique
-			color #a0bf46
+			color var(--renoteText)
 
 	mk-poll
 		font-size 80%
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index bdc4368e7b..3bc4f26823 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -329,7 +329,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background isDark ? #2f3944 : #eef1f3
+							background var(--mfmTitleBg)
 							border-radius 4px
 
 						>>> .code
@@ -348,7 +348,7 @@ root(isDark)
 						> .rp
 							margin-left 4px
 							font-style oblique
-							color #a0bf46
+							color var(--renoteText)
 
 						[data-is-me]:after
 							content "you"
@@ -387,7 +387,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px vat(--quoteBorder)
+							border dashed 1px var(--quoteBorder)
 							border-radius 8px
 
 				> .app
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index ade518b1fc..48d6d32868 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -368,7 +368,7 @@ export default Vue.extend({
 
 					> *
 						padding 16px
-						border dashed 1px vat(--quoteBorder)
+						border dashed 1px var(--quoteBorder)
 						border-radius 8px
 
 				> .location
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index ed175b4f6f..b1c5835692 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -369,7 +369,7 @@ root(isDark)
 							padding 4px
 							font-size 90%
 							text-align center
-							background isDark ? #2f3944 : #eef1f3
+							background var(--mfmTitleBg)
 							border-radius 4px
 
 						>>> .code
@@ -388,7 +388,7 @@ root(isDark)
 						> .rp
 							margin-left 4px
 							font-style oblique
-							color #a0bf46
+							color var(--renoteText)
 
 						[data-is-me]:after
 							content "you"
@@ -427,7 +427,7 @@ root(isDark)
 
 						> *
 							padding 16px
-							border dashed 1px vat(--quoteBorder)
+							border dashed 1px var(--quoteBorder)
 							border-radius 8px
 
 				> .app
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 4d0aa25f34..2238edf278 100644
--- a/src/client/app/mobile/views/components/sub-note-content.vue
+++ b/src/client/app/mobile/views/components/sub-note-content.vue
@@ -37,7 +37,7 @@ export default Vue.extend({
 		> .rp
 			margin-left 4px
 			font-style oblique
-			color #a0bf46
+			color var(--renoteText)
 
 	mk-poll
 		font-size 80%
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 39828e364e..1eb41ea52e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -91,6 +91,8 @@
 	"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
 	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
 
+	"mfmTitleBg": "rgba(0, 0, 0, 0.2)",
+
 	"messagingRoomBg": "@bg",
 	"messagingRoomInfo": "#fff",
 	"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 1fc60c00ad..1bd00357e2 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -14,5 +14,6 @@
 
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
+	"quoteBorder": "#c3631c",
 	"desktopHeaderBg": "#36314e"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 2c45a57705..556bd24506 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -91,6 +91,8 @@
 	"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
 	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
 
+	"mfmTitleBg": "rgba(0, 0, 0, 0.07)",
+
 	"messagingRoomBg": "#fff",
 	"messagingRoomInfo": "#000",
 	"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",
-- 
cgit v1.2.3-freya


From 38a6aa26bc3d8fb70215474a667ad06080660cea Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 23:17:33 +0900
Subject: wip

---
 src/client/app/desktop/views/components/notes.note.vue | 14 +++-----------
 src/client/app/desktop/views/pages/deck/deck.note.vue  |  4 ++--
 src/client/app/mobile/views/components/note.vue        |  4 ++--
 src/client/theme/dark.json                             |  2 ++
 src/client/theme/light.json                            |  2 ++
 5 files changed, 11 insertions(+), 15 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 7e4f42533f..b628d045aa 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -317,9 +317,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.note
 	margin 0
 	padding 0
 	background var(--face)
@@ -456,8 +454,8 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color isDark ? #6f808e : #aaa
-							border-left solid 3px isDark ? #637182 : #eee
+							color var(--mfmQuote)
+							border-left solid 3px var(--mfmQuoteLine)
 
 						> .reply
 							margin-right 8px
@@ -529,12 +527,6 @@ root(isDark)
 		padding-top 4px
 		background rgba(#000, 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/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 3bc4f26823..c6925d5cec 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -338,8 +338,8 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color isDark ? #6f808e : #aaa
-							border-left solid 3px isDark ? #637182 : #eee
+							color var(--mfmQuote)
+							border-left solid 3px var(--mfmQuoteLine)
 
 						> .reply
 							margin-right 8px
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index b1c5835692..8bb9f43fab 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -378,8 +378,8 @@ root(isDark)
 						>>> .quote
 							margin 8px
 							padding 6px 12px
-							color isDark ? #6f808e : #aaa
-							border-left solid 3px isDark ? #637182 : #eee
+							color var(--mfmQuote)
+							border-left solid 3px var(--mfmQuoteLine)
 
 						> .reply
 							margin-right 8px
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 1eb41ea52e..d79e348b07 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -92,6 +92,8 @@
 	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
 
 	"mfmTitleBg": "rgba(0, 0, 0, 0.2)",
+	"mfmQuote": ":alpha<0.7<$text",
+	"mfmQuoteLine": ":alpha<0.6<$text",
 
 	"messagingRoomBg": "@bg",
 	"messagingRoomInfo": "#fff",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 556bd24506..7d15d49ae7 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -92,6 +92,8 @@
 	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
 
 	"mfmTitleBg": "rgba(0, 0, 0, 0.07)",
+	"mfmQuote": ":alpha<0.6<$text",
+	"mfmQuoteLine": ":alpha<0.5<$text",
 
 	"messagingRoomBg": "#fff",
 	"messagingRoomInfo": "#000",
-- 
cgit v1.2.3-freya


From 61e5cb2041523a091ba2eb434684abc3933776df Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 27 Sep 2018 23:55:05 +0900
Subject: wip

---
 src/client/app/desktop/views/pages/welcome.vue | 57 ++++++++------------------
 1 file changed, 17 insertions(+), 40 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 405fcb76d0..261642cab4 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -134,12 +134,12 @@
 		</article>
 	</modal>
 
-	<modal name="signup" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
+	<modal name="signup" class="modal" width="450px" height="auto" scrollable>
 		<header class="formHeader">%i18n:@signup%</header>
 		<mk-signup class="form"/>
 	</modal>
 
-	<modal name="signin" :class="$store.state.device.darkmode ? 'modal-dark' : 'modal-light'" width="450px" height="auto" scrollable>
+	<modal name="signin" class="modal" width="450px" height="auto" scrollable>
 		<header class="formHeader">%i18n:@signin%</header>
 		<mk-signin class="form"/>
 	</modal>
@@ -226,23 +226,7 @@ export default Vue.extend({
 .v--modal-overlay
 	background rgba(0, 0, 0, 0.6)
 
-.modal-light
-	.v--modal-box
-		color #777
-
-		.formHeader
-			border-bottom solid 1px #eee
-
-.modal-dark
-	.v--modal-box
-		background #313543
-		color #fff
-
-		.formHeader
-			border-bottom solid 1px rgba(#000, 0.2)
-
-.modal-light
-.modal-dark
+.modal
 	.form
 		padding 24px 48px 48px 48px
 
@@ -252,6 +236,13 @@ export default Vue.extend({
 		margin 0 48px
 		font-size 1.5em
 
+	.v--modal-box
+		background var(--face)
+		color var(--text)
+
+		.formHeader
+			border-bottom solid 1px rgba(#000, 0.2)
+
 .v--modal-overlay.about
 	.v--modal-box.v--modal
 		margin 32px 0
@@ -303,15 +294,9 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-welcome
 	display flex
 	min-height 100vh
-	//background-color #00070F
-	//background-image url('/assets/bg.jpg')
-	//background-position center
-	//background-size cover
 
 	> .banner
 		position absolute
@@ -331,7 +316,7 @@ root(isDark)
 			left 0
 			width 100%
 			height 100px
-			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+			background linear-gradient(transparent, var(--bg))
 
 	> .forkit
 		position absolute
@@ -345,7 +330,7 @@ root(isDark)
 		left 16px
 		padding 16px
 		font-size 18px
-		color isDark ? #fff : #444
+		color var(--text)
 
 	> main
 		margin 0 auto
@@ -354,7 +339,7 @@ root(isDark)
 		max-width 1200px
 
 		.block
-			color isDark ? #fff : #444
+			color var(--text)
 			background var(--face)
 			box-shadow var(--shadow)
 			//border-radius 8px
@@ -365,9 +350,7 @@ root(isDark)
 				padding 0 16px
 				line-height 48px
 				background var(--faceHeader)
-
-				if !isDark
-					box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
+				box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
 
 				& + div
 					max-height calc(100% - 48px)
@@ -406,7 +389,7 @@ root(isDark)
 						> .stats
 							margin-left 16px
 							padding-left 16px
-							border-left solid 1px isDark ? #fff : #444
+							border-left solid 1px var(--faceDivider)
 
 							> *
 								margin-right 16px
@@ -449,7 +432,7 @@ root(isDark)
 					> div
 						padding 0 0 16px 0
 						margin 0 0 16px 0
-						border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+						border-bottom 1px solid var(--faceDivider)
 
 						> h1
 							margin 0
@@ -518,10 +501,4 @@ root(isDark)
 								display block
 								margin 0
 
-.mk-welcome[data-darkmode]
-	root(true)
-
-.mk-welcome:not([data-darkmode])
-	root(false)
-
 </style>
-- 
cgit v1.2.3-freya


From cbf5d4b71d807e53e2252e8767364f7a7e761b34 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 00:48:17 +0900
Subject: wip

---
 package.json                                   |   1 +
 src/client/app/desktop/views/pages/welcome.vue |   8 +-
 src/client/assets/title.dark.svg               | 140 -------------------------
 src/client/assets/title.light.svg              | 140 -------------------------
 src/client/assets/title.svg                    | 140 +++++++++++++++++++++++++
 webpack.config.ts                              |   2 +
 6 files changed, 148 insertions(+), 283 deletions(-)
 delete mode 100644 src/client/assets/title.dark.svg
 delete mode 100644 src/client/assets/title.light.svg
 create mode 100644 src/client/assets/title.svg

(limited to 'src/client')

diff --git a/package.json b/package.json
index a3e3b56be4..347e9d0c24 100644
--- a/package.json
+++ b/package.json
@@ -214,6 +214,7 @@
 		"vue-loader": "15.4.2",
 		"vue-router": "3.0.1",
 		"vue-style-loader": "4.1.2",
+		"vue-svg-inline-loader": "1.1.3",
 		"vue-template-compiler": "2.5.17",
 		"vuedraggable": "2.16.0",
 		"vuewordcloud": "18.7.11",
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 261642cab4..f8f49bf997 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -14,7 +14,7 @@
 			<div class="main block">
 				<div>
 					<h1 v-if="name != 'Misskey'">{{ name }}</h1>
-					<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name"></h1>
+					<h1 v-else><img svg-inline src="../../../../assets/title.svg" :alt="name"></h1>
 
 					<div class="info">
 						<span><b>{{ host }}</b> - <span v-html="'%i18n:@powered-by-misskey%'"></span></span>
@@ -377,9 +377,11 @@ export default Vue.extend({
 					> h1
 						margin 0
 
-						> img
+						> svg
 							margin -8px 0 0 -16px
-							max-width 280px
+							width 280px
+							height 100px
+							fill currentColor
 
 					> .info
 						margin 0 auto 16px auto
diff --git a/src/client/assets/title.dark.svg b/src/client/assets/title.dark.svg
deleted file mode 100644
index 10139024ad..0000000000
--- a/src/client/assets/title.dark.svg
+++ /dev/null
@@ -1,140 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="614.71039"
-   height="205.08009"
-   viewBox="0 0 162.64213 54.260776"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.1 r15371"
-   sodipodi:docname="misskey.svg"
-   inkscape:export-filename="C:\Users\Takumiya_Cho\Desktop\misskey.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96">
-  <defs
-     id="defs2">
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5115"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5104"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.9899495"
-     inkscape:cx="370.82839"
-     inkscape:cy="79.043895"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="false"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-center="true"
-     inkscape:snap-page="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="-8"
-     inkscape:window-y="1072"
-     inkscape:window-maximized="1"
-     inkscape:object-paths="true"
-     inkscape:bbox-paths="true"
-     fit-margin-top="50"
-     fit-margin-left="50"
-     fit-margin-bottom="20"
-     fit-margin-right="50" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="レイヤー 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-11.097531,-173.29664)">
-    <g
-       transform="matrix(0.28612302,0,0,0.28612302,17.176981,141.74334)"
-       id="text4489-6"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.92471898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       aria-label="Mi">
-      <path
-         sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
-         inkscape:connector-curvature="0"
-         id="path5210"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#fff;fill-opacity:1;stroke-width:0.92471898px"
-         d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
-      <path
-         inkscape:connector-curvature="0"
-         id="path5212"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#fff;fill-opacity:1;stroke-width:0.92471898px"
-         d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
-    </g>
-    <path
-       inkscape:connector-curvature="0"
-       id="path5199"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 72.022691,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791824,1.29083 2.581666,1.69422 2.581666,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685756,0.0807 1.169817,0.24203 4.477578,0.60508 0.443724,0 0.968125,-0.0403 0.201693,0 0.201693,-0.24203 0.04034,-0.20169 -0.242032,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895911,-0.48406 -1.12948,-0.32271 -1.895912,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685756,0.84711 0.685756,1.93625 0,1.25049 -0.927787,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5201"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 89.577027,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791823,1.29083 2.581667,1.69422 2.581667,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685755,0.0807 1.169818,0.24203 4.477579,0.60508 0.443724,0 0.968125,-0.0403 0.201692,0 0.201692,-0.24203 0.04034,-0.20169 -0.242031,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895912,-0.48406 -1.129479,-0.32271 -1.895911,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685755,0.84711 0.685755,1.93625 0,1.25049 -0.927786,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5203"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 115.65209,203.87137 q 0.12101,0.0807 2.86404,2.78336 1.25049,1.21016 1.25049,2.94471 0,1.61354 -1.16982,2.86404 -1.16982,1.21016 -2.90437,1.21016 -1.65388,0 -2.86404,-1.16982 l -4.03385,-3.91284 q -0.16136,-0.12102 -0.32271,-0.12102 -0.32271,0 -0.32271,1.21016 0,1.69422 -1.21016,2.90438 -1.21015,1.16981 -2.90437,1.16981 -1.69422,0 -2.90438,-1.16981 -1.169807,-1.21016 -1.169807,-2.90438 v -18.79776 q 0,-1.69422 1.169807,-2.86404 1.21016,-1.21015 2.90438,-1.21015 1.69422,0 2.90437,1.21015 1.21016,1.16982 1.21016,2.86404 v 6.29281 q 0,0.40339 0.28237,0.5244 0.24203,0.12102 0.5244,-0.0807 0.16135,-0.0807 4.84063,-3.18675 1.0488,-0.64542 2.25895,-0.64542 2.21862,0 3.42878,1.81524 0.64542,1.0488 0.64542,2.25896 0,2.21862 -1.81524,3.42877 l -2.54133,1.61354 v 0.0403 l -0.0807,0.0403 q -0.56474,0.36305 -0.0403,0.88745 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5205"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 131.25181,213.92955 q -4.19521,0 -7.18026,-2.94472 -2.94472,-2.98505 -2.94472,-7.18026 0,-4.15487 2.94472,-7.09958 2.98505,-2.98505 7.18026,-2.98505 4.15487,0 6.97857,2.78335 0.92778,0.92779 0.92778,2.25896 0,1.33118 -0.92778,2.25896 l -4.67928,4.63893 q -1.00846,1.00847 -2.01692,1.00847 -1.45219,0 -2.25896,-0.80677 -0.80677,-0.80677 -0.80677,-2.13795 0,-1.29083 0.92778,-2.21862 l 0.80678,-0.84711 q 0.16135,-0.12101 0.0807,-0.24203 -0.12101,-0.0807 -0.32271,-0.0403 -0.80677,0.20169 -1.37151,0.80677 -1.12948,1.08914 -1.12948,2.622 0,1.5732 1.08915,2.70268 1.12947,1.08914 2.70268,1.08914 1.53286,0 2.622,-1.12947 0.92779,-0.92779 2.25896,-0.92779 1.33117,0 2.25896,0.92779 0.92779,0.92778 0.92779,2.25895 0,1.33118 -0.92779,2.25896 -2.98505,2.94472 -7.13992,2.94472 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5207"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#fff;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 160.51049,198.1433 v 5.60705 q 0,0.56474 -0.0807,1.21016 v 7.38195 q 0,4.51792 -2.74302,7.2206 -2.70268,2.70269 -7.30128,2.70269 -2.66234,0 -4.80028,-1.00847 -2.13795,-0.96812 -2.13795,-3.3481 0,-0.80677 0.36305,-1.53286 0.96812,-2.17828 3.3481,-2.17828 0.56474,0 1.5732,0.32271 1.00847,0.3227 1.65388,0.3227 1.69422,0 2.21862,-0.72609 0.20169,-0.28237 0.0807,-0.44372 -0.16136,-0.24204 -0.56474,-0.16136 -0.68576,0.12102 -1.49253,0.12102 -4.07419,0 -6.97856,-2.90438 -2.90438,-2.90437 -2.90438,-6.97857 v -5.60705 q 0,-1.69422 1.16982,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.90438,1.21016 1.21015,1.16982 1.21015,2.86404 v 5.60705 q 0,0.68576 0.48407,1.21016 0.5244,0.48406 1.21015,0.48406 0.7261,0 1.21016,-0.48406 0.48406,-0.5244 0.48406,-1.21016 v -5.60705 q 0,-1.69422 1.21016,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.86404,1.21016 1.21016,1.16982 1.21016,2.86404 z" />
-  </g>
-</svg>
diff --git a/src/client/assets/title.light.svg b/src/client/assets/title.light.svg
deleted file mode 100644
index 95ad11c399..0000000000
--- a/src/client/assets/title.light.svg
+++ /dev/null
@@ -1,140 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="614.71039"
-   height="205.08009"
-   viewBox="0 0 162.64213 54.260776"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.1 r15371"
-   sodipodi:docname="misskey.svg"
-   inkscape:export-filename="C:\Users\Takumiya_Cho\Desktop\misskey.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96">
-  <defs
-     id="defs2">
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5115"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5104"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.9899495"
-     inkscape:cx="370.82839"
-     inkscape:cy="79.043895"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="false"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-center="true"
-     inkscape:snap-page="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="-8"
-     inkscape:window-y="1072"
-     inkscape:window-maximized="1"
-     inkscape:object-paths="true"
-     inkscape:bbox-paths="true"
-     fit-margin-top="50"
-     fit-margin-left="50"
-     fit-margin-bottom="20"
-     fit-margin-right="50" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="レイヤー 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-11.097531,-173.29664)">
-    <g
-       transform="matrix(0.28612302,0,0,0.28612302,17.176981,141.74334)"
-       id="text4489-6"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.92471898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       aria-label="Mi">
-      <path
-         sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
-         inkscape:connector-curvature="0"
-         id="path5210"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#212d3a;fill-opacity:1;stroke-width:0.92471898px"
-         d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
-      <path
-         inkscape:connector-curvature="0"
-         id="path5212"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#212d3a;fill-opacity:1;stroke-width:0.92471898px"
-         d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
-    </g>
-    <path
-       inkscape:connector-curvature="0"
-       id="path5199"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 72.022691,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791824,1.29083 2.581666,1.69422 2.581666,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685756,0.0807 1.169817,0.24203 4.477578,0.60508 0.443724,0 0.968125,-0.0403 0.201693,0 0.201693,-0.24203 0.04034,-0.20169 -0.242032,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895911,-0.48406 -1.12948,-0.32271 -1.895912,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685756,0.84711 0.685756,1.93625 0,1.25049 -0.927787,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5201"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 89.577027,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791823,1.29083 2.581667,1.69422 2.581667,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685755,0.0807 1.169818,0.24203 4.477579,0.60508 0.443724,0 0.968125,-0.0403 0.201692,0 0.201692,-0.24203 0.04034,-0.20169 -0.242031,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895912,-0.48406 -1.129479,-0.32271 -1.895911,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685755,0.84711 0.685755,1.93625 0,1.25049 -0.927786,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5203"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 115.65209,203.87137 q 0.12101,0.0807 2.86404,2.78336 1.25049,1.21016 1.25049,2.94471 0,1.61354 -1.16982,2.86404 -1.16982,1.21016 -2.90437,1.21016 -1.65388,0 -2.86404,-1.16982 l -4.03385,-3.91284 q -0.16136,-0.12102 -0.32271,-0.12102 -0.32271,0 -0.32271,1.21016 0,1.69422 -1.21016,2.90438 -1.21015,1.16981 -2.90437,1.16981 -1.69422,0 -2.90438,-1.16981 -1.169807,-1.21016 -1.169807,-2.90438 v -18.79776 q 0,-1.69422 1.169807,-2.86404 1.21016,-1.21015 2.90438,-1.21015 1.69422,0 2.90437,1.21015 1.21016,1.16982 1.21016,2.86404 v 6.29281 q 0,0.40339 0.28237,0.5244 0.24203,0.12102 0.5244,-0.0807 0.16135,-0.0807 4.84063,-3.18675 1.0488,-0.64542 2.25895,-0.64542 2.21862,0 3.42878,1.81524 0.64542,1.0488 0.64542,2.25896 0,2.21862 -1.81524,3.42877 l -2.54133,1.61354 v 0.0403 l -0.0807,0.0403 q -0.56474,0.36305 -0.0403,0.88745 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5205"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 131.25181,213.92955 q -4.19521,0 -7.18026,-2.94472 -2.94472,-2.98505 -2.94472,-7.18026 0,-4.15487 2.94472,-7.09958 2.98505,-2.98505 7.18026,-2.98505 4.15487,0 6.97857,2.78335 0.92778,0.92779 0.92778,2.25896 0,1.33118 -0.92778,2.25896 l -4.67928,4.63893 q -1.00846,1.00847 -2.01692,1.00847 -1.45219,0 -2.25896,-0.80677 -0.80677,-0.80677 -0.80677,-2.13795 0,-1.29083 0.92778,-2.21862 l 0.80678,-0.84711 q 0.16135,-0.12101 0.0807,-0.24203 -0.12101,-0.0807 -0.32271,-0.0403 -0.80677,0.20169 -1.37151,0.80677 -1.12948,1.08914 -1.12948,2.622 0,1.5732 1.08915,2.70268 1.12947,1.08914 2.70268,1.08914 1.53286,0 2.622,-1.12947 0.92779,-0.92779 2.25896,-0.92779 1.33117,0 2.25896,0.92779 0.92779,0.92778 0.92779,2.25895 0,1.33118 -0.92779,2.25896 -2.98505,2.94472 -7.13992,2.94472 z" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path5207"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#212d3a;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 160.51049,198.1433 v 5.60705 q 0,0.56474 -0.0807,1.21016 v 7.38195 q 0,4.51792 -2.74302,7.2206 -2.70268,2.70269 -7.30128,2.70269 -2.66234,0 -4.80028,-1.00847 -2.13795,-0.96812 -2.13795,-3.3481 0,-0.80677 0.36305,-1.53286 0.96812,-2.17828 3.3481,-2.17828 0.56474,0 1.5732,0.32271 1.00847,0.3227 1.65388,0.3227 1.69422,0 2.21862,-0.72609 0.20169,-0.28237 0.0807,-0.44372 -0.16136,-0.24204 -0.56474,-0.16136 -0.68576,0.12102 -1.49253,0.12102 -4.07419,0 -6.97856,-2.90438 -2.90438,-2.90437 -2.90438,-6.97857 v -5.60705 q 0,-1.69422 1.16982,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.90438,1.21016 1.21015,1.16982 1.21015,2.86404 v 5.60705 q 0,0.68576 0.48407,1.21016 0.5244,0.48406 1.21015,0.48406 0.7261,0 1.21016,-0.48406 0.48406,-0.5244 0.48406,-1.21016 v -5.60705 q 0,-1.69422 1.21016,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.86404,1.21016 1.21016,1.16982 1.21016,2.86404 z" />
-  </g>
-</svg>
diff --git a/src/client/assets/title.svg b/src/client/assets/title.svg
new file mode 100644
index 0000000000..0e4e0b8b3b
--- /dev/null
+++ b/src/client/assets/title.svg
@@ -0,0 +1,140 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="614.71039"
+   height="205.08009"
+   viewBox="0 0 162.64213 54.260776"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="misskey.svg"
+   inkscape:export-filename="C:\Users\Takumiya_Cho\Desktop\misskey.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect5115"
+       is_visible="true"
+       steps="1"
+       threshold="0.000408163"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false"
+       simplifyindividualpaths="false"
+       simplifyJustCoalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect5104"
+       is_visible="true"
+       steps="1"
+       threshold="0.000408163"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false"
+       simplifyindividualpaths="false"
+       simplifyJustCoalesce="false" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.9899495"
+     inkscape:cx="370.82839"
+     inkscape:cy="79.043895"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="false"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-center="true"
+     inkscape:snap-page="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1"
+     inkscape:object-paths="true"
+     inkscape:bbox-paths="true"
+     fit-margin-top="50"
+     fit-margin-left="50"
+     fit-margin-bottom="20"
+     fit-margin-right="50" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="レイヤー 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-11.097531,-173.29664)">
+    <g
+       transform="matrix(0.28612302,0,0,0.28612302,17.176981,141.74334)"
+       id="text4489-6"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.92471898px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       aria-label="Mi">
+      <path
+         sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
+         inkscape:connector-curvature="0"
+         id="path5210"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.92471898px"
+         d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path5212"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.92471898px"
+         d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
+    </g>
+    <path
+       inkscape:connector-curvature="0"
+       id="path5199"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 72.022691,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791824,1.29083 2.581666,1.69422 2.581666,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685756,0.0807 1.169817,0.24203 4.477578,0.60508 0.443724,0 0.968125,-0.0403 0.201693,0 0.201693,-0.24203 0.04034,-0.20169 -0.242032,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895911,-0.48406 -1.12948,-0.32271 -1.895912,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685756,0.84711 0.685756,1.93625 0,1.25049 -0.927787,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5201"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 89.577027,200.53715 q 0.968125,0.24203 2.420312,0.5244 2.420313,0.40339 3.791823,1.29083 2.581667,1.69422 2.581667,5.08266 0,2.74302 -1.815234,4.47758 -2.097604,2.01693 -5.849089,2.01693 -2.743021,0 -6.131458,-0.76644 -1.089141,-0.24203 -1.774896,-1.08914 -0.645417,-0.84711 -0.645417,-1.89591 0,-1.29083 0.887448,-2.17828 0.927786,-0.92779 2.178281,-0.92779 0.363047,0 0.685755,0.0807 1.169818,0.24203 4.477579,0.60508 0.443724,0 0.968125,-0.0403 0.201692,0 0.201692,-0.24203 0.04034,-0.20169 -0.242031,-0.28237 -1.37151,-0.24203 -2.541328,-0.5244 -1.331172,-0.28237 -1.895912,-0.48406 -1.129479,-0.32271 -1.895911,-0.84711 -2.581667,-1.69422 -2.622005,-5.08266 0,-2.70268 1.855573,-4.47758 2.258958,-2.17828 6.413828,-1.97659 2.783359,0.12102 5.566719,0.7261 1.048802,0.24203 1.734557,1.08914 0.685755,0.84711 0.685755,1.93625 0,1.25049 -0.927786,2.17828 -0.887448,0.88745 -2.178281,0.88745 -0.322709,0 -0.645417,-0.0807 -1.169818,-0.24203 -4.517917,-0.56474 -0.403385,-0.0403 -0.766432,0 -0.322708,0.0403 -0.322708,0.24203 0.04034,0.24203 0.322708,0.32271 z" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5203"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 115.65209,203.87137 q 0.12101,0.0807 2.86404,2.78336 1.25049,1.21016 1.25049,2.94471 0,1.61354 -1.16982,2.86404 -1.16982,1.21016 -2.90437,1.21016 -1.65388,0 -2.86404,-1.16982 l -4.03385,-3.91284 q -0.16136,-0.12102 -0.32271,-0.12102 -0.32271,0 -0.32271,1.21016 0,1.69422 -1.21016,2.90438 -1.21015,1.16981 -2.90437,1.16981 -1.69422,0 -2.90438,-1.16981 -1.169807,-1.21016 -1.169807,-2.90438 v -18.79776 q 0,-1.69422 1.169807,-2.86404 1.21016,-1.21015 2.90438,-1.21015 1.69422,0 2.90437,1.21015 1.21016,1.16982 1.21016,2.86404 v 6.29281 q 0,0.40339 0.28237,0.5244 0.24203,0.12102 0.5244,-0.0807 0.16135,-0.0807 4.84063,-3.18675 1.0488,-0.64542 2.25895,-0.64542 2.21862,0 3.42878,1.81524 0.64542,1.0488 0.64542,2.25896 0,2.21862 -1.81524,3.42877 l -2.54133,1.61354 v 0.0403 l -0.0807,0.0403 q -0.56474,0.36305 -0.0403,0.88745 z" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5205"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 131.25181,213.92955 q -4.19521,0 -7.18026,-2.94472 -2.94472,-2.98505 -2.94472,-7.18026 0,-4.15487 2.94472,-7.09958 2.98505,-2.98505 7.18026,-2.98505 4.15487,0 6.97857,2.78335 0.92778,0.92779 0.92778,2.25896 0,1.33118 -0.92778,2.25896 l -4.67928,4.63893 q -1.00846,1.00847 -2.01692,1.00847 -1.45219,0 -2.25896,-0.80677 -0.80677,-0.80677 -0.80677,-2.13795 0,-1.29083 0.92778,-2.21862 l 0.80678,-0.84711 q 0.16135,-0.12101 0.0807,-0.24203 -0.12101,-0.0807 -0.32271,-0.0403 -0.80677,0.20169 -1.37151,0.80677 -1.12948,1.08914 -1.12948,2.622 0,1.5732 1.08915,2.70268 1.12947,1.08914 2.70268,1.08914 1.53286,0 2.622,-1.12947 0.92779,-0.92779 2.25896,-0.92779 1.33117,0 2.25896,0.92779 0.92779,0.92778 0.92779,2.25895 0,1.33118 -0.92779,2.25896 -2.98505,2.94472 -7.13992,2.94472 z" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5207"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:136.34428406px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 160.51049,198.1433 v 5.60705 q 0,0.56474 -0.0807,1.21016 v 7.38195 q 0,4.51792 -2.74302,7.2206 -2.70268,2.70269 -7.30128,2.70269 -2.66234,0 -4.80028,-1.00847 -2.13795,-0.96812 -2.13795,-3.3481 0,-0.80677 0.36305,-1.53286 0.96812,-2.17828 3.3481,-2.17828 0.56474,0 1.5732,0.32271 1.00847,0.3227 1.65388,0.3227 1.69422,0 2.21862,-0.72609 0.20169,-0.28237 0.0807,-0.44372 -0.16136,-0.24204 -0.56474,-0.16136 -0.68576,0.12102 -1.49253,0.12102 -4.07419,0 -6.97856,-2.90438 -2.90438,-2.90437 -2.90438,-6.97857 v -5.60705 q 0,-1.69422 1.16982,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.90438,1.21016 1.21015,1.16982 1.21015,2.86404 v 5.60705 q 0,0.68576 0.48407,1.21016 0.5244,0.48406 1.21015,0.48406 0.7261,0 1.21016,-0.48406 0.48406,-0.5244 0.48406,-1.21016 v -5.60705 q 0,-1.69422 1.21016,-2.86404 1.21015,-1.21016 2.90437,-1.21016 1.69422,0 2.86404,1.21016 1.21016,1.16982 1.21016,2.86404 z" />
+  </g>
+</svg>
diff --git a/webpack.config.ts b/webpack.config.ts
index 3822080574..3b14ee4a8a 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -134,6 +134,8 @@ module.exports = {
 						preserveWhitespace: false
 					}
 				}
+			}, {
+				loader: 'vue-svg-inline-loader'
 			}, {
 				loader: 'replace',
 				query: {
-- 
cgit v1.2.3-freya


From f4bf824e79af6d8d7fb8fbb33f600f5ddb322a03 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 00:51:17 +0900
Subject: wip

---
 src/client/app/desktop/views/pages/welcome.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index f8f49bf997..65651f7ffc 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -95,7 +95,7 @@
 		</div>
 	</main>
 
-	<modal name="about" :class="$store.state.device.darkmode ? ['about', 'modal-dark'] : ['about', 'modal-light']" width="800px" height="auto" scrollable>
+	<modal name="about" class="about modal" width="800px" height="auto" scrollable>
 		<article class="fpdezooorhntlzyeszemrsqdlgbysvxq">
 			<h1>%i18n:common.intro.title%</h1>
 			<p v-html="'%i18n:common.intro.about%'"></p>
@@ -258,7 +258,7 @@ export default Vue.extend({
 
 	> section
 		> h2
-			border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+			border-bottom 1px solid var(--faceDivider)
 
 		> section
 			display grid
@@ -267,7 +267,7 @@ export default Vue.extend({
 			gap 32px
 			margin-bottom 32px
 			padding-bottom 32px
-			border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+			border-bottom 1px solid var(--faceDivider)
 
 			&:nth-child(odd)
 				grid-template-columns 1fr 180px
-- 
cgit v1.2.3-freya


From d1dce76e2814012f7350563f23834c77d6da18ad Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 01:05:09 +0900
Subject: wip

---
 src/client/app/mobile/style.styl                  | 10 +-------
 src/client/app/mobile/views/components/ui.nav.vue |  4 +--
 src/client/app/mobile/views/pages/welcome.vue     | 31 ++++++++++++-----------
 src/client/theme/dark.json                        |  2 ++
 src/client/theme/light.json                       |  2 ++
 5 files changed, 23 insertions(+), 26 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/style.styl b/src/client/app/mobile/style.styl
index df8f4a8fae..095e5266fd 100644
--- a/src/client/app/mobile/style.styl
+++ b/src/client/app/mobile/style.styl
@@ -8,12 +8,4 @@
 
 html
 	height 100%
-	background #ececed !important
-
-	&[data-darkmode]
-		background #191B22 !important
-
-body
-	display flex
-	flex-direction column
-	min-height 100%
+	background var(--bg)
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 29dcf18021..a84dc7349a 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -226,8 +226,8 @@ root(isDark)
 
 	.announcements
 		> article
-			background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
-			color isDark ? #fff : #3f4967
+			background var(--mobileAnnouncement)
+			color var(--mobileAnnouncementFg)
 			padding 16px
 			margin 8px 0
 			font-size 12px
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 82ccfeaff5..4e24f70ffc 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -3,7 +3,7 @@
 	<div class="banner" :style="{ backgroundImage: banner ? `url(${banner})` : null }"></div>
 
 	<div>
-		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" :alt="name">
+		<img svg-inline src="../../../../assets/title.svg" :alt="name">
 		<p class="host">{{ host }}</p>
 		<div class="about">
 			<h2>{{ name }}</h2>
@@ -144,16 +144,17 @@ root(isDark)
 			left 0
 			width 100%
 			height 100px
-			background linear-gradient(transparent, isDark ? #191b22 : #f7f7f7)
+			background linear-gradient(transparent, var(--bg))
 
 	> div:not(.banner)
 		padding 32px
 		margin 0 auto
 		max-width 500px
 
-		> img
+		> svg
 			display block
-			max-width 200px
+			width 200px
+			height 50px
 			margin 0 auto
 
 		> .host
@@ -169,8 +170,8 @@ root(isDark)
 		> .about
 			margin-top 16px
 			padding 16px
-			color #555
-			background #fff
+			color var(--text)
+			background var(--face)
 			border-radius 6px
 
 			> h2
@@ -238,7 +239,7 @@ root(isDark)
 			margin 16px 0
 			padding 8px
 			font-size 14px
-			color #444
+			color var(--text)
 			background rgba(#000, 0.1)
 			border-radius 6px
 
@@ -249,9 +250,9 @@ root(isDark)
 			margin 16px 0
 
 			> article
-				background isDark ? rgba(30, 129, 216, 0.2) : rgba(155, 196, 232, 0.2)
+				background var(--mobileAnnouncement)
 				border-radius 6px
-				color isDark ? #fff : #3f4967
+				color var(--mobileAnnouncementFg)
 				padding 16px
 				margin 8px 0
 				font-size 12px
@@ -263,10 +264,10 @@ root(isDark)
 			margin 16px 0
 			padding 32px
 			font-size 14px
-			background #fff
+			background var(--face)
 			border-radius 6px
 			overflow hidden
-			color #3a3e46
+			color var(--text)
 
 			> h1
 				margin 0
@@ -279,12 +280,12 @@ root(isDark)
 
 			> section
 				> h2
-					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+					border-bottom 1px solid var(--faceDivider)
 
 				> section
 					margin-bottom 16px
 					padding-bottom 16px
-					border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05)
+					border-bottom 1px solid var(--faceDivider)
 
 					> h3
 						margin-bottom 8px
@@ -301,7 +302,7 @@ root(isDark)
 
 		> .info
 			padding 16px 0
-			border solid 2px #ddd
+			border solid 2px rgba(0, 0, 0, 0.1)
 			border-radius 8px
 
 			> *
@@ -309,7 +310,7 @@ root(isDark)
 
 		> footer
 			text-align center
-			color #444
+			color var(--text)
 
 			> small
 				display block
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index d79e348b07..3074eb22ae 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -120,6 +120,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
+	"mobileAnnouncementFg": "#fff",
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7d15d49ae7..9f41ee8f22 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -120,6 +120,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
+	"mobileAnnouncementFg": "#3f4967",
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-- 
cgit v1.2.3-freya


From 9ea7de3564caa063ee9549ae808ea731379e2516 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 10:14:58 +0900
Subject: wip

---
 src/client/app/common/views/components/media-banner.vue  |  9 ++-------
 .../app/common/views/components/welcome-timeline.vue     | 16 +++++-----------
 src/client/theme/dark.json                               | 11 +++++++----
 src/client/theme/halloween.json                          |  3 +--
 src/client/theme/light.json                              | 11 +++++++----
 5 files changed, 22 insertions(+), 28 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
index 211dbf0208..0f5981d3c4 100644
--- a/src/client/app/common/views/components/media-banner.vue
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -43,7 +43,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-media-banner
 	width 100%
 	border-radius 4px
 	margin-top 4px
@@ -71,7 +71,7 @@ root(isDark)
 			font-size 1.6em
 
 	> .download
-		background isDark ? #21242d : #f7f7f7
+		background var(--noteAttachedFile)
 
 	> .sensitive
 		background #111
@@ -82,9 +82,4 @@ root(isDark)
 			display block
 			width 100%
 
-.mk-media-banner[data-darkmode]
-	root(true)
-
-.mk-media-banner:not([data-darkmode])
-	root(false)
 </style>
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index ca1b6eb928..6934fb4856 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -90,7 +90,7 @@ export default Vue.extend({
 	opacity 0
 	transform translateY(-30px)
 
-root(isDark)
+.mk-welcome-timeline
 	background var(--face)
 
 	> div
@@ -101,8 +101,8 @@ root(isDark)
 			padding 16px
 			overflow-wrap break-word
 			font-size .9em
-			color isDark ? #fff : #4C4C4C
-			border-bottom 1px solid isDark ? rgba(#000, 0.1) : rgba(#000, 0.05)
+			color var(--noteText)
+			border-bottom 1px solid var(--faceDivider)
 
 			&:after
 				content ""
@@ -141,22 +141,16 @@ root(isDark)
 
 					> .username
 						margin 0 .5em 0 0
-						color isDark ? #606984 : #ccc
+						color var(--noteHeaderAcct)
 
 					> .info
 						margin-left auto
 						font-size 0.9em
 
 						> .created-at
-							color isDark ? #606984 : #c0c0c0
+							color var(--noteHeaderInfo)
 
 				> .text
 					text-align left
 
-.mk-welcome-timeline[data-darkmode]
-	root(true)
-
-.mk-welcome-timeline:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 3074eb22ae..498c9ecdd9 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -29,6 +29,7 @@
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
 	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#d6dce2",
+
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
@@ -49,10 +50,12 @@
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#707b97",
 
+	"noteAttachedFile": "rgba(255, 255, 255, 0.1)",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
 
-	"dateDividerBg": "#242731",
-	"dateDividerFg": "#666b79",
+	"dateDividerBg": ":darken<2<$secondary",
+	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
 	"inputBorder": "rgba(255, 255, 255, 0.7)",
@@ -103,8 +106,8 @@
 	"messagingRoomMessageBg": "$secondary",
 	"messagingRoomMessageFg": "#fff",
 
-	"desktopHeaderBg": "#313543",
-	"desktopHeaderFg": "#b8c5ca",
+	"desktopHeaderBg": ":lighten<5<$secondary",
+	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#fff",
 	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 1bd00357e2..6e92db95ff 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -14,6 +14,5 @@
 
 	"renoteGradient": "#5d2d1a",
 	"renoteText": "#ff6c00",
-	"quoteBorder": "#c3631c",
-	"desktopHeaderBg": "#36314e"
+	"quoteBorder": "#c3631c"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 9f41ee8f22..d05ee995f6 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -29,6 +29,7 @@
 	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
 	"popupBg": ":lighten<5<$secondary",
 	"popupFg": "#586069",
+
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
@@ -49,10 +50,12 @@
 	"noteActionsReactionHover": "#fa0",
 	"noteActionsHighlighted": "#888",
 
+	"noteAttachedFile": "rgba(0, 0, 0, 0.05)",
+
 	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
 
-	"dateDividerBg": "#fdfdfd",
-	"dateDividerFg": "#aaa",
+	"dateDividerBg": ":darken<2<$secondary",
+	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
 	"inputBorder": "rgba(0, 0, 0, 0.42)",
@@ -103,8 +106,8 @@
 	"messagingRoomMessageBg": "#eee",
 	"messagingRoomMessageFg": "#333",
 
-	"desktopHeaderBg": "#f7f7f7",
-	"desktopHeaderFg": "#9eaba8",
+	"desktopHeaderBg": ":lighten<5<$secondary",
+	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#7b8c88",
 	"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
-- 
cgit v1.2.3-freya


From 18be0d36f34138b0a60c39609a649b98367e1356 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 10:50:59 +0900
Subject: wip

---
 src/client/theme/dark.json  | 8 +++++---
 src/client/theme/light.json | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 498c9ecdd9..8a39648037 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -14,9 +14,11 @@
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
-	"scrollbarTrack": "#282c37",
-	"scrollbarHandle": "#454954",
-	"scrollbarHandleHover": "#535660",
+
+	"scrollbarTrack": ":darken<5<$secondary",
+	"scrollbarHandle": ":lighten<5<$secondary",
+	"scrollbarHandleHover": ":lighten<10<$secondary",
+
 	"face": "$secondary",
 	"faceText": "#fff",
 	"faceHeader": ":lighten<5<$secondary",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d05ee995f6..f5003ae2ec 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -14,9 +14,11 @@
 	"primaryForeground": "#fff",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
+
 	"scrollbarTrack": "#fff",
 	"scrollbarHandle": "#00000033",
 	"scrollbarHandleHover": "#00000066",
+
 	"face": "$secondary",
 	"faceText": "#444",
 	"faceHeader": ":lighten<5<$secondary",
-- 
cgit v1.2.3-freya


From fccfe19e13db9b7e22829193d3ebd2bb3cad3453 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:18:56 +0900
Subject: wip

---
 src/client/app/common/views/widgets/nav.vue        | 14 +++------
 .../app/common/views/widgets/posts-monitor.vue     | 10 ++-----
 src/client/app/common/views/widgets/rss.vue        | 16 ++++------
 .../app/common/views/widgets/server.cpu-memory.vue | 10 ++-----
 .../desktop/views/pages/admin/admin.cpu-memory.vue |  2 +-
 src/client/app/mobile/views/pages/user.vue         | 34 +++++++++-------------
 src/client/theme/dark.json                         |  9 ++++++
 src/client/theme/light.json                        |  9 ++++++
 8 files changed, 45 insertions(+), 59 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/widgets/nav.vue b/src/client/app/common/views/widgets/nav.vue
index 04dfe97c72..12003db3f2 100644
--- a/src/client/app/common/views/widgets/nav.vue
+++ b/src/client/app/common/views/widgets/nav.vue
@@ -16,23 +16,17 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-nav
 	.mkw-nav--body
 		padding 16px
 		font-size 12px
-		color isDark ? #9aa4b3 : #aaa
+		color var(--text)
 		background var(--face)
 
 		a
-			color isDark ? #9aa4b3 : #999
+			color var(--text)
 
 		i
-			color isDark ? #9aa4b3 : #ccc
-
-.mkw-nav[data-darkmode]
-	root(true)
-
-.mkw-nav:not([data-darkmode])
-	root(false)
+			color var(--text)
 
 </style>
diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
index 801307be54..09f766696b 100644
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -173,7 +173,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.qpdmibaztplkylerhdbllwcokyrfxeyj
 	&.dual
 		> svg
 			width 50%
@@ -192,7 +192,7 @@ root(isDark)
 
 		> text
 			font-size 5px
-			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+			fill var(--chartCaption)
 
 			> tspan
 				opacity 0.5
@@ -202,10 +202,4 @@ root(isDark)
 		display block
 		clear both
 
-.qpdmibaztplkylerhdbllwcokyrfxeyj[data-darkmode]
-	root(true)
-
-.qpdmibaztplkylerhdbllwcokyrfxeyj: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 a777388cdb..448eee9fb6 100644
--- a/src/client/app/common/views/widgets/rss.vue
+++ b/src/client/app/common/views/widgets/rss.vue
@@ -65,7 +65,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-rss
 	.mkw-rss--body
 		.feed
 			padding 12px 16px
@@ -74,8 +74,8 @@ root(isDark)
 			> a
 				display block
 				padding 4px 0
-				color isDark ? #9aa4b3 : #666
-				border-bottom dashed 1px isDark ? #1c2023 : #eee
+				color var(--text)
+				border-bottom dashed 1px var(--faceDivider)
 
 				&:last-child
 					border-bottom none
@@ -90,7 +90,7 @@ root(isDark)
 				margin-right 4px
 
 		&[data-mobile]
-			background isDark ? #21242f : #f3f3f3
+			background var(--face)
 
 			.feed
 				padding 0
@@ -100,12 +100,6 @@ root(isDark)
 					border-bottom none
 
 					&:nth-child(even)
-						background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7)
-
-.mkw-rss[data-darkmode]
-	root(true)
-
-.mkw-rss:not([data-darkmode])
-	root(false)
+						background rgba(#000, 0.05)
 
 </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 b0421d6150..55aa1ea895 100644
--- a/src/client/app/common/views/widgets/server.cpu-memory.vue
+++ b/src/client/app/common/views/widgets/server.cpu-memory.vue
@@ -129,7 +129,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.cpu-memory
 	> svg
 		display block
 		padding 10px
@@ -144,7 +144,7 @@ root(isDark)
 
 		> text
 			font-size 5px
-			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+			fill var(--chartCaption)
 
 			> tspan
 				opacity 0.5
@@ -154,10 +154,4 @@ root(isDark)
 		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/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
index d14ce12553..ebaa11478d 100644
--- a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
@@ -125,7 +125,7 @@ root(isDark)
 
 		> text
 			font-size 10px
-			fill isDark ? rgba(#fff, 0.55) : rgba(#000, 0.55)
+			fill var(--chartCaption)
 
 			> tspan
 				opacity 0.5
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 1ff81fc0c6..d7edda1a74 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -115,10 +115,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	$bg = isDark ? #22252f : #f7f7f7
+main
+	$bg = var(--face)
 
 	> .is-suspended
 	> .is-remote
@@ -148,7 +146,7 @@ root(isDark)
 
 		> .banner
 			padding-bottom 33.3%
-			background-color isDark ? #5f7273 : #cacaca
+			background-color rgba(0, 0, 0, 0.1)
 			background-size cover
 			background-position center
 
@@ -198,26 +196,26 @@ root(isDark)
 					margin 0
 					line-height 22px
 					font-size 20px
-					color isDark ? #fff : #757c82
+					color var(--mobileUserPageName)
 
 				> .username
 					display inline-block
 					line-height 20px
 					font-size 16px
 					font-weight bold
-					color isDark ? #657786 : #969ea5
+					color var(--mobileUserPageAcct)
 
 				> .followed
 					margin-left 8px
 					padding 2px 4px
 					font-size 12px
-					color isDark ? #657786 : #fff
-					background isDark ? #f8f8f8 : #a7bec7
+					color var(--mobileUserPageFollowedFg)
+					background var(--mobileUserPageFollowedBg)
 					border-radius 4px
 
 			> .description
 				margin 8px 0
-				color isDark ? #fff : #757c82
+				color var(--mobileUserPageDescription)
 
 			> .info
 				margin 8px 0
@@ -225,14 +223,14 @@ root(isDark)
 				> p
 					display inline
 					margin 0 16px 0 0
-					color isDark ? #a9b9c1 : #90989c
+					color var(--text)
 
 					> i
 						margin-right 4px
 
 			> .status
 				> a
-					color isDark ? #657786 : #818a92
+					color var(--text)
 
 					&:not(:last-child)
 						margin-right 16px
@@ -240,7 +238,7 @@ root(isDark)
 					> b
 						margin-right 4px
 						font-size 16px
-						color isDark ? #fff : #787e86
+						color var(--mobileUserPageStatusHighlight)
 
 					> i
 						font-size 14px
@@ -249,7 +247,7 @@ root(isDark)
 		position -webkit-sticky
 		position sticky
 		top 47px
-		box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
+		box-shadow 0 4px 4px var(--mobileUserPageHeaderShadow)
 		background-color $bg
 		z-index 2
 
@@ -266,7 +264,7 @@ root(isDark)
 				line-height 48px
 				font-size 12px
 				text-decoration none
-				color isDark ? #657786 : #9ca1a5
+				color var(--text)
 				border-bottom solid 2px transparent
 
 				@media (min-width 400px)
@@ -289,10 +287,4 @@ root(isDark)
 		@media (min-width 600px)
 			padding 32px
 
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 8a39648037..896ac7a920 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -86,6 +86,8 @@
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
 
+	"chartCaption": ":alpha<0.6<$text",
+
 	"announcementsBg": "#253a50",
 	"announcementsTitle": "#539eff",
 	"announcementsText": "#fff",
@@ -125,6 +127,13 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileUserPageName": "#fff",
+	"mobileUserPageAcct": "$text",
+	"mobileUserPageDescription": "$text",
+	"mobileUserPageFollowedBg": "rgba(0, 0, 0, 0.3)",
+	"mobileUserPageFollowedFg": "$text",
+	"mobileUserPageStatusHighlight": "#fff",
+	"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.3)",
 	"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
 	"mobileAnnouncementFg": "#fff",
 	"mobileSignedInAsBg": "#273c34",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index f5003ae2ec..fe018b5476 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -86,6 +86,8 @@
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
 
+	"chartCaption": ":alpha<0.6<$text",
+
 	"announcementsBg": "#f3f9ff",
 	"announcementsTitle": "#4078c0",
 	"announcementsText": "#57616f",
@@ -125,6 +127,13 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileUserPageName": "#757c82",
+	"mobileUserPageAcct": "#969ea5",
+	"mobileUserPageDescription": "#757c82",
+	"mobileUserPageFollowedBg": "#a7bec7",
+	"mobileUserPageFollowedFg": "#fff",
+	"mobileUserPageStatusHighlight": "#787e86",
+	"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.07)",
 	"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
 	"mobileAnnouncementFg": "#3f4967",
 	"mobileSignedInAsBg": "#fcfff5",
-- 
cgit v1.2.3-freya


From 436773837b5f121168a7d23ce3e3b817ededc12a Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:23:30 +0900
Subject: wip

---
 src/client/app/mobile/views/components/ui.nav.vue | 16 ++++------------
 src/client/theme/dark.json                        |  2 ++
 src/client/theme/light.json                       |  2 ++
 3 files changed, 8 insertions(+), 12 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index a84dc7349a..ba122cc3e2 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -121,10 +121,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	$color = isDark ? #c9d2e0 : #777
+.nav
+	$color = var(--text)
 
 	.backdrop
 		position fixed
@@ -133,7 +131,7 @@ root(isDark)
 		z-index 1025
 		width 100%
 		height 100%
-		background isDark ? rgba(#000, 0.7) : rgba(#000, 0.2)
+		background var(--mobileNavBackdrop)
 
 	.body
 		position fixed
@@ -144,7 +142,7 @@ root(isDark)
 		height 100%
 		overflow auto
 		-webkit-overflow-scrolling touch
-		background isDark ? #16191f : #fff
+		background var(--secondary)
 
 	.me
 		display block
@@ -265,10 +263,4 @@ root(isDark)
 	opacity: 0;
 }
 
-.nav[data-darkmode]
-	root(true)
-
-.nav:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 896ac7a920..f5294f27cd 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -12,6 +12,7 @@
 
 	"primary": "$primary",
 	"primaryForeground": "#fff",
+	"secondary": "$secondary",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
 
@@ -127,6 +128,7 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
 	"mobileUserPageDescription": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index fe018b5476..4776b2f3b3 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -12,6 +12,7 @@
 
 	"primary": "$primary",
 	"primaryForeground": "#fff",
+	"secondary": "$secondary",
 	"bg": ":darken<8<$secondary",
 	"text": "$text",
 
@@ -127,6 +128,7 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",
 	"mobileUserPageDescription": "#757c82",
-- 
cgit v1.2.3-freya


From 7ca5e33a3afdc57ea27cda2c004a3e6e8d688342 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:40:47 +0900
Subject: wip

---
 src/client/app/mobile/views/components/ui.header.vue | 15 +++------------
 src/client/theme/dark.json                           |  2 ++
 src/client/theme/light.json                          |  2 ++
 3 files changed, 7 insertions(+), 12 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index d3e258f052..7fd68002e7 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -70,9 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.header
 	$height = 48px
 
 	position fixed
@@ -98,7 +96,7 @@ root(isDark)
 		color #fff
 
 	> .main
-		color rgba(#fff, 0.9)
+		color var(--mobileHeaderFg)
 
 		> .backdrop
 			position absolute
@@ -108,8 +106,7 @@ root(isDark)
 			height $height
 			-webkit-backdrop-filter blur(12px)
 			backdrop-filter blur(12px)
-			//background-color rgba(#1b2023, 0.75)
-			background-color isDark ? #313543 : #595f6f
+			background-color var(--mobileHeaderBg)
 
 		> .content
 			z-index 1001
@@ -171,10 +168,4 @@ root(isDark)
 				line-height $height
 				border-left solid 1px rgba(#000, 0.1)
 
-.header[data-darkmode]
-	root(true)
-
-.header:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index f5294f27cd..65e12d5247 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -128,6 +128,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"mobileHeaderBg": ":lighten<5<$secondary",
+	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4776b2f3b3..4817663529 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -128,6 +128,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"mobileHeaderBg": ":lighten<5<$secondary",
+	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",
-- 
cgit v1.2.3-freya


From 016c7fd2c436c0a70d24e469ac42fe8bda42592f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:43:15 +0900
Subject: wip

---
 src/client/app/mobile/views/pages/user/home.vue | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/pages/user/home.vue b/src/client/app/mobile/views/pages/user/home.vue
index d19ccfd522..2c7134ed43 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(isDark)
+.root.home
 	max-width 600px
 	margin 0 auto
 
@@ -65,7 +65,7 @@ root(isDark)
 			margin 0 0 16px 0
 
 	> section
-		background isDark ? #21242f : #eee
+		background var(--face)
 		border-radius 8px
 		box-shadow 0 4px 16px rgba(#000, 0.1)
 
@@ -80,8 +80,8 @@ root(isDark)
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color isDark ? #b8c5cc : #465258
-			background var(--face)
+			color var(--text)
+			background var(--faceHeader)
 			border-radius 8px 8px 0 0
 
 			@media (min-width 500px)
@@ -98,12 +98,6 @@ root(isDark)
 		display block
 		margin 16px
 		text-align center
-		color isDark ? #cad2da : #929aa0
-
-.root.home[data-darkmode]
-	root(true)
-
-.root.home:not([data-darkmode])
-	root(false)
+		color var(--text)
 
 </style>
-- 
cgit v1.2.3-freya


From 47d4de75da5bd2b6aafb5cdc6eabf6fec6932f1e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:44:23 +0900
Subject: wip

---
 .../app/mobile/views/components/widget-container.vue    | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/widget-container.vue b/src/client/app/mobile/views/components/widget-container.vue
index bf7adf5fcb..2a4025002b 100644
--- a/src/client/app/mobile/views/components/widget-container.vue
+++ b/src/client/app/mobile/views/components/widget-container.vue
@@ -25,8 +25,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	background isDark ? #21242f : #eee
+.mk-widget-container
+	background var(--face)
 	border-radius 8px
 	box-shadow 0 4px 16px rgba(#000, 0.1)
 	overflow hidden
@@ -35,17 +35,14 @@ root(isDark)
 		background transparent !important
 		box-shadow none !important
 
-	&.hideHeader
-		background isDark ? #21242f : #fff
-
 	> header
 		> .title
 			margin 0
 			padding 8px 10px
 			font-size 15px
 			font-weight normal
-			color isDark ? #b8c5cc : #465258
-			background var(--face)
+			color var(--faceHeaderText)
+			background var(--faceHeader)
 			border-radius 8px 8px 0 0
 
 			> [data-fa]
@@ -65,10 +62,4 @@ root(isDark)
 			font-size 15px
 			color #465258
 
-.mk-widget-container[data-darkmode]
-	root(true)
-
-.mk-widget-container:not([data-darkmode])
-	root(false)
-
 </style>
-- 
cgit v1.2.3-freya


From fe8c384618597b044c004970fa39a78b0e6c5ec7 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:45:34 +0900
Subject: wip

---
 src/client/app/mobile/views/pages/settings.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 0a44a592e1..a3b508e37e 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -322,7 +322,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+main
 	margin 0 auto
 	max-width 600px
 	width 100%
@@ -346,12 +346,7 @@ root(isDark)
 	> footer
 		margin 16px
 		text-align center
-		color isDark ? #c9d2e0 : #888
-
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
+		color var(--text)
+		opacity 0.7
 
 </style>
-- 
cgit v1.2.3-freya


From d715af0620d1c18b5a5820193d1503bae94fd05e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 11:49:32 +0900
Subject: wip

---
 src/client/app/mobile/views/pages/home.vue | 22 ++++++----------------
 src/client/theme/dark.json                 |  1 +
 src/client/theme/light.json                |  1 +
 3 files changed, 8 insertions(+), 16 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index c2ab5d5623..616a3aee1b 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -154,9 +154,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+main
 	> .nav
 		> .pointer
 			position fixed
@@ -176,7 +174,7 @@ root(isDark)
 				border-top solid $size transparent
 				border-left solid $size transparent
 				border-right solid $size transparent
-				border-bottom solid $size isDark ? #272f3a : #fff
+				border-bottom solid $size var(--popupBg)
 
 		> .bg
 			position fixed
@@ -198,7 +196,7 @@ root(isDark)
 			margin 0 auto
 			overflow auto
 			-webkit-overflow-scrolling touch
-			background isDark ? #272f3a : #fff
+			background var(--popupBg)
 			border-radius 8px
 			box-shadow 0 0 16px rgba(#000, 0.1)
 
@@ -207,19 +205,19 @@ root(isDark)
 
 				> .hr
 					margin 8px 0
-					border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
+					border-top solid 1px var(--faceDivider)
 
 				> *:not(.hr)
 					display block
 					padding 8px 16px
-					color isDark ? #cdd0d8 : #666
+					color var(--text)
 
 					&[data-active]
 						color var(--primaryForeground)
 						background var(--primary)
 
 					&:not([data-active]):hover
-						background isDark ? #353e4a : #eee
+						background var(--mobileHomeTlItemHover)
 
 					> .badge
 						margin-left 6px
@@ -237,17 +235,9 @@ root(isDark)
 		@media (min-width 600px)
 			padding 32px
 
-main[data-darkmode]
-	root(true)
-
-main:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>
-
-
 .title
 	i
 		margin-right 4px
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 65e12d5247..6aa9bf86b6 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -131,6 +131,7 @@
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
+	"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
 	"mobileUserPageDescription": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4817663529..1cd77c7d61 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -131,6 +131,7 @@
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
+	"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",
 	"mobileUserPageDescription": "#757c82",
-- 
cgit v1.2.3-freya


From b4a4d784c3ec847dd19b4b692d66a52c09c9dcb5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 12:07:28 +0900
Subject: wip

---
 .../app/mobile/views/components/post-form.vue      | 24 ++++++++--------------
 src/client/theme/dark.json                         |  2 ++
 src/client/theme/light.json                        |  2 ++
 3 files changed, 12 insertions(+), 16 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 6ada5e60ee..fe8e30a41d 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -324,9 +324,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-post-form
 	max-width 500px
 	width calc(100% - 16px)
 	margin 8px auto
@@ -349,20 +347,20 @@ root(isDark)
 		> header
 			z-index 1000
 			height 50px
-			box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
+			box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
 
 			> .cancel
 				padding 0
 				width 50px
 				line-height 50px
 				font-size 24px
-				color isDark ? #9baec8 : #555
+				color var(--text)
 
 			> div
 				position absolute
 				top 0
 				right 0
-				color #657786
+				color var(--text)
 
 				> .text-count
 					line-height 50px
@@ -396,7 +394,7 @@ root(isDark)
 
 				> span
 					margin-right 16px
-					color isDark ? #fff : #666
+					color var(--text)
 
 			> input
 				z-index 1
@@ -408,11 +406,11 @@ root(isDark)
 				margin 0
 				width 100%
 				font-size 16px
-				color isDark ? #fff : #333
-				background isDark ? #191d23 : #fff
+				color var(--inputText)
+				background var(--mobilePostFormTextareaBg)
 				border none
 				border-radius 0
-				box-shadow 0 1px 0 0 isDark ? rgba(#000, 0.2) : rgba(#000, 0.1)
+				box-shadow 0 1px 0 0 var(--mobilePostFormDivider)
 
 				&:disabled
 					opacity 0.5
@@ -481,10 +479,4 @@ root(isDark)
 		> *
 			margin-right 8px
 
-.mk-post-form[data-darkmode]
-	root(true)
-
-.mk-post-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 6aa9bf86b6..3d3c9b37c7 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -131,6 +131,8 @@
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
+	"mobilePostFormDivider": "rgba(0, 0, 0, 0.2)",
+	"mobilePostFormTextareaBg": "rgba(0, 0, 0, 0.3)",
 	"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 1cd77c7d61..d4dd246542 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -131,6 +131,8 @@
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
+	"mobilePostFormDivider": "rgba(0, 0, 0, 0.1)",
+	"mobilePostFormTextareaBg": "#fff",
 	"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",
-- 
cgit v1.2.3-freya


From 5df85b5febd86cd34bcc59737f4ae974689e2a0e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 12:10:15 +0900
Subject: wip

---
 src/client/app/common/views/components/poll-editor.vue | 12 ++----------
 src/client/theme/dark.json                             |  2 ++
 src/client/theme/light.json                            |  2 ++
 3 files changed, 6 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/poll-editor.vue b/src/client/app/common/views/components/poll-editor.vue
index 7f52c62c23..b5c57d48a5 100644
--- a/src/client/app/common/views/components/poll-editor.vue
+++ b/src/client/app/common/views/components/poll-editor.vue
@@ -68,9 +68,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-poll-editor
 	padding 8px
 
 	> .caution
@@ -104,7 +102,7 @@ root(isDark)
 				width 300px
 				font-size 14px
 				color var(--inputText)
-				background isDark ? #191b22 : #fff
+				background var(--pollEditorInputBg)
 				border solid 1px var(--primaryAlpha01)
 				border-radius 4px
 
@@ -142,10 +140,4 @@ root(isDark)
 		&:active
 			color var(--primaryDarken30)
 
-.mk-poll-editor[data-darkmode]
-	root(true)
-
-.mk-poll-editor:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 3d3c9b37c7..8700d396a8 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -77,6 +77,8 @@
 
 	"reactionViewerBorder": "rgba(255, 255, 255, 0.1)",
 
+	"pollEditorInputBg": "rgba(0, 0, 0, 0.25)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
 	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
 	"urlPreviewTitle": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d4dd246542..d55b75ab08 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -77,6 +77,8 @@
 
 	"reactionViewerBorder": "rgba(0, 0, 0, 0.1)",
 
+	"pollEditorInputBg": "#fff",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
 	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
 	"urlPreviewTitle": "$text",
-- 
cgit v1.2.3-freya


From 76097416802a8afcd09bc69994c6632ce0f73902 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 12:13:08 +0900
Subject: wip

---
 src/client/app/desktop/views/components/note-preview.vue   |  2 +-
 src/client/app/desktop/views/components/notes.note.sub.vue |  2 +-
 src/client/app/desktop/views/pages/deck/deck.note.sub.vue  |  2 +-
 src/client/app/mobile/views/components/note-preview.vue    |  2 +-
 src/client/app/mobile/views/components/note.sub.vue        | 10 ++--------
 src/client/theme/dark.json                                 |  1 +
 src/client/theme/light.json                                |  1 +
 7 files changed, 8 insertions(+), 12 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/note-preview.vue b/src/client/app/desktop/views/components/note-preview.vue
index f64657fb47..7e5a1db8d4 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -81,7 +81,7 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 .qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
 	root(true)
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 70709f8738..a0c4cc2fad 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -82,7 +82,7 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 					pre
 						max-height 120px
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
index f1bf60d528..0b6a13beaf 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
@@ -62,7 +62,7 @@ root(isDark)
 			> .text
 				margin 0
 				padding 0
-				color isDark ? #959ba7 : #717171
+				color var(--subNoteText)
 
 				pre
 					max-height 120px
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 0b3278ff41..1c73779251 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -98,7 +98,7 @@ root(isDark)
 					cursor default
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 .yohlumlkhizgfkvvscwfcrcggkotpvry[data-darkmode]
 	root(true)
diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue
index 8c2e3b496d..24f5be160c 100644
--- a/src/client/app/mobile/views/components/note.sub.vue
+++ b/src/client/app/mobile/views/components/note.sub.vue
@@ -41,7 +41,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.zlrxdaqttccpwhpaagdmkawtzklsccam
 	display flex
 	padding 16px
 	font-size 10px
@@ -104,16 +104,10 @@ root(isDark)
 				> .text
 					margin 0
 					padding 0
-					color isDark ? #959ba7 : #717171
+					color var(--subNoteText)
 
 					pre
 						max-height 120px
 						font-size 80%
 
-.zlrxdaqttccpwhpaagdmkawtzklsccam[data-darkmode]
-	root(true)
-
-.zlrxdaqttccpwhpaagdmkawtzklsccam:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 8700d396a8..b4c9fd5606 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -34,6 +34,7 @@
 	"popupFg": "#d6dce2",
 
 	"subNoteBg": "rgba(0, 0, 0, 0.18)",
+	"subNoteText": ":alpha<0.7<$text",
 	"renoteGradient": "#314027",
 	"renoteText": "#9dbb00",
 	"quoteBorder": "#4e945e",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index d55b75ab08..6aec07e74d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -34,6 +34,7 @@
 	"popupFg": "#586069",
 
 	"subNoteBg": "rgba(0, 0, 0, 0.01)",
+	"subNoteText": ":alpha<0.7<$text",
 	"renoteGradient": "#edfde2",
 	"renoteText": "#9dbb00",
 	"quoteBorder": "#c0dac6",
-- 
cgit v1.2.3-freya


From 29476ea3da691416ff9abb8c953b8ecb13c908b1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 12:20:22 +0900
Subject: wip

---
 src/client/app/desktop/views/pages/deck/deck.note.vue |  2 +-
 src/client/app/mobile/views/components/note-card.vue  | 13 ++++---------
 src/client/app/mobile/views/components/note.vue       | 14 +++-----------
 3 files changed, 8 insertions(+), 21 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index c6925d5cec..2555c6f7e0 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -343,7 +343,7 @@ root(isDark)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--noteText)
 
 						> .rp
 							margin-left 4px
diff --git a/src/client/app/mobile/views/components/note-card.vue b/src/client/app/mobile/views/components/note-card.vue
index e30e6c1c8f..de9c9c1450 100644
--- a/src/client/app/mobile/views/components/note-card.vue
+++ b/src/client/app/mobile/views/components/note-card.vue
@@ -27,17 +27,18 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-note-card
 	display inline-block
 	width 150px
 	//height 120px
 	font-size 12px
 	background var(--face)
 	border-radius 4px
+	box-shadow 0 2px 8px rgba(0, 0, 0, 0.2)
 
 	> a
 		display block
-		color isDark ? #fff : #2c3940
+		color var(--noteText)
 
 		&:hover
 			text-decoration none
@@ -75,17 +76,11 @@ root(isDark)
 				left 0
 				width 100%
 				height 20px
-				background isDark ? linear-gradient(to bottom, rgba(#282c37, 0) 0%, #282c37 100%) : linear-gradient(to bottom, rgba(#fff, 0) 0%, #fff 100%)
+				background linear-gradient(to bottom, transparent 0%, var(--face) 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.vue b/src/client/app/mobile/views/components/note.vue
index 8bb9f43fab..4af19ade29 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -228,9 +228,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.note
 	font-size 12px
 	border-bottom solid 1px var(--faceDivider)
 
@@ -383,7 +381,7 @@ root(isDark)
 
 						> .reply
 							margin-right 8px
-							color isDark ? #99abbf : #717171
+							color var(--noteText)
 
 						> .rp
 							margin-left 4px
@@ -449,7 +447,7 @@ root(isDark)
 						margin-right 28px
 
 					&:hover
-						color isDark ? #9198af : #666
+						color var(--noteActionsHover)
 
 					> .count
 						display inline
@@ -459,12 +457,6 @@ root(isDark)
 					&.reacted
 						color var(--primary)
 
-.note[data-darkmode]
-	root(true)
-
-.note:not([data-darkmode])
-	root(false)
-
 </style>
 
 <style lang="stylus" module>
-- 
cgit v1.2.3-freya


From 1eef90f6cbdbf06bbc1c7e03398e9e1243664fe1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 14:03:55 +0900
Subject: wip

---
 .../mobile/views/components/drive.file-detail.vue  | 42 +++++++++-------------
 .../app/mobile/views/components/drive.file.vue     | 19 ++++------
 .../app/mobile/views/components/drive.folder.vue   | 10 ++----
 src/client/app/mobile/views/components/drive.vue   | 20 ++++-------
 .../app/mobile/views/components/notification.vue   | 10 ++----
 .../views/pages/received-follow-requests.vue       |  4 +--
 src/client/theme/dark.json                         |  1 +
 src/client/theme/light.json                        |  1 +
 8 files changed, 36 insertions(+), 71 deletions(-)

(limited to 'src/client')

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 8108892597..de46297fcb 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -134,10 +134,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.pyvicwrksnfyhpfgkjwqknuururpaztw
 	> .preview
 		padding 8px
-		background isDark ? #191b22 : #f0f0f0
+		background var(--bg)
 
 		> img
 			display block
@@ -148,9 +148,10 @@ root(isDark)
 
 		> footer
 			padding 8px 8px 0 8px
-			font-size 0.8em
-			color isDark ? #606984 : #888
 			text-align center
+			font-size 0.8em
+			color var(--text)
+			opacity 0.7
 
 			> .separator
 				display inline
@@ -178,12 +179,12 @@ root(isDark)
 	> .info
 		padding 14px
 		font-size 0.8em
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
 			margin 0 auto
-			color isDark ? #9397a2 : #9d9d9d
+			color var(--text)
 
 			> .separator
 				padding 0 4px
@@ -198,7 +199,7 @@ root(isDark)
 
 	> .menu
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -209,31 +210,26 @@ root(isDark)
 				width 100%
 				padding 10px 16px
 				margin 0 0 12px 0
-				color isDark ? #dfe3e8 : #333
+				color var(--primaryForeground)
 				font-size 0.9em
 				text-align center
 				text-decoration none
-				text-shadow 0 1px 0 isDark ? rgba(0, 0, 0, 0.9) : rgba(255, 255, 255, 0.9)
-				background-image isDark ? linear-gradient(#292f3c, #1b2025) : linear-gradient(#fafafa, #eaeaea)
-				border 1px solid isDark ? #121417 : #ddd
-				border-bottom-color isDark ? #060606 : #cecece
+				background var(--primary)
+				border none
 				border-radius 3px
 
 				&:last-child
 					margin-bottom 0
 
 				&:active
-					background-color #767676
-					background-image none
-					border-color #444
-					box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
+					background var(--primaryDarken10)
 
 				> [data-fa]
 					margin-right 4px
 
 	> .hash
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -243,7 +239,7 @@ root(isDark)
 				display block
 				margin 0
 				padding 0
-				color isDark ? #a8b7d0 : #555
+				color var(--text)
 				font-size 0.9em
 
 				> [data-fa]
@@ -264,7 +260,7 @@ root(isDark)
 
 	> .exif
 		padding 14px
-		border-top solid 1px isDark ? #1c2023 : #dfdfdf
+		border-top solid 1px var(--faceDivider)
 
 		> div
 			max-width 500px
@@ -274,7 +270,7 @@ root(isDark)
 				display block
 				margin 0
 				padding 0
-				color isDark ? #a8b7d0 : #555
+				color var(--text)
 				font-size 0.9em
 
 				> [data-fa]
@@ -292,10 +288,4 @@ root(isDark)
 				border-radius 2px
 				background #f5f5f5
 
-.pyvicwrksnfyhpfgkjwqknuururpaztw[data-darkmode]
-	root(true)
-
-.pyvicwrksnfyhpfgkjwqknuururpaztw:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index ba58cf59a0..68978bb944 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -63,9 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.vupkuhvjnjyqaqhsiogfbywvjxynrgsm
 	display block
 	text-decoration none !important
 
@@ -103,7 +101,7 @@ root(isDark)
 				padding 0
 				font-size 0.9em
 				font-weight bold
-				color isDark ? #fff : #555
+				color var(--text)
 				text-overflow ellipsis
 				overflow-wrap break-word
 
@@ -127,21 +125,22 @@ root(isDark)
 				display block
 				margin 4px 0 0 0
 				font-size 0.7em
+				color var(--text)
 
 				> .separator
 					padding 0 4px
 
 				> .type
-					color #9D9D9D
+					opacity 0.7
 
 					> .mk-file-type-icon
 						margin-right 4px
 
 				> .data-size
-					color #9D9D9D
+					opacity 0.7
 
 				> .created-at
-					color #BDBDBD
+					opacity 0.7
 
 					> [data-fa]
 						margin-right 2px
@@ -155,10 +154,4 @@ root(isDark)
 		&, *
 			color #fff !important
 
-.vupkuhvjnjyqaqhsiogfbywvjxynrgsm[data-darkmode]
-	root(true)
-
-.vupkuhvjnjyqaqhsiogfbywvjxynrgsm:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.folder.vue b/src/client/app/mobile/views/components/drive.folder.vue
index f76ecba6ad..05dcbd083e 100644
--- a/src/client/app/mobile/views/components/drive.folder.vue
+++ b/src/client/app/mobile/views/components/drive.folder.vue
@@ -24,9 +24,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.jvwxssxsytqlqvrpiymarjlzlsxskqsr
 	display block
-	color isDark ? #fff : #777
+	color var(--text)
 	text-decoration none !important
 
 	*
@@ -55,10 +55,4 @@ root(isDark)
 			> *
 				height 100%
 
-.jvwxssxsytqlqvrpiymarjlzlsxskqsr[data-darkmode]
-	root(true)
-
-.jvwxssxsytqlqvrpiymarjlzlsxskqsr:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 76d6c2737d..8919462511 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -473,7 +473,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.kmmwchoexgckptowjmjgfsygeltxfeqs
 	background var(--face)
 
 	> nav
@@ -487,10 +487,10 @@ root(isDark)
 		overflow auto
 		white-space nowrap
 		font-size 0.9em
-		color rgba(isDark ? #fff : #000, 0.67)
+		color var(--text)
 		-webkit-backdrop-filter blur(12px)
 		backdrop-filter blur(12px)
-		//background-color rgba(var(--faceHeader), 0.75)
+		background-color var(--mobileDriveNavBg)
 		border-bottom solid 1px rgba(#000, 0.13)
 
 		> p
@@ -516,7 +516,7 @@ root(isDark)
 			opacity 0.5
 
 		> .info
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			&:empty
 				display none
@@ -527,15 +527,15 @@ root(isDark)
 				margin 0 auto
 				padding 4px 16px
 				font-size 10px
-				color isDark ? #606984 : #777
+				color var(--text)
 
 		> .folders
 			> .folder
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 		> .files
 			> .file
-				border-bottom solid 1px isDark ? #1c2023 : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			> .more
 				display block
@@ -591,10 +591,4 @@ root(isDark)
 	> .file
 		display none
 
-.kmmwchoexgckptowjmjgfsygeltxfeqs[data-darkmode]
-	root(true)
-
-.kmmwchoexgckptowjmjgfsygeltxfeqs:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/notification.vue b/src/client/app/mobile/views/components/notification.vue
index 7b73012e06..4a09104341 100644
--- a/src/client/app/mobile/views/components/notification.vue
+++ b/src/client/app/mobile/views/components/notification.vue
@@ -105,7 +105,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-notification
 	> .notification
 		padding 16px
 		font-size 12px
@@ -154,7 +154,7 @@ root(isDark)
 
 				> .mk-time
 					margin-left auto
-					color isDark ? #606984 : #c0c0c0
+					color var(--noteHeaderInfo)
 					font-size 0.9em
 
 			> .note-preview
@@ -182,10 +182,4 @@ root(isDark)
 			> div > header i
 				color #888
 
-.mk-notification[data-darkmode]
-	root(true)
-
-.mk-notification:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/received-follow-requests.vue b/src/client/app/mobile/views/pages/received-follow-requests.vue
index c2b2606fd8..beaf6bba57 100644
--- a/src/client/app/mobile/views/pages/received-follow-requests.vue
+++ b/src/client/app/mobile/views/pages/received-follow-requests.vue
@@ -52,8 +52,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 main
 	width 100%
 	max-width 680px
@@ -69,7 +67,7 @@ main
 	> div
 		display flex
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
 		> span
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index b4c9fd5606..f8b3420e7c 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -136,6 +136,7 @@
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
 	"mobilePostFormDivider": "rgba(0, 0, 0, 0.2)",
 	"mobilePostFormTextareaBg": "rgba(0, 0, 0, 0.3)",
+	"mobileDriveNavBg": ":alpha<0.75<$secondary",
 	"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
 	"mobileUserPageName": "#fff",
 	"mobileUserPageAcct": "$text",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 6aec07e74d..7652c6027d 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -136,6 +136,7 @@
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
 	"mobilePostFormDivider": "rgba(0, 0, 0, 0.1)",
 	"mobilePostFormTextareaBg": "#fff",
+	"mobileDriveNavBg": ":alpha<0.75<$secondary",
 	"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
 	"mobileUserPageName": "#757c82",
 	"mobileUserPageAcct": "#969ea5",
-- 
cgit v1.2.3-freya


From c627288bdeb23167edc04101cd985f02f4bc8ede Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 14:26:20 +0900
Subject: wip

---
 src/client/app/common/views/pages/follow.vue       |  2 +-
 .../app/common/views/widgets/posts-monitor.vue     |  2 +-
 .../components/received-follow-requests-window.vue |  2 +-
 .../desktop/views/components/user-lists-window.vue |  2 +-
 src/client/app/desktop/views/pages/deck/deck.vue   |  2 +-
 .../app/desktop/views/pages/user/user.friends.vue  | 17 +++++---------
 .../app/desktop/views/pages/user/user.header.vue   | 18 +++++----------
 .../app/desktop/views/pages/user/user.photos.vue   | 10 ++-------
 .../app/desktop/views/pages/user/user.profile.vue  | 12 +++-------
 .../app/desktop/views/pages/user/user.timeline.vue | 16 ++++---------
 src/client/app/desktop/views/pages/user/user.vue   | 26 +++++++++-------------
 src/client/app/desktop/views/widgets/polls.vue     | 12 +++-------
 src/client/app/desktop/views/widgets/profile.vue   | 16 +++++--------
 src/client/app/desktop/views/widgets/users.vue     | 15 +++++--------
 .../mobile/views/components/drive-file-chooser.vue | 14 ++++--------
 src/client/app/mobile/views/pages/home.vue         |  2 +-
 src/client/app/mobile/views/pages/settings.vue     |  2 +-
 src/client/app/mobile/views/pages/user.vue         |  2 +-
 src/client/theme/dark.json                         |  5 +++++
 src/client/theme/light.json                        |  5 +++++
 20 files changed, 65 insertions(+), 117 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index 5e2d448d8b..ef7ee111e2 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+<div class="syxhndwprovvuqhmyvveewmbqayniwkv" v-if="!fetching">
 	<div class="signed-in-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${myName}`)"></div>
 
 	<main>
diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
index 09f766696b..18df1241a9 100644
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -4,7 +4,7 @@
 		<template slot="header">%fa:chart-line%%i18n:@title%</template>
 		<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
 
-		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }" :data-darkmode="$store.state.device.darkmode">
+		<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
 			<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">
 				<defs>
 					<linearGradient :id="localGradientId" x1="0" x2="0" y1="1" y2="0">
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
index d8a94f6cbe..8ade6a7210 100644
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -2,7 +2,7 @@
 <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:envelope R% %i18n:@title%</span>
 
-	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc" :data-darkmode="$store.state.device.darkmode">
+	<div class="slpqaxdoxhvglersgjukmvizkqbmbokc">
 		<div v-for="req in requests">
 			<router-link :key="req.id" :to="req.follower | userPage">{{ req.follower | userName }}</router-link>
 			<span>
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 75253e0788..4f944981a5 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -2,7 +2,7 @@
 <mk-window ref="window" is-modal width="450px" height="500px" @closed="destroyDom">
 	<span slot="header">%fa:list% %i18n:@title%</span>
 
-	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp" :data-darkmode="$store.state.device.darkmode">
+	<div class="xkxvokkjlptzyewouewmceqcxhpgzprp">
 		<button class="ui" @click="add">%i18n:@create-list%</button>
 		<a v-for="list in lists" :key="list.id" @click="choice(list)">{{ list.title }}</a>
 	</div>
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 48c80c82c4..cd3336079b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui :class="$style.root">
-	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :data-darkmode="$store.state.device.darkmode" :style="style">
+	<div class="qlvquzbjribqcaozciifydkngcwtyzje" :style="style">
 		<template v-for="ids in layout">
 			<div v-if="ids.length > 1" class="folder">
 				<template v-for="id, i in ids">
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 9b466053f7..36ae360248 100644
--- a/src/client/app/desktop/views/pages/user/user.friends.vue
+++ b/src/client/app/desktop/views/pages/user/user.friends.vue
@@ -40,7 +40,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.hozptpaliadatkehcmcayizwzwwctpbc
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -53,7 +53,7 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		background isDark ? #313543 : inherit
+		background var(--faceHeader)
 		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
@@ -72,7 +72,7 @@ root(isDark)
 
 	> .user
 		padding 16px
-		border-bottom solid 1px isDark ? #21242f : #eee
+		border-bottom solid 1px var(--faceDivider)
 
 		&:last-child
 			border-bottom none
@@ -98,24 +98,19 @@ root(isDark)
 				margin 0
 				font-size 16px
 				line-height 24px
-				color isDark ? #ccc : #555
+				color var(--text)
 
 			> .username
 				display block
 				margin 0
 				font-size 15px
 				line-height 16px
-				color isDark ? #555 : #ccc
+				color var(--text)
+				opacity 0.7
 
 		> .mk-follow-button
 			position absolute
 			top 16px
 			right 16px
 
-.hozptpaliadatkehcmcayizwzwwctpbc[data-darkmode]
-	root(true)
-
-.hozptpaliadatkehcmcayizwzwwctpbc:not([data-darkmode])
-	root(false)
-
 </style>
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 ec46e955b5..76eb8f9e1c 100644
--- a/src/client/app/desktop/views/pages/user/user.header.vue
+++ b/src/client/app/desktop/views/pages/user/user.header.vue
@@ -100,9 +100,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.header
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -182,12 +180,12 @@ root(isDark)
 
 	> .body
 		padding 16px 16px 16px 154px
-		color isDark ? #c5ced6 : #555
+		color var(--text)
 
 		> .status
 			margin-top 16px
 			padding-top 16px
-			border-top solid 1px rgba(#000, isDark ? 0.2 : 0.1)
+			border-top solid 1px var(--faceDivider)
 			font-size 80%
 
 			> *
@@ -196,13 +194,13 @@ root(isDark)
 				margin-right 16px
 
 				&:not(:last-child)
-					border-right solid 1px rgba(#000, isDark ? 0.2 : 0.1)
+					border-right solid 1px var(--faceDivider)
 
 				&.clickable
 					cursor pointer
 
 					&:hover
-						color isDark ? #fff : #000
+						color var(--faceTextButtonHover)
 
 				> b
 					margin-right 4px
@@ -210,10 +208,4 @@ root(isDark)
 					font-weight bold
 					color var(--primary)
 
-.header[data-darkmode]
-	root(true)
-
-.header:not([data-darkmode])
-	root(false)
-
 </style>
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 6e9d09e79f..628d5b6d95 100644
--- a/src/client/app/desktop/views/pages/user/user.photos.vue
+++ b/src/client/app/desktop/views/pages/user/user.photos.vue
@@ -39,7 +39,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.dzsuvbsrrrwobdxifudxuefculdfiaxd
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -52,7 +52,7 @@ root(isDark)
 		line-height 42px
 		font-size 0.9em
 		font-weight bold
-		background: isDark ? #313543 : inherit
+		background var(--faceHeader)
 		color var(--faceHeaderText)
 		box-shadow 0 1px rgba(#000, 0.07)
 
@@ -87,10 +87,4 @@ root(isDark)
 		> i
 			margin-right 4px
 
-.dzsuvbsrrrwobdxifudxuefculdfiaxd[data-darkmode]
-	root(true)
-
-.dzsuvbsrrrwobdxifudxuefculdfiaxd:not([data-darkmode])
-	root(false)
-
 </style>
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 e5ea8d1cc9..fe10b54378 100644
--- a/src/client/app/desktop/views/pages/user/user.profile.vue
+++ b/src/client/app/desktop/views/pages/user/user.profile.vue
@@ -85,7 +85,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.profile
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -96,7 +96,7 @@ root(isDark)
 	> .friend-form
 		padding 16px
 		text-align center
-		border-bottom solid 1px isDark ? #21242f : #eee
+		border-bottom solid 1px var(--faceDivider)
 
 		> .followed
 			margin 12px 0 0 0
@@ -114,7 +114,7 @@ root(isDark)
 	> .action-form
 		padding 16px
 		text-align center
-		border-bottom solid 1px isDark ? #21242f : #eee
+		border-bottom solid 1px var(--faceDivider)
 
 		> *
 			width 100%
@@ -122,10 +122,4 @@ root(isDark)
 			&:not(:last-child)
 				margin-bottom 12px
 
-.profile[data-darkmode]
-	root(true)
-
-.profile: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 fe3ca9154b..608c12b7e2 100644
--- a/src/client/app/desktop/views/pages/user/user.timeline.vue
+++ b/src/client/app/desktop/views/pages/user/user.timeline.vue
@@ -112,9 +112,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.oh5y2r7l5lx8j6jj791ykeiwgihheguk
 	background var(--face)
 	border-radius var(--round)
 	overflow hidden
@@ -123,7 +121,7 @@ root(isDark)
 		padding 0 8px
 		z-index 10
 		background var(--faceHeader)
-		box-shadow 0 1px isDark ? rgba(#000, 0.15) : rgba(#000, 0.08)
+		box-shadow 0 1px var(--desktopTimelineHeaderShadow)
 
 		> span
 			display inline-block
@@ -148,11 +146,11 @@ root(isDark)
 					background var(--primary)
 
 			&:not([data-active])
-				color isDark ? #9aa2a7 : #6f7477
+				color var(--desktopTimelineSrc)
 				cursor pointer
 
 				&:hover
-					color isDark ? #d9dcde : #525a5f
+					color var(--desktopTimelineSrcHover)
 
 	> .loading
 		padding 64px 0
@@ -171,10 +169,4 @@ root(isDark)
 			font-size 3em
 			color #ccc
 
-.oh5y2r7l5lx8j6jj791ykeiwgihheguk[data-darkmode]
-	root(true)
-
-.oh5y2r7l5lx8j6jj791ykeiwgihheguk:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/user/user.vue b/src/client/app/desktop/views/pages/user/user.vue
index a7065af5e7..a8da890936 100644
--- a/src/client/app/desktop/views/pages/user/user.vue
+++ b/src/client/app/desktop/views/pages/user/user.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+	<div class="xygkxeaeontfaokvqmiblezmhvhostak" v-if="!fetching">
 		<div class="is-suspended" v-if="user.isSuspended">%fa:exclamation-triangle% %i18n:@is-suspended%</div>
 		<div class="is-remote" v-if="user.host != null">%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></div>
 		<main>
@@ -79,7 +79,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.xygkxeaeontfaokvqmiblezmhvhostak
 	width 980px
 	padding 16px
 	margin 0 auto
@@ -93,12 +93,12 @@ root(isDark)
 		border-radius var(--round)
 
 		&.is-suspended
-			color isDark ? #ffb4b4 : #570808
-			background isDark ? #611d1d : #ffdbdb
+			color var(--suspendedInfoFg)
+			background var(--suspendedInfoBg)
 
 		&.is-remote
-			color isDark ? #ffbd3e : #573c08
-			background isDark ? #42321c : #fff0db
+			color var(--remoteInfoFg)
+			background var(--remoteInfoBg)
 
 		> a
 			font-weight bold
@@ -139,21 +139,15 @@ root(isDark)
 			> .nav
 				padding 16px
 				font-size 12px
-				color #aaa
-				background isDark ? #21242f : #fff
+				color var(--text)
+				background var(--face)
 				box-shadow var(--shadow)
 				border-radius var(--round)
 
 				a
-					color #999
+					color var(--text)99
 
 				i
-					color #ccc
-
-.xygkxeaeontfaokvqmiblezmhvhostak[data-darkmode]
-	root(true)
-
-.xygkxeaeontfaokvqmiblezmhvhostak:not([data-darkmode])
-	root(false)
+					color var(--text)
 
 </style>
diff --git a/src/client/app/desktop/views/widgets/polls.vue b/src/client/app/desktop/views/widgets/polls.vue
index 8ff0bb5d0d..c10ac1ca17 100644
--- a/src/client/app/desktop/views/widgets/polls.vue
+++ b/src/client/app/desktop/views/widgets/polls.vue
@@ -4,7 +4,7 @@
 		<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="$store.state.device.darkmode">
+		<div class="mkw-polls--body">
 			<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>
@@ -64,11 +64,11 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-polls--body
 	> .poll
 		padding 16px
 		font-size 12px
-		color isDark ? #9ea4ad : #555
+		color var(--text)
 
 		> p
 			margin 0 0 8px 0
@@ -91,10 +91,4 @@ root(isDark)
 		> [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 aea0c90e34..fa35138c31 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -46,8 +46,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-
+.egwyvoaaryotefqhqtmiyawwefemjfsd-body
 	&[data-compact]
 		> .banner:before
 			content ""
@@ -88,7 +87,7 @@ root(isDark)
 
 	> .banner
 		height 100px
-		background-color isDark ? #303e4a : #f5f5f5
+		background-color var(--primaryDarken10)
 		background-size cover
 		background-position center
 		cursor pointer
@@ -109,19 +108,14 @@ root(isDark)
 		margin 10px 0 0 84px
 		line-height 16px
 		font-weight bold
-		color isDark ? #fff : #555
+		color var(--text)
 
 	> .username
 		display block
 		margin 4px 0 8px 84px
 		line-height 16px
 		font-size 0.9em
-		color isDark ? #606984 : #999
-
-.egwyvoaaryotefqhqtmiyawwefemjfsd-body[data-darkmode]
-	root(true)
-
-.egwyvoaaryotefqhqtmiyawwefemjfsd-body:not([data-darkmode])
-	root(false)
+		color var(--text)
+		opacity 0.7
 
 </style>
diff --git a/src/client/app/desktop/views/widgets/users.vue b/src/client/app/desktop/views/widgets/users.vue
index 328fa56697..28c6372b6f 100644
--- a/src/client/app/desktop/views/widgets/users.vue
+++ b/src/client/app/desktop/views/widgets/users.vue
@@ -73,11 +73,11 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-users
 	.mkw-users--body
 		> .user
 			padding 16px
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 
 			&:last-child
 				border-bottom none
@@ -103,14 +103,15 @@ root(isDark)
 					margin 0
 					font-size 16px
 					line-height 24px
-					color isDark ? #fff : #555
+					color var(--text)
 
 				> .username
 					display block
 					margin 0
 					font-size 15px
 					line-height 16px
-					color isDark ? #606984 : #ccc
+					color var(--text)
+					opacity 0.7
 
 			> .mk-follow-button
 				position absolute
@@ -132,10 +133,4 @@ root(isDark)
 			> [data-fa]
 				margin-right 4px
 
-.mkw-users[data-darkmode]
-	root(true)
-
-.mkw-users:not([data-darkmode])
-	root(false)
-
 </style>
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 6d3fc2343a..5fca19939e 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.cdxzvcfawjxdyxsekbxbfgtplebnoneb
 	position fixed
 	z-index 20000
 	top 0
@@ -59,11 +59,11 @@ root(isDark)
 	> .body
 		width 100%
 		height 100%
-		background var(--face)
+		background var(--faceHeader)
 
 		> header
-			border-bottom solid 1px isDark ? #1b1f29 : #eee
-			color isDark ? #fff : #111
+			border-bottom solid 1px var(--faceDivider)
+			color var(--text)
 
 			> h1
 				margin 0
@@ -96,10 +96,4 @@ root(isDark)
 			overflow scroll
 			-webkit-overflow-scrolling touch
 
-.cdxzvcfawjxdyxsekbxbfgtplebnoneb[data-darkmode]
-	root(true)
-
-.cdxzvcfawjxdyxsekbxbfgtplebnoneb:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/home.vue b/src/client/app/mobile/views/pages/home.vue
index 616a3aee1b..edba8585bd 100644
--- a/src/client/app/mobile/views/pages/home.vue
+++ b/src/client/app/mobile/views/pages/home.vue
@@ -22,7 +22,7 @@
 		<button @click="fn">%fa:pencil-alt%</button>
 	</template>
 
-	<main :data-darkmode="$store.state.device.darkmode">
+	<main>
 		<div class="nav" v-if="showNav">
 			<div class="bg" @click="showNav = false"></div>
 			<div class="pointer"></div>
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index a3b508e37e..b83eaf6d33 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<span slot="header"><span style="margin-right:4px;">%fa:cog%</span>%i18n:@settings%</span>
-	<main :data-darkmode="$store.state.device.darkmode">
+	<main>
 		<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', `<b>${name}</b>`)"></div>
 
 		<div>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index d7edda1a74..a2a6bd7a83 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -1,7 +1,7 @@
 <template>
 <mk-ui>
 	<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
-	<main v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
+	<main v-if="!fetching">
 		<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
 		<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
 		<header>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index f8b3420e7c..462999a64f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -106,6 +106,11 @@
 	"mfmQuote": ":alpha<0.7<$text",
 	"mfmQuoteLine": ":alpha<0.6<$text",
 
+	"suspendedInfoBg": "#611d1d",
+	"suspendedInfoFg": "#ffb4b4",
+	"remoteInfoBg": "#42321c",
+	"remoteInfoFg": "#ffbd3e",
+
 	"messagingRoomBg": "@bg",
 	"messagingRoomInfo": "#fff",
 	"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 7652c6027d..60824e0a84 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -106,6 +106,11 @@
 	"mfmQuote": ":alpha<0.6<$text",
 	"mfmQuoteLine": ":alpha<0.5<$text",
 
+	"suspendedInfoBg": "#ffdbdb",
+	"suspendedInfoFg": "#570808",
+	"remoteInfoBg": "#fff0db",
+	"remoteInfoFg": "#573c08",
+
 	"messagingRoomBg": "#fff",
 	"messagingRoomInfo": "#000",
 	"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",
-- 
cgit v1.2.3-freya


From 13f258308ea5dc158a61f7e89b634450171d30ad Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 15:34:34 +0900
Subject: wip

---
 src/client/app/desktop/script.ts                   |   2 -
 .../components/received-follow-requests-window.vue |  11 +-
 .../app/desktop/views/components/renote-form.vue   |  13 +--
 .../desktop/views/components/ui-notification.vue   |  14 +--
 .../desktop/views/components/user-lists-window.vue |  11 +-
 .../app/desktop/views/components/user-preview.vue  |  21 ++--
 .../app/desktop/views/pages/deck/deck.column.vue   |  14 +--
 .../app/desktop/views/pages/deck/deck.note.vue     |  20 +---
 .../app/desktop/views/pages/deck/deck.notes.vue    |  14 +--
 .../desktop/views/pages/deck/deck.notification.vue |   2 +-
 src/client/app/desktop/views/pages/deck/deck.vue   |  16 +--
 .../views/pages/deck/deck.widgets-column.vue       |  13 +--
 .../app/desktop/views/pages/user-list.users.vue    | 125 ---------------------
 src/client/app/desktop/views/pages/user-list.vue   |  71 ------------
 src/client/theme/dark.json                         |   6 +
 src/client/theme/light.json                        |   8 +-
 16 files changed, 45 insertions(+), 316 deletions(-)
 delete mode 100644 src/client/app/desktop/views/pages/user-list.users.vue
 delete mode 100644 src/client/app/desktop/views/pages/user-list.vue

(limited to 'src/client')

diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 8b184a4aae..05aa928fa3 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -29,7 +29,6 @@ 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';
@@ -63,7 +62,6 @@ 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: '/tags/:tag', component: MkTag },
diff --git a/src/client/app/desktop/views/components/received-follow-requests-window.vue b/src/client/app/desktop/views/components/received-follow-requests-window.vue
index 8ade6a7210..3df1329c48 100644
--- a/src/client/app/desktop/views/components/received-follow-requests-window.vue
+++ b/src/client/app/desktop/views/components/received-follow-requests-window.vue
@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.slpqaxdoxhvglersgjukmvizkqbmbokc
 	padding 16px
 
 	> button
@@ -57,16 +56,10 @@ root(isDark)
 	> div
 		display flex
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
 		> span
 			margin 0 0 0 auto
 
-.slpqaxdoxhvglersgjukmvizkqbmbokc[data-darkmode]
-	root(true)
-
-.slpqaxdoxhvglersgjukmvizkqbmbokc:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index ad23740f13..6717ced3b1 100644
--- a/src/client/app/desktop/views/components/renote-form.vue
+++ b/src/client/app/desktop/views/components/renote-form.vue
@@ -57,16 +57,13 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.mk-renote-form
 	> .preview
 		margin 16px 22px
 
 	> footer
 		height 72px
-		background isDark ? #313543 : var(--primaryLighten95)
+		background var(--desktopRenoteFormFooter)
 
 		> .quote
 			position absolute
@@ -87,10 +84,4 @@ root(isDark)
 			&.ok
 				right 16px
 
-.mk-renote-form[data-darkmode]
-	root(true)
-
-.mk-renote-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/ui-notification.vue b/src/client/app/desktop/views/components/ui-notification.vue
index 883a880e5d..dafede4c36 100644
--- a/src/client/app/desktop/views/components/ui-notification.vue
+++ b/src/client/app/desktop/views/components/ui-notification.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-ui-notification
 	display block
 	position fixed
 	z-index 10000
@@ -46,10 +46,10 @@ root(isDark)
 	margin 0 auto
 	padding 128px 0 0 0
 	width 500px
-	color rgba(isDark ? #fff : #000, 0.6)
-	//background rgba(var(--face), 0.9)
+	color var(--desktopNotificationFg)
+	background var(--desktopNotificationBg)
 	border-radius 0 0 8px 8px
-	box-shadow 0 2px 4px rgba(#000, isDark ? 0.4 : 0.2)
+	box-shadow 0 2px 4px var(--desktopNotificationShadow)
 	transform translateY(-64px)
 	opacity 0
 
@@ -58,10 +58,4 @@ root(isDark)
 		line-height 64px
 		text-align center
 
-.mk-ui-notification[data-darkmode]
-	root(true)
-
-.mk-ui-notification:not([data-darkmode])
-	root(false)
-
 </style>
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 4f944981a5..9c384314cf 100644
--- a/src/client/app/desktop/views/components/user-lists-window.vue
+++ b/src/client/app/desktop/views/components/user-lists-window.vue
@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.xkxvokkjlptzyewouewmceqcxhpgzprp
 	padding 16px
 
 	> button
@@ -57,13 +56,7 @@ root(isDark)
 	> a
 		display block
 		padding 16px
-		border solid 1px isDark ? #1c2023 : #eee
+		border solid 1px var(--faceDivider)
 		border-radius 4px
 
-.xkxvokkjlptzyewouewmceqcxhpgzprp[data-darkmode]
-	root(true)
-
-.xkxvokkjlptzyewouewmceqcxhpgzprp: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 01b6cdbdc5..7f5e79eae1 100644
--- a/src/client/app/desktop/views/components/user-preview.vue
+++ b/src/client/app/desktop/views/components/user-preview.vue
@@ -83,9 +83,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-user-preview
 	position absolute
 	z-index 2048
 	margin-top -8px
@@ -99,7 +97,7 @@ root(isDark)
 
 	> .banner
 		height 84px
-		background-color isDark ? #1c1e26 : #f5f5f5
+		background-color rgba(0, 0, 0, 0.1)
 		background-size cover
 		background-position center
 
@@ -123,19 +121,20 @@ root(isDark)
 			margin 0
 			font-weight bold
 			line-height 16px
-			color isDark ? #fff : #656565
+			color var(--text)
 
 		> .username
 			display block
 			margin 0
 			line-height 16px
 			font-size 0.8em
-			color isDark ? #606984 : #999
+			color var(--text)
+			opacity 0.7
 
 	> .description
 		padding 0 16px
 		font-size 0.7em
-		color isDark ? #9ea4ad : #555
+		color var(--text)
 
 	> .status
 		padding 8px 16px
@@ -147,7 +146,7 @@ root(isDark)
 			> p
 				margin 0
 				font-size 0.7em
-				color #aaa
+				color var(--text)
 
 			> span
 				font-size 1em
@@ -158,10 +157,4 @@ root(isDark)
 		top 92px
 		right 8px
 
-.mk-user-preview[data-darkmode]
-	root(true)
-
-.mk-user-preview:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 2dba7d2522..1b939f2f58 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -269,9 +269,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs
 	$header-height = 42px
 
 	width 330px
@@ -301,7 +299,7 @@ root(isDark)
 		min-width 285px
 
 	&.naked
-		background rgba(#000, isDark ? 0.25 : 0.1)
+		background var(--deckAcrylicColumnBg)
 
 		> header
 			background transparent
@@ -350,7 +348,7 @@ root(isDark)
 				color var(--faceTextButtonHover)
 
 			&:active
-				color isDark ? #b2c1d5 : #999
+				color var(--faceTextButtonActive)
 
 		> .toggleActive
 			margin-left -16px
@@ -364,10 +362,4 @@ root(isDark)
 		overflow auto
 		overflow-x hidden
 
-.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs[data-darkmode]
-	root(true)
-
-.dnpfarvgbnfmyzbdquhhzyxcmstpdqzs:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index 2555c6f7e0..eac0e78f0f 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -214,9 +214,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-mediaRoot(isDark)
+.srwrkujossgfuhrbnvqkybtzxpblgchi
 	font-size 13px
 	margin 4px 12px
 
@@ -226,7 +224,7 @@ mediaRoot(isDark)
 	&:last-child
 		margin-bottom 12px
 
-root(isDark)
+.zyjjkidcqjnlegkqebitfviomuqmseqk
 	font-size 13px
 	border-bottom solid 1px var(--faceDivider)
 
@@ -409,7 +407,7 @@ root(isDark)
 						margin-right 28px
 
 					&:hover
-						color isDark ? #9198af : #666
+						color var(--noteActionsHover)
 
 					> .count
 						display inline
@@ -419,16 +417,4 @@ root(isDark)
 					&.reacted
 						color var(--primary)
 
-.zyjjkidcqjnlegkqebitfviomuqmseqk[data-darkmode]
-	root(true)
-
-.zyjjkidcqjnlegkqebitfviomuqmseqk:not([data-darkmode])
-	root(false)
-
-.srwrkujossgfuhrbnvqkybtzxpblgchi[data-darkmode]
-	mediaRoot(true)
-
-.srwrkujossgfuhrbnvqkybtzxpblgchi:not([data-darkmode])
-	mediaRoot(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notes.vue b/src/client/app/desktop/views/pages/deck/deck.notes.vue
index 7e171a2397..884be3a841 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notes.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notes.vue
@@ -195,9 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.eamppglmnmimdhrlzhplwpvyeaqmmhxu
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to
@@ -238,15 +236,9 @@ root(isDark)
 			border-bottom-right-radius 6px
 
 			&:hover
-				background isDark ? #2e3440 : #f5f5f5
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 			&:active
-				background isDark ? #21242b : #eee
-
-.eamppglmnmimdhrlzhplwpvyeaqmmhxu[data-darkmode]
-	root(true)
-
-.eamppglmnmimdhrlzhplwpvyeaqmmhxu:not([data-darkmode])
-	root(false)
+				box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index ff10ac2aa6..b318579b3e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -142,7 +142,7 @@ root(isDark)
 
 				> .mk-time
 					margin-left auto
-					color isDark ? #606984 : #c0c0c0
+					color var(--noteHeaderInfo)
 					font-size 0.9em
 
 			> .note-preview
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index cd3336079b..22b4c50bb4 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -221,9 +221,7 @@ export default Vue.extend({
 </style>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.qlvquzbjribqcaozciifydkngcwtyzje
 	display flex
 	flex 1
 	padding 16px 0 16px 16px
@@ -251,18 +249,12 @@ root(isDark)
 
 	> button
 		padding 0 16px
-		color isDark ? #93a0a5 : #888
+		color var(--faceTextButton)
 
 		&:hover
-			color isDark ? #b8c5ca : #777
+			color var(--faceTextButtonHover)
 
 		&:active
-			color isDark ? #fff : #555
-
-.qlvquzbjribqcaozciifydkngcwtyzje[data-darkmode]
-	root(true)
-
-.qlvquzbjribqcaozciifydkngcwtyzje:not([data-darkmode])
-	root(false)
+			color var(--faceTextButtonActive)
 
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
index fe190bf892..e1fecc98bc 100644
--- a/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.widgets-column.vue
@@ -135,9 +135,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.wtdtxvecapixsepjtcupubtsmometobz
 	.gqpwvtwtprsbmnssnbicggtwqhmylhnq
 		> header
 			padding 16px
@@ -169,14 +167,5 @@ root(isDark)
 				background rgba(#000, 0.7)
 				border-radius 4px
 
-		> header
-			color isDark ? #fff : #000
-
-.wtdtxvecapixsepjtcupubtsmometobz[data-darkmode]
-	root(true)
-
-.wtdtxvecapixsepjtcupubtsmometobz:not([data-darkmode])
-	root(false)
-
 </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
deleted file mode 100644
index 7d9a4606a1..0000000000
--- a/src/client/app/desktop/views/pages/user-list.users.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-<div>
-	<mk-widget-container>
-		<template slot="header">%fa:users% %i18n:@users%</template>
-		<button slot="func" title="%i18n:@add-user%" @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">
-					<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>
-					</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: '%i18n:@username%',
-			}).then(async (username: string) => {
-				if (username.startsWith('@')) username = username.slice(1);
-				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
-			display block
-			float left
-			margin 0 12px 0 0
-			width 42px
-			height 42px
-			border-radius 8px
-
-		> .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
deleted file mode 100644
index 2241b84e5e..0000000000
--- a/src/client/app/desktop/views/pages/user-list.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-<mk-ui>
-	<div v-if="!fetching" data-id="02010e15-cc48-4245-8636-16078a9b623c">
-		<div>
-			<div><h1>{{ list.title }}</h1></div>
-			<x-users :list="list"/>
-		</div>
-		<main>
-			<mk-user-list-timeline :list="list"/>
-		</main>
-	</div>
-</mk-ui>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XUsers from './user-list.users.vue';
-
-export default Vue.extend({
-	components: {
-		XUsers
-	},
-	data() {
-		return {
-			fetching: true,
-			list: null
-		};
-	},
-	watch: {
-		$route: 'fetch'
-	},
-	mounted() {
-		this.fetch();
-	},
-	methods: {
-		fetch() {
-			this.fetching = true;
-
-			(this as any).api('users/lists/show', {
-				listId: this.$route.params.list
-			}).then(list => {
-				this.list = list;
-				this.fetching = false;
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-[data-id="02010e15-cc48-4245-8636-16078a9b623c"]
-	display flex
-	justify-content center
-	margin 0 auto
-	max-width 1200px
-
-	> main
-	> div > div
-		> *:not(:last-child)
-			margin-bottom 16px
-
-	> main
-		padding 16px
-		width calc(100% - 275px * 2)
-
-	> div
-		width 275px
-		margin 0
-		padding 16px 0 16px 16px
-
-</style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 462999a64f..97ec96827a 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -126,9 +126,13 @@
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
 	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
 	"desktopHeaderSearchFg": "#fff",
+	"desktopNotificationBg": ":alpha<0.9<$secondary",
+	"desktopNotificationFg": ":alpha<0.7<$text",
+	"desktopNotificationShadow": "rgba(0, 0, 0, 0.4)",
 	"desktopPostFormBg": "@face",
 	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
 	"desktopPostFormTextareaFg": "#fff",
+	"desktopRenoteFormFooter": ":lighten<5<$secondary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
@@ -136,6 +140,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
+	"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.25)",
+
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 60824e0a84..52822bc5fe 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -126,9 +126,13 @@
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
 	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
 	"desktopHeaderSearchFg": "#000",
-	"desktopPostFormBg": "#fff6f6",
+	"desktopNotificationBg": ":alpha<0.9<$secondary",
+	"desktopNotificationFg": ":alpha<0.7<$text",
+	"desktopNotificationShadow": "rgba(0, 0, 0, 0.2)",
+	"desktopPostFormBg": ":lighten<33<$primary",
 	"desktopPostFormTextareaBg": "#fff",
 	"desktopPostFormTextareaFg": "#333",
+	"desktopRenoteFormFooter": ":lighten<33<$primary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
@@ -136,6 +140,8 @@
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
+	"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.1)",
+
 	"mobileHeaderBg": ":lighten<5<$secondary",
 	"mobileHeaderFg": "$text",
 	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
-- 
cgit v1.2.3-freya


From 0343de95b8843124adcbec1f1665369cdb185718 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 15:56:50 +0900
Subject: wip

---
 src/client/app/desktop/views/components/post-form.vue | 14 ++++----------
 src/client/theme/dark.json                            |  3 +++
 src/client/theme/light.json                           |  3 +++
 3 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 5dd40c9ba5..b2a6fed8e8 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -434,7 +434,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-post-form
 	display block
 	padding 16px
 	background var(--desktopPostFormBg)
@@ -677,7 +677,7 @@ root(isDark)
 		width 40px
 		height 40px
 		font-size 1em
-		color isDark ? var(--primary) : var(--primaryAlpha05)
+		color var(--desktopPostFormTransparentButtonFg)
 		background transparent
 		outline none
 		border solid 1px transparent
@@ -685,11 +685,11 @@ root(isDark)
 
 		&:hover
 			background transparent
-			border-color isDark ? var(--primaryAlpha05) : var(--primaryAlpha03)
+			border-color var(--primaryAlpha03)
 
 		&:active
 			color var(--primaryAlpha06)
-			background isDark ? transparent : linear-gradient(to bottom, var(--primaryLighten80) 0%, var(--primaryLighten90) 100%)
+			background linear-gradient(to bottom, var(--desktopPostFormTransparentButtonActiveGradientStart) 0%, var(--desktopPostFormTransparentButtonActiveGradientEnd) 100%)
 			border-color var(--primaryAlpha05)
 			box-shadow 0 2px 4px rgba(#000, 0.15) inset
 
@@ -714,10 +714,4 @@ root(isDark)
 		border dashed 2px var(--primaryAlpha05)
 		pointer-events none
 
-.mk-post-form[data-darkmode]
-	root(true)
-
-.mk-post-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 97ec96827a..ee5e1fb42c 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -132,6 +132,9 @@
 	"desktopPostFormBg": "@face",
 	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
 	"desktopPostFormTextareaFg": "#fff",
+	"desktopPostFormTransparentButtonFg": "$primary",
+	"desktopPostFormTransparentButtonActiveGradientStart": ":darken<8<$secondary",
+	"desktopPostFormTransparentButtonActiveGradientEnd": ":darken<3<$secondary",
 	"desktopRenoteFormFooter": ":lighten<5<$secondary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
 	"desktopTimelineSrc": "@faceTextButton",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 52822bc5fe..4cfba2c1f6 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -132,6 +132,9 @@
 	"desktopPostFormBg": ":lighten<33<$primary",
 	"desktopPostFormTextareaBg": "#fff",
 	"desktopPostFormTextareaFg": "#333",
+	"desktopPostFormTransparentButtonFg": ":alpha<0.5<$primary",
+	"desktopPostFormTransparentButtonActiveGradientStart": ":lighten<30<$primary",
+	"desktopPostFormTransparentButtonActiveGradientEnd": ":lighten<33<$primary",
 	"desktopRenoteFormFooter": ":lighten<33<$primary",
 	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
 	"desktopTimelineSrc": "#6f7477",
-- 
cgit v1.2.3-freya


From 99a2c5b3fa552f2abe449cb3f5b3d40270be5478 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 15:58:23 +0900
Subject: wip

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index a07af02ea6..bdaf2ddf47 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -247,9 +247,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-home
 	display block
 
 	&[data-customize]
@@ -279,7 +277,7 @@ root(isDark)
 		left 0
 		width 100%
 		height 48px
-		color isDark ? #fff : #000
+		color var(--text)
 		background var(--desktopHeaderBg)
 		box-shadow 0 1px 1px rgba(#000, 0.075)
 
@@ -320,7 +318,7 @@ root(isDark)
 						line-height 48px
 
 				&.trash
-					border-left solid 1px isDark ? #1c2023 : #ddd
+					border-left solid 1px var(--faceDivider)
 
 					> div
 						width 100%
@@ -395,10 +393,4 @@ root(isDark)
 				max-width 700px
 				margin 0 auto
 
-.mk-home[data-darkmode]
-	root(true)
-
-.mk-home:not([data-darkmode])
-	root(false)
-
 </style>
-- 
cgit v1.2.3-freya


From 671c7cf06b4f7f6248f9a961f79af1cc78a7b598 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 16:08:09 +0900
Subject: wip

---
 .../app/desktop/views/components/follow-button.vue | 33 ++++++++--------------
 1 file changed, 11 insertions(+), 22 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 014b536f59..45e63ad928 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -101,9 +101,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-follow-button
 	display block
 	cursor pointer
 	padding 0
@@ -130,33 +128,30 @@ root(isDark)
 			border-radius 8px
 
 	&:not(.active)
-		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
+		color var(--primary)
+		border solid 1px var(--primary)
 
 		&:hover
-			background isDark ? linear-gradient(to bottom, #2c2f3c 0%, #22262f 100%) : linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-			border-color isDark ? #151a1d : #dcdcdc
+			background var(--primaryAlpha03)
 
 		&:active
-			background isDark ? #22262f : #ececec
-			border-color isDark ? #151a1d : #dcdcdc
+			background var(--primaryAlpha05)
 
 	&.active
 		color var(--primaryForeground)
-		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-		border solid 1px var(--primaryLighten15)
+		background var(--primary)
+		border solid 1px var(--primary)
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-			border-color var(--primary)
+			background var(--primaryLighten5)
+			border-color var(--primaryLighten5)
 
 		&:active:not(:disabled)
-			background var(--primary)
-			border-color var(--primary)
+			background var(--primaryDarken5)
+			border-color var(--primaryDarken5)
 
 	&.wait
 		cursor wait !important
@@ -167,10 +162,4 @@ root(isDark)
 		height 38px
 		line-height 38px
 
-.mk-follow-button[data-darkmode]
-	root(true)
-
-.mk-follow-button:not([data-darkmode])
-	root(false)
-
 </style>
-- 
cgit v1.2.3-freya


From e0d3fd17ce5df8ac7e2adc5c4434cd8b050e5a86 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 16:13:47 +0900
Subject: wio

---
 src/client/app/desktop/views/components/drive.vue | 15 +++------------
 src/client/theme/dark.json                        |  1 +
 src/client/theme/light.json                       |  1 +
 3 files changed, 5 insertions(+), 12 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index a1748963aa..f9b7eea64e 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -585,17 +585,14 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.mk-drive
 	> nav
 		display block
 		z-index 2
 		width 100%
 		overflow auto
 		font-size 0.9em
-		color isDark ? #d2d9dc : #555
+		color var(--text)
 		background var(--face)
 		box-shadow 0 1px 0 rgba(#000, 0.05)
 
@@ -674,7 +671,7 @@ root(isDark)
 		padding 8px
 		height calc(100% - 38px)
 		overflow auto
-		background isDark ? #191b22 : #fff
+		background var(--desktopDriveBg)
 
 		&, *
 			user-select none
@@ -780,10 +777,4 @@ root(isDark)
 	> input
 		display none
 
-.mk-drive[data-darkmode]
-	root(true)
-
-.mk-drive:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index ee5e1fb42c..151001350d 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -140,6 +140,7 @@
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
+	"desktopDriveBg": "@bg",
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4cfba2c1f6..0f26f8b165 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -140,6 +140,7 @@
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
+	"desktopDriveBg": "#fff",
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
-- 
cgit v1.2.3-freya


From 3f4de3b1cc9b33f741c28aa7c3f92ffdb5fbcd17 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 17:49:37 +0900
Subject: wip

---
 .../app/desktop/views/components/drive.folder.vue    | 20 ++++++--------------
 src/client/theme/dark.json                           |  4 ++++
 src/client/theme/light.json                          |  4 ++++
 3 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/drive.folder.vue b/src/client/app/desktop/views/components/drive.folder.vue
index cb49215cbb..cfc2b64ff4 100644
--- a/src/client/app/desktop/views/components/drive.folder.vue
+++ b/src/client/app/desktop/views/components/drive.folder.vue
@@ -214,12 +214,10 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ynntpczxvnusfwdyxsfuhvcmuypqopdd
 	padding 8px
 	height 64px
-	background isDark ? var(--primaryAlpha02) : var(--primaryLighten95)
+	background var(--desktopDriveFolderBg)
 	border-radius 4px
 
 	&, *
@@ -229,10 +227,10 @@ root(isDark)
 		pointer-events none
 
 	&:hover
-		//background isDark ? rgba(var(--primaryLighten10), 0.2) : var(--primaryLighten90)
+		background var(--desktopDriveFolderHoverBg)
 
 	&:active
-		//background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten85)
+		background var(--desktopDriveFolderActiveBg)
 
 	&[data-is-contextmenu-showing]
 	&[data-draghover]
@@ -248,22 +246,16 @@ root(isDark)
 			border-radius 4px
 
 	&[data-draghover]
-		//background isDark ? rgba(var(--primaryDarken10), 0.2) : var(--primaryLighten90)
+		background var(--desktopDriveFolderActiveBg)
 
 	> .name
 		margin 0
 		font-size 0.9em
-		color isDark ? #fff : var(--primaryDarken30)
+		color var(--desktopDriveFolderFg)
 
 		> [data-fa]
 			margin-right 4px
 			margin-left 2px
 			text-align left
 
-.ynntpczxvnusfwdyxsfuhvcmuypqopdd[data-darkmode]
-	root(true)
-
-.ynntpczxvnusfwdyxsfuhvcmuypqopdd:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 151001350d..29d4fc2e5d 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -141,6 +141,10 @@
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
 	"desktopDriveBg": "@bg",
+	"desktopDriveFolderBg": ":alpha<0.2<$primary",
+	"desktopDriveFolderHoverBg": ":alpha<0.3<$primary",
+	"desktopDriveFolderActiveBg": ":alpha<0.3<:darken<10<$primary",
+	"desktopDriveFolderFg": "#fff",
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":lighten<10<$text",
 
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 0f26f8b165..e4116480e2 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -141,6 +141,10 @@
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
 	"desktopDriveBg": "#fff",
+	"desktopDriveFolderBg": ":lighten<31<$primary",
+	"desktopDriveFolderHoverBg": ":lighten<27<$primary",
+	"desktopDriveFolderActiveBg": ":lighten<25<$primary",
+	"desktopDriveFolderFg": ":darken<10<$primary",
 	"desktopSettingsNavItem": ":alpha<0.8<$text",
 	"desktopSettingsNavItemHover": ":darken<10<$text",
 
-- 
cgit v1.2.3-freya


From 8e3dd75c8577633acbe2dfefd41119e3991de8a5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 19:59:19 +0900
Subject: wip

---
 .../components/games/reversi/reversi.game.vue      | 22 ++----
 .../components/games/reversi/reversi.index.vue     | 34 ++++------
 .../components/games/reversi/reversi.room.vue      | 37 +++++-----
 .../views/components/games/reversi/reversi.vue     | 14 +---
 .../views/components/messaging-room.form.vue       | 12 +---
 src/client/app/common/views/components/poll.vue    | 17 ++---
 .../app/common/views/components/tag-cloud.vue      |  8 +--
 src/client/app/common/views/components/trends.vue  | 15 ++---
 .../app/common/views/components/ui/button.vue      | 14 ++--
 .../app/common/views/components/ui/form/button.vue | 20 ++----
 .../app/common/views/components/ui/form/radio.vue  | 12 +---
 .../app/common/views/components/ui/input.vue       | 16 ++---
 .../app/common/views/components/ui/radio.vue       | 10 +--
 .../app/common/views/components/ui/select.vue      | 16 ++---
 src/client/app/common/views/pages/follow.vue       | 13 +---
 .../app/common/views/widgets/analog-clock.vue      | 10 +--
 src/client/app/common/views/widgets/calendar.vue   | 15 ++---
 src/client/app/common/views/widgets/donation.vue   | 78 ++++++++--------------
 src/client/app/common/views/widgets/memo.vue       | 14 +---
 src/client/app/common/views/widgets/server.cpu.vue | 10 +--
 .../app/common/views/widgets/server.disk.vue       | 10 +--
 .../app/common/views/widgets/server.memory.vue     | 10 +--
 src/client/app/common/views/widgets/server.pie.vue | 10 +--
 .../desktop/views/components/context-menu.menu.vue | 16 ++---
 .../app/desktop/views/components/context-menu.vue  | 10 +--
 .../app/desktop/views/components/drive.file.vue    | 12 +---
 .../app/desktop/views/components/note-preview.vue  |  8 +--
 .../desktop/views/components/notes.note.sub.vue    |  8 +--
 .../desktop/views/components/post-form-window.vue  | 11 +--
 .../app/desktop/views/components/settings.tags.vue |  9 +--
 .../app/desktop/views/components/ui.header.vue     |  8 +--
 .../desktop/views/components/widget-container.vue  |  8 +--
 src/client/app/desktop/views/components/window.vue | 19 +-----
 .../desktop/views/pages/admin/admin.cpu-memory.vue |  8 +--
 .../app/desktop/views/pages/deck/deck.column.vue   |  5 +-
 .../app/desktop/views/pages/deck/deck.note.sub.vue |  8 +--
 .../desktop/views/pages/deck/deck.notification.vue |  8 +--
 .../views/pages/deck/deck.notifications.vue        |  9 +--
 .../views/pages/user/user.followers-you-know.vue   |  8 +--
 src/client/app/desktop/views/widgets/trends.vue    |  8 +--
 .../app/mobile/views/components/note-preview.vue   |  8 +--
 src/client/app/mobile/views/components/notes.vue   | 10 +--
 src/client/app/mobile/views/pages/welcome.vue      |  9 +--
 src/client/theme/dark.json                         | 30 ++++++++-
 src/client/theme/light.json                        | 30 ++++++++-
 45 files changed, 203 insertions(+), 464 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/games/reversi/reversi.game.vue b/src/client/app/common/views/components/games/reversi/reversi.game.vue
index bc230496a6..751abe2ecd 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.game.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.game.vue
@@ -304,9 +304,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.xqnhankfuuilcwvhgsopeqncafzsquya
 	text-align center
 
 	> .go-index
@@ -319,7 +317,7 @@ root(isDark)
 
 	> header
 		padding 8px
-		border-bottom dashed 1px isDark ? #4c5761 : #c4cdd4
+		border-bottom dashed 1px var(--reversiGameHeaderLine)
 
 		a
 			color inherit
@@ -386,16 +384,16 @@ root(isDark)
 						user-select none
 
 					&.empty
-						border solid 2px isDark ? #51595f : #eee
+						border solid 2px var(--reversiGameEmptyCell)
 
 					&.empty.can
-						background isDark ? #51595f : #eee
+						background var(--reversiGameEmptyCell)
 
 					&.empty.myTurn
-						border-color isDark ? #6a767f : #ddd
+						border-color var(--reversiGameEmptyCellMyTurn)
 
 						&.can
-							background isDark ? #51595f : #eee
+							background var(--reversiGameEmptyCellCanPut)
 							cursor pointer
 
 							&:hover
@@ -409,7 +407,7 @@ root(isDark)
 						box-shadow 0 0 0 4px var(--primaryAlpha07)
 
 					&.isEnded
-						border-color isDark ? #6a767f : #ddd
+						border-color var(--reversiGameEmptyCellMyTurn)
 
 					&.none
 						border-color transparent !important
@@ -458,10 +456,4 @@ root(isDark)
 			margin 0 8px
 			min-width 70px
 
-.xqnhankfuuilcwvhgsopeqncafzsquya[data-darkmode]
-	root(true)
-
-.xqnhankfuuilcwvhgsopeqncafzsquya:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index 44a1262636..3725aa6cb4 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -138,9 +138,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx
 	> h1
 		margin 0
 		padding 24px
@@ -148,7 +146,7 @@ root(isDark)
 		text-align center
 		font-weight normal
 		color #fff
-		background linear-gradient(to bottom, isDark ? #45730e : #8bca3e, isDark ? #464300 : #d6cf31)
+		background linear-gradient(to bottom, var(--reversiBannerGradientStart), var(--reversiBannerGradientEnd))
 
 		& + p
 			margin 0
@@ -156,7 +154,7 @@ root(isDark)
 			margin-bottom 12px
 			text-align center
 			font-size 14px
-			border-bottom solid 1px isDark ? #535f65 : #d3d9dc
+			border-bottom solid 1px var(--faceDivider)
 
 	> .play
 		margin 0 auto
@@ -171,14 +169,14 @@ root(isDark)
 				padding 16px
 				font-size 14px
 				text-align left
-				background isDark ? #282c37 : #f5f5f5
+				background var(--reversiDescBg)
 				border-radius 8px
 
 	> section
 		margin 0 auto
 		padding 0 16px 16px 16px
 		max-width 500px
-		border-top solid 1px isDark ? #535f65 : #d3d9dc
+		border-top solid 1px var(--faceDivider)
 
 		> h2
 			margin 0
@@ -189,9 +187,9 @@ root(isDark)
 	.invitation
 		margin 8px 0
 		padding 8px
-		color isDark ? #fff : #677f84
+		color var(--text)
 		background var(--face)
-		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
 		border-radius 6px
 		cursor pointer
 
@@ -203,10 +201,10 @@ root(isDark)
 			border-color var(--primary)
 
 		&:hover
-			background isDark ? #313543 : #f5f5f5
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 		&:active
-			background isDark ? #1e222b : #eee
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 		> .avatar
 			width 32px
@@ -221,9 +219,9 @@ root(isDark)
 		display block
 		margin 8px 0
 		padding 8px
-		color isDark ? #fff : #677f84
+		color var(--text)
 		background var(--face)
-		box-shadow 0 2px 16px rgba(#000, isDark ? 0.7 : 0.15)
+		box-shadow 0 2px 16px var(--reversiListItemShadow)
 		border-radius 6px
 		cursor pointer
 
@@ -232,10 +230,10 @@ root(isDark)
 			user-select none
 
 		&:hover
-			background isDark ? #313543 : #f5f5f5
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)
 
 		&:active
-			background isDark ? #1e222b : #eee
+			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.1)
 
 		> .avatar
 			width 32px
@@ -246,10 +244,4 @@ root(isDark)
 			margin 0 8px
 			line-height 32px
 
-.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx[data-darkmode]
-	root(true)
-
-.phgnkghfpyvkrvwiajkiuoxyrdaqpzcx:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index b407046ba9..236141ee28 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -252,11 +252,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.urbixznjwwuukfsckrwzwsqzsxornqij
 	text-align center
-	background isDark ? #191b22 : #f9f9f9
+	background var(--bg)
 
 	> header
 		padding 8px
@@ -274,9 +272,9 @@ root(isDark)
 						width 100%
 						padding 12px 14px
 						background var(--face)
-						border 1px solid isDark ? #6a707d : #dcdfe6
+						border 1px solid var(--reversiMapSelectBorder)
 						border-radius 4px
-						color isDark ? #fff : #606266
+						color var(--text)
 						cursor pointer
 						transition border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)
 						-webkit-appearance none
@@ -284,7 +282,7 @@ root(isDark)
 						appearance none
 
 						&:hover
-							border-color isDark ? #a7aebd : #c0c4cc
+							border-color var(--reversiMapSelectHoverBorder)
 
 						&:focus
 						&:active
@@ -294,7 +292,8 @@ root(isDark)
 					> .random
 						padding 32px 0
 						font-size 64px
-						color isDark ? #4e5961 : #d8d8d8
+						color var(--text)
+						opacity 0.7
 
 					> .board
 						display grid
@@ -302,11 +301,11 @@ root(isDark)
 						width 300px
 						height 300px
 						margin 0 auto
-						color isDark ? #fff : #444
+						color var(--text)
 
 						> div
 							background transparent
-							border solid 2px isDark ? #6a767f : #ddd
+							border solid 2px var(--faceDivider)
 							border-radius 6px
 							overflow hidden
 							cursor pointer
@@ -332,31 +331,25 @@ root(isDark)
 			max-width 400px
 			border-radius 4px
 			background var(--face)
-			color isDark ? #fff : #303133
-			box-shadow 0 2px 12px 0 rgba(#000, isDark ? 0.7 : 0.1)
+			color var(--text)
+			box-shadow 0 2px 12px 0 var(--reversiRoomFormShadow)
 
 			> header
 				padding 18px 20px
-				border-bottom 1px solid isDark ? #1c2023 : #ebeef5
+				border-bottom 1px solid var(--faceDivider)
 
 			> div
 				padding 20px
-				color isDark ? #fff : #606266
+				color var(--text)
 
 	> footer
 		position sticky
 		bottom 0
 		padding 16px
-		background rgba(isDark ? #191b22 : #fff, 0.9)
-		border-top solid 1px isDark ? #606266 : #c4cdd4
+		background var(--reversiRoomFooterBg)
+		border-top solid 1px var(--faceDivider)
 
 		> .status
 			margin 0 0 16px 0
 
-.urbixznjwwuukfsckrwzwsqzsxornqij[data-darkmode]
-	root(true)
-
-.urbixznjwwuukfsckrwzwsqzsxornqij:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index 75d7d574c1..6eb9511ce9 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -156,11 +156,9 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-	color isDark ? #fff : #677f84
-	background isDark ? #191b22 : #fff
+.vchtoekanapleubgzioubdtmlkribzfd
+	color var(--text)
+	background var(--bg)
 
 	> .matching
 		> h1
@@ -177,10 +175,4 @@ root(isDark)
 			text-align center
 			border-top dashed 1px #c4cdd4
 
-.vchtoekanapleubgzioubdtmlkribzfd[data-darkmode]
-	root(true)
-
-.vchtoekanapleubgzioubdtmlkribzfd:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/messaging-room.form.vue b/src/client/app/common/views/components/messaging-room.form.vue
index 8e62587c20..c93fd7f78d 100644
--- a/src/client/app/common/views/components/messaging-room.form.vue
+++ b/src/client/app/common/views/components/messaging-room.form.vue
@@ -195,9 +195,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-messaging-form
 	> textarea
 		cursor auto
 		display block
@@ -212,7 +210,7 @@ root(isDark)
 		color var(--inputText)
 		outline none
 		border none
-		border-top solid 1px isDark ? #4b5056 : #eee
+		border-top solid 1px var(--faceDivider)
 		border-radius 0
 		box-shadow none
 		background transparent
@@ -302,10 +300,4 @@ root(isDark)
 	input[type=file]
 		display none
 
-.mk-messaging-form[data-darkmode]
-	root(true)
-
-.mk-messaging-form:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/poll.vue b/src/client/app/common/views/components/poll.vue
index 0e60932796..0dc2622f9b 100644
--- a/src/client/app/common/views/components/poll.vue
+++ b/src/client/app/common/views/components/poll.vue
@@ -67,10 +67,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
-
+.mk-poll
 	> ul
 		display block
 		margin 0
@@ -82,8 +79,8 @@ root(isDark)
 			margin 4px 0
 			padding 4px 8px
 			width 100%
-			color isDark ? #fff : #000
-			border solid 1px isDark ? #5e636f : #eee
+			color var(--pollChoiceText)
+			border solid 1px var(--pollChoiceBorder)
 			border-radius 4px
 			overflow hidden
 			cursor pointer
@@ -110,7 +107,7 @@ root(isDark)
 					margin-left 4px
 
 	> p
-		color isDark ? #a3aebf : #000
+		color var(--text)
 
 		a
 			color inherit
@@ -125,10 +122,4 @@ root(isDark)
 			&:active
 				background transparent
 
-.mk-poll[data-darkmode]
-	root(true)
-
-.mk-poll:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/tag-cloud.vue b/src/client/app/common/views/components/tag-cloud.vue
index 5f2cc5276a..5cc828082f 100644
--- a/src/client/app/common/views/components/tag-cloud.vue
+++ b/src/client/app/common/views/components/tag-cloud.vue
@@ -63,7 +63,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.jtivnzhfwquxpsfidertopbmwmchmnmo
 	height 100%
 	width 100%
 
@@ -81,10 +81,4 @@ root(isDark)
 		height 100%
 		width 100%
 
-.jtivnzhfwquxpsfidertopbmwmchmnmo[data-darkmode]
-	root(true)
-
-.jtivnzhfwquxpsfidertopbmwmchmnmo:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
index 0042dbe853..3d36d7449c 100644
--- a/src/client/app/common/views/components/trends.vue
+++ b/src/client/app/common/views/components/trends.vue
@@ -49,13 +49,14 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc
 	> .fetching
 	> .empty
 		margin 0
 		padding 16px
 		text-align center
-		color #aaa
+		color var(--text)
+		opacity 0.7
 
 		> [data-fa]
 			margin-right 4px
@@ -70,13 +71,13 @@ root(isDark)
 			padding 14px 16px
 
 			&:not(:last-child)
-				border-bottom solid 1px isDark ? #393f4f : #eee
+				border-bottom solid 1px var(--faceDivider)
 
 			> .tag
 				flex 1
 				overflow hidden
 				font-size 14px
-				color isDark ? #9baec8 : #65727b
+				color var(--text)
 
 				> a
 					display block
@@ -94,10 +95,4 @@ root(isDark)
 			> .chart
 				height 30px
 
-.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
-	root(true)
-
-.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index c411f0f5c9..4934a1bdfa 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -32,7 +32,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark, fill)
+root(fill)
 	> button
 		display block
 		width 100%
@@ -65,16 +65,10 @@ root(isDark, fill)
 			&:active
 				background var(--primaryAlpha03)
 
-.ui-button[data-darkmode]
+.ui-button
 	&.fill
-		root(true, true)
+		root(true)
 	&:not(.fill)
-		root(true, false)
-
-.ui-button:not([data-darkmode])
-	&.fill
-		root(false, true)
-	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/ui/form/button.vue b/src/client/app/common/views/components/ui/form/button.vue
index bccf36e52f..3fd7b47629 100644
--- a/src/client/app/common/views/components/ui/form/button.vue
+++ b/src/client/app/common/views/components/ui/form/button.vue
@@ -25,9 +25,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
 	display inline-block
 
 	& + .nvemkhtwcnnpkdrwfcbzuwhfulejhmzg
@@ -38,11 +36,11 @@ root(isDark)
 		margin 0
 		padding 12px 20px
 		font-size 14px
-		border 1px solid isDark ? #6d727d : #dcdfe6
+		border 1px solid var(--formButtonBorder)
 		border-radius 4px
 		outline none
 		box-shadow none
-		color isDark ? #fff : #606266
+		color var(--text)
 		transition 0.1s
 
 		*
@@ -51,12 +49,12 @@ root(isDark)
 		&:hover
 		&:focus
 			color var(--primary)
-			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.2 : 0.12)
-			//border-color rgba(var(--primary-r), var(--primary-g), var(--primary-b), isDark ? 0.5 : 0.3)
+			background var(--formButtonHoverBg)
+			border-color var(--formButtonHoverBorder)
 
 		&:active
 			color var(--primaryDarken20)
-			//background rgba(var(--primary-r), var(--primary-g), var(--primary-b), 0.12)
+			background var(--formButtonActiveBg)
 			border-color var(--primary)
 			transition all 0s
 
@@ -80,10 +78,4 @@ root(isDark)
 		> button
 			border-radius 64px
 
-.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg[data-darkmode]
-	root(true)
-
-.nvemkhtwcnnpkdrwfcbzuwhfulejhmzg:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/form/radio.vue b/src/client/app/common/views/components/ui/form/radio.vue
index 5728a8171b..396b2997e5 100644
--- a/src/client/app/common/views/components/ui/form/radio.vue
+++ b/src/client/app/common/views/components/ui/form/radio.vue
@@ -49,9 +49,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.uywduthvrdnlpsvsjkqigicixgyfctto
 	display inline-flex
 	margin 0 16px 0 0
 	cursor pointer
@@ -93,7 +91,7 @@ root(isDark)
 		width 20px
 		height 20px
 		background none
-		border solid 2px isDark ? rgba(#fff, 0.6) : rgba(#000, 0.4)
+		border solid 2px var(--radioBorder)
 		border-radius 100%
 		transition inherit
 
@@ -117,10 +115,4 @@ root(isDark)
 		line-height 20px
 		cursor pointer
 
-.uywduthvrdnlpsvsjkqigicixgyfctto[data-darkmode]
-	root(true)
-
-.uywduthvrdnlpsvsjkqigicixgyfctto:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index d7b83d81cd..d7e72409f0 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -155,9 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 32px 0
 
 	> .icon
@@ -335,16 +333,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
 
-.ui-input[data-darkmode]
-	&.fill
-		root(true, true)
-	&:not(.fill)
-		root(true, false)
-
-.ui-input:not([data-darkmode])
+.ui-input
 	&.fill
-		root(false, true)
+		root(true)
 	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/components/ui/radio.vue b/src/client/app/common/views/components/ui/radio.vue
index 3a4407abc0..868a339aa4 100644
--- a/src/client/app/common/views/components/ui/radio.vue
+++ b/src/client/app/common/views/components/ui/radio.vue
@@ -51,9 +51,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.ui-radio
 	display inline-block
 	margin 0 32px 0 0
 	cursor pointer
@@ -111,10 +109,4 @@ root(isDark)
 		line-height 20px
 		cursor pointer
 
-.ui-radio[data-darkmode]
-	root(true)
-
-.ui-radio:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index bdb730fea9..8c1b8c0269 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -70,9 +70,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark, fill)
+root(fill)
 	margin 32px 0
 
 	> .icon
@@ -200,16 +198,10 @@ root(isDark, fill)
 				left 0 !important
 				transform scale(0.75)
 
-.ui-select[data-darkmode]
-	&.fill
-		root(true, true)
-	&:not(.fill)
-		root(true, false)
-
-.ui-select:not([data-darkmode])
+.ui-select
 	&.fill
-		root(false, true)
+		root(true)
 	&:not(.fill)
-		root(false, false)
+		root(false)
 
 </style>
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index ef7ee111e2..cb4785f468 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -107,14 +107,12 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.syxhndwprovvuqhmyvveewmbqayniwkv
 	padding 32px
 	max-width 500px
 	margin 0 auto
 	text-align center
-	color isDark ? #9baec8 : #868c8c
+	color var(--text)
 
 	$bg = var(--face)
 
@@ -124,7 +122,6 @@ root(isDark)
 	> .signed-in-as
 		margin-bottom 16px
 		font-size 14px
-		color isDark ? #9baec8 : #9daab3
 
 	> main
 		margin-bottom 16px
@@ -204,10 +201,4 @@ root(isDark)
 		*
 			pointer-events none
 
-.syxhndwprovvuqhmyvveewmbqayniwkv[data-darkmode]
-	root(true)
-
-.syxhndwprovvuqhmyvveewmbqayniwkv:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/analog-clock.vue b/src/client/app/common/views/widgets/analog-clock.vue
index 1725c2f1af..cfcdd5a1b6 100644
--- a/src/client/app/common/views/widgets/analog-clock.vue
+++ b/src/client/app/common/views/widgets/analog-clock.vue
@@ -26,16 +26,8 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-analog-clock
 	.mkw-analog-clock--body
 		padding 8px
 
-.mkw-analog-clock[data-darkmode]
-	root(true)
-
-.mkw-analog-clock: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 238b493a61..308d73bad8 100644
--- a/src/client/app/common/views/widgets/calendar.vue
+++ b/src/client/app/common/views/widgets/calendar.vue
@@ -116,9 +116,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-calendar
 	&[data-special='on-new-years-day']
 		border-color #ef95a0
 
@@ -169,7 +167,8 @@ root(isDark)
 					margin 0 0 2px 0
 					font-size 12px
 					line-height 18px
-					color isDark ? #7a8692 : #888
+					color var(--text)
+					opacity 0.8
 
 					> b
 						margin-left 2px
@@ -177,7 +176,7 @@ root(isDark)
 				> .meter
 					width 100%
 					overflow hidden
-					background isDark ? #1c1f25 : #eee
+					background var(--materBg)
 					border-radius 8px
 
 					> .val
@@ -197,10 +196,4 @@ root(isDark)
 					> .meter > .val
 						background #41ddde
 
-.mkw-calendar[data-darkmode]
-	root(true)
-
-.mkw-calendar:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/donation.vue b/src/client/app/common/views/widgets/donation.vue
index a91aa8e749..b025b41e7d 100644
--- a/src/client/app/common/views/widgets/donation.vue
+++ b/src/client/app/common/views/widgets/donation.vue
@@ -1,13 +1,15 @@
 <template>
-<div class="mkw-donation" :data-mobile="platform == 'mobile'">
-	<article>
-		<h1>%fa:heart%%i18n:@title%</h1>
-		<p v-if="meta">
-			{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
-			<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
-			{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
-		</p>
-	</article>
+<div>
+	<mk-widget-container :show-header="false">
+		<article class="dolfvtibguprpxxhfndqaosjitixjohx">
+			<h1>%fa:heart%%i18n:@title%</h1>
+			<p v-if="meta">
+				{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
+				<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
+				{{ '%i18n:@text%'.substr('%i18n:@text%'.indexOf('}') + 1) }}
+			</p>
+		</article>
+	</mk-widget-container>
 </div>
 </template>
 
@@ -30,46 +32,22 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-	background var(--face)
-	border solid 1px isDark ? #c3831c : #ead8bb
-	border-radius 6px
-
-	> article
-		padding 20px
-
-		> h1
-			margin 0 0 5px 0
-			font-size 1em
-			color isDark ? #b2bac1 : #888
-
-			> [data-fa]
-				margin-right 0.25em
-
-		> p
-			display block
-			z-index 1
-			margin 0
-			font-size 0.8em
-			color isDark ? #a1a6ab : #999
-
-	&[data-mobile]
-		border none
-		background #ead8bb
-		border-radius 8px
-		box-shadow 0 0 0 1px rgba(#000, 0.2)
-
-		> article
-			> h1
-				color #7b8871
-
-			> p
-				color #777d71
-
-.mkw-donation[data-darkmode]
-	root(true)
-
-.mkw-donation:not([data-darkmode])
-	root(false)
+.dolfvtibguprpxxhfndqaosjitixjohx
+	padding 20px
+	background var(--donationBg)
+	color var(--donationFg)
+
+	> h1
+		margin 0 0 5px 0
+		font-size 1em
+
+		> [data-fa]
+			margin-right 0.25em
+
+	> p
+		display block
+		z-index 1
+		margin 0
+		font-size 0.8em
 
 </style>
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
index 42df683883..be8b18a4e9 100644
--- a/src/client/app/common/views/widgets/memo.vue
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -57,9 +57,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mkw-memo
 	.mkw-memo--body
 		padding-bottom 28px + 16px
 
@@ -69,10 +67,10 @@ root(isDark)
 			max-width 100%
 			min-width 100%
 			padding 16px
-			color isDark ? #fff : #222
+			color var(--inputText)
 			background var(--face)
 			border none
-			border-bottom solid 1px isDark ? #1c2023 : #eee
+			border-bottom solid 1px var(--faceDivider)
 			border-radius 0
 
 		> button
@@ -102,10 +100,4 @@ root(isDark)
 				opacity 0.7
 				cursor default
 
-.mkw-memo[data-darkmode]
-	root(true)
-
-.mkw-memo:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.cpu.vue b/src/client/app/common/views/widgets/server.cpu.vue
index b9748bdf7c..2034aee0eb 100644
--- a/src/client/app/common/views/widgets/server.cpu.vue
+++ b/src/client/app/common/views/widgets/server.cpu.vue
@@ -38,7 +38,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.cpu
 	> .pie
 		padding 10px
 		height 100px
@@ -52,7 +52,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -65,10 +65,4 @@ root(isDark)
 		display block
 		clear both
 
-.cpu[data-darkmode]
-	root(true)
-
-.cpu:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.disk.vue b/src/client/app/common/views/widgets/server.disk.vue
index 99ce624051..667576ab76 100644
--- a/src/client/app/common/views/widgets/server.disk.vue
+++ b/src/client/app/common/views/widgets/server.disk.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.disk
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -73,10 +73,4 @@ root(isDark)
 		display block
 		clear both
 
-.disk[data-darkmode]
-	root(true)
-
-.disk:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.memory.vue b/src/client/app/common/views/widgets/server.memory.vue
index 8a60621343..9e12884cf9 100644
--- a/src/client/app/common/views/widgets/server.memory.vue
+++ b/src/client/app/common/views/widgets/server.memory.vue
@@ -46,7 +46,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.memory
 	> .pie
 		padding 10px
 		height 100px
@@ -60,7 +60,7 @@ root(isDark)
 		> p
 			margin 0
 			font-size 12px
-			color isDark ? #a8b4bd : #505050
+			color var(--chartCaption)
 
 			&:first-child
 				font-weight bold
@@ -73,10 +73,4 @@ root(isDark)
 		display block
 		clear both
 
-.memory[data-darkmode]
-	root(true)
-
-.memory:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/common/views/widgets/server.pie.vue b/src/client/app/common/views/widgets/server.pie.vue
index d557c52ea5..ce342fd41b 100644
--- a/src/client/app/common/views/widgets/server.pie.vue
+++ b/src/client/app/common/views/widgets/server.pie.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+svg
 	display block
 	height 100%
 
@@ -56,12 +56,6 @@ root(isDark)
 
 	> text
 		font-size 0.15px
-		fill isDark ? rgba(#fff, 0.6) : rgba(#000, 0.6)
-
-svg[data-darkmode]
-	root(true)
-
-svg:not([data-darkmode])
-	root(false)
+		fill var(--chartCaption)
 
 </style>
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 b65a8e1dea..9e4541a752 100644
--- a/src/client/app/desktop/views/components/context-menu.menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.menu.vue
@@ -31,9 +31,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.menu
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -48,7 +46,7 @@ root(isDark)
 		&.divider
 			margin-top $padding
 			padding-top $padding
-			border-top solid 1px isDark ? #1c2023 : #eee
+			border-top solid 1px var(--faceDivider)
 
 		&.nest
 			> p
@@ -77,7 +75,7 @@ root(isDark)
 			margin 0
 			padding 0 32px 0 38px
 			line-height $item-height
-			color isDark ? #c8cece : #868C8C
+			color var(--text)
 			text-decoration none
 			cursor pointer
 
@@ -106,17 +104,11 @@ root(isDark)
 		left $width
 		margin-top -($padding)
 		width $width
-		background isDark ? #282c37 :#fff
+		background var(--popupBg)
 		border-radius 0 4px 4px 4px
 		box-shadow 2px 2px 8px rgba(#000, 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 170dcf55a1..b0a34866cd 100644
--- a/src/client/app/desktop/views/components/context-menu.vue
+++ b/src/client/app/desktop/views/components/context-menu.vue
@@ -71,7 +71,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.context-menu
 	$width = 240px
 	$item-height = 38px
 	$padding = 10px
@@ -82,15 +82,9 @@ root(isDark)
 	z-index 4096
 	width $width
 	font-size 0.8em
-	background var(--face)
+	background var(--popupBg)
 	border-radius 0 4px 4px 4px
 	box-shadow 2px 2px 8px rgba(#000, 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 225130baf7..d7e24cfe71 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -200,9 +200,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.gvfdktuvdgwhmztnuekzkswkjygptfcv
 	padding 8px 0 0 0
 	height 180px
 	border-radius 4px
@@ -337,16 +335,10 @@ root(isDark)
 		font-size 0.8em
 		text-align center
 		word-break break-all
-		color isDark ? #fff : #444
+		color var(--text)
 		overflow hidden
 
 		> .ext
 			opacity 0.5
 
-.gvfdktuvdgwhmztnuekzkswkjygptfcv[data-darkmode]
-	root(true)
-
-.gvfdktuvdgwhmztnuekzkswkjygptfcv: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 7e5a1db8d4..4c1c7e7b2d 100644
--- a/src/client/app/desktop/views/components/note-preview.vue
+++ b/src/client/app/desktop/views/components/note-preview.vue
@@ -47,7 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.qiziqtywpuaucsgarwajitwaakggnisj
 	display flex
 	font-size 0.9em
 
@@ -83,10 +83,4 @@ root(isDark)
 					padding 0
 					color var(--subNoteText)
 
-.qiziqtywpuaucsgarwajitwaakggnisj[data-darkmode]
-	root(true)
-
-.qiziqtywpuaucsgarwajitwaakggnisj: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 a0c4cc2fad..ee52670f8f 100644
--- a/src/client/app/desktop/views/components/notes.note.sub.vue
+++ b/src/client/app/desktop/views/components/notes.note.sub.vue
@@ -42,7 +42,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.tkfdzaxtkdeianobciwadajxzbddorql
 	display flex
 	margin 0
 	padding 16px 32px
@@ -88,10 +88,4 @@ root(isDark)
 						max-height 120px
 						font-size 80%
 
-.tkfdzaxtkdeianobciwadajxzbddorql[data-darkmode]
-	root(true)
-
-.tkfdzaxtkdeianobciwadajxzbddorql:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/post-form-window.vue b/src/client/app/desktop/views/components/post-form-window.vue
index 466d5e1fd8..a5d191f2f3 100644
--- a/src/client/app/desktop/views/components/post-form-window.vue
+++ b/src/client/app/desktop/views/components/post-form-window.vue
@@ -77,7 +77,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-post-form-window
 	.mk-post-form-window--header
 		.icon
 			margin-right 8px
@@ -94,15 +94,6 @@ root(isDark)
 
 	.mk-post-form-window--body
 		.notePreview
-			if isDark
-				margin 16px 22px 0 22px
-			else
 				margin 16px 22px
 
-.mk-post-form-window[data-darkmode]
-	root(true)
-
-.mk-post-form-window:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/components/settings.tags.vue b/src/client/app/desktop/views/components/settings.tags.vue
index a7234f7d87..dfc69a387e 100644
--- a/src/client/app/desktop/views/components/settings.tags.vue
+++ b/src/client/app/desktop/views/components/settings.tags.vue
@@ -47,8 +47,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-root(isDark)
+.vfcitkilproprqtbnpoertpsziierwzi
 	> .timeline
 		padding-bottom 16px
 		border-bottom solid 1px rgba(#000, 0.1)
@@ -56,10 +55,4 @@ root(isDark)
 	> .add
 		margin-top 16px
 
-.vfcitkilproprqtbnpoertpsziierwzi[data-darkmode]
-	root(true)
-
-.vfcitkilproprqtbnpoertpsziierwzi: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 5089232b06..1b96e06486 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -77,7 +77,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.header
 	position fixed
 	top 0
 	z-index 1000
@@ -151,10 +151,4 @@ root(isDark)
 						> .mk-ui-header-search
 							display none
 
-.header[data-darkmode]
-	root(true)
-
-.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 cfcb2785c5..a506357039 100644
--- a/src/client/app/desktop/views/components/widget-container.vue
+++ b/src/client/app/desktop/views/components/widget-container.vue
@@ -25,7 +25,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-widget-container
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -71,10 +71,4 @@ root(isDark)
 			&:active
 				color var(--faceTextButtonActive)
 
-.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 5547445537..a1893ffd6b 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -462,7 +462,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mk-window
 	display block
 
 	> .bg
@@ -490,10 +490,7 @@ root(isDark)
 		&:focus
 			&:not([data-is-modal])
 				> .body
-					if isDark
-						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 rgba(#000, 0.5)
-					else
-						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 6px 0 rgba(#000, 0.2)
+						box-shadow 0 0 0px 1px var(--primaryAlpha05), 0 2px 12px 0 var(--desktopWindowShadow)
 
 		> .handle
 			$size = 8px
@@ -561,11 +558,7 @@ root(isDark)
 			overflow hidden
 			background var(--face)
 			border-radius 6px
-
-			if isDark
-				box-shadow 0 2px 12px 0 rgba(#000, 0.5)
-			else
-				box-shadow 0 2px 6px 0 rgba(#000, 0.2)
+			box-shadow 0 2px 12px 0 rgba(#000, 0.5)
 
 			> header
 				$header-height = 40px
@@ -632,10 +625,4 @@ root(isDark)
 		> .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/desktop/views/pages/admin/admin.cpu-memory.vue b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
index ebaa11478d..63b24cea47 100644
--- a/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.cpu-memory.vue
@@ -111,7 +111,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.zyknedwtlthezamcjlolyusmipqmjgxz
 	> svg
 		display block
 		width 50%
@@ -135,10 +135,4 @@ root(isDark)
 		display block
 		clear both
 
-.zyknedwtlthezamcjlolyusmipqmjgxz[data-darkmode]
-	root(true)
-
-.zyknedwtlthezamcjlolyusmipqmjgxz:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index 1b939f2f58..c372ef490e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -305,9 +305,8 @@ export default Vue.extend({
 			background transparent
 			box-shadow none
 
-			if !isDark
-				> button
-					color #bbb
+			> button
+				color var(--text)
 
 	> header
 		display flex
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
index 0b6a13beaf..445bf7e365 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.sub.vue
@@ -29,7 +29,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.fnlfosztlhtptnongximhlbykxblytcq
 	display flex
 	padding 16px
 	font-size 10px
@@ -68,10 +68,4 @@ root(isDark)
 					max-height 120px
 					font-size 80%
 
-.fnlfosztlhtptnongximhlbykxblytcq[data-darkmode]
-	root(true)
-
-.fnlfosztlhtptnongximhlbykxblytcq:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
index b318579b3e..149bd10293 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notification.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -109,7 +109,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.dsfykdcjpuwfvpefwufddclpjhzktmpw
 	> .notification
 		padding 16px
 		font-size 13px
@@ -170,10 +170,4 @@ root(isDark)
 			> div > header i
 				color #888
 
-.dsfykdcjpuwfvpefwufddclpjhzktmpw[data-darkmode]
-	root(true)
-
-.dsfykdcjpuwfvpefwufddclpjhzktmpw:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index aa48571a5b..1417cc3ee8 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -155,8 +155,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
-
+.oxynyeqmfvracxnglgulyqfgqxnxmehl
 	.transition
 		.mk-notifications-enter
 		.mk-notifications-leave-to
@@ -221,10 +220,4 @@ root(isDark)
 		> [data-fa]
 			margin-right 4px
 
-.oxynyeqmfvracxnglgulyqfgqxnxmehl[data-darkmode]
-	root(true)
-
-.oxynyeqmfvracxnglgulyqfgqxnxmehl:not([data-darkmode])
-	root(false)
-
 </style>
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 b90d0a831e..cf05006c00 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
@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.vahgrswmbzfdlmomxnqftuueyvwaafth
 	background var(--face)
 	box-shadow var(--shadow)
 	border-radius var(--round)
@@ -77,10 +77,4 @@ root(isDark)
 		> i
 			margin-right 4px
 
-.vahgrswmbzfdlmomxnqftuueyvwaafth[data-darkmode]
-	root(true)
-
-.vahgrswmbzfdlmomxnqftuueyvwaafth:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/desktop/views/widgets/trends.vue b/src/client/app/desktop/views/widgets/trends.vue
index aeaab63ac4..a886796132 100644
--- a/src/client/app/desktop/views/widgets/trends.vue
+++ b/src/client/app/desktop/views/widgets/trends.vue
@@ -67,7 +67,7 @@ export default define({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.mkw-trends
 	.mkw-trends--body
 		> .note
 			padding 16px
@@ -98,10 +98,4 @@ root(isDark)
 			> [data-fa]
 				margin-right 4px
 
-.mkw-trends[data-darkmode]
-	root(true)
-
-.mkw-trends:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/note-preview.vue b/src/client/app/mobile/views/components/note-preview.vue
index 1c73779251..525f54998e 100644
--- a/src/client/app/mobile/views/components/note-preview.vue
+++ b/src/client/app/mobile/views/components/note-preview.vue
@@ -36,7 +36,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.yohlumlkhizgfkvvscwfcrcggkotpvry
 	display flex
 	margin 0
 	padding 0
@@ -100,10 +100,4 @@ root(isDark)
 					padding 0
 					color var(--subNoteText)
 
-.yohlumlkhizgfkvvscwfcrcggkotpvry[data-darkmode]
-	root(true)
-
-.yohlumlkhizgfkvvscwfcrcggkotpvry:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/components/notes.vue b/src/client/app/mobile/views/components/notes.vue
index 9153b1d551..8f0a1ef196 100644
--- a/src/client/app/mobile/views/components/notes.vue
+++ b/src/client/app/mobile/views/components/notes.vue
@@ -217,9 +217,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
-root(isDark)
+.mk-notes
 	overflow hidden
 	background var(--face)
 	border-radius 8px
@@ -293,10 +291,4 @@ root(isDark)
 			&:disabled
 				opacity 0.7
 
-.mk-notes[data-darkmode]
-	root(true)
-
-.mk-notes:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/app/mobile/views/pages/welcome.vue b/src/client/app/mobile/views/pages/welcome.vue
index 4e24f70ffc..32f74bfe3a 100644
--- a/src/client/app/mobile/views/pages/welcome.vue
+++ b/src/client/app/mobile/views/pages/welcome.vue
@@ -122,9 +122,8 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(isDark)
+.wgwfgvvimdjvhjfwxropcwksnzftjqes
 	text-align center
-	//background #fff
 
 	> .banner
 		position absolute
@@ -317,10 +316,4 @@ root(isDark)
 				margin 16px 0 0 0
 				opacity 0.7
 
-.wgwfgvvimdjvhjfwxropcwksnzftjqes[data-darkmode]
-	root(true)
-
-.wgwfgvvimdjvhjfwxropcwksnzftjqes:not([data-darkmode])
-	root(false)
-
 </style>
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 29d4fc2e5d..72aedbce99 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -62,6 +62,7 @@
 	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(255, 255, 255, 0.15)",
+	"radioBorder": "rgba(255, 255, 255, 0.6)",
 	"inputBorder": "rgba(255, 255, 255, 0.7)",
 	"inputLabel": "rgba(255, 255, 255, 0.7)",
 	"inputText": "#fff",
@@ -80,6 +81,9 @@
 
 	"pollEditorInputBg": "rgba(0, 0, 0, 0.25)",
 
+	"pollChoiceText": "#fff",
+	"pollChoiceBorder": "rgba(255, 255, 255, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
 	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
 	"urlPreviewTitle": "$text",
@@ -90,12 +94,17 @@
 	"calendarSaturdayOrSunday": "#ff6679",
 	"calendarDay": "#c5ced6",
 
+	"materBg": "rgba(0, 0, 0, 0.3)",
+
 	"chartCaption": ":alpha<0.6<$text",
 
 	"announcementsBg": "#253a50",
 	"announcementsTitle": "#539eff",
 	"announcementsText": "#fff",
 
+	"donationBg": "#5d5242",
+	"donationFg": "#e4dbce",
+
 	"googleSearchBg": "rgba(0, 0, 0, 0.2)",
 	"googleSearchFg": "#dee4e8",
 	"googleSearchBorder": "rgba(255, 255, 255, 0.2)",
@@ -119,6 +128,11 @@
 	"messagingRoomMessageBg": "$secondary",
 	"messagingRoomMessageFg": "#fff",
 
+	"formButtonBorder": "rgba(255, 255, 255, 0.1)",
+	"formButtonHoverBg": ":alpha<0.2<$primary",
+	"formButtonHoverBorder": ":alpha<0.5<$primary",
+	"formButtonActiveBg": ":alpha<0.12<$primary",
+
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#fff",
@@ -140,6 +154,7 @@
 	"desktopTimelineSrc": "@faceTextButton",
 	"desktopTimelineSrcHover": "@faceTextButtonHover",
 	"desktopWindowTitle": "@faceHeaderText",
+	"desktopWindowShadow": "rgba(0, 0, 0, 0.5)",
 	"desktopDriveBg": "@bg",
 	"desktopDriveFolderBg": ":alpha<0.2<$primary",
 	"desktopDriveFolderHoverBg": ":alpha<0.3<$primary",
@@ -169,5 +184,18 @@
 	"mobileSignedInAsBg": "#273c34",
 	"mobileSignedInAsFg": "#49ab63",
 	"mobileSignoutBg": "#652222",
-	"mobileSignoutFg": "#ff5f56"
+	"mobileSignoutFg": "#ff5f56",
+
+	"reversiBannerGradientStart": "#45730e",
+	"reversiBannerGradientEnd": "#464300",
+	"reversiDescBg": "rgba(255, 255, 255, 0.1)",
+	"reversiListItemShadow": "rgba(0, 0, 0, 0.7)",
+	"reversiMapSelectBorder": "rgba(255, 255, 255, 0.1)",
+	"reversiMapSelectHoverBorder": "rgba(255, 255, 255, 0.2)",
+	"reversiRoomFormShadow": "rgba(0, 0, 0, 0.7)",
+	"reversiRoomFooterBg": ":alpha<0.9<$secondary",
+	"reversiGameHeaderLine": ":alpha<0.5<$secondary",
+	"reversiGameEmptyCell": ":lighten<2<$secondary",
+	"reversiGameEmptyCellMyTurn": ":lighten<5<$secondary",
+	"reversiGameEmptyCellCanPut": ":lighten<4<$secondary"
 }
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index e4116480e2..4690054cbf 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -62,6 +62,7 @@
 	"dateDividerFg": ":alpha<0.7<$text",
 
 	"switchTrack": "rgba(0, 0, 0, 0.25)",
+	"radioBorder": "rgba(0, 0, 0, 0.4)",
 	"inputBorder": "rgba(0, 0, 0, 0.42)",
 	"inputLabel": "rgba(0, 0, 0, 0.54)",
 	"inputText": "#000",
@@ -80,6 +81,9 @@
 
 	"pollEditorInputBg": "#fff",
 
+	"pollChoiceText": "#000",
+	"pollChoiceBorder": "rgba(0, 0, 0, 0.1)",
+
 	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
 	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
 	"urlPreviewTitle": "$text",
@@ -90,12 +94,17 @@
 	"calendarSaturdayOrSunday": "#ef95a0",
 	"calendarDay": "#777",
 
+	"materBg": "rgba(0, 0, 0, 0.1)",
+
 	"chartCaption": ":alpha<0.6<$text",
 
 	"announcementsBg": "#f3f9ff",
 	"announcementsTitle": "#4078c0",
 	"announcementsText": "#57616f",
 
+	"donationBg": "#fbead4",
+	"donationFg": "#777d71",
+
 	"googleSearchBg": "#fff",
 	"googleSearchFg": "#55595c",
 	"googleSearchBorder": "rgba(0, 0, 0, 0.2)",
@@ -119,6 +128,11 @@
 	"messagingRoomMessageBg": "#eee",
 	"messagingRoomMessageFg": "#333",
 
+	"formButtonBorder": "rgba(0, 0, 0, 0.1)",
+	"formButtonHoverBg": ":alpha<0.12<$primary",
+	"formButtonHoverBorder": ":alpha<0.3<$primary",
+	"formButtonActiveBg": ":alpha<0.12<$primary",
+
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#7b8c88",
@@ -140,6 +154,7 @@
 	"desktopTimelineSrc": "#6f7477",
 	"desktopTimelineSrcHover": "#525a5f",
 	"desktopWindowTitle": "#666",
+	"desktopWindowShadow": "rgba(0, 0, 0, 0.2)",
 	"desktopDriveBg": "#fff",
 	"desktopDriveFolderBg": ":lighten<31<$primary",
 	"desktopDriveFolderHoverBg": ":lighten<27<$primary",
@@ -169,5 +184,18 @@
 	"mobileSignedInAsBg": "#fcfff5",
 	"mobileSignedInAsFg": "#2c662d",
 	"mobileSignoutBg": "#fff6f5",
-	"mobileSignoutFg": "#cc2727"
+	"mobileSignoutFg": "#cc2727",
+
+	"reversiBannerGradientStart": "#8bca3e",
+	"reversiBannerGradientEnd": "#d6cf31",
+	"reversiDescBg": "rgba(0, 0, 0, 0.1)",
+	"reversiListItemShadow": "rgba(0, 0, 0, 0.15)",
+	"reversiMapSelectBorder": "rgba(0, 0, 0, 0.1)",
+	"reversiMapSelectHoverBorder": "rgba(0, 0, 0, 0.2)",
+	"reversiRoomFormShadow": "rgba(0, 0, 0, 0.1)",
+	"reversiRoomFooterBg": ":alpha<0.9<$secondary",
+	"reversiGameHeaderLine": "#c4cdd4",
+	"reversiGameEmptyCell": "rgba(0, 0, 0, 0.06)",
+	"reversiGameEmptyCellMyTurn": "rgba(0, 0, 0, 0.12)",
+	"reversiGameEmptyCellCanPut": "rgba(0, 0, 0, 0.9)"
 }
-- 
cgit v1.2.3-freya


From ec652dd0ace7ccf57d4d32d8855192748cbbb0b3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 20:03:14 +0900
Subject: wip

---
 src/client/app/desktop/assets/header-icon.dark.svg | 150 ---------------------
 .../app/desktop/assets/header-icon.light.svg       | 150 ---------------------
 src/client/app/desktop/assets/header-icon.svg      | 150 +++++++++++++++++++++
 .../app/desktop/views/components/ui.header.vue     |  11 +-
 src/client/theme/dark.json                         |   1 -
 src/client/theme/light.json                        |   1 -
 6 files changed, 156 insertions(+), 307 deletions(-)
 delete mode 100644 src/client/app/desktop/assets/header-icon.dark.svg
 delete mode 100644 src/client/app/desktop/assets/header-icon.light.svg
 create mode 100644 src/client/app/desktop/assets/header-icon.svg

(limited to 'src/client')

diff --git a/src/client/app/desktop/assets/header-icon.dark.svg b/src/client/app/desktop/assets/header-icon.dark.svg
deleted file mode 100644
index fa42856fa5..0000000000
--- a/src/client/app/desktop/assets/header-icon.dark.svg
+++ /dev/null
@@ -1,150 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="512"
-   height="512"
-   viewBox="0 0 135.46667 135.46667"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.1 r15371"
-   sodipodi:docname="header-icon.dark.svg"
-   inkscape:export-filename="C:\Users\syuilo\projects\misskey\assets\favicon\32.png"
-   inkscape:export-xdpi="6"
-   inkscape:export-ydpi="6">
-  <defs
-     id="defs2">
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5115"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5111"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5104"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="114.309"
-     inkscape:cy="251.50613"
-     inkscape:document-units="px"
-     inkscape:current-layer="g4502"
-     showgrid="true"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="false"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-center="true"
-     inkscape:snap-page="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1027"
-     inkscape:window-x="-8"
-     inkscape:window-y="1072"
-     inkscape:window-maximized="1"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-midpoints="true"
-     inkscape:object-paths="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     objecttolerance="1"
-     guidetolerance="1"
-     inkscape:snap-nodes="false"
-     inkscape:snap-others="false">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4504"
-       spacingx="4.2333334"
-       spacingy="4.2333334"
-       empcolor="#ff3fff"
-       empopacity="0.25098039"
-       empspacing="4" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="レイヤー 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-30.809093,-111.78601)">
-    <g
-       id="g4502"
-       transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
-      <g
-         style="fill:#ffffff;fill-opacity:1"
-         transform="translate(-1.3333333e-6,-1.3439941e-6)"
-         id="g5125">
-        <g
-           transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
-           id="text4489"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-           aria-label="Mi">
-          <path
-             sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
-             inkscape:connector-curvature="0"
-             id="path5210"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
-             d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
-          <path
-             inkscape:connector-curvature="0"
-             id="path5212"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#ffffff;fill-opacity:1;stroke-width:0.28950602px"
-             d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/src/client/app/desktop/assets/header-icon.light.svg b/src/client/app/desktop/assets/header-icon.light.svg
deleted file mode 100644
index 61e2026243..0000000000
--- a/src/client/app/desktop/assets/header-icon.light.svg
+++ /dev/null
@@ -1,150 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="512"
-   height="512"
-   viewBox="0 0 135.46667 135.46667"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.1 r15371"
-   sodipodi:docname="header-icon.light.svg"
-   inkscape:export-filename="C:\Users\syuilo\projects\misskey\assets\favicon\32.png"
-   inkscape:export-xdpi="6"
-   inkscape:export-ydpi="6">
-  <defs
-     id="defs2">
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5115"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5111"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-    <inkscape:path-effect
-       effect="simplify"
-       id="path-effect5104"
-       is_visible="true"
-       steps="1"
-       threshold="0.000408163"
-       smooth_angles="360"
-       helper_size="0"
-       simplify_individual_paths="false"
-       simplify_just_coalesce="false"
-       simplifyindividualpaths="false"
-       simplifyJustCoalesce="false" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.4142136"
-     inkscape:cx="114.309"
-     inkscape:cy="251.50613"
-     inkscape:document-units="px"
-     inkscape:current-layer="g4502"
-     showgrid="true"
-     units="px"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     inkscape:snap-bbox-edge-midpoints="false"
-     inkscape:snap-smooth-nodes="true"
-     inkscape:snap-center="true"
-     inkscape:snap-page="true"
-     inkscape:window-width="1920"
-     inkscape:window-height="1027"
-     inkscape:window-x="-8"
-     inkscape:window-y="1072"
-     inkscape:window-maximized="1"
-     inkscape:snap-object-midpoints="true"
-     inkscape:snap-midpoints="true"
-     inkscape:object-paths="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     objecttolerance="1"
-     guidetolerance="1"
-     inkscape:snap-nodes="false"
-     inkscape:snap-others="false">
-    <inkscape:grid
-       type="xygrid"
-       id="grid4504"
-       spacingx="4.2333334"
-       spacingy="4.2333334"
-       empcolor="#ff3fff"
-       empopacity="0.25098039"
-       empspacing="4" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="レイヤー 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-30.809093,-111.78601)">
-    <g
-       id="g4502"
-       transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
-      <g
-         style="fill:#000000;fill-opacity:1"
-         transform="translate(-1.3333333e-6,-1.3439941e-6)"
-         id="g5125">
-        <g
-           transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
-           id="text4489"
-           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-           aria-label="Mi">
-          <path
-             sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
-             inkscape:connector-curvature="0"
-             id="path5210"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
-             d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
-          <path
-             inkscape:connector-curvature="0"
-             id="path5212"
-             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill:#000000;fill-opacity:1;stroke-width:0.28950602px"
-             d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
diff --git a/src/client/app/desktop/assets/header-icon.svg b/src/client/app/desktop/assets/header-icon.svg
new file mode 100644
index 0000000000..d677d2d163
--- /dev/null
+++ b/src/client/app/desktop/assets/header-icon.svg
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="512"
+   height="512"
+   viewBox="0 0 135.46667 135.46667"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="header-icon.dark.svg"
+   inkscape:export-filename="C:\Users\syuilo\projects\misskey\assets\favicon\32.png"
+   inkscape:export-xdpi="6"
+   inkscape:export-ydpi="6">
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect5115"
+       is_visible="true"
+       steps="1"
+       threshold="0.000408163"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false"
+       simplifyindividualpaths="false"
+       simplifyJustCoalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect5111"
+       is_visible="true"
+       steps="1"
+       threshold="0.000408163"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false"
+       simplifyindividualpaths="false"
+       simplifyJustCoalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect5104"
+       is_visible="true"
+       steps="1"
+       threshold="0.000408163"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false"
+       simplifyindividualpaths="false"
+       simplifyJustCoalesce="false" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="114.309"
+     inkscape:cy="251.50613"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4502"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="false"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-center="true"
+     inkscape:snap-page="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     inkscape:window-x="-8"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-midpoints="true"
+     inkscape:object-paths="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     objecttolerance="1"
+     guidetolerance="1"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4504"
+       spacingx="4.2333334"
+       spacingy="4.2333334"
+       empcolor="#ff3fff"
+       empopacity="0.25098039"
+       empspacing="4" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="レイヤー 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-30.809093,-111.78601)">
+    <g
+       id="g4502"
+       transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
+      <g
+         style="fill-opacity:1"
+         transform="translate(-1.3333333e-6,-1.3439941e-6)"
+         id="g5125">
+        <g
+           transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
+           id="text4489"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           aria-label="Mi">
+          <path
+             sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
+             inkscape:connector-curvature="0"
+             id="path5210"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
+             d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
+          <path
+             inkscape:connector-curvature="0"
+             id="path5212"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
+             d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index 1b96e06486..d38aebec8b 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -10,7 +10,9 @@
 					<x-nav/>
 				</div>
 				<div class="center">
-					<div class="icon" @click="goToTop"></div>
+					<div class="icon" @click="goToTop">
+						<img svg-inline src="../../assets/header-icon.svg"/>
+					</div>
 				</div>
 				<div class="right">
 					<x-search/>
@@ -129,13 +131,12 @@ export default Vue.extend({
 						display block
 						width 48px
 						height 48px
-						background-image var(--desktopHeaderIcon)
-						background-size 24px
-						background-position center
-						background-repeat no-repeat
 						opacity 0.3
 						cursor pointer
 
+						> svg
+							fill currentColor
+
 				> .left,
 				> .center
 					left 0
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 72aedbce99..c43de3024e 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -136,7 +136,6 @@
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#fff",
-	"desktopHeaderIcon": "url('/assets/desktop/header-icon.dark.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
 	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
 	"desktopHeaderSearchFg": "#fff",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 4690054cbf..2e4f4b8cc9 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -136,7 +136,6 @@
 	"desktopHeaderBg": ":lighten<5<$secondary",
 	"desktopHeaderFg": "$text",
 	"desktopHeaderHoverFg": "#7b8c88",
-	"desktopHeaderIcon": "url('/assets/desktop/header-icon.light.svg')",
 	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
 	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
 	"desktopHeaderSearchFg": "#000",
-- 
cgit v1.2.3-freya


From 8317a219a54f5ea85daa500f891ff480a0156f5b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 20:11:11 +0900
Subject: wip

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/ui.header.vue b/src/client/app/desktop/views/components/ui.header.vue
index d38aebec8b..4cfcda0f1a 100644
--- a/src/client/app/desktop/views/components/ui.header.vue
+++ b/src/client/app/desktop/views/components/ui.header.vue
@@ -130,12 +130,15 @@ export default Vue.extend({
 						margin auto
 						display block
 						width 48px
-						height 48px
-						opacity 0.3
+						text-align center
 						cursor pointer
+						opacity 0.5
 
 						> svg
-							fill currentColor
+							width 24px
+							height 48px
+							vertical-align top
+							fill var(--desktopHeaderFg)
 
 				> .left,
 				> .center
-- 
cgit v1.2.3-freya


From 0c63ec8157f0c54d780faf69aad63f4bcd7fd683 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 20:39:32 +0900
Subject: wip

---
 .../app/common/views/components/ui/button.vue      |  78 +++++----
 src/client/app/common/views/widgets/broadcast.vue  |   1 -
 src/client/app/desktop/style.styl                  |   2 -
 src/client/app/desktop/ui.styl                     | 179 ---------------------
 .../app/desktop/views/components/post-form.vue     |  10 +-
 .../app/desktop/views/components/renote-form.vue   |   6 +-
 src/client/app/desktop/views/widgets/profile.vue   |   1 -
 src/client/app/init.css                            |   6 +-
 src/client/theme/dark.json                         |   4 +
 src/client/theme/light.json                        |   4 +
 10 files changed, 64 insertions(+), 227 deletions(-)
 delete mode 100644 src/client/app/desktop/ui.styl

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 4934a1bdfa..a165d100a4 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -1,9 +1,7 @@
 <template>
-<div class="ui-button" :class="[styl]">
-	<button :type="type" @click="$emit('click')">
-		<slot></slot>
-	</button>
-</div>
+<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
+	<slot></slot>
+</button>
 </template>
 
 <script lang="ts">
@@ -13,6 +11,16 @@ export default Vue.extend({
 		type: {
 			type: String,
 			required: false
+		},
+		primary: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 	data() {
@@ -32,21 +40,36 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-root(fill)
-	> button
-		display block
-		width 100%
-		margin 0
-		padding 0
+.dmtdnykelhudezerjlfpbhgovrgnqqgr
+	display block
+	width 100%
+	margin 0
+	padding 0
+	font-weight normal
+	font-size 16px
+	border none
+	border-radius 6px
+	outline none
+	box-shadow none
+
+	&.inline
+		display inline-block
+		width auto
+
+	&.primary
 		font-weight bold
-		font-size 16px
-		line-height 44px
-		border none
-		border-radius 6px
-		outline none
-		box-shadow none
 
-		if fill
+	&.fill
+		color var(--text)
+		background var(--buttonBg)
+
+		&:hover
+			background var(--buttonHoverBg)
+
+		&:active
+			background var(--buttonActiveBg)
+
+		&.primary
 			color var(--primaryForeground)
 			background var(--primary)
 
@@ -55,20 +78,15 @@ root(fill)
 
 			&:active
 				background var(--primaryDarken5)
-		else
-			color var(--primary)
-			background none
 
-			&:hover
-				color var(--primaryDarken5)
+	&:not(.fill)
+		color var(--primary)
+		background none
 
-			&:active
-				background var(--primaryAlpha03)
+		&:hover
+			color var(--primaryDarken5)
 
-.ui-button
-	&.fill
-		root(true)
-	&:not(.fill)
-		root(false)
+		&:active
+			background var(--primaryAlpha03)
 
 </style>
diff --git a/src/client/app/common/views/widgets/broadcast.vue b/src/client/app/common/views/widgets/broadcast.vue
index 65e37bfc69..620b09ff0e 100644
--- a/src/client/app/common/views/widgets/broadcast.vue
+++ b/src/client/app/common/views/widgets/broadcast.vue
@@ -5,7 +5,6 @@
 			:data-found="announcements && announcements.length != 0"
 			:data-melt="props.design == 1"
 			:data-mobile="platform == 'mobile'"
-			:data-darkmode="$store.state.device.darkmode"
 		>
 			<div class="icon">
 				<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
diff --git a/src/client/app/desktop/style.styl b/src/client/app/desktop/style.styl
index 626671fd25..96481a9808 100644
--- a/src/client/app/desktop/style.styl
+++ b/src/client/app/desktop/style.styl
@@ -1,8 +1,6 @@
 @import "../app"
 @import "../reset"
 
-@import "./ui"
-
 *::input-placeholder
 	color #D8CBC5
 
diff --git a/src/client/app/desktop/ui.styl b/src/client/app/desktop/ui.styl
deleted file mode 100644
index 3ab5d79c5d..0000000000
--- a/src/client/app/desktop/ui.styl
+++ /dev/null
@@ -1,179 +0,0 @@
-button
-	font-family sans-serif
-
-	*
-		pointer-events none
-
-button.ui
-.button.ui
-	display inline-block
-	cursor pointer
-	padding 0 14px
-	margin 0
-	min-width 100px
-	line-height 38px
-	font-size 14px
-	color #888
-	text-decoration none
-	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-	border solid 1px #e2e2e2
-	border-radius 4px
-	outline none
-
-	&.block
-		display block
-
-	&:focus
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top -5px
-			right -5px
-			bottom -5px
-			left -5px
-			border 2px solid var(--primaryAlpha03)
-			border-radius 8px
-
-	&:disabled
-		opacity 0.7
-		cursor default
-
-	&:hover
-		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-		border-color #dcdcdc
-
-	&:active
-		background #ececec
-		border-color #dcdcdc
-
-	&.primary
-		color var(--primaryForeground)
-		//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-		border solid 1px var(--primaryLighten15)
-
-		&:not(:disabled)
-			font-weight bold
-
-		&:hover:not(:disabled)
-			//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-			border-color var(--primary)
-
-		&:active:not(:disabled)
-			background var(--primary)
-			border-color var(--primary)
-
-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 #55595c
-	border solid 1px #dadada
-	border-radius 4px
-
-	&:hover
-		border-color #b0b0b0
-
-	&:focus
-		border-color var(--primary)
-
-textarea.ui
-	min-width 100%
-	max-width 100%
-	min-height 64px
-
-.ui.info
-	display block
-	margin 1em 0
-	padding 0 1em
-	font-size 90%
-	color rgba(#000, 0.87)
-	background #f8f8f9
-	border solid 1px rgba(34, 36, 38, 0.22)
-	border-radius 4px
-
-	> p
-		opacity 0.8
-
-		> [data-fa]:first-child
-			margin-right 0.25em
-
-	&.warn
-		color #573a08
-		background #FFFAF3
-		border-color #C9BA9B
-
-.ui.from.group
-	display block
-	margin 16px 0
-
-	> p:first-child
-		margin 0 0 6px 0
-		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 var(--primaryForeground)
-			//background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-			border solid 1px var(--primaryLighten15)
-
-			&:hover:not(:disabled)
-				//background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-				border-color var(--primary)
-
-			&:active:not(:disabled)
-				background var(--primary)
-				border-color var(--primary)
-
-	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 var(--primary)
-
-	.ui.from.group
-		> p:first-child
-			color #c0c7cc
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index b2a6fed8e8..6cb73ebc43 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -599,21 +599,19 @@ export default Vue.extend({
 		height 40px
 		font-size 1em
 		color var(--primaryForeground)
-		background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
+		background var(--primary)
 		outline none
-		border solid 1px var(--primaryLighten15)
+		border none
 		border-radius 4px
 
 		&:not(:disabled)
 			font-weight bold
 
 		&:hover:not(:disabled)
-			background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-			border-color var(--primary)
+			background var(--primaryLighten5)
 
 		&:active:not(:disabled)
-			background var(--primary)
-			border-color var(--primary)
+			background var(--primaryDarken5)
 
 		&:focus
 			&:after
diff --git a/src/client/app/desktop/views/components/renote-form.vue b/src/client/app/desktop/views/components/renote-form.vue
index 6717ced3b1..68d485bada 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="ui cancel" @click="cancel">%i18n:@cancel%</button>
-			<button class="ui primary ok" @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</button>
+			<ui-button class="button cancel" inline @click="cancel">%i18n:@cancel%</ui-button>
+			<ui-button class="button ok" inline primary @click="ok" :disabled="wait">{{ wait ? '%i18n:@reposting%' : '%i18n:@renote%' }}</ui-button>
 		</footer>
 	</template>
 	<template v-if="quote">
@@ -71,7 +71,7 @@ export default Vue.extend({
 			left 28px
 			line-height 40px
 
-		button
+		> .button
 			display block
 			position absolute
 			bottom 16px
diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index fa35138c31..91354324ce 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -4,7 +4,6 @@
 		<div class="egwyvoaaryotefqhqtmiyawwefemjfsd-body"
 			:data-compact="props.design == 1 || props.design == 2"
 			:data-melt="props.design == 2"
-			:data-darkmode="$store.state.device.darkmode"
 		>
 			<div class="banner"
 				:style="$store.state.i.bannerUrl ? `background-image: url(${$store.state.i.bannerUrl})` : ''"
diff --git a/src/client/app/init.css b/src/client/app/init.css
index 6ee25d64e2..92bb1d8cf4 100644
--- a/src/client/app/init.css
+++ b/src/client/app/init.css
@@ -32,7 +32,7 @@ body > noscript {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: #fff;
+	background: var(--bg);
 	cursor: wait;
 }
 	#ini > svg {
@@ -47,10 +47,6 @@ body > noscript {
 		animation: ini 0.6s infinite linear;
 	}
 
-html[data-darkmode] #ini {
-	background: #191b22;
-}
-
 @keyframes ini {
 	from {
 		transform: rotate(0deg);
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index c43de3024e..015225ddab 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -67,6 +67,10 @@
 	"inputLabel": "rgba(255, 255, 255, 0.7)",
 	"inputText": "#fff",
 
+	"buttonBg": "rgba(255, 255, 255, 0.05)",
+	"buttonHoverBg": "rgba(255, 255, 255, 0.1)",
+	"buttonActiveBg": "rgba(255, 255, 255, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
 	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
 	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 2e4f4b8cc9..3d131f066a 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -67,6 +67,10 @@
 	"inputLabel": "rgba(0, 0, 0, 0.54)",
 	"inputText": "#000",
 
+	"buttonBg": "rgba(0, 0, 0, 0.05)",
+	"buttonHoverBg": "rgba(0, 0, 0, 0.1)",
+	"buttonActiveBg": "rgba(0, 0, 0, 0.15)",
+
 	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
 	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
 	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
-- 
cgit v1.2.3-freya


From 1fa4d0d3f8552c9e82f763f8a086cb916d0e9250 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 28 Sep 2018 21:48:53 +0900
Subject: wip

---
 locales/ja-JP.yml                                  |  1 -
 .../components/games/reversi/reversi.room.vue      |  2 +-
 .../app/common/views/components/ui/switch.vue      |  2 +-
 .../app/desktop/views/components/settings.vue      | 60 ++++++++++++----------
 4 files changed, 35 insertions(+), 30 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index f5d0a180d8..0f83ba8419 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -792,7 +792,6 @@ desktop/views/components/settings.vue:
   show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
   show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
   show-maps: "マップの自動展開"
-  show-maps-desc: "位置情報が添付された投稿のマップを自動的に展開します。"
 
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
diff --git a/src/client/app/common/views/components/games/reversi/reversi.room.vue b/src/client/app/common/views/components/games/reversi/reversi.room.vue
index 236141ee28..9f0d9c23fb 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.room.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.room.vue
@@ -60,7 +60,7 @@
 
 			<div>
 				<template v-for="item in form">
-					<mk-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</mk-switch>
+					<ui-switch v-if="item.type == 'switch'" v-model="item.value" :key="item.id" :text="item.label" @change="onChangeForm(item)">{{ item.desc || '' }}</ui-switch>
 
 					<div class="card" v-if="item.type == 'radio'" :key="item.id">
 						<header>
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue
index 2ee787cb76..935f219833 100644
--- a/src/client/app/common/views/components/ui/switch.vue
+++ b/src/client/app/common/views/components/ui/switch.vue
@@ -19,7 +19,7 @@
 	<span class="label">
 		<span :aria-hidden="!checked"><slot></slot></span>
 		<p :aria-hidden="!checked">
-			<slot name="text"></slot>
+			<slot name="desc"></slot>
 		</p>
 	</span>
 </div>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 4d839f1dc9..c7d82590ea 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -21,12 +21,14 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@behaviour%</h1>
-			<mk-switch v-model="fetchOnScroll" text="%i18n:@fetch-on-scroll%">
-				<span>%i18n:@fetch-on-scroll-desc%</span>
-			</mk-switch>
-			<mk-switch v-model="autoPopout" text="%i18n:@auto-popout%">
-				<span>%i18n:@auto-popout-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="fetchOnScroll">
+				%i18n:@fetch-on-scroll%
+				<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
+			</ui-switch>
+			<ui-switch v-model="autoPopout">
+				%i18n:@auto-popout%
+				<span slot="desc">%i18n:@auto-popout-desc%</span>
+			</ui-switch>
 
 			<section>
 				<header>%i18n:@note-visibility%</header>
@@ -45,9 +47,10 @@
 
 			<details>
 				<summary>%i18n:@advanced%</summary>
-				<mk-switch v-model="apiViaStream" text="%i18n:@api-via-stream%">
-					<span>%i18n:@api-via-stream-desc%</span>
-				</mk-switch>
+				<ui-switch v-model="apiViaStream">
+					%i18n:@api-via-stream%
+					<span slot="desc">%i18n:@api-via-stream-desc%</span>
+				</ui-switch>
 			</details>
 		</section>
 
@@ -76,9 +79,7 @@
 			<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
 			<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
 			<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
-			<mk-switch v-model="showMaps" text="%i18n:@show-maps%">
-				<span>%i18n:@show-maps-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
 			<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
 			<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
 			<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
@@ -86,9 +87,10 @@
 
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@sound%</h1>
-			<mk-switch v-model="enableSounds" text="%i18n:@enable-sounds%">
-				<span>%i18n:@enable-sounds-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="enableSounds">
+				%i18n:@enable-sounds%
+				<span slot="desc">%i18n:@enable-sounds-desc%</span>
+			</ui-switch>
 			<label>%i18n:@volume%</label>
 			<input type="range"
 				v-model="soundVolume"
@@ -130,9 +132,10 @@
 
 		<section class="notification" v-show="page == 'notification'">
 			<h1>%i18n:@notification%</h1>
-			<mk-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch" text="%i18n:@auto-watch%">
-				<span>%i18n:@auto-watch-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
+				%i18n:@auto-watch%
+				<span slot="desc">%i18n:@auto-watch-desc%</span>
+			</ui-switch>
 		</section>
 
 		<section class="drive" v-show="page == 'drive'">
@@ -200,20 +203,23 @@
 			</button>
 			<details>
 				<summary>%i18n:@update-settings%</summary>
-				<mk-switch v-model="preventUpdate" text="%i18n:@prevent-update%">
-					<span>%i18n:@prevent-update-desc%</span>
-				</mk-switch>
+				<ui-switch v-model="preventUpdate">
+					%i18n:@prevent-update%
+					<span slot="desc">%i18n:@prevent-update-desc%</span>
+				</ui-switch>
 			</details>
 		</section>
 
 		<section class="other" v-show="page == 'other'">
 			<h1>%i18n:@advanced-settings%</h1>
-			<mk-switch v-model="debug" text="%i18n:@debug-mode%">
-				<span>%i18n:@debug-mode-desc%</span>
-			</mk-switch>
-			<mk-switch v-model="enableExperimentalFeatures" text="%i18n:@experimental%">
-				<span>%i18n:@experimental-desc%</span>
-			</mk-switch>
+			<ui-switch v-model="debug">
+				%i18n:@debug-mode%
+				<span slot="desc">%i18n:@debug-mode-desc%</span>
+			</ui-switch>
+			<ui-switch v-model="enableExperimentalFeatures">
+				%i18n:@experimental%
+				<span slot="desc">%i18n:@experimental-desc%</span>
+			</ui-switch>
 		</section>
 	</div>
 </div>
-- 
cgit v1.2.3-freya


From 6a82e94c5489d4879cbbf86091cd15c7d144f284 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:01:11 +0900
Subject: wip

---
 locales/ja-JP.yml                                  |  24 +++
 package.json                                       |   1 +
 src/client/app/app.vue                             |  12 +-
 src/client/app/common/scripts/theme.ts             |  89 ----------
 src/client/app/common/views/components/avatar.vue  |   4 +-
 src/client/app/common/views/components/index.ts    |   2 +
 src/client/app/common/views/components/theme.vue   | 179 +++++++++++++++++++++
 .../app/common/views/components/ui/button.vue      |  12 +-
 .../app/desktop/views/components/settings.vue      |   5 +
 src/client/app/init.ts                             |  35 +++-
 src/client/app/mobile/views/pages/settings.vue     |   7 +
 src/client/app/store.ts                            |   3 +
 src/client/app/theme.ts                            | 100 ++++++++++++
 src/client/theme/dark.json                         |   2 +-
 src/client/theme/halloween.json                    |   3 +-
 src/client/theme/light.json                        |   2 +-
 16 files changed, 368 insertions(+), 112 deletions(-)
 delete mode 100644 src/client/app/common/scripts/theme.ts
 create mode 100644 src/client/app/common/views/components/theme.vue
 create mode 100644 src/client/app/theme.ts

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 0f83ba8419..46dea949d2 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -285,6 +285,28 @@ common/views/components/media-banner.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+common/views/components/theme.vue:
+  light-theme: "非ダークモード時に使用するテーマ"
+  dark-theme: "ダークモード時に使用するテーマ"
+  install-a-theme: "テーマのインストール"
+  theme-code: "テーマコード"
+  install: "インストール"
+  create-a-theme: "テーマの作成"
+  save-created-theme: "テーマを保存"
+  primary-color: "プライマリ カラー"
+  secondary-color: "セカンダリ カラー"
+  text-color: "文字色"
+  base-theme: "ベーステーマ"
+  base-theme-light: "Light"
+  base-theme-dark: "Dark"
+  theme-name: "テーマ名"
+  preview-created-theme: "プレビュー"
+  invalid-theme: "テーマが正しくありません。"
+  already-installed: "既にそのテーマはインストールされています。"
+  saved: "保存しました"
+  installed-themes: "インストールされたテーマ"
+  select-theme: "テーマを選択してください"
+
 common/views/components/cw-button.vue:
   hide: "隠す"
   show: "もっと見る"
@@ -762,6 +784,7 @@ desktop/views/components/settings.vue:
   2fa: "二段階認証"
   other: "その他"
   license: "ライセンス"
+  theme: "テーマ"
 
   behaviour: "動作"
   fetch-on-scroll: "スクロールで自動読み込み"
@@ -1417,6 +1440,7 @@ mobile/views/pages/settings.vue:
   notification-position: "通知の表示"
   notification-position-bottom: "下"
   notification-position-top: "上"
+  theme: "テーマ"
   behavior: "動作"
   fetch-on-scroll: "スクロールで自動読み込み"
   note-visibility: "投稿の公開範囲"
diff --git a/package.json b/package.json
index 347e9d0c24..e19283cf64 100644
--- a/package.json
+++ b/package.json
@@ -208,6 +208,7 @@
 		"v-animate-css": "0.0.2",
 		"vue": "2.5.17",
 		"vue-chartjs": "3.4.0",
+		"vue-color": "2.6.0",
 		"vue-cropperjs": "2.2.2",
 		"vue-js-modal": "1.3.26",
 		"vue-json-tree-view": "2.1.4",
diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index 9b6af27ece..778e9f29cf 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -14,8 +14,7 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'h|slash': this.help,
-				'd': this.dark,
-				'x': this.test
+				'd': this.dark
 			};
 		}
 	},
@@ -26,11 +25,10 @@ export default Vue.extend({
 		},
 
 		dark() {
-			applyTheme(darkTheme);
-		},
-
-		test() {
-			applyTheme(halloweenTheme);
+			this.$store.commit('device/set', {
+				key: 'darkmode',
+				value: !this.$store.state.device.darkmode
+			});
 		}
 	}
 });
diff --git a/src/client/app/common/scripts/theme.ts b/src/client/app/common/scripts/theme.ts
deleted file mode 100644
index 7a1c6abb76..0000000000
--- a/src/client/app/common/scripts/theme.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as tinycolor from 'tinycolor2';
-const lightTheme = require('../../../theme/light');
-const darkTheme = require('../../../theme/dark');
-
-type Theme = {
-	meta: {
-		id: string;
-		name: string;
-		inherit: string;
-		vars: any;
-	};
-} & {
-	[key: string]: string;
-};
-
-export default function(theme: Theme) {
-	if (theme.meta.inherit) {
-		const inherit = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.inherit);
-		theme = Object.assign({}, inherit, theme);
-	}
-
-	const props = compile(theme);
-
-	Object.entries(props).forEach(([k, v]) => {
-		if (k == 'meta') return;
-		document.documentElement.style.setProperty(`--${k}`, v.toString());
-	});
-
-	localStorage.setItem('theme', JSON.stringify(props));
-}
-
-function compile(theme: Theme): { [key: string]: string } {
-	function getColor(code: string): tinycolor.Instance {
-		// ref
-		if (code[0] == '@') {
-			return getColor(theme[code.substr(1)]);
-		}
-		if (code[0] == '$') {
-			return getColor(theme.meta.vars[code.substr(1)]);
-		}
-
-		// func
-		if (code[0] == ':') {
-			const parts = code.split('<');
-			const func = parts.shift().substr(1);
-			const arg = parseFloat(parts.shift());
-			const color = getColor(parts.join('<'));
-
-			switch (func) {
-				case 'darken': return color.darken(arg);
-				case 'lighten': return color.lighten(arg);
-				case 'alpha': return color.setAlpha(arg);
-			}
-		}
-
-		return tinycolor(code);
-	}
-
-	const props = {};
-
-	Object.entries(theme).forEach(([k, v]) => {
-		if (k == 'meta') return;
-		const c = getColor(v);
-		props[k] = genValue(c);
-	});
-
-	const primary = getColor(props['primary']);
-
-	for (let i = 1; i < 10; i++) {
-		const color = primary.clone().setAlpha(i / 10);
-		props['primaryAlpha0' + i] = genValue(color);
-	}
-
-	for (let i = 1; i < 100; i++) {
-		const color = primary.clone().lighten(i);
-		props['primaryLighten' + i] = genValue(color);
-	}
-
-	for (let i = 1; i < 100; i++) {
-		const color = primary.clone().darken(i);
-		props['primaryDarken' + i] = genValue(color);
-	}
-
-	return props;
-}
-
-function genValue(c: tinycolor.Instance): string {
-	return c.toRgbString();
-}
diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue
index ca09af87de..ac018abcfc 100644
--- a/src/client/app/common/views/components/avatar.vue
+++ b/src/client/app/common/views/components/avatar.vue
@@ -59,7 +59,9 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
+		if (this.user.avatarColor) {
+			this.$el.style.color = `rgb(${this.user.avatarColor.slice(0, 3).join(',')})`;
+		}
 	},
 	methods: {
 		onClick(e) {
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 4c1c0afa80..0dea38a7a1 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import theme from './theme.vue';
 import instance from './instance.vue';
 import cwButton from './cw-button.vue';
 import tagCloud from './tag-cloud.vue';
@@ -43,6 +44,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-theme', theme);
 Vue.component('mk-instance', instance);
 Vue.component('mk-cw-button', cwButton);
 Vue.component('mk-tag-cloud', tagCloud);
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
new file mode 100644
index 0000000000..27888d1e85
--- /dev/null
+++ b/src/client/app/common/views/components/theme.vue
@@ -0,0 +1,179 @@
+<template>
+<div class="nicnklzforebnpfgasiypmpdaaglujqm">
+	<label>
+		<span>%i18n:@light-theme%</span>
+		<ui-select v-model="light" placeholder="%i18n:@light-theme%">
+			<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+		</ui-select>
+	</label>
+
+	<label>
+		<span>%i18n:@dark-theme%</span>
+		<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
+			<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+		</ui-select>
+	</label>
+
+	<details class="creator">
+		<summary>%i18n:@create-a-theme%</summary>
+		<div>
+			<span>%i18n:@base-theme%:</span>
+			<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
+			<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
+		</div>
+		<div>
+			<ui-input v-model="myThemeName">
+				<span>%i18n:@theme-name%</span>
+			</ui-input>
+		</div>
+		<div>
+			<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
+			<color-picker v-model="myThemePrimary"/>
+		</div>
+		<div>
+			<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
+			<color-picker v-model="myThemeSecondary"/>
+		</div>
+		<div>
+			<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
+			<color-picker v-model="myThemeText"/>
+		</div>
+		<ui-button @click="preview()">%i18n:@preview-created-theme%</ui-button>
+		<ui-button primary @click="gen()">%i18n:@save-created-theme%</ui-button>
+	</details>
+
+	<details>
+		<summary>%i18n:@install-a-theme%</summary>
+		<ui-textarea v-model="installThemeCode">
+			<span>%i18n:@theme-code%</span>
+		</ui-textarea>
+		<ui-button @click="install()">%i18n:@install%</ui-button>
+	</details>
+
+	<details>
+		<summary>%i18n:@installed-themes%</summary>
+		<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%">
+			<option v-for="x in installedThemes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+		</ui-select>
+		<ui-textarea readonly :value="selectedInstalledThemeCode">
+			<span>%i18n:@theme-code%</span>
+		</ui-textarea>
+	</details>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { apiUrl, docsUrl } from '../../../config';
+import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme';
+import { Chrome } from 'vue-color';
+import * as uuid from 'uuid';
+import * as tinycolor from 'tinycolor2';
+
+export default Vue.extend({
+	components: {
+		ColorPicker: Chrome
+	},
+
+	data() {
+		return {
+			installThemeCode: null,
+			selectedInstalledTheme: null,
+			myThemeBase: 'light',
+			myThemeName: '',
+			myThemePrimary: lightTheme.meta.vars.primary,
+			myThemeSecondary: lightTheme.meta.vars.secondary,
+			myThemeText: lightTheme.meta.vars.text
+		};
+	},
+
+	computed: {
+		themes(): any {
+			return this.$store.state.device.themes.concat(builtinThemes);
+		},
+
+		installedThemes(): any {
+			return this.$store.state.device.themes;
+		},
+
+		light: {
+			get() { return this.$store.state.device.lightTheme; },
+			set(value) { this.$store.commit('device/set', { key: 'lightTheme', value }); }
+		},
+
+		dark: {
+			get() { return this.$store.state.device.darkTheme; },
+			set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); }
+		},
+
+		selectedInstalledThemeCode() {
+			if (this.selectedInstalledTheme == null) return null;
+			return JSON.stringify(this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme));
+		},
+
+		myTheme(): any {
+			return {
+				meta: {
+					name: this.myThemeName,
+					author: this.$store.state.i.name,
+					base: this.myThemeBase,
+					vars: {
+						primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
+						secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
+						text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
+					}
+				}
+			};
+		}
+	},
+
+	watch: {
+		myThemeBase(v) {
+			const theme = v == 'light' ? lightTheme : darkTheme;
+			this.myThemePrimary = theme.meta.vars.primary;
+			this.myThemeSecondary = theme.meta.vars.secondary;
+			this.myThemeText = theme.meta.vars.text;
+		}
+	},
+
+	methods: {
+		install() {
+			const theme = JSON.parse(this.installThemeCode);
+			if (theme.meta == null || theme.meta.id == null) {
+				alert('%i18n:@invalid-theme%');
+				return;
+			}
+			if (this.$store.state.device.themes.some(t => t.meta.id == theme.meta.id)) {
+				alert('%i18n:@already-installed%');
+				return;
+			}
+			const themes = this.$store.state.device.themes.concat(theme);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+		},
+
+		preview() {
+			applyTheme(this.myTheme, false);
+		},
+
+		gen() {
+			const theme = this.myTheme;
+			theme.meta.id = uuid();
+			const themes = this.$store.state.device.themes.concat(theme);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+			alert('%i18n:@saved%');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.nicnklzforebnpfgasiypmpdaaglujqm
+	> .creator
+		> div
+			padding 16px 0
+			border-bottom solid 1px var(--faceDivider)
+</style>
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index a165d100a4..47644b32b5 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -27,14 +27,6 @@ export default Vue.extend({
 		return {
 			styl: 'fill'
 		};
-	},
-	inject: {
-		isCardChild: { default: false }
-	},
-	created() {
-		if (this.isCardChild) {
-			this.styl = 'line';
-		}
 	}
 });
 </script>
@@ -43,6 +35,7 @@ export default Vue.extend({
 .dmtdnykelhudezerjlfpbhgovrgnqqgr
 	display block
 	width 100%
+	min-height 40px
 	margin 0
 	padding 0
 	font-weight normal
@@ -52,6 +45,9 @@ export default Vue.extend({
 	outline none
 	box-shadow none
 
+	&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
+		margin-top 16px
+
 	&.inline
 		display inline-block
 		width auto
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index c7d82590ea..1cb8d4d4c8 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -19,6 +19,11 @@
 			<x-profile/>
 		</section>
 
+		<section class="web" v-show="page == 'web'">
+			<h1>%i18n:@theme%</h1>
+			<mk-theme/>
+		</section>
+
 		<section class="web" v-show="page == 'web'">
 			<h1>%i18n:@behaviour%</h1>
 			<ui-switch v-model="fetchOnScroll">
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 8d430ad7ff..802f7b42eb 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -14,11 +14,11 @@ import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
 import MiOS, { API } from './mios';
 import { version, codename, lang } from './config';
-import applyTheme from './common/scripts/theme';
-const defaultTheme = require('../theme/light.json');
+import { builtinThemes, applyTheme } from './theme';
+const lightTheme = require('../theme/light.json');
 
 if (localStorage.getItem('theme') == null) {
-	applyTheme(defaultTheme);
+	applyTheme(lightTheme);
 }
 
 Vue.use(Vuex);
@@ -92,6 +92,35 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 		const launch = (router: VueRouter, api?: (os: MiOS) => API) => {
 			os.apis = api ? api(os) : null;
 
+			//#region theme
+			os.store.watch(s => {
+				return s.device.darkmode;
+			}, v => {
+				const themes = os.store.state.device.themes.concat(builtinThemes);
+				const dark = themes.find(t => t.meta.id == os.store.state.device.darkTheme);
+				const light = themes.find(t => t.meta.id == os.store.state.device.lightTheme);
+				applyTheme(v ? dark : light);
+			});
+			os.store.watch(s => {
+				return s.device.lightTheme;
+			}, v => {
+				const themes = os.store.state.device.themes.concat(builtinThemes);
+				const theme = themes.find(t => t.meta.id == v);
+				if (!os.store.state.device.darkmode) {
+					applyTheme(theme);
+				}
+			});
+			os.store.watch(s => {
+				return s.device.darkTheme;
+			}, v => {
+				const themes = os.store.state.device.themes.concat(builtinThemes);
+				const theme = themes.find(t => t.meta.id == v);
+				if (os.store.state.device.darkmode) {
+					applyTheme(theme);
+				}
+			});
+			//#endregion
+
 			//#region shadow
 			const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
 			if (os.store.state.settings.useShadow) document.documentElement.style.setProperty('--shadow', shadow);
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index b83eaf6d33..94fa38cec9 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -23,6 +23,13 @@
 					<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
 				</section>
 
+				<section>
+					<header>%i18n:@theme%</header>
+					<div>
+						<mk-theme/>
+					</div>
+				</section>
+
 				<section>
 					<header>%i18n:@timeline%</header>
 					<div>
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index fbcc53d7be..545261225a 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -44,6 +44,9 @@ const defaultDeviceSettings = {
 	apiViaStream: true,
 	autoPopout: false,
 	darkmode: false,
+	darkTheme: 'dark',
+	lightTheme: 'light',
+	themes: [],
 	enableSounds: true,
 	soundVolume: 0.5,
 	lang: null,
diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
new file mode 100644
index 0000000000..1147ff300d
--- /dev/null
+++ b/src/client/app/theme.ts
@@ -0,0 +1,100 @@
+import * as tinycolor from 'tinycolor2';
+
+type Theme = {
+	meta: {
+		id: string;
+		name: string;
+		author: string;
+		base?: string;
+		vars: any;
+	};
+} & {
+	[key: string]: string;
+};
+
+export function applyTheme(theme: Theme, persisted = true) {
+	if (theme.meta.base) {
+		const base = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.base);
+		theme = Object.assign({}, base, theme);
+	}
+
+	const props = compile(theme);
+
+	Object.entries(props).forEach(([k, v]) => {
+		if (k == 'meta') return;
+		document.documentElement.style.setProperty(`--${k}`, v.toString());
+	});
+
+	if (persisted) {
+		localStorage.setItem('theme', JSON.stringify(props));
+	}
+}
+
+function compile(theme: Theme): { [key: string]: string } {
+	function getColor(code: string): tinycolor.Instance {
+		// ref
+		if (code[0] == '@') {
+			return getColor(theme[code.substr(1)]);
+		}
+		if (code[0] == '$') {
+			return getColor(theme.meta.vars[code.substr(1)]);
+		}
+
+		// func
+		if (code[0] == ':') {
+			const parts = code.split('<');
+			const func = parts.shift().substr(1);
+			const arg = parseFloat(parts.shift());
+			const color = getColor(parts.join('<'));
+
+			switch (func) {
+				case 'darken': return color.darken(arg);
+				case 'lighten': return color.lighten(arg);
+				case 'alpha': return color.setAlpha(arg);
+			}
+		}
+
+		return tinycolor(code);
+	}
+
+	const props = {};
+
+	Object.entries(theme).forEach(([k, v]) => {
+		if (k == 'meta') return;
+		const c = getColor(v);
+		props[k] = genValue(c);
+	});
+
+	const primary = getColor(props['primary']);
+
+	for (let i = 1; i < 10; i++) {
+		const color = primary.clone().setAlpha(i / 10);
+		props['primaryAlpha0' + i] = genValue(color);
+	}
+
+	for (let i = 1; i < 100; i++) {
+		const color = primary.clone().lighten(i);
+		props['primaryLighten' + i] = genValue(color);
+	}
+
+	for (let i = 1; i < 100; i++) {
+		const color = primary.clone().darken(i);
+		props['primaryDarken' + i] = genValue(color);
+	}
+
+	return props;
+}
+
+function genValue(c: tinycolor.Instance): string {
+	return c.toRgbString();
+}
+
+export const lightTheme = require('../theme/light.json');
+export const darkTheme = require('../theme/dark.json');
+export const halloweenTheme = require('../theme/halloween.json');
+
+export const builtinThemes = [
+	lightTheme,
+	darkTheme,
+	halloweenTheme
+];
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
index 015225ddab..74447b8f2f 100644
--- a/src/client/theme/dark.json
+++ b/src/client/theme/dark.json
@@ -1,6 +1,6 @@
 {
 	"meta": {
-		"id": "9978f7f9-5616-44fd-a704-cc5985efdd63",
+		"id": "dark",
 		"name": "Dark",
 		"author": "syuilo",
 		"vars": {
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
index 6e92db95ff..fb34db57a8 100644
--- a/src/client/theme/halloween.json
+++ b/src/client/theme/halloween.json
@@ -3,10 +3,9 @@
 		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
 		"name": "Halloween",
 		"author": "syuilo",
-		"inherit": "9978f7f9-5616-44fd-a704-cc5985efdd63",
+		"base": "dark",
 		"vars": {
 			"primary": "#d67036",
-			"primaryForeground": "#fff",
 			"secondary": "#1f1d30",
 			"text": "#b1bee3"
 		}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 3d131f066a..1b6604e642 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -1,6 +1,6 @@
 {
 	"meta": {
-		"id": "406cfea3-a4e7-486c-9057-30ede1353c3f",
+		"id": "light",
 		"name": "Light",
 		"author": "syuilo",
 		"vars": {
-- 
cgit v1.2.3-freya


From 7b426532710c69e5b08407e33f21fa592f976e99 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:03:28 +0900
Subject: wip

---
 src/client/theme/light.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index 1b6604e642..b853aa9a26 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -43,7 +43,7 @@
 	"noteHeaderBadgeFg": "#aaa",
 	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
 	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
+	"noteHeaderAdminBg": "#ffdfdf",
 	"noteHeaderAcct": "#ccc",
 	"noteHeaderInfo": "#c0c0c0",
 
-- 
cgit v1.2.3-freya


From 094d873f2e7dbcc6c250260d21524afb15cca47f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:20:49 +0900
Subject: wip

---
 src/client/app/common/views/components/ui/button.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 47644b32b5..b29f8bb1c9 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -45,6 +45,18 @@ export default Vue.extend({
 	outline none
 	box-shadow none
 
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid var(--primaryAlpha03)
+			border-radius 10px
+
 	&:not(.inline) + .dmtdnykelhudezerjlfpbhgovrgnqqgr
 		margin-top 16px
 
-- 
cgit v1.2.3-freya


From 57669c9c0302392c1e12008fd01578cfd1d3f157 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:44:23 +0900
Subject: wip

---
 src/client/app/theme.ts     |  2 ++
 src/client/theme/light.json | 10 +++++-----
 src/client/theme/pink.json  | 17 +++++++++++++++++
 3 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 src/client/theme/pink.json

(limited to 'src/client')

diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
index 1147ff300d..555f8411f2 100644
--- a/src/client/app/theme.ts
+++ b/src/client/app/theme.ts
@@ -91,10 +91,12 @@ function genValue(c: tinycolor.Instance): string {
 
 export const lightTheme = require('../theme/light.json');
 export const darkTheme = require('../theme/dark.json');
+export const pinkTheme = require('../theme/pink.json');
 export const halloweenTheme = require('../theme/halloween.json');
 
 export const builtinThemes = [
 	lightTheme,
 	darkTheme,
+	pinkTheme,
 	halloweenTheme
 ];
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
index b853aa9a26..0d50dc5caa 100644
--- a/src/client/theme/light.json
+++ b/src/client/theme/light.json
@@ -39,16 +39,16 @@
 	"renoteText": "#9dbb00",
 	"quoteBorder": "#c0dac6",
 	"noteText": "#717171",
-	"noteHeaderName": "#627079",
+	"noteHeaderName": ":darken<2<$text",
 	"noteHeaderBadgeFg": "#aaa",
 	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
 	"noteHeaderAdminFg": "#f15f71",
 	"noteHeaderAdminBg": "#ffdfdf",
-	"noteHeaderAcct": "#ccc",
-	"noteHeaderInfo": "#c0c0c0",
+	"noteHeaderAcct": ":alpha<0.7<@noteHeaderName",
+	"noteHeaderInfo": ":alpha<0.7<@noteHeaderName",
 
-	"noteActions": "#ddd",
-	"noteActionsHover": "#444",
+	"noteActions": ":alpha<0.3<$text",
+	"noteActionsHover": ":alpha<0.9<$text",
 	"noteActionsReplyHover": "#0af",
 	"noteActionsRenoteHover": "#8d0",
 	"noteActionsReactionHover": "#fa0",
diff --git a/src/client/theme/pink.json b/src/client/theme/pink.json
new file mode 100644
index 0000000000..ddb56b46e1
--- /dev/null
+++ b/src/client/theme/pink.json
@@ -0,0 +1,17 @@
+{
+	"meta": {
+		"id": "e9c8c01d-9c15-48d0-9b5c-3d00843b5b36",
+		"name": "Pink",
+		"author": "syuilo",
+		"base": "light",
+		"vars": {
+			"primary": "rgb(251, 78, 112)",
+			"secondary": "rgb(255, 218, 240)",
+			"text": "rgb(113, 91, 102)"
+		}
+	},
+
+	"renoteGradient": "#ffb1c9",
+	"renoteText": "#ff588d",
+	"quoteBorder": "#ff6c9b"
+}
-- 
cgit v1.2.3-freya


From f26e64190575c53601fbfccba539a95568813007 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 00:48:02 +0900
Subject: wip

---
 src/client/app/desktop/views/components/settings.profile.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/settings.profile.vue b/src/client/app/desktop/views/components/settings.profile.vue
index 9dd2798557..5f465a52bb 100644
--- a/src/client/app/desktop/views/components/settings.profile.vue
+++ b/src/client/app/desktop/views/components/settings.profile.vue
@@ -6,22 +6,19 @@
 		<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@name%</p>
-		<input v-model="name" type="text" class="ui"/>
+		<ui-input v-model="name" type="text">%i18n:@name%</ui-input>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@location%</p>
-		<input v-model="location" type="text" class="ui"/>
+		<ui-input v-model="location" type="text">%i18n:@location%</ui-input>
 	</label>
 	<label class="ui from group">
-		<p>%i18n:@description%</p>
-		<textarea v-model="description" class="ui"></textarea>
+		<ui-textarea v-model="description">%i18n:@description%</ui-textarea>
 	</label>
 	<label class="ui from group">
 		<p>%i18n:@birthday%</p>
 		<input type="date" v-model="birthday"/>
 	</label>
-	<button class="ui primary" @click="save">%i18n:@save%</button>
+	<ui-button primary @click="save">%i18n:@save%</ui-button>
 	<section>
 		<h2>%i18n:@locked-account%</h2>
 		<ui-switch v-model="$store.state.i.isLocked" @change="onChangeIsLocked">%i18n:@is-locked%</ui-switch>
-- 
cgit v1.2.3-freya


From 25dd19dd8c931ffabb6137ff92d63bbf67ed7883 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 29 Sep 2018 09:11:06 +0900
Subject: :art:

---
 src/client/app/common/views/components/signin.vue    |  6 +++---
 src/client/app/common/views/components/signup.vue    |  8 ++++----
 src/client/app/common/views/components/ui/input.vue  | 16 ++++++----------
 src/client/app/common/views/components/ui/select.vue | 16 ++++++----------
 src/client/app/mobile/views/pages/drive.vue          |  1 -
 src/client/app/mobile/views/pages/games/reversi.vue  |  1 -
 6 files changed, 19 insertions(+), 29 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index e02af8154c..7025ecea33 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -1,16 +1,16 @@
 <template>
 <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
-	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange">
+	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange" styl="fill">
 		<span>%i18n:@username%</span>
 		<span slot="prefix">@</span>
 		<span slot="suffix">@{{ host }}</span>
 	</ui-input>
-	<ui-input v-model="password" type="password" required>
+	<ui-input v-model="password" type="password" required styl="fill">
 		<span>%i18n:@password%</span>
 		<span slot="prefix">%fa:lock%</span>
 	</ui-input>
-	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required/>
+	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill"/>
 	<ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>
 	<p style="margin: 8px 0;">%i18n:@or% <a :href="`${apiUrl}/signin/twitter`">%i18n:@signin-with-twitter%</a></p>
 </form>
diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue
index e55d7ee3e3..b817ca729d 100644
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -1,12 +1,12 @@
 <template>
 <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
 	<template v-if="meta">
-		<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
+		<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill">
 			<span>%i18n:@invitation-code%</span>
 			<span slot="prefix">%fa:id-card-alt%</span>
 			<p slot="text" v-html="'%i18n:@invitation-info%'.replace('{}', meta.maintainer.url)"></p>
 		</ui-input>
-		<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername">
+		<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill">
 			<span>%i18n:@username%</span>
 			<span slot="prefix">@</span>
 			<span slot="suffix">@{{ host }}</span>
@@ -18,7 +18,7 @@
 			<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-short%</p>
 			<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-long%</p>
 		</ui-input>
-		<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true">
+		<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill">
 			<span>%i18n:@password%</span>
 			<span slot="prefix">%fa:lock%</span>
 			<div slot="text">
@@ -27,7 +27,7 @@
 				<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p>
 			</div>
 		</ui-input>
-		<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
+		<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill">
 			<span>%i18n:@password% (%i18n:@retype%)</span>
 			<span slot="prefix">%fa:lock%</span>
 			<div slot="text">
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index d7e72409f0..abbd5a2feb 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -71,14 +71,18 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		styl: {
+			type: String,
+			required: false,
+			default: 'line'
 		}
 	},
 	data() {
 		return {
 			v: this.value,
 			focused: false,
-			passwordStrength: '',
-			styl: 'fill'
+			passwordStrength: ''
 		};
 	},
 	computed: {
@@ -117,14 +121,6 @@ export default Vue.extend({
 			}
 		}
 	},
-	inject: {
-		isCardChild: { default: false }
-	},
-	created() {
-		if (this.isCardChild) {
-			this.styl = 'line';
-		}
-	},
 	mounted() {
 		if (this.$refs.prefix) {
 			this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
diff --git a/src/client/app/common/views/components/ui/select.vue b/src/client/app/common/views/components/ui/select.vue
index 8c1b8c0269..da6f9696b5 100644
--- a/src/client/app/common/views/components/ui/select.vue
+++ b/src/client/app/common/views/components/ui/select.vue
@@ -29,13 +29,17 @@ export default Vue.extend({
 		required: {
 			type: Boolean,
 			required: false
+		},
+		styl: {
+			type: String,
+			required: false,
+			default: 'line'
 		}
 	},
 	data() {
 		return {
 			v: this.value,
-			focused: false,
-			styl: 'fill'
+			focused: false
 		};
 	},
 	computed: {
@@ -48,14 +52,6 @@ export default Vue.extend({
 			this.v = v;
 		}
 	},
-	inject: {
-		isCardChild: { default: false }
-	},
-	created() {
-		if (this.isCardChild) {
-			this.styl = 'line';
-		}
-	},
 	mounted() {
 		if (this.$refs.prefix) {
 			this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index c0fc7b48dc..bf02adca9d 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -44,7 +44,6 @@ export default Vue.extend({
 	},
 	mounted() {
 		document.title = `${(this as any).os.instanceName} Drive`;
-		document.documentElement.style.background = '#fff';
 	},
 	beforeDestroy() {
 		window.removeEventListener('popstate', this.onPopState);
diff --git a/src/client/app/mobile/views/pages/games/reversi.vue b/src/client/app/mobile/views/pages/games/reversi.vue
index f3bba586de..7f8f919005 100644
--- a/src/client/app/mobile/views/pages/games/reversi.vue
+++ b/src/client/app/mobile/views/pages/games/reversi.vue
@@ -11,7 +11,6 @@ import Vue from 'vue';
 export default Vue.extend({
 	mounted() {
 		document.title = `${(this as any).os.instanceName} %i18n:@reversi%`;
-		document.documentElement.style.background = '#fff';
 	},
 	methods: {
 		nav(game, actualNav) {
-- 
cgit v1.2.3-freya


From 1e2b484929410d3c1cf37a0809b84952ee3ad1cd Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Sat, 29 Sep 2018 16:52:58 +0900
Subject: profile banner が濃すぎるのを修正 (#2783)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/widgets/profile.vue b/src/client/app/desktop/views/widgets/profile.vue
index 91354324ce..30b7b95d35 100644
--- a/src/client/app/desktop/views/widgets/profile.vue
+++ b/src/client/app/desktop/views/widgets/profile.vue
@@ -86,7 +86,7 @@ export default define({
 
 	> .banner
 		height 100px
-		background-color var(--primaryDarken10)
+		background-color var(--primaryAlpha01)
 		background-size cover
 		background-position center
 		cursor pointer
-- 
cgit v1.2.3-freya


From 1b9b8912aef0bce4346fb0f11a3a1e9c3bd1cf50 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Sun, 30 Sep 2018 22:45:24 +0900
Subject: Update post-form.vue (#2790)

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index f50dfaf8fb..e25cc33579 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -450,6 +450,7 @@ export default Vue.extend({
 	display block
 	padding 16px
 	background var(--desktopPostFormBg)
+	overflow hidden
 
 	&:after
 		content ""
-- 
cgit v1.2.3-freya


From ff76c815b15a4bb3ceda0ef3cf6d5adb73f535e2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 30 Sep 2018 23:03:21 +0900
Subject: 
 テーマインストール時の動作をわかりやすくしたりテーマをアンインストールできるようにしたり
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                |  3 +++
 src/client/app/common/views/components/theme.vue | 12 +++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 46dea949d2..366c4a33cd 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -291,6 +291,7 @@ common/views/components/theme.vue:
   install-a-theme: "テーマのインストール"
   theme-code: "テーマコード"
   install: "インストール"
+  installed: "「{}」をインストールしました"
   create-a-theme: "テーマの作成"
   save-created-theme: "テーマを保存"
   primary-color: "プライマリ カラー"
@@ -306,6 +307,8 @@ common/views/components/theme.vue:
   saved: "保存しました"
   installed-themes: "インストールされたテーマ"
   select-theme: "テーマを選択してください"
+  uninstall: "アンインストール"
+  uninstalled: "「{}」をアンインストールしました"
 
 common/views/components/cw-button.vue:
   hide: "隠す"
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 27888d1e85..56b07da498 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -58,13 +58,13 @@
 		<ui-textarea readonly :value="selectedInstalledThemeCode">
 			<span>%i18n:@theme-code%</span>
 		</ui-textarea>
+		<ui-button @click="uninstall()">%i18n:@uninstall%</ui-button>
 	</details>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { apiUrl, docsUrl } from '../../../config';
 import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme';
 import { Chrome } from 'vue-color';
 import * as uuid from 'uuid';
@@ -151,6 +151,16 @@ export default Vue.extend({
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
+			alert('%i18n:@installed%'.replace('{}', theme.meta.name));
+		},
+
+		uninstall() {
+			const theme = this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme);
+			const themes = this.$store.state.device.themes.filter(t => t.meta.id != theme.meta.id);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+			alert('%i18n:@uninstalled%'.replace('{}', theme.meta.name));
 		},
 
 		preview() {
-- 
cgit v1.2.3-freya


From cd0b9a8e3f539ac0f31a57800e7745ed585ccc3a Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Mon, 1 Oct 2018 19:28:24 +0900
Subject: 非承認制アカウントのリモートフォローではフォロー許可待ちと表示しない
 (#2796)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/en-US.yml                                         | 3 +++
 locales/ja-JP.yml                                         | 3 +++
 src/client/app/common/views/pages/follow.vue              | 3 ++-
 src/client/app/desktop/views/components/follow-button.vue | 3 ++-
 src/client/app/mobile/views/components/follow-button.vue  | 3 ++-
 5 files changed, 12 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/locales/en-US.yml b/locales/en-US.yml
index 9b4ae5c381..50c489726d 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -439,6 +439,7 @@ common/views/pages/follow.vue:
   following: "Following"
   follow: "Follow"
   request-pending: "Pending follow request"
+  follow-processing: "Processing follow"
   follow-request: "Follow request"
 desktop:
   banner-crop-title: "Crop the part that appears as a banner"
@@ -565,6 +566,7 @@ desktop/views/components/follow-button.vue:
   following: "Following"
   follow: "Follow"
   request-pending: "Pending follow request"
+  follow-processing: "Processing follow"
   follow-request: "Follow request"
 desktop/views/components/followers-window.vue:
   followers: "{}'s followers"
@@ -1044,6 +1046,7 @@ mobile/views/components/follow-button.vue:
   following: "Following"
   follow: "Follow"
   request-pending: "Pending follow request"
+  follow-processing: "Processing follow"
   follow-request: "Follow request"
 mobile/views/components/friends-maker.vue:
   title: "Let's follow them"
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 366c4a33cd..08d3c51733 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -514,6 +514,7 @@ common/views/pages/follow.vue:
   following: "フォロー中"
   follow: "フォロー"
   request-pending: "フォロー許可待ち"
+  follow-processing: "フォロー処理中"
   follow-request: "フォロー申請"
 
 desktop:
@@ -656,6 +657,7 @@ desktop/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"
   request-pending: "フォロー許可待ち"
+  follow-processing: "フォロー処理中"
   follow-request: "フォロー申請"
 
 desktop/views/components/followers-window.vue:
@@ -1232,6 +1234,7 @@ mobile/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"
   request-pending: "フォロー許可待ち"
+  follow-processing: "フォロー処理中"
   follow-request: "フォロー申請"
 
 mobile/views/components/friends-maker.vue:
diff --git a/src/client/app/common/views/pages/follow.vue b/src/client/app/common/views/pages/follow.vue
index cb4785f468..92f24fb538 100644
--- a/src/client/app/common/views/pages/follow.vue
+++ b/src/client/app/common/views/pages/follow.vue
@@ -19,7 +19,8 @@
 			@click="onClick"
 			:disabled="followWait">
 		<template v-if="!followWait">
-			<template v-if="user.hasPendingFollowRequestFromYou">%fa:hourglass-half% %i18n:@request-pending%</template>
+			<template v-if="user.hasPendingFollowRequestFromYou && user.isLocked">%fa:hourglass-half% %i18n:@request-pending%</template>
+			<template v-else-if="user.hasPendingFollowRequestFromYou && !user.isLocked">%fa:hourglass-start% %i18n:@follow-processing%</template>
 			<template v-else-if="user.isFollowing">%fa:minus% %i18n:@following%</template>
 			<template v-else-if="!user.isFollowing && user.isLocked">%fa:plus% %i18n:@follow-request%</template>
 			<template v-else-if="!user.isFollowing && !user.isLocked">%fa:plus% %i18n:@follow%</template>
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 45e63ad928..4d4bd5cc5a 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -5,7 +5,8 @@
 	:disabled="wait"
 >
 	<template v-if="!wait">
-		<template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half%<template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
+		<template v-if="u.hasPendingFollowRequestFromYou && u.isLocked">%fa:hourglass-half%<template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
+		<template v-else-if="u.hasPendingFollowRequestFromYou && !u.isLocked">%fa:hourglass-start%<template v-if="size == 'big'"> %i18n:@follow-processing%</template></template>
 		<template v-else-if="u.isFollowing">%fa:minus%<template v-if="size == 'big'"> %i18n:@following%</template></template>
 		<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow-request%</template></template>
 		<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow%</template></template>
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index cff830d998..aea2d285e4 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -5,7 +5,8 @@
 	:disabled="wait"
 >
 	<template v-if="!wait">
-		<template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half% %i18n:@request-pending%</template>
+		<template v-if="u.hasPendingFollowRequestFromYou && u.isLocked">%fa:hourglass-half% %i18n:@request-pending%</template>
+		<template v-else-if="u.hasPendingFollowRequestFromYou && !u.isLocked">%fa:hourglass-start% %i18n:@follow-processing%</template>
 		<template v-else-if="u.isFollowing">%fa:minus% %i18n:@following%</template>
 		<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus% %i18n:@follow-request%</template>
 		<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus% %i18n:@follow%</template>
-- 
cgit v1.2.3-freya


From 6b96bd01854ecfb7b0ee816831ff4634af8af856 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 2 Oct 2018 16:04:31 +0900
Subject: テーマに関して強化
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                     |   2 +
 src/client/app/app.vue                           |   3 -
 src/client/app/boot.js                           |   1 -
 src/client/app/common/views/components/theme.vue | 103 +++++++----
 src/client/app/init.ts                           |  11 +-
 src/client/app/theme.ts                          |  62 +++----
 src/client/theme/dark.json                       | 204 ----------------------
 src/client/theme/dark.json5                      | 207 +++++++++++++++++++++++
 src/client/theme/halloween.json                  |  17 --
 src/client/theme/halloween.json5                 |  21 +++
 src/client/theme/light.json                      | 204 ----------------------
 src/client/theme/light.json5                     | 207 +++++++++++++++++++++++
 src/client/theme/pink.json                       |  17 --
 src/client/theme/pink.json5                      |  20 +++
 webpack.config.ts                                |   3 +
 15 files changed, 569 insertions(+), 513 deletions(-)
 delete mode 100644 src/client/theme/dark.json
 create mode 100644 src/client/theme/dark.json5
 delete mode 100644 src/client/theme/halloween.json
 create mode 100644 src/client/theme/halloween.json5
 delete mode 100644 src/client/theme/light.json
 create mode 100644 src/client/theme/light.json5
 delete mode 100644 src/client/theme/pink.json
 create mode 100644 src/client/theme/pink.json5

(limited to 'src/client')

diff --git a/package.json b/package.json
index 17603790f0..c12b8861c6 100644
--- a/package.json
+++ b/package.json
@@ -134,6 +134,8 @@
 		"is-url": "1.2.4",
 		"js-yaml": "3.12.0",
 		"jsdom": "11.12.0",
+		"json5": "2.1.0",
+		"json5-loader": "1.0.1",
 		"koa": "2.5.1",
 		"koa-bodyparser": "4.2.1",
 		"koa-compress": "3.0.0",
diff --git a/src/client/app/app.vue b/src/client/app/app.vue
index 778e9f29cf..e639c9f9ac 100644
--- a/src/client/app/app.vue
+++ b/src/client/app/app.vue
@@ -5,9 +5,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import { url, lang } from './config';
-import applyTheme from './common/scripts/theme';
-const darkTheme = require('../theme/dark');
-const halloweenTheme = require('../theme/halloween');
 
 export default Vue.extend({
 	computed: {
diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index e122e0423a..6e06a88aa3 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -24,7 +24,6 @@
 	const theme = localStorage.getItem('theme');
 	if (theme) {
 		Object.entries(JSON.parse(theme)).forEach(([k, v]) => {
-			if (k == 'meta') return;
 			document.documentElement.style.setProperty(`--${k}`, v.toString());
 		});
 	}
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 56b07da498..293238e542 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -3,14 +3,14 @@
 	<label>
 		<span>%i18n:@light-theme%</span>
 		<ui-select v-model="light" placeholder="%i18n:@light-theme%">
-			<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+			<option v-for="x in themes" :value="x.id" :key="x.id">{{ x.name }}</option>
 		</ui-select>
 	</label>
 
 	<label>
 		<span>%i18n:@dark-theme%</span>
 		<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
-			<option v-for="x in themes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+			<option v-for="x in themes" :value="x.id" :key="x.id">{{ x.name }}</option>
 		</ui-select>
 	</label>
 
@@ -53,7 +53,7 @@
 	<details>
 		<summary>%i18n:@installed-themes%</summary>
 		<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%">
-			<option v-for="x in installedThemes" :value="x.meta.id" :key="x.meta.id">{{ x.meta.name }}</option>
+			<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 		</ui-select>
 		<ui-textarea readonly :value="selectedInstalledThemeCode">
 			<span>%i18n:@theme-code%</span>
@@ -65,10 +65,25 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { lightTheme, darkTheme, builtinThemes, applyTheme } from '../../../theme';
+import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../theme';
 import { Chrome } from 'vue-color';
 import * as uuid from 'uuid';
 import * as tinycolor from 'tinycolor2';
+import * as JSON5 from 'json5';
+
+// 後方互換性のため
+function convertOldThemedefinition(t) {
+	const t2 = {
+		id: t.meta.id,
+		name: t.meta.name,
+		author: t.meta.author,
+		base: t.meta.base,
+		vars: t.meta.vars,
+		props: t
+	};
+	delete t2.props.meta;
+	return t2;
+}
 
 export default Vue.extend({
 	components: {
@@ -81,18 +96,18 @@ export default Vue.extend({
 			selectedInstalledTheme: null,
 			myThemeBase: 'light',
 			myThemeName: '',
-			myThemePrimary: lightTheme.meta.vars.primary,
-			myThemeSecondary: lightTheme.meta.vars.secondary,
-			myThemeText: lightTheme.meta.vars.text
+			myThemePrimary: lightTheme.vars.primary,
+			myThemeSecondary: lightTheme.vars.secondary,
+			myThemeText: lightTheme.vars.text
 		};
 	},
 
 	computed: {
-		themes(): any {
+		themes(): Theme[] {
 			return this.$store.state.device.themes.concat(builtinThemes);
 		},
 
-		installedThemes(): any {
+		installedThemes(): Theme[] {
 			return this.$store.state.device.themes;
 		},
 
@@ -108,20 +123,18 @@ export default Vue.extend({
 
 		selectedInstalledThemeCode() {
 			if (this.selectedInstalledTheme == null) return null;
-			return JSON.stringify(this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme));
+			return JSON5.stringify(this.installedThemes.find(x => x.id == this.selectedInstalledTheme), null, '\t');
 		},
 
 		myTheme(): any {
 			return {
-				meta: {
-					name: this.myThemeName,
-					author: this.$store.state.i.name,
-					base: this.myThemeBase,
-					vars: {
-						primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
-						secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
-						text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
-					}
+				name: this.myThemeName,
+				author: this.$store.state.i.name,
+				base: this.myThemeBase,
+				vars: {
+					primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
+					secondary: tinycolor(typeof this.myThemeSecondary == 'string' ? this.myThemeSecondary : this.myThemeSecondary.rgba).toRgbString(),
+					text: tinycolor(typeof this.myThemeText == 'string' ? this.myThemeText : this.myThemeText.rgba).toRgbString()
 				}
 			};
 		}
@@ -130,37 +143,67 @@ export default Vue.extend({
 	watch: {
 		myThemeBase(v) {
 			const theme = v == 'light' ? lightTheme : darkTheme;
-			this.myThemePrimary = theme.meta.vars.primary;
-			this.myThemeSecondary = theme.meta.vars.secondary;
-			this.myThemeText = theme.meta.vars.text;
+			this.myThemePrimary = theme.vars.primary;
+			this.myThemeSecondary = theme.vars.secondary;
+			this.myThemeText = theme.vars.text;
 		}
 	},
 
+	beforeCreate() {
+		// migrate old theme definitions
+		// 後方互換性のため
+		this.$store.commit('device/set', {
+			key: 'themes', value: this.$store.state.device.themes.map(t => {
+				if (t.id == null) {
+					return convertOldThemedefinition(t);
+				} else {
+					return t;
+				}
+			})
+		});
+	},
+
 	methods: {
 		install() {
-			const theme = JSON.parse(this.installThemeCode);
-			if (theme.meta == null || theme.meta.id == null) {
+			let theme;
+
+			try {
+				theme = JSON5.parse(this.installThemeCode);
+			} catch (e) {
 				alert('%i18n:@invalid-theme%');
 				return;
 			}
-			if (this.$store.state.device.themes.some(t => t.meta.id == theme.meta.id)) {
+
+			// 後方互換性のため
+			if (theme.id == null && theme.meta != null) {
+				theme = convertOldThemedefinition(theme);
+			}
+
+			if (theme.id == null) {
+				alert('%i18n:@invalid-theme%');
+				return;
+			}
+
+			if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
 				alert('%i18n:@already-installed%');
 				return;
 			}
+
 			const themes = this.$store.state.device.themes.concat(theme);
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
-			alert('%i18n:@installed%'.replace('{}', theme.meta.name));
+
+			alert('%i18n:@installed%'.replace('{}', theme.name));
 		},
 
 		uninstall() {
-			const theme = this.installedThemes.find(x => x.meta.id == this.selectedInstalledTheme);
-			const themes = this.$store.state.device.themes.filter(t => t.meta.id != theme.meta.id);
+			const theme = this.installedThemes.find(x => x.id == this.selectedInstalledTheme);
+			const themes = this.$store.state.device.themes.filter(t => t.id != theme.id);
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
 			});
-			alert('%i18n:@uninstalled%'.replace('{}', theme.meta.name));
+			alert('%i18n:@uninstalled%'.replace('{}', theme.name));
 		},
 
 		preview() {
@@ -169,7 +212,7 @@ export default Vue.extend({
 
 		gen() {
 			const theme = this.myTheme;
-			theme.meta.id = uuid();
+			theme.id = uuid();
 			const themes = this.$store.state.device.themes.concat(theme);
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index 802f7b42eb..c2381067da 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -14,8 +14,7 @@ import App from './app.vue';
 import checkForUpdate from './common/scripts/check-for-update';
 import MiOS, { API } from './mios';
 import { version, codename, lang } from './config';
-import { builtinThemes, applyTheme } from './theme';
-const lightTheme = require('../theme/light.json');
+import { builtinThemes, lightTheme, applyTheme } from './theme';
 
 if (localStorage.getItem('theme') == null) {
 	applyTheme(lightTheme);
@@ -97,15 +96,15 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 				return s.device.darkmode;
 			}, v => {
 				const themes = os.store.state.device.themes.concat(builtinThemes);
-				const dark = themes.find(t => t.meta.id == os.store.state.device.darkTheme);
-				const light = themes.find(t => t.meta.id == os.store.state.device.lightTheme);
+				const dark = themes.find(t => t.id == os.store.state.device.darkTheme);
+				const light = themes.find(t => t.id == os.store.state.device.lightTheme);
 				applyTheme(v ? dark : light);
 			});
 			os.store.watch(s => {
 				return s.device.lightTheme;
 			}, v => {
 				const themes = os.store.state.device.themes.concat(builtinThemes);
-				const theme = themes.find(t => t.meta.id == v);
+				const theme = themes.find(t => t.id == v);
 				if (!os.store.state.device.darkmode) {
 					applyTheme(theme);
 				}
@@ -114,7 +113,7 @@ export default (callback: (launch: (router: VueRouter, api?: (os: MiOS) => API)
 				return s.device.darkTheme;
 			}, v => {
 				const themes = os.store.state.device.themes.concat(builtinThemes);
-				const theme = themes.find(t => t.meta.id == v);
+				const theme = themes.find(t => t.id == v);
 				if (os.store.state.device.darkmode) {
 					applyTheme(theme);
 				}
diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
index 555f8411f2..828ce33862 100644
--- a/src/client/app/theme.ts
+++ b/src/client/app/theme.ts
@@ -1,27 +1,40 @@
 import * as tinycolor from 'tinycolor2';
 
-type Theme = {
-	meta: {
-		id: string;
-		name: string;
-		author: string;
-		base?: string;
-		vars: any;
-	};
-} & {
-	[key: string]: string;
+export type Theme = {
+	id: string;
+	name: string;
+	author: string;
+	desc?: string;
+	base?: 'dark' | 'light';
+	vars: { [key: string]: string };
+	props: { [key: string]: string };
 };
 
+export const lightTheme: Theme = require('../theme/light.json5');
+export const darkTheme: Theme = require('../theme/dark.json5');
+export const pinkTheme: Theme = require('../theme/pink.json5');
+export const halloweenTheme: Theme = require('../theme/halloween.json5');
+
+export const builtinThemes = [
+	lightTheme,
+	darkTheme,
+	pinkTheme,
+	halloweenTheme
+];
+
 export function applyTheme(theme: Theme, persisted = true) {
-	if (theme.meta.base) {
-		const base = [lightTheme, darkTheme].find(x => x.meta.id == theme.meta.base);
-		theme = Object.assign({}, base, theme);
+	// Deep copy
+	const _theme = JSON.parse(JSON.stringify(theme));
+
+	if (_theme.base) {
+		const base = [lightTheme, darkTheme].find(x => x.id == _theme.base);
+		_theme.vars = Object.assign({}, base.vars, _theme.vars);
+		_theme.props = Object.assign({}, base.props, _theme.props);
 	}
 
-	const props = compile(theme);
+	const props = compile(_theme);
 
 	Object.entries(props).forEach(([k, v]) => {
-		if (k == 'meta') return;
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	});
 
@@ -34,10 +47,10 @@ function compile(theme: Theme): { [key: string]: string } {
 	function getColor(code: string): tinycolor.Instance {
 		// ref
 		if (code[0] == '@') {
-			return getColor(theme[code.substr(1)]);
+			return getColor(theme.props[code.substr(1)]);
 		}
 		if (code[0] == '$') {
-			return getColor(theme.meta.vars[code.substr(1)]);
+			return getColor(theme.vars[code.substr(1)]);
 		}
 
 		// func
@@ -59,8 +72,7 @@ function compile(theme: Theme): { [key: string]: string } {
 
 	const props = {};
 
-	Object.entries(theme).forEach(([k, v]) => {
-		if (k == 'meta') return;
+	Object.entries(theme.props).forEach(([k, v]) => {
 		const c = getColor(v);
 		props[k] = genValue(c);
 	});
@@ -88,15 +100,3 @@ function compile(theme: Theme): { [key: string]: string } {
 function genValue(c: tinycolor.Instance): string {
 	return c.toRgbString();
 }
-
-export const lightTheme = require('../theme/light.json');
-export const darkTheme = require('../theme/dark.json');
-export const pinkTheme = require('../theme/pink.json');
-export const halloweenTheme = require('../theme/halloween.json');
-
-export const builtinThemes = [
-	lightTheme,
-	darkTheme,
-	pinkTheme,
-	halloweenTheme
-];
diff --git a/src/client/theme/dark.json b/src/client/theme/dark.json
deleted file mode 100644
index 74447b8f2f..0000000000
--- a/src/client/theme/dark.json
+++ /dev/null
@@ -1,204 +0,0 @@
-{
-	"meta": {
-		"id": "dark",
-		"name": "Dark",
-		"author": "syuilo",
-		"vars": {
-			"primary": "#fb4e4e",
-			"secondary": "#282C37",
-			"text": "#d6dae0"
-		}
-	},
-
-	"primary": "$primary",
-	"primaryForeground": "#fff",
-	"secondary": "$secondary",
-	"bg": ":darken<8<$secondary",
-	"text": "$text",
-
-	"scrollbarTrack": ":darken<5<$secondary",
-	"scrollbarHandle": ":lighten<5<$secondary",
-	"scrollbarHandleHover": ":lighten<10<$secondary",
-
-	"face": "$secondary",
-	"faceText": "#fff",
-	"faceHeader": ":lighten<5<$secondary",
-	"faceHeaderText": "#e3e5e8",
-	"faceDivider": "rgba(0, 0, 0, 0.3)",
-	"faceTextButton": "#9baec8",
-	"faceTextButtonHover": "#b2c1d5",
-	"faceTextButtonActive": "#b2c1d5",
-	"faceClearButtonHover": "rgba(0, 0, 0, 0.1)",
-	"faceClearButtonActive": "rgba(0, 0, 0, 0.2)",
-	"popupBg": ":lighten<5<$secondary",
-	"popupFg": "#d6dce2",
-
-	"subNoteBg": "rgba(0, 0, 0, 0.18)",
-	"subNoteText": ":alpha<0.7<$text",
-	"renoteGradient": "#314027",
-	"renoteText": "#9dbb00",
-	"quoteBorder": "#4e945e",
-	"noteText": "#fff",
-	"noteHeaderName": "#fff",
-	"noteHeaderBadgeFg": "#758188",
-	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.25)",
-	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#5d282e",
-	"noteHeaderAcct": "#606984",
-	"noteHeaderInfo": "#606984",
-
-	"noteActions": "#606984",
-	"noteActionsHover": "#a1a8bf",
-	"noteActionsReplyHover": "#0af",
-	"noteActionsRenoteHover": "#8d0",
-	"noteActionsReactionHover": "#fa0",
-	"noteActionsHighlighted": "#707b97",
-
-	"noteAttachedFile": "rgba(255, 255, 255, 0.1)",
-
-	"modalBackdrop": "rgba(0, 0, 0, 0.5)",
-
-	"dateDividerBg": ":darken<2<$secondary",
-	"dateDividerFg": ":alpha<0.7<$text",
-
-	"switchTrack": "rgba(255, 255, 255, 0.15)",
-	"radioBorder": "rgba(255, 255, 255, 0.6)",
-	"inputBorder": "rgba(255, 255, 255, 0.7)",
-	"inputLabel": "rgba(255, 255, 255, 0.7)",
-	"inputText": "#fff",
-
-	"buttonBg": "rgba(255, 255, 255, 0.05)",
-	"buttonHoverBg": "rgba(255, 255, 255, 0.1)",
-	"buttonActiveBg": "rgba(255, 255, 255, 0.15)",
-
-	"autocompleteItemHoverBg": "rgba(255, 255, 255, 0.1)",
-	"autocompleteItemText": "rgba(255, 255, 255, 0.8)",
-	"autocompleteItemTextSub": "rgba(255, 255, 255, 0.3)",
-
-	"cwButtonBg": "#687390",
-	"cwButtonFg": "#393f4f",
-	"cwButtonHoverBg": "#707b97",
-
-	"reactionPickerButtonHoverBg": "rgba(255, 255, 255, 0.18)",
-
-	"reactionViewerBorder": "rgba(255, 255, 255, 0.1)",
-
-	"pollEditorInputBg": "rgba(0, 0, 0, 0.25)",
-
-	"pollChoiceText": "#fff",
-	"pollChoiceBorder": "rgba(255, 255, 255, 0.1)",
-
-	"urlPreviewBorder": "rgba(0, 0, 0, 0.4)",
-	"urlPreviewBorderHover": "rgba(255, 255, 255, 0.2)",
-	"urlPreviewTitle": "$text",
-	"urlPreviewText": ":alpha<0.7<$text",
-	"urlPreviewInfo": ":alpha<0.8<$text",
-
-	"calendarWeek": "#43d5dc",
-	"calendarSaturdayOrSunday": "#ff6679",
-	"calendarDay": "#c5ced6",
-
-	"materBg": "rgba(0, 0, 0, 0.3)",
-
-	"chartCaption": ":alpha<0.6<$text",
-
-	"announcementsBg": "#253a50",
-	"announcementsTitle": "#539eff",
-	"announcementsText": "#fff",
-
-	"donationBg": "#5d5242",
-	"donationFg": "#e4dbce",
-
-	"googleSearchBg": "rgba(0, 0, 0, 0.2)",
-	"googleSearchFg": "#dee4e8",
-	"googleSearchBorder": "rgba(255, 255, 255, 0.2)",
-	"googleSearchHoverBorder": "rgba(255, 255, 255, 0.3)",
-	"googleSearchHoverButton": "rgba(255, 255, 255, 0.1)",
-
-	"mfmTitleBg": "rgba(0, 0, 0, 0.2)",
-	"mfmQuote": ":alpha<0.7<$text",
-	"mfmQuoteLine": ":alpha<0.6<$text",
-
-	"suspendedInfoBg": "#611d1d",
-	"suspendedInfoFg": "#ffb4b4",
-	"remoteInfoBg": "#42321c",
-	"remoteInfoFg": "#ffbd3e",
-
-	"messagingRoomBg": "@bg",
-	"messagingRoomInfo": "#fff",
-	"messagingRoomDateDividerLine": "rgba(255, 255, 255, 0.1)",
-	"messagingRoomDateDividerText": "rgba(255, 255, 255, 0.3)",
-	"messagingRoomMessageInfo": "rgba(255, 255, 255, 0.4)",
-	"messagingRoomMessageBg": "$secondary",
-	"messagingRoomMessageFg": "#fff",
-
-	"formButtonBorder": "rgba(255, 255, 255, 0.1)",
-	"formButtonHoverBg": ":alpha<0.2<$primary",
-	"formButtonHoverBorder": ":alpha<0.5<$primary",
-	"formButtonActiveBg": ":alpha<0.12<$primary",
-
-	"desktopHeaderBg": ":lighten<5<$secondary",
-	"desktopHeaderFg": "$text",
-	"desktopHeaderHoverFg": "#fff",
-	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.1)",
-	"desktopHeaderSearchHoverBg": "rgba(255, 255, 255, 0.04)",
-	"desktopHeaderSearchFg": "#fff",
-	"desktopNotificationBg": ":alpha<0.9<$secondary",
-	"desktopNotificationFg": ":alpha<0.7<$text",
-	"desktopNotificationShadow": "rgba(0, 0, 0, 0.4)",
-	"desktopPostFormBg": "@face",
-	"desktopPostFormTextareaBg": "rgba(0, 0, 0, 0.25)",
-	"desktopPostFormTextareaFg": "#fff",
-	"desktopPostFormTransparentButtonFg": "$primary",
-	"desktopPostFormTransparentButtonActiveGradientStart": ":darken<8<$secondary",
-	"desktopPostFormTransparentButtonActiveGradientEnd": ":darken<3<$secondary",
-	"desktopRenoteFormFooter": ":lighten<5<$secondary",
-	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.15)",
-	"desktopTimelineSrc": "@faceTextButton",
-	"desktopTimelineSrcHover": "@faceTextButtonHover",
-	"desktopWindowTitle": "@faceHeaderText",
-	"desktopWindowShadow": "rgba(0, 0, 0, 0.5)",
-	"desktopDriveBg": "@bg",
-	"desktopDriveFolderBg": ":alpha<0.2<$primary",
-	"desktopDriveFolderHoverBg": ":alpha<0.3<$primary",
-	"desktopDriveFolderActiveBg": ":alpha<0.3<:darken<10<$primary",
-	"desktopDriveFolderFg": "#fff",
-	"desktopSettingsNavItem": ":alpha<0.8<$text",
-	"desktopSettingsNavItemHover": ":lighten<10<$text",
-
-	"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.25)",
-
-	"mobileHeaderBg": ":lighten<5<$secondary",
-	"mobileHeaderFg": "$text",
-	"mobileNavBackdrop": "rgba(0, 0, 0, 0.7)",
-	"mobilePostFormDivider": "rgba(0, 0, 0, 0.2)",
-	"mobilePostFormTextareaBg": "rgba(0, 0, 0, 0.3)",
-	"mobileDriveNavBg": ":alpha<0.75<$secondary",
-	"mobileHomeTlItemHover": "rgba(255, 255, 255, 0.1)",
-	"mobileUserPageName": "#fff",
-	"mobileUserPageAcct": "$text",
-	"mobileUserPageDescription": "$text",
-	"mobileUserPageFollowedBg": "rgba(0, 0, 0, 0.3)",
-	"mobileUserPageFollowedFg": "$text",
-	"mobileUserPageStatusHighlight": "#fff",
-	"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.3)",
-	"mobileAnnouncement": "rgba(30, 129, 216, 0.2)",
-	"mobileAnnouncementFg": "#fff",
-	"mobileSignedInAsBg": "#273c34",
-	"mobileSignedInAsFg": "#49ab63",
-	"mobileSignoutBg": "#652222",
-	"mobileSignoutFg": "#ff5f56",
-
-	"reversiBannerGradientStart": "#45730e",
-	"reversiBannerGradientEnd": "#464300",
-	"reversiDescBg": "rgba(255, 255, 255, 0.1)",
-	"reversiListItemShadow": "rgba(0, 0, 0, 0.7)",
-	"reversiMapSelectBorder": "rgba(255, 255, 255, 0.1)",
-	"reversiMapSelectHoverBorder": "rgba(255, 255, 255, 0.2)",
-	"reversiRoomFormShadow": "rgba(0, 0, 0, 0.7)",
-	"reversiRoomFooterBg": ":alpha<0.9<$secondary",
-	"reversiGameHeaderLine": ":alpha<0.5<$secondary",
-	"reversiGameEmptyCell": ":lighten<2<$secondary",
-	"reversiGameEmptyCellMyTurn": ":lighten<5<$secondary",
-	"reversiGameEmptyCellCanPut": ":lighten<4<$secondary"
-}
diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
new file mode 100644
index 0000000000..2042bd7931
--- /dev/null
+++ b/src/client/theme/dark.json5
@@ -0,0 +1,207 @@
+{
+	id: 'dark',
+
+	name: 'Dark',
+	author: 'syuilo',
+	desc: 'Default dark theme',
+
+	vars: {
+		primary: '#fb4e4e',
+		secondary: '#282C37',
+		text: '#d6dae0',
+	},
+
+	props: {
+		primary: '$primary',
+		primaryForeground: '#fff',
+		secondary: '$secondary',
+		bg: ':darken<8<$secondary',
+		text: '$text',
+
+		scrollbarTrack: ':darken<5<$secondary',
+		scrollbarHandle: ':lighten<5<$secondary',
+		scrollbarHandleHover: ':lighten<10<$secondary',
+
+		face: '$secondary',
+		faceText: '#fff',
+		faceHeader: ':lighten<5<$secondary',
+		faceHeaderText: '#e3e5e8',
+		faceDivider: 'rgba(0, 0, 0, 0.3)',
+		faceTextButton: '$text',
+		faceTextButtonHover: ':lighten<10<$text',
+		faceTextButtonActive: ':darken<10<$text',
+		faceClearButtonHover: 'rgba(0, 0, 0, 0.1)',
+		faceClearButtonActive: 'rgba(0, 0, 0, 0.2)',
+		popupBg: ':lighten<5<$secondary',
+		popupFg: '#d6dce2',
+
+		subNoteBg: 'rgba(0, 0, 0, 0.18)',
+		subNoteText: ':alpha<0.7<$text',
+		renoteGradient: '#314027',
+		renoteText: '#9dbb00',
+		quoteBorder: '#4e945e',
+		noteText: '#fff',
+		noteHeaderName: '#fff',
+		noteHeaderBadgeFg: '#758188',
+		noteHeaderBadgeBg: 'rgba(0, 0, 0, 0.25)',
+		noteHeaderAdminFg: '#f15f71',
+		noteHeaderAdminBg: '#5d282e',
+		noteHeaderAcct: '#606984',
+		noteHeaderInfo: '#606984',
+
+		noteActions: '#606984',
+		noteActionsHover: '#a1a8bf',
+		noteActionsReplyHover: '#0af',
+		noteActionsRenoteHover: '#8d0',
+		noteActionsReactionHover: '#fa0',
+		noteActionsHighlighted: '#707b97',
+
+		noteAttachedFile: 'rgba(255, 255, 255, 0.1)',
+
+		modalBackdrop: 'rgba(0, 0, 0, 0.5)',
+
+		dateDividerBg: ':darken<2<$secondary',
+		dateDividerFg: ':alpha<0.7<$text',
+
+		switchTrack: 'rgba(255, 255, 255, 0.15)',
+		radioBorder: 'rgba(255, 255, 255, 0.6)',
+		inputBorder: 'rgba(255, 255, 255, 0.7)',
+		inputLabel: 'rgba(255, 255, 255, 0.7)',
+		inputText: '#fff',
+
+		buttonBg: 'rgba(255, 255, 255, 0.05)',
+		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+		buttonActiveBg: 'rgba(255, 255, 255, 0.15)',
+
+		autocompleteItemHoverBg: 'rgba(255, 255, 255, 0.1)',
+		autocompleteItemText: 'rgba(255, 255, 255, 0.8)',
+		autocompleteItemTextSub: 'rgba(255, 255, 255, 0.3)',
+
+		cwButtonBg: '#687390',
+		cwButtonFg: '#393f4f',
+		cwButtonHoverBg: '#707b97',
+
+		reactionPickerButtonHoverBg: 'rgba(255, 255, 255, 0.18)',
+
+		reactionViewerBorder: 'rgba(255, 255, 255, 0.1)',
+
+		pollEditorInputBg: 'rgba(0, 0, 0, 0.25)',
+
+		pollChoiceText: '#fff',
+		pollChoiceBorder: 'rgba(255, 255, 255, 0.1)',
+
+		urlPreviewBorder: 'rgba(0, 0, 0, 0.4)',
+		urlPreviewBorderHover: 'rgba(255, 255, 255, 0.2)',
+		urlPreviewTitle: '$text',
+		urlPreviewText: ':alpha<0.7<$text',
+		urlPreviewInfo: ':alpha<0.8<$text',
+
+		calendarWeek: '#43d5dc',
+		calendarSaturdayOrSunday: '#ff6679',
+		calendarDay: '#c5ced6',
+
+		materBg: 'rgba(0, 0, 0, 0.3)',
+
+		chartCaption: ':alpha<0.6<$text',
+
+		announcementsBg: '#253a50',
+		announcementsTitle: '#539eff',
+		announcementsText: '#fff',
+
+		donationBg: '#5d5242',
+		donationFg: '#e4dbce',
+
+		googleSearchBg: 'rgba(0, 0, 0, 0.2)',
+		googleSearchFg: '#dee4e8',
+		googleSearchBorder: 'rgba(255, 255, 255, 0.2)',
+		googleSearchHoverBorder: 'rgba(255, 255, 255, 0.3)',
+		googleSearchHoverButton: 'rgba(255, 255, 255, 0.1)',
+
+		mfmTitleBg: 'rgba(0, 0, 0, 0.2)',
+		mfmQuote: ':alpha<0.7<$text',
+		mfmQuoteLine: ':alpha<0.6<$text',
+
+		suspendedInfoBg: '#611d1d',
+		suspendedInfoFg: '#ffb4b4',
+		remoteInfoBg: '#42321c',
+		remoteInfoFg: '#ffbd3e',
+
+		messagingRoomBg: '@bg',
+		messagingRoomInfo: '#fff',
+		messagingRoomDateDividerLine: 'rgba(255, 255, 255, 0.1)',
+		messagingRoomDateDividerText: 'rgba(255, 255, 255, 0.3)',
+		messagingRoomMessageInfo: 'rgba(255, 255, 255, 0.4)',
+		messagingRoomMessageBg: '$secondary',
+		messagingRoomMessageFg: '#fff',
+
+		formButtonBorder: 'rgba(255, 255, 255, 0.1)',
+		formButtonHoverBg: ':alpha<0.2<$primary',
+		formButtonHoverBorder: ':alpha<0.5<$primary',
+		formButtonActiveBg: ':alpha<0.12<$primary',
+
+		desktopHeaderBg: ':lighten<5<$secondary',
+		desktopHeaderFg: '$text',
+		desktopHeaderHoverFg: '#fff',
+		desktopHeaderSearchBg: 'rgba(0, 0, 0, 0.1)',
+		desktopHeaderSearchHoverBg: 'rgba(255, 255, 255, 0.04)',
+		desktopHeaderSearchFg: '#fff',
+		desktopNotificationBg: ':alpha<0.9<$secondary',
+		desktopNotificationFg: ':alpha<0.7<$text',
+		desktopNotificationShadow: 'rgba(0, 0, 0, 0.4)',
+		desktopPostFormBg: '@face',
+		desktopPostFormTextareaBg: 'rgba(0, 0, 0, 0.25)',
+		desktopPostFormTextareaFg: '#fff',
+		desktopPostFormTransparentButtonFg: '$primary',
+		desktopPostFormTransparentButtonActiveGradientStart: ':darken<8<$secondary',
+		desktopPostFormTransparentButtonActiveGradientEnd: ':darken<3<$secondary',
+		desktopRenoteFormFooter: ':lighten<5<$secondary',
+		desktopTimelineHeaderShadow: 'rgba(0, 0, 0, 0.15)',
+		desktopTimelineSrc: '@faceTextButton',
+		desktopTimelineSrcHover: '@faceTextButtonHover',
+		desktopWindowTitle: '@faceHeaderText',
+		desktopWindowShadow: 'rgba(0, 0, 0, 0.5)',
+		desktopDriveBg: '@bg',
+		desktopDriveFolderBg: ':alpha<0.2<$primary',
+		desktopDriveFolderHoverBg: ':alpha<0.3<$primary',
+		desktopDriveFolderActiveBg: ':alpha<0.3<:darken<10<$primary',
+		desktopDriveFolderFg: '#fff',
+		desktopSettingsNavItem: ':alpha<0.8<$text',
+		desktopSettingsNavItemHover: ':lighten<10<$text',
+
+		deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.25)',
+
+		mobileHeaderBg: ':lighten<5<$secondary',
+		mobileHeaderFg: '$text',
+		mobileNavBackdrop: 'rgba(0, 0, 0, 0.7)',
+		mobilePostFormDivider: 'rgba(0, 0, 0, 0.2)',
+		mobilePostFormTextareaBg: 'rgba(0, 0, 0, 0.3)',
+		mobileDriveNavBg: ':alpha<0.75<$secondary',
+		mobileHomeTlItemHover: 'rgba(255, 255, 255, 0.1)',
+		mobileUserPageName: '#fff',
+		mobileUserPageAcct: '$text',
+		mobileUserPageDescription: '$text',
+		mobileUserPageFollowedBg: 'rgba(0, 0, 0, 0.3)',
+		mobileUserPageFollowedFg: '$text',
+		mobileUserPageStatusHighlight: '#fff',
+		mobileUserPageHeaderShadow: 'rgba(0, 0, 0, 0.3)',
+		mobileAnnouncement: 'rgba(30, 129, 216, 0.2)',
+		mobileAnnouncementFg: '#fff',
+		mobileSignedInAsBg: '#273c34',
+		mobileSignedInAsFg: '#49ab63',
+		mobileSignoutBg: '#652222',
+		mobileSignoutFg: '#ff5f56',
+
+		reversiBannerGradientStart: '#45730e',
+		reversiBannerGradientEnd: '#464300',
+		reversiDescBg: 'rgba(255, 255, 255, 0.1)',
+		reversiListItemShadow: 'rgba(0, 0, 0, 0.7)',
+		reversiMapSelectBorder: 'rgba(255, 255, 255, 0.1)',
+		reversiMapSelectHoverBorder: 'rgba(255, 255, 255, 0.2)',
+		reversiRoomFormShadow: 'rgba(0, 0, 0, 0.7)',
+		reversiRoomFooterBg: ':alpha<0.9<$secondary',
+		reversiGameHeaderLine: ':alpha<0.5<$secondary',
+		reversiGameEmptyCell: ':lighten<2<$secondary',
+		reversiGameEmptyCellMyTurn: ':lighten<5<$secondary',
+		reversiGameEmptyCellCanPut: ':lighten<4<$secondary',
+	},
+}
diff --git a/src/client/theme/halloween.json b/src/client/theme/halloween.json
deleted file mode 100644
index fb34db57a8..0000000000
--- a/src/client/theme/halloween.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-	"meta": {
-		"id": "42e4f09b-67d5-498c-af7d-29faa54745b0",
-		"name": "Halloween",
-		"author": "syuilo",
-		"base": "dark",
-		"vars": {
-			"primary": "#d67036",
-			"secondary": "#1f1d30",
-			"text": "#b1bee3"
-		}
-	},
-
-	"renoteGradient": "#5d2d1a",
-	"renoteText": "#ff6c00",
-	"quoteBorder": "#c3631c"
-}
diff --git a/src/client/theme/halloween.json5 b/src/client/theme/halloween.json5
new file mode 100644
index 0000000000..608105903a
--- /dev/null
+++ b/src/client/theme/halloween.json5
@@ -0,0 +1,21 @@
+{
+	id: '42e4f09b-67d5-498c-af7d-29faa54745b0',
+
+	name: 'Halloween',
+	author: 'syuilo',
+	desc: 'Hello, Happy Halloween!',
+
+	base: 'dark',
+
+	vars: {
+		primary: '#d67036',
+		secondary: '#1f1d30',
+		text: '#b1bee3',
+	},
+
+	props: {
+		renoteGradient: '#5d2d1a',
+		renoteText: '#ff6c00',
+		quoteBorder: '#c3631c',
+	},
+}
diff --git a/src/client/theme/light.json b/src/client/theme/light.json
deleted file mode 100644
index 0d50dc5caa..0000000000
--- a/src/client/theme/light.json
+++ /dev/null
@@ -1,204 +0,0 @@
-{
-	"meta": {
-		"id": "light",
-		"name": "Light",
-		"author": "syuilo",
-		"vars": {
-			"primary": "#fb4e4e",
-			"secondary": "#fff",
-			"text": "#666"
-		}
-	},
-
-	"primary": "$primary",
-	"primaryForeground": "#fff",
-	"secondary": "$secondary",
-	"bg": ":darken<8<$secondary",
-	"text": "$text",
-
-	"scrollbarTrack": "#fff",
-	"scrollbarHandle": "#00000033",
-	"scrollbarHandleHover": "#00000066",
-
-	"face": "$secondary",
-	"faceText": "#444",
-	"faceHeader": ":lighten<5<$secondary",
-	"faceHeaderText": "#888",
-	"faceDivider": "rgba(0, 0, 0, 0.082)",
-	"faceTextButton": "#ccc",
-	"faceTextButtonHover": "#aaa",
-	"faceTextButtonActive": "#999",
-	"faceClearButtonHover": "rgba(0, 0, 0, 0.025)",
-	"faceClearButtonActive": "rgba(0, 0, 0, 0.05)",
-	"popupBg": ":lighten<5<$secondary",
-	"popupFg": "#586069",
-
-	"subNoteBg": "rgba(0, 0, 0, 0.01)",
-	"subNoteText": ":alpha<0.7<$text",
-	"renoteGradient": "#edfde2",
-	"renoteText": "#9dbb00",
-	"quoteBorder": "#c0dac6",
-	"noteText": "#717171",
-	"noteHeaderName": ":darken<2<$text",
-	"noteHeaderBadgeFg": "#aaa",
-	"noteHeaderBadgeBg": "rgba(0, 0, 0, 0.05)",
-	"noteHeaderAdminFg": "#f15f71",
-	"noteHeaderAdminBg": "#ffdfdf",
-	"noteHeaderAcct": ":alpha<0.7<@noteHeaderName",
-	"noteHeaderInfo": ":alpha<0.7<@noteHeaderName",
-
-	"noteActions": ":alpha<0.3<$text",
-	"noteActionsHover": ":alpha<0.9<$text",
-	"noteActionsReplyHover": "#0af",
-	"noteActionsRenoteHover": "#8d0",
-	"noteActionsReactionHover": "#fa0",
-	"noteActionsHighlighted": "#888",
-
-	"noteAttachedFile": "rgba(0, 0, 0, 0.05)",
-
-	"modalBackdrop": "rgba(0, 0, 0, 0.1)",
-
-	"dateDividerBg": ":darken<2<$secondary",
-	"dateDividerFg": ":alpha<0.7<$text",
-
-	"switchTrack": "rgba(0, 0, 0, 0.25)",
-	"radioBorder": "rgba(0, 0, 0, 0.4)",
-	"inputBorder": "rgba(0, 0, 0, 0.42)",
-	"inputLabel": "rgba(0, 0, 0, 0.54)",
-	"inputText": "#000",
-
-	"buttonBg": "rgba(0, 0, 0, 0.05)",
-	"buttonHoverBg": "rgba(0, 0, 0, 0.1)",
-	"buttonActiveBg": "rgba(0, 0, 0, 0.15)",
-
-	"autocompleteItemHoverBg": "rgba(0, 0, 0, 0.1)",
-	"autocompleteItemText": "rgba(0, 0, 0, 0.8)",
-	"autocompleteItemTextSub": "rgba(0, 0, 0, 0.3)",
-
-	"cwButtonBg": "#b1b9c1",
-	"cwButtonFg": "#fff",
-	"cwButtonHoverBg": "#bbc4ce",
-
-	"reactionPickerButtonHoverBg": "#eee",
-
-	"reactionViewerBorder": "rgba(0, 0, 0, 0.1)",
-
-	"pollEditorInputBg": "#fff",
-
-	"pollChoiceText": "#000",
-	"pollChoiceBorder": "rgba(0, 0, 0, 0.1)",
-
-	"urlPreviewBorder": "rgba(0, 0, 0, 0.1)",
-	"urlPreviewBorderHover": "rgba(0, 0, 0, 0.2)",
-	"urlPreviewTitle": "$text",
-	"urlPreviewText": ":alpha<0.7<$text",
-	"urlPreviewInfo": ":alpha<0.8<$text",
-
-	"calendarWeek": "#19a2a9",
-	"calendarSaturdayOrSunday": "#ef95a0",
-	"calendarDay": "#777",
-
-	"materBg": "rgba(0, 0, 0, 0.1)",
-
-	"chartCaption": ":alpha<0.6<$text",
-
-	"announcementsBg": "#f3f9ff",
-	"announcementsTitle": "#4078c0",
-	"announcementsText": "#57616f",
-
-	"donationBg": "#fbead4",
-	"donationFg": "#777d71",
-
-	"googleSearchBg": "#fff",
-	"googleSearchFg": "#55595c",
-	"googleSearchBorder": "rgba(0, 0, 0, 0.2)",
-	"googleSearchHoverBorder": "rgba(0, 0, 0, 0.3)",
-	"googleSearchHoverButton": "rgba(0, 0, 0, 0.05)",
-
-	"mfmTitleBg": "rgba(0, 0, 0, 0.07)",
-	"mfmQuote": ":alpha<0.6<$text",
-	"mfmQuoteLine": ":alpha<0.5<$text",
-
-	"suspendedInfoBg": "#ffdbdb",
-	"suspendedInfoFg": "#570808",
-	"remoteInfoBg": "#fff0db",
-	"remoteInfoFg": "#573c08",
-
-	"messagingRoomBg": "#fff",
-	"messagingRoomInfo": "#000",
-	"messagingRoomDateDividerLine": "rgba(0, 0, 0, 0.1)",
-	"messagingRoomDateDividerText": "rgba(0, 0, 0, 0.3)",
-	"messagingRoomMessageInfo": "rgba(0, 0, 0, 0.4)",
-	"messagingRoomMessageBg": "#eee",
-	"messagingRoomMessageFg": "#333",
-
-	"formButtonBorder": "rgba(0, 0, 0, 0.1)",
-	"formButtonHoverBg": ":alpha<0.12<$primary",
-	"formButtonHoverBorder": ":alpha<0.3<$primary",
-	"formButtonActiveBg": ":alpha<0.12<$primary",
-
-	"desktopHeaderBg": ":lighten<5<$secondary",
-	"desktopHeaderFg": "$text",
-	"desktopHeaderHoverFg": "#7b8c88",
-	"desktopHeaderSearchBg": "rgba(0, 0, 0, 0.05)",
-	"desktopHeaderSearchHoverBg": "rgba(0, 0, 0, 0.08)",
-	"desktopHeaderSearchFg": "#000",
-	"desktopNotificationBg": ":alpha<0.9<$secondary",
-	"desktopNotificationFg": ":alpha<0.7<$text",
-	"desktopNotificationShadow": "rgba(0, 0, 0, 0.2)",
-	"desktopPostFormBg": ":lighten<33<$primary",
-	"desktopPostFormTextareaBg": "#fff",
-	"desktopPostFormTextareaFg": "#333",
-	"desktopPostFormTransparentButtonFg": ":alpha<0.5<$primary",
-	"desktopPostFormTransparentButtonActiveGradientStart": ":lighten<30<$primary",
-	"desktopPostFormTransparentButtonActiveGradientEnd": ":lighten<33<$primary",
-	"desktopRenoteFormFooter": ":lighten<33<$primary",
-	"desktopTimelineHeaderShadow": "rgba(0, 0, 0, 0.08)",
-	"desktopTimelineSrc": "#6f7477",
-	"desktopTimelineSrcHover": "#525a5f",
-	"desktopWindowTitle": "#666",
-	"desktopWindowShadow": "rgba(0, 0, 0, 0.2)",
-	"desktopDriveBg": "#fff",
-	"desktopDriveFolderBg": ":lighten<31<$primary",
-	"desktopDriveFolderHoverBg": ":lighten<27<$primary",
-	"desktopDriveFolderActiveBg": ":lighten<25<$primary",
-	"desktopDriveFolderFg": ":darken<10<$primary",
-	"desktopSettingsNavItem": ":alpha<0.8<$text",
-	"desktopSettingsNavItemHover": ":darken<10<$text",
-
-	"deckAcrylicColumnBg": "rgba(0, 0, 0, 0.1)",
-
-	"mobileHeaderBg": ":lighten<5<$secondary",
-	"mobileHeaderFg": "$text",
-	"mobileNavBackdrop": "rgba(0, 0, 0, 0.2)",
-	"mobilePostFormDivider": "rgba(0, 0, 0, 0.1)",
-	"mobilePostFormTextareaBg": "#fff",
-	"mobileDriveNavBg": ":alpha<0.75<$secondary",
-	"mobileHomeTlItemHover": "rgba(0, 0, 0, 0.05)",
-	"mobileUserPageName": "#757c82",
-	"mobileUserPageAcct": "#969ea5",
-	"mobileUserPageDescription": "#757c82",
-	"mobileUserPageFollowedBg": "#a7bec7",
-	"mobileUserPageFollowedFg": "#fff",
-	"mobileUserPageStatusHighlight": "#787e86",
-	"mobileUserPageHeaderShadow": "rgba(0, 0, 0, 0.07)",
-	"mobileAnnouncement": "rgba(155, 196, 232, 0.2)",
-	"mobileAnnouncementFg": "#3f4967",
-	"mobileSignedInAsBg": "#fcfff5",
-	"mobileSignedInAsFg": "#2c662d",
-	"mobileSignoutBg": "#fff6f5",
-	"mobileSignoutFg": "#cc2727",
-
-	"reversiBannerGradientStart": "#8bca3e",
-	"reversiBannerGradientEnd": "#d6cf31",
-	"reversiDescBg": "rgba(0, 0, 0, 0.1)",
-	"reversiListItemShadow": "rgba(0, 0, 0, 0.15)",
-	"reversiMapSelectBorder": "rgba(0, 0, 0, 0.1)",
-	"reversiMapSelectHoverBorder": "rgba(0, 0, 0, 0.2)",
-	"reversiRoomFormShadow": "rgba(0, 0, 0, 0.1)",
-	"reversiRoomFooterBg": ":alpha<0.9<$secondary",
-	"reversiGameHeaderLine": "#c4cdd4",
-	"reversiGameEmptyCell": "rgba(0, 0, 0, 0.06)",
-	"reversiGameEmptyCellMyTurn": "rgba(0, 0, 0, 0.12)",
-	"reversiGameEmptyCellCanPut": "rgba(0, 0, 0, 0.9)"
-}
diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
new file mode 100644
index 0000000000..1e795ee8c5
--- /dev/null
+++ b/src/client/theme/light.json5
@@ -0,0 +1,207 @@
+{
+	id: 'light',
+
+	name: 'Light',
+	author: 'syuilo',
+	desc: 'Default light theme',
+
+	vars: {
+		primary: '#fb4e4e',
+		secondary: '#fff',
+		text: '#666',
+	},
+
+	props: {
+		primary: '$primary',
+		primaryForeground: '#fff',
+		secondary: '$secondary',
+		bg: ':darken<8<$secondary',
+		text: '$text',
+
+		scrollbarTrack: '#fff',
+		scrollbarHandle: '#00000033',
+		scrollbarHandleHover: '#00000066',
+
+		face: '$secondary',
+		faceText: '#444',
+		faceHeader: ':lighten<5<$secondary',
+		faceHeaderText: '#888',
+		faceDivider: 'rgba(0, 0, 0, 0.082)',
+		faceTextButton: '#ccc',
+		faceTextButtonHover: '#aaa',
+		faceTextButtonActive: '#999',
+		faceClearButtonHover: 'rgba(0, 0, 0, 0.025)',
+		faceClearButtonActive: 'rgba(0, 0, 0, 0.05)',
+		popupBg: ':lighten<5<$secondary',
+		popupFg: '#586069',
+
+		subNoteBg: 'rgba(0, 0, 0, 0.01)',
+		subNoteText: ':alpha<0.7<$text',
+		renoteGradient: '#edfde2',
+		renoteText: '#9dbb00',
+		quoteBorder: '#c0dac6',
+		noteText: '#717171',
+		noteHeaderName: ':darken<2<$text',
+		noteHeaderBadgeFg: '#aaa',
+		noteHeaderBadgeBg: 'rgba(0, 0, 0, 0.05)',
+		noteHeaderAdminFg: '#f15f71',
+		noteHeaderAdminBg: '#ffdfdf',
+		noteHeaderAcct: ':alpha<0.7<@noteHeaderName',
+		noteHeaderInfo: ':alpha<0.7<@noteHeaderName',
+
+		noteActions: ':alpha<0.3<$text',
+		noteActionsHover: ':alpha<0.9<$text',
+		noteActionsReplyHover: '#0af',
+		noteActionsRenoteHover: '#8d0',
+		noteActionsReactionHover: '#fa0',
+		noteActionsHighlighted: '#888',
+
+		noteAttachedFile: 'rgba(0, 0, 0, 0.05)',
+
+		modalBackdrop: 'rgba(0, 0, 0, 0.1)',
+
+		dateDividerBg: ':darken<2<$secondary',
+		dateDividerFg: ':alpha<0.7<$text',
+
+		switchTrack: 'rgba(0, 0, 0, 0.25)',
+		radioBorder: 'rgba(0, 0, 0, 0.4)',
+		inputBorder: 'rgba(0, 0, 0, 0.42)',
+		inputLabel: 'rgba(0, 0, 0, 0.54)',
+		inputText: '#000',
+
+		buttonBg: 'rgba(0, 0, 0, 0.05)',
+		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
+		buttonActiveBg: 'rgba(0, 0, 0, 0.15)',
+
+		autocompleteItemHoverBg: 'rgba(0, 0, 0, 0.1)',
+		autocompleteItemText: 'rgba(0, 0, 0, 0.8)',
+		autocompleteItemTextSub: 'rgba(0, 0, 0, 0.3)',
+
+		cwButtonBg: '#b1b9c1',
+		cwButtonFg: '#fff',
+		cwButtonHoverBg: '#bbc4ce',
+
+		reactionPickerButtonHoverBg: '#eee',
+
+		reactionViewerBorder: 'rgba(0, 0, 0, 0.1)',
+
+		pollEditorInputBg: '#fff',
+
+		pollChoiceText: '#000',
+		pollChoiceBorder: 'rgba(0, 0, 0, 0.1)',
+
+		urlPreviewBorder: 'rgba(0, 0, 0, 0.1)',
+		urlPreviewBorderHover: 'rgba(0, 0, 0, 0.2)',
+		urlPreviewTitle: '$text',
+		urlPreviewText: ':alpha<0.7<$text',
+		urlPreviewInfo: ':alpha<0.8<$text',
+
+		calendarWeek: '#19a2a9',
+		calendarSaturdayOrSunday: '#ef95a0',
+		calendarDay: '#777',
+
+		materBg: 'rgba(0, 0, 0, 0.1)',
+
+		chartCaption: ':alpha<0.6<$text',
+
+		announcementsBg: '#f3f9ff',
+		announcementsTitle: '#4078c0',
+		announcementsText: '#57616f',
+
+		donationBg: '#fbead4',
+		donationFg: '#777d71',
+
+		googleSearchBg: '#fff',
+		googleSearchFg: '#55595c',
+		googleSearchBorder: 'rgba(0, 0, 0, 0.2)',
+		googleSearchHoverBorder: 'rgba(0, 0, 0, 0.3)',
+		googleSearchHoverButton: 'rgba(0, 0, 0, 0.05)',
+
+		mfmTitleBg: 'rgba(0, 0, 0, 0.07)',
+		mfmQuote: ':alpha<0.6<$text',
+		mfmQuoteLine: ':alpha<0.5<$text',
+
+		suspendedInfoBg: '#ffdbdb',
+		suspendedInfoFg: '#570808',
+		remoteInfoBg: '#fff0db',
+		remoteInfoFg: '#573c08',
+
+		messagingRoomBg: '#fff',
+		messagingRoomInfo: '#000',
+		messagingRoomDateDividerLine: 'rgba(0, 0, 0, 0.1)',
+		messagingRoomDateDividerText: 'rgba(0, 0, 0, 0.3)',
+		messagingRoomMessageInfo: 'rgba(0, 0, 0, 0.4)',
+		messagingRoomMessageBg: '#eee',
+		messagingRoomMessageFg: '#333',
+
+		formButtonBorder: 'rgba(0, 0, 0, 0.1)',
+		formButtonHoverBg: ':alpha<0.12<$primary',
+		formButtonHoverBorder: ':alpha<0.3<$primary',
+		formButtonActiveBg: ':alpha<0.12<$primary',
+
+		desktopHeaderBg: ':lighten<5<$secondary',
+		desktopHeaderFg: '$text',
+		desktopHeaderHoverFg: '#7b8c88',
+		desktopHeaderSearchBg: 'rgba(0, 0, 0, 0.05)',
+		desktopHeaderSearchHoverBg: 'rgba(0, 0, 0, 0.08)',
+		desktopHeaderSearchFg: '#000',
+		desktopNotificationBg: ':alpha<0.9<$secondary',
+		desktopNotificationFg: ':alpha<0.7<$text',
+		desktopNotificationShadow: 'rgba(0, 0, 0, 0.2)',
+		desktopPostFormBg: ':lighten<33<$primary',
+		desktopPostFormTextareaBg: '#fff',
+		desktopPostFormTextareaFg: '#333',
+		desktopPostFormTransparentButtonFg: ':alpha<0.5<$primary',
+		desktopPostFormTransparentButtonActiveGradientStart: ':lighten<30<$primary',
+		desktopPostFormTransparentButtonActiveGradientEnd: ':lighten<33<$primary',
+		desktopRenoteFormFooter: ':lighten<33<$primary',
+		desktopTimelineHeaderShadow: 'rgba(0, 0, 0, 0.08)',
+		desktopTimelineSrc: '#6f7477',
+		desktopTimelineSrcHover: '#525a5f',
+		desktopWindowTitle: '#666',
+		desktopWindowShadow: 'rgba(0, 0, 0, 0.2)',
+		desktopDriveBg: '#fff',
+		desktopDriveFolderBg: ':lighten<31<$primary',
+		desktopDriveFolderHoverBg: ':lighten<27<$primary',
+		desktopDriveFolderActiveBg: ':lighten<25<$primary',
+		desktopDriveFolderFg: ':darken<10<$primary',
+		desktopSettingsNavItem: ':alpha<0.8<$text',
+		desktopSettingsNavItemHover: ':darken<10<$text',
+
+		deckAcrylicColumnBg: 'rgba(0, 0, 0, 0.1)',
+
+		mobileHeaderBg: ':lighten<5<$secondary',
+		mobileHeaderFg: '$text',
+		mobileNavBackdrop: 'rgba(0, 0, 0, 0.2)',
+		mobilePostFormDivider: 'rgba(0, 0, 0, 0.1)',
+		mobilePostFormTextareaBg: '#fff',
+		mobileDriveNavBg: ':alpha<0.75<$secondary',
+		mobileHomeTlItemHover: 'rgba(0, 0, 0, 0.05)',
+		mobileUserPageName: '#757c82',
+		mobileUserPageAcct: '#969ea5',
+		mobileUserPageDescription: '#757c82',
+		mobileUserPageFollowedBg: '#a7bec7',
+		mobileUserPageFollowedFg: '#fff',
+		mobileUserPageStatusHighlight: '#787e86',
+		mobileUserPageHeaderShadow: 'rgba(0, 0, 0, 0.07)',
+		mobileAnnouncement: 'rgba(155, 196, 232, 0.2)',
+		mobileAnnouncementFg: '#3f4967',
+		mobileSignedInAsBg: '#fcfff5',
+		mobileSignedInAsFg: '#2c662d',
+		mobileSignoutBg: '#fff6f5',
+		mobileSignoutFg: '#cc2727',
+
+		reversiBannerGradientStart: '#8bca3e',
+		reversiBannerGradientEnd: '#d6cf31',
+		reversiDescBg: 'rgba(0, 0, 0, 0.1)',
+		reversiListItemShadow: 'rgba(0, 0, 0, 0.15)',
+		reversiMapSelectBorder: 'rgba(0, 0, 0, 0.1)',
+		reversiMapSelectHoverBorder: 'rgba(0, 0, 0, 0.2)',
+		reversiRoomFormShadow: 'rgba(0, 0, 0, 0.1)',
+		reversiRoomFooterBg: ':alpha<0.9<$secondary',
+		reversiGameHeaderLine: '#c4cdd4',
+		reversiGameEmptyCell: 'rgba(0, 0, 0, 0.06)',
+		reversiGameEmptyCellMyTurn: 'rgba(0, 0, 0, 0.12)',
+		reversiGameEmptyCellCanPut: 'rgba(0, 0, 0, 0.9)',
+	},
+}
diff --git a/src/client/theme/pink.json b/src/client/theme/pink.json
deleted file mode 100644
index ddb56b46e1..0000000000
--- a/src/client/theme/pink.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-	"meta": {
-		"id": "e9c8c01d-9c15-48d0-9b5c-3d00843b5b36",
-		"name": "Pink",
-		"author": "syuilo",
-		"base": "light",
-		"vars": {
-			"primary": "rgb(251, 78, 112)",
-			"secondary": "rgb(255, 218, 240)",
-			"text": "rgb(113, 91, 102)"
-		}
-	},
-
-	"renoteGradient": "#ffb1c9",
-	"renoteText": "#ff588d",
-	"quoteBorder": "#ff6c9b"
-}
diff --git a/src/client/theme/pink.json5 b/src/client/theme/pink.json5
new file mode 100644
index 0000000000..2e136fba5d
--- /dev/null
+++ b/src/client/theme/pink.json5
@@ -0,0 +1,20 @@
+{
+	id: 'e9c8c01d-9c15-48d0-9b5c-3d00843b5b36',
+
+	name: 'Pink',
+	author: 'syuilo',
+
+	base: 'light',
+
+	vars: {
+		primary: 'rgb(251, 78, 112)',
+		secondary: 'rgb(255, 218, 240)',
+		text: 'rgb(113, 91, 102)',
+	},
+
+	props: {
+		renoteGradient: '#ffb1c9',
+		renoteText: '#ff588d',
+		quoteBorder: '#ff6c9b',
+	},
+}
diff --git a/webpack.config.ts b/webpack.config.ts
index 3b14ee4a8a..e1163133c0 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -196,6 +196,9 @@ module.exports = {
 		}, {
 			test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
 			loader: 'url-loader'
+		}, {
+			test: /\.json5$/,
+			loader: 'json5-loader'
 		}, {
 			test: /\.ts$/,
 			exclude: /node_modules/,
-- 
cgit v1.2.3-freya


From 38139ee6c9c835bd30dbc64fb790bd08dc1916df Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 2 Oct 2018 16:10:45 +0900
Subject: テーマに関して強化
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                |  2 ++
 src/client/app/common/views/components/theme.vue | 31 +++++++++++++++++-------
 2 files changed, 24 insertions(+), 9 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 08d3c51733..1453f1b0bb 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -309,6 +309,8 @@ common/views/components/theme.vue:
   select-theme: "テーマを選択してください"
   uninstall: "アンインストール"
   uninstalled: "「{}」をアンインストールしました"
+  author: "作者"
+  desc: "説明"
 
 common/views/components/cw-button.vue:
   hide: "隠す"
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 293238e542..7cec1529bb 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -52,13 +52,21 @@
 
 	<details>
 		<summary>%i18n:@installed-themes%</summary>
-		<ui-select v-model="selectedInstalledTheme" placeholder="%i18n:@select-theme%">
+		<ui-select v-model="selectedInstalledThemeId" placeholder="%i18n:@select-theme%">
 			<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 		</ui-select>
-		<ui-textarea readonly :value="selectedInstalledThemeCode">
-			<span>%i18n:@theme-code%</span>
-		</ui-textarea>
-		<ui-button @click="uninstall()">%i18n:@uninstall%</ui-button>
+		<template v-if="selectedInstalledTheme">
+			<ui-input readonly :value="selectedInstalledTheme.author">
+				<span>%i18n:@author%</span>
+			</ui-input>
+			<ui-textarea v-if="selectedInstalledTheme.desc" readonly :value="selectedInstalledTheme.desc">
+				<span>%i18n:@desc%</span>
+			</ui-textarea>
+			<ui-textarea readonly :value="selectedInstalledThemeCode">
+				<span>%i18n:@theme-code%</span>
+			</ui-textarea>
+			<ui-button @click="uninstall()">%i18n:@uninstall%</ui-button>
+		</template>
 	</details>
 </div>
 </template>
@@ -93,7 +101,7 @@ export default Vue.extend({
 	data() {
 		return {
 			installThemeCode: null,
-			selectedInstalledTheme: null,
+			selectedInstalledThemeId: null,
 			myThemeBase: 'light',
 			myThemeName: '',
 			myThemePrimary: lightTheme.vars.primary,
@@ -121,15 +129,20 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'darkTheme', value }); }
 		},
 
+		selectedInstalledTheme() {
+			if (this.selectedInstalledThemeId == null) return null;
+			return this.installedThemes.find(x => x.id == this.selectedInstalledThemeId);
+		},
+
 		selectedInstalledThemeCode() {
 			if (this.selectedInstalledTheme == null) return null;
-			return JSON5.stringify(this.installedThemes.find(x => x.id == this.selectedInstalledTheme), null, '\t');
+			return JSON5.stringify(this.selectedInstalledTheme, null, '\t');
 		},
 
 		myTheme(): any {
 			return {
 				name: this.myThemeName,
-				author: this.$store.state.i.name,
+				author: this.$store.state.i.username,
 				base: this.myThemeBase,
 				vars: {
 					primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
@@ -198,7 +211,7 @@ export default Vue.extend({
 		},
 
 		uninstall() {
-			const theme = this.installedThemes.find(x => x.id == this.selectedInstalledTheme);
+			const theme = this.selectedInstalledTheme;
 			const themes = this.$store.state.device.themes.filter(t => t.id != theme.id);
 			this.$store.commit('device/set', {
 				key: 'themes', value: themes
-- 
cgit v1.2.3-freya


From b5745877ca7ce3c9cd4fb88ba6d4700ff0a9445e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 2 Oct 2018 16:23:55 +0900
Subject: :art:

---
 src/client/app/common/views/components/theme.vue | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 7cec1529bb..5cc779ee8e 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -15,7 +15,7 @@
 	</label>
 
 	<details class="creator">
-		<summary>%i18n:@create-a-theme%</summary>
+		<summary>%fa:palette% %i18n:@create-a-theme%</summary>
 		<div>
 			<span>%i18n:@base-theme%:</span>
 			<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
@@ -38,20 +38,20 @@
 			<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
 			<color-picker v-model="myThemeText"/>
 		</div>
-		<ui-button @click="preview()">%i18n:@preview-created-theme%</ui-button>
-		<ui-button primary @click="gen()">%i18n:@save-created-theme%</ui-button>
+		<ui-button @click="preview()">%fa:eye% %i18n:@preview-created-theme%</ui-button>
+		<ui-button primary @click="gen()">%fa:save R% %i18n:@save-created-theme%</ui-button>
 	</details>
 
 	<details>
-		<summary>%i18n:@install-a-theme%</summary>
+		<summary>%fa:download% %i18n:@install-a-theme%</summary>
 		<ui-textarea v-model="installThemeCode">
 			<span>%i18n:@theme-code%</span>
 		</ui-textarea>
-		<ui-button @click="install()">%i18n:@install%</ui-button>
+		<ui-button @click="install()">%fa:check% %i18n:@install%</ui-button>
 	</details>
 
 	<details>
-		<summary>%i18n:@installed-themes%</summary>
+		<summary>%fa:folder-open% %i18n:@installed-themes%</summary>
 		<ui-select v-model="selectedInstalledThemeId" placeholder="%i18n:@select-theme%">
 			<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 		</ui-select>
@@ -65,7 +65,7 @@
 			<ui-textarea readonly :value="selectedInstalledThemeCode">
 				<span>%i18n:@theme-code%</span>
 			</ui-textarea>
-			<ui-button @click="uninstall()">%i18n:@uninstall%</ui-button>
+			<ui-button @click="uninstall()">%fa:trash-alt R% %i18n:@uninstall%</ui-button>
 		</template>
 	</details>
 </div>
@@ -238,6 +238,11 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .nicnklzforebnpfgasiypmpdaaglujqm
+	> details
+		margin-top 16px
+		padding-top 16px
+		border-top solid 1px var(--faceDivider)
+
 	> .creator
 		> div
 			padding 16px 0
-- 
cgit v1.2.3-freya


From 7d11c8b767a43837d336099790e89e7b550554a4 Mon Sep 17 00:00:00 2001
From: MeiMei <30769358+mei23@users.noreply.github.com>
Date: Tue, 2 Oct 2018 23:42:46 +0900
Subject: Improve admin UI (#2802)

---
 .../views/pages/admin/admin.announcements.vue      | 17 +++++++++++++++--
 .../desktop/views/pages/admin/admin.dashboard.vue  |  8 +++++++-
 .../desktop/views/pages/admin/admin.hashtags.vue   |  4 ++++
 .../views/pages/admin/admin.suspend-user.vue       | 22 ++++++++++++++--------
 .../views/pages/admin/admin.unsuspend-user.vue     | 21 ++++++++++++++-------
 .../views/pages/admin/admin.unverify-user.vue      | 22 ++++++++++++++--------
 .../views/pages/admin/admin.verify-user.vue        | 22 ++++++++++++++--------
 src/client/app/desktop/views/pages/admin/admin.vue | 12 +++++++++---
 8 files changed, 91 insertions(+), 37 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/admin/admin.announcements.vue b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
index 272016b3f9..722fa227cf 100644
--- a/src/client/app/desktop/views/pages/admin/admin.announcements.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="qldxjjsrseehkusjuoooapmsprvfrxyl mk-admin-card">
 	<header>%i18n:@announcements%</header>
-	<textarea v-model="broadcasts"></textarea>
+	<textarea v-model="broadcasts" placeholder='[ { "title": "Title1", "text": "Text1" }, { "title": "Title2", "text": "Text2" } ]'></textarea>
 	<button class="ui" @click="save">%i18n:@save%</button>
 </div>
 </template>
@@ -22,8 +22,21 @@ export default Vue.extend({
 	},
 	methods: {
 		save() {
+			let json;
+
+			try {
+				json = JSON.parse(this.broadcasts);
+			} catch (e) {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
+				return;
+			}
+
 			(this as any).api('admin/update-meta', {
-				broadcasts: JSON.parse(this.broadcasts)
+				broadcasts: json
+			}).then(() => {
+				(this as any).os.apis.dialog({ text: `Saved` });
+			}.catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed ${e}` });
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
index f5734012bd..1b0c5f8125 100644
--- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
@@ -13,7 +13,7 @@
 		<x-cpu-memory :connection="connection"/>
 	</div>
 
-	<div class="form">
+	<div v-if="this.$store.state.i && this.$store.state.i.isAdmin" class="form">
 		<div>
 			<label>
 				<p>%i18n:@banner-url%</p>
@@ -81,6 +81,8 @@ export default Vue.extend({
 		invite() {
 			(this as any).api('admin/invite').then(x => {
 				this.inviteCode = x.code;
+			}).catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed ${e}` });
 			});
 		},
 		updateMeta() {
@@ -88,6 +90,10 @@ export default Vue.extend({
 				disableRegistration: this.disableRegistration,
 				disableLocalTimeline: this.disableLocalTimeline,
 				bannerUrl: this.bannerUrl
+			}).then(() => {
+				(this as any).os.apis.dialog({ text: `Saved` });
+			}).catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed ${e}` });
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
index f491b85959..10bab1cbd7 100644
--- a/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.hashtags.vue
@@ -24,6 +24,10 @@ export default Vue.extend({
 		save() {
 			(this as any).api('admin/update-meta', {
 				hidedTags: this.hidedTags.split('\n')
+			}).then(() => {
+				(this as any).os.apis.dialog({ text: `Saved` });
+			}).catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed ${e}` });
 			});
 		}
 	}
diff --git a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
index 32295e3795..a8ff937bbe 100644
--- a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
@@ -21,18 +21,24 @@ export default Vue.extend({
 		async suspendUser() {
 			this.suspending = true;
 
-			const user = await (this as any).os.api(
-				"users/show",
-				parseAcct(this.username)
-			);
+			const process = async () => {
+				const user = await (this as any).os.api(
+					"users/show",
+					parseAcct(this.username)
+				);
 
-			await (this as any).os.api("admin/suspend-user", {
-				userId: user.id
+				await (this as any).os.api("admin/suspend-user", {
+					userId: user.id
+				});
+
+				(this as any).os.apis.dialog({ text: "%i18n:@suspended%" });
+			};
+
+			await process().catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
 			});
 
 			this.suspending = false;
-
-			(this as any).os.apis.dialog({ text: "%i18n:@suspended%" });
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
index d6905fe9c0..146f5a41d4 100644
--- a/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.unsuspend-user.vue
@@ -21,18 +21,25 @@ export default Vue.extend({
 		async unsuspendUser() {
 			this.unsuspending = true;
 
-			const user = await (this as any).os.api(
-				"users/show",
-				parseAcct(this.username)
-			);
+			const process = async () => {
+				const user = await (this as any).os.api(
+					"users/show",
+					parseAcct(this.username)
+				);
 
-			await (this as any).os.api("admin/unsuspend-user", {
-				userId: user.id
+				await (this as any).os.api("admin/unsuspend-user", {
+					userId: user.id
+				});
+
+				(this as any).os.apis.dialog({ text: "%i18n:@unsuspended%" });
+			};
+
+			await process().catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
 			});
 
 			this.unsuspending = false;
 
-			(this as any).os.apis.dialog({ text: "%i18n:@unsuspended%" });
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
index d0cf635a98..5e0fdae5c1 100644
--- a/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.unverify-user.vue
@@ -21,18 +21,24 @@ export default Vue.extend({
 		async unverifyUser() {
 			this.unverifying = true;
 
-			const user = await (this as any).os.api(
-				"users/show",
-				parseAcct(this.username)
-			);
+			const process = async () => {
+				const user = await (this as any).os.api(
+					"users/show",
+					parseAcct(this.username)
+				);
 
-			await (this as any).os.api("admin/unverify-user", {
-				userId: user.id
+				await (this as any).os.api("admin/unverify-user", {
+					userId: user.id
+				});
+
+				(this as any).os.apis.dialog({ text: "%i18n:@unverified%" });
+			};
+
+			await process().catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
 			});
 
 			this.unverifying = false;
-
-			(this as any).os.apis.dialog({ text: "%i18n:@unverified%" });
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
index 9c0b0209b7..d237a5f9c1 100644
--- a/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.verify-user.vue
@@ -21,18 +21,24 @@ export default Vue.extend({
 		async verifyUser() {
 			this.verifying = true;
 
-			const user = await (this as any).os.api(
-				"users/show",
-				parseAcct(this.username)
-			);
+			const process = async () => {
+				const user = await (this as any).os.api(
+					"users/show",
+					parseAcct(this.username)
+				);
 
-			await (this as any).os.api("admin/verify-user", {
-				userId: user.id
+				await (this as any).os.api("admin/verify-user", {
+					userId: user.id
+				});
+
+				(this as any).os.apis.dialog({ text: "%i18n:@verified%" });
+			};
+
+			await process().catch(e => {
+				(this as any).os.apis.dialog({ text: `Failed: ${e}` });
 			});
 
 			this.verifying = false;
-
-			(this as any).os.apis.dialog({ text: "%i18n:@verified%" });
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index b874915f05..ad417e5121 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -3,9 +3,15 @@
 	<nav>
 		<ul>
 			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }">%fa:chalkboard .fw%%i18n:@dashboard%</li>
-			<li @click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
-			<li @click="nav('announcements')" :class="{ active: page == 'announcements' }">%fa:broadcast-tower .fw%%i18n:@announcements%</li>
-			<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }">%fa:hashtag .fw%%i18n:@hashtags%</li>
+
+			<li v-if="this.$store.state.i && this.$store.state.i.isAdmin"
+				@click="nav('users')" :class="{ active: page == 'users' }">%fa:users .fw%%i18n:@users%</li>
+
+			<li v-if="this.$store.state.i && this.$store.state.i.isAdmin"
+				@click="nav('announcements')" :class="{ active: page == 'announcements' }">%fa:broadcast-tower .fw%%i18n:@announcements%</li>
+
+			<li v-if="this.$store.state.i && this.$store.state.i.isAdmin"
+				@click="nav('hashtags')" :class="{ active: page == 'hashtags' }">%fa:hashtag .fw%%i18n:@hashtags%</li>
 
 			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:@drive%</li> -->
 			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
-- 
cgit v1.2.3-freya


From 274cf1af1c4aaa41a01784920115f5cec5923fe3 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 3 Oct 2018 02:57:31 +0900
Subject: テーマ関連の機能を強化
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |  3 ++
 src/client/app/common/views/components/theme.vue   | 41 +++++++++++++++++++---
 .../app/common/views/components/ui/button.vue      | 18 +++++++---
 3 files changed, 53 insertions(+), 9 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 1453f1b0bb..65f72eced1 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -311,6 +311,9 @@ common/views/components/theme.vue:
   uninstalled: "「{}」をアンインストールしました"
   author: "作者"
   desc: "説明"
+  export: "エクスポート"
+  import: "インポート"
+  import-by-code: "またはコードをペースト"
 
 common/views/components/cw-button.vue:
   hide: "隠す"
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 5cc779ee8e..39d8e8aa97 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -44,10 +44,13 @@
 
 	<details>
 		<summary>%fa:download% %i18n:@install-a-theme%</summary>
+		<ui-button @click="import_()">%fa:file-import% %i18n:@import%</ui-button>
+		<input ref="file" type="file" style="display:none;" @change="onUpdateImportFile"/>
+		<p>%i18n:@import-by-code%:</p>
 		<ui-textarea v-model="installThemeCode">
 			<span>%i18n:@theme-code%</span>
 		</ui-textarea>
-		<ui-button @click="install()">%fa:check% %i18n:@install%</ui-button>
+		<ui-button @click="() => install(this.installThemeCode)">%fa:check% %i18n:@install%</ui-button>
 	</details>
 
 	<details>
@@ -65,6 +68,7 @@
 			<ui-textarea readonly :value="selectedInstalledThemeCode">
 				<span>%i18n:@theme-code%</span>
 			</ui-textarea>
+			<ui-button @click="export_()" link :download="`${selectedInstalledTheme.name}.misskeytheme`" ref="export">%fa:box% %i18n:@export%</ui-button>
 			<ui-button @click="uninstall()">%fa:trash-alt R% %i18n:@uninstall%</ui-button>
 		</template>
 	</details>
@@ -177,11 +181,11 @@ export default Vue.extend({
 	},
 
 	methods: {
-		install() {
+		install(code) {
 			let theme;
 
 			try {
-				theme = JSON5.parse(this.installThemeCode);
+				theme = JSON5.parse(code);
 			} catch (e) {
 				alert('%i18n:@invalid-theme%');
 				return;
@@ -219,6 +223,29 @@ export default Vue.extend({
 			alert('%i18n:@uninstalled%'.replace('{}', theme.name));
 		},
 
+		import_() {
+			(this.$refs.file as any).click();
+		}
+
+		export_() {
+			const blob = new Blob([this.selectedInstalledThemeCode], {
+				type: 'application/json5'
+			});
+			this.$refs.export.$el.href = window.URL.createObjectURL(blob);
+		},
+
+		onUpdateImportFile() {
+			const f = (this.$refs.file as any).files[0];
+
+			const reader = new FileReader();
+
+			reader.onload = e => {
+				this.install(e.target.result);
+			};
+
+			reader.readAsText(f);
+		},
+
 		preview() {
 			applyTheme(this.myTheme, false);
 		},
@@ -239,10 +266,14 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .nicnklzforebnpfgasiypmpdaaglujqm
 	> details
-		margin-top 16px
-		padding-top 16px
 		border-top solid 1px var(--faceDivider)
 
+		> summary
+			padding 16px 0
+
+		> *:last-child
+			margin-bottom 16px
+
 	> .creator
 		> div
 			padding 16px 0
diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index b29f8bb1c9..a509632520 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -1,7 +1,7 @@
 <template>
-<button class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
+<component class="dmtdnykelhudezerjlfpbhgovrgnqqgr" :is="link ? 'a' : 'button'" :class="[styl, { inline, primary }]" :type="type" @click="$emit('click')">
 	<slot></slot>
-</button>
+</component>
 </template>
 
 <script lang="ts">
@@ -21,6 +21,11 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		link: {
+			type: Boolean,
+			required: false,
+			default: false
 		}
 	},
 	data() {
@@ -35,15 +40,20 @@ export default Vue.extend({
 .dmtdnykelhudezerjlfpbhgovrgnqqgr
 	display block
 	width 100%
-	min-height 40px
 	margin 0
-	padding 0
+	padding 8px
+	text-align center
 	font-weight normal
 	font-size 16px
 	border none
 	border-radius 6px
 	outline none
 	box-shadow none
+	text-decoration none
+	user-select none
+
+	*
+		pointer-events none
 
 	&:focus
 		&:after
-- 
cgit v1.2.3-freya


From a2a25eb5f81ddea039a62c6d05566dbdc9fa9c63 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 3 Oct 2018 03:00:55 +0900
Subject: Improve usability

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

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 39d8e8aa97..b2defb212f 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -45,7 +45,7 @@
 	<details>
 		<summary>%fa:download% %i18n:@install-a-theme%</summary>
 		<ui-button @click="import_()">%fa:file-import% %i18n:@import%</ui-button>
-		<input ref="file" type="file" style="display:none;" @change="onUpdateImportFile"/>
+		<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
 		<p>%i18n:@import-by-code%:</p>
 		<ui-textarea v-model="installThemeCode">
 			<span>%i18n:@theme-code%</span>
-- 
cgit v1.2.3-freya


From 16b6b1f2b3d83a6a113a229edbcabbd11675c66d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 3 Oct 2018 03:07:46 +0900
Subject: テーマ関連機能の強化
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                | 1 +
 src/client/app/common/views/components/theme.vue | 9 +++++++++
 2 files changed, 10 insertions(+)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 65f72eced1..62c6355c3b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -314,6 +314,7 @@ common/views/components/theme.vue:
   export: "エクスポート"
   import: "インポート"
   import-by-code: "またはコードをペースト"
+  theme-name-required: "テーマ名は必須です。"
 
 common/views/components/cw-button.vue:
   hide: "隠す"
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index b2defb212f..4b0e6da24c 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -25,6 +25,9 @@
 			<ui-input v-model="myThemeName">
 				<span>%i18n:@theme-name%</span>
 			</ui-input>
+			<ui-textarea v-model="myThemeDesc">
+				<span>%i18n:@desc%</span>
+			</ui-textarea>
 		</div>
 		<div>
 			<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
@@ -108,6 +111,7 @@ export default Vue.extend({
 			selectedInstalledThemeId: null,
 			myThemeBase: 'light',
 			myThemeName: '',
+			myThemeDesc: '',
 			myThemePrimary: lightTheme.vars.primary,
 			myThemeSecondary: lightTheme.vars.secondary,
 			myThemeText: lightTheme.vars.text
@@ -147,6 +151,7 @@ export default Vue.extend({
 			return {
 				name: this.myThemeName,
 				author: this.$store.state.i.username,
+				desc: this.myThemeDesc,
 				base: this.myThemeBase,
 				vars: {
 					primary: tinycolor(typeof this.myThemePrimary == 'string' ? this.myThemePrimary : this.myThemePrimary.rgba).toRgbString(),
@@ -252,6 +257,10 @@ export default Vue.extend({
 
 		gen() {
 			const theme = this.myTheme;
+			if (theme.name == null || theme.name.trim() == '') {
+				alert('%i18n:@theme-name-required%');
+				return;
+			}
 			theme.id = uuid();
 			const themes = this.$store.state.device.themes.concat(theme);
 			this.$store.commit('device/set', {
-- 
cgit v1.2.3-freya


From 9a57efa6d92080aa444954a9737748e30e921d92 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 3 Oct 2018 03:13:10 +0900
Subject: :v:

---
 src/client/theme/pink.json5 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/theme/pink.json5 b/src/client/theme/pink.json5
index 2e136fba5d..e228b4b4fa 100644
--- a/src/client/theme/pink.json5
+++ b/src/client/theme/pink.json5
@@ -1,7 +1,7 @@
 {
 	id: 'e9c8c01d-9c15-48d0-9b5c-3d00843b5b36',
 
-	name: 'Pink',
+	name: 'Strawberry Milk',
 	author: 'syuilo',
 
 	base: 'light',
-- 
cgit v1.2.3-freya


From 3537b3de8ece177be252235a17938d71db6a59f4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 3 Oct 2018 22:05:17 +0900
Subject: Clean up

---
 gulpfile.ts                          |  4 +-
 src/client/app/base.pug              |  3 --
 src/client/app/safe.js               | 10 ----
 src/client/assets/code-highlight.css | 93 ------------------------------------
 4 files changed, 1 insertion(+), 109 deletions(-)
 delete mode 100644 src/client/assets/code-highlight.css

(limited to 'src/client')

diff --git a/gulpfile.ts b/gulpfile.ts
index 8a4a74d26c..356996314e 100644
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -166,9 +166,7 @@ gulp.task('build:client:pug', [
 			.pipe(pug({
 				locals: {
 					themeColor: constants.themeColor,
-					facss: fa.dom.css(),
-					//hljscss: fs.readFileSync('./node_modules/highlight.js/styles/default.css', 'utf8')
-					hljscss: fs.readFileSync('./src/client/assets/code-highlight.css', 'utf8')
+					facss: fa.dom.css()
 				}
 			}))
 			.pipe(htmlmin({
diff --git a/src/client/app/base.pug b/src/client/app/base.pug
index 11b150bc67..ee9d4b6f6d 100644
--- a/src/client/app/base.pug
+++ b/src/client/app/base.pug
@@ -34,9 +34,6 @@ html
 		//- FontAwesome style
 		style #{facss}
 
-		//- highlight.js style
-		style #{hljscss}
-
 	body
 		noscript: p
 			| JavaScriptを有効にしてください
diff --git a/src/client/app/safe.js b/src/client/app/safe.js
index 3d73fa1a9c..026fc66c6e 100644
--- a/src/client/app/safe.js
+++ b/src/client/app/safe.js
@@ -12,16 +12,6 @@ if (!('fetch' in window)) {
 		'To run Misskey, please update your browser to latest version or try other browsers.');
 }
 
-// Detect Edge
-if (navigator.userAgent.toLowerCase().indexOf('edge') != -1) {
-	alert(
-		'現在、お使いのブラウザ(Microsoft Edge)ではMisskeyは正しく動作しません。' +
-		'サポートしているブラウザ: Google Chrome, Mozilla Firefox, Apple Safari など' +
-		'\n\n' +
-		'Currently, Misskey cannot run correctly on your browser (Microsoft Edge). ' +
-		'Supported browsers: Google Chrome, Mozilla Firefox, Apple Safari, etc');
-}
-
 // Check whether cookie enabled
 if (!navigator.cookieEnabled) {
 	alert(
diff --git a/src/client/assets/code-highlight.css b/src/client/assets/code-highlight.css
deleted file mode 100644
index f0807dc9c3..0000000000
--- a/src/client/assets/code-highlight.css
+++ /dev/null
@@ -1,93 +0,0 @@
-.hljs {
-	font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
-}
-
-.hljs,
-.hljs-subst {
-	color: #444;
-}
-
-.hljs-comment {
-	color: #888888;
-}
-
-.hljs-keyword {
-	color: #2973b7;
-}
-
-.hljs-number {
-	color: #ae81ff;
-}
-
-.hljs-string {
-	color: #e96900;
-}
-
-.hljs-regexp {
-	color: #e9003f;
-}
-
-.hljs-attribute,
-.hljs-selector-tag,
-.hljs-meta-keyword,
-.hljs-doctag,
-.hljs-name {
-	font-weight: bold;
-}
-
-.hljs-type,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-quote,
-.hljs-template-tag,
-.hljs-deletion {
-	color: #880000;
-}
-
-.hljs-title,
-.hljs-section {
-	color: #880000;
-	font-weight: bold;
-}
-
-.hljs-symbol,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-link,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-	color: #BC6060;
-}
-
-/* Language color: hue: 90; */
-
-.hljs-literal {
-	color: #78A960;
-}
-
-.hljs-built_in,
-.hljs-bullet,
-.hljs-code,
-.hljs-addition {
-	color: #397300;
-}
-
-/* Meta color: hue: 200 */
-
-.hljs-meta {
-	color: #1f7199;
-}
-
-.hljs-meta-string {
-	color: #4d99bf;
-}
-
-/* Misc effects */
-
-.hljs-emphasis {
-	font-style: italic;
-}
-
-.hljs-strong {
-	font-weight: bold;
-}
-- 
cgit v1.2.3-freya


From 546d494587841afebe910f58d92b48fc6ad89a2d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 4 Oct 2018 13:40:13 +0900
Subject: Improve default theme definition (light)

---
 src/client/theme/light.json5 | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

(limited to 'src/client')

diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
index 1e795ee8c5..90d0d40187 100644
--- a/src/client/theme/light.json5
+++ b/src/client/theme/light.json5
@@ -23,13 +23,13 @@
 		scrollbarHandleHover: '#00000066',
 
 		face: '$secondary',
-		faceText: '#444',
+		faceText: '$text',
 		faceHeader: ':lighten<5<$secondary',
-		faceHeaderText: '#888',
+		faceHeaderText: '$text',
 		faceDivider: 'rgba(0, 0, 0, 0.082)',
-		faceTextButton: '#ccc',
-		faceTextButtonHover: '#aaa',
-		faceTextButtonActive: '#999',
+		faceTextButton: ':alpha<0.7<$text',
+		faceTextButtonHover: ':alpha<0.7<:darken<7<$text',
+		faceTextButtonActive: ':alpha<0.7<:darken<10<$text',
 		faceClearButtonHover: 'rgba(0, 0, 0, 0.025)',
 		faceClearButtonActive: 'rgba(0, 0, 0, 0.05)',
 		popupBg: ':lighten<5<$secondary',
@@ -40,7 +40,7 @@
 		renoteGradient: '#edfde2',
 		renoteText: '#9dbb00',
 		quoteBorder: '#c0dac6',
-		noteText: '#717171',
+		noteText: '$text',
 		noteHeaderName: ':darken<2<$text',
 		noteHeaderBadgeFg: '#aaa',
 		noteHeaderBadgeBg: 'rgba(0, 0, 0, 0.05)',
@@ -141,7 +141,7 @@
 
 		desktopHeaderBg: ':lighten<5<$secondary',
 		desktopHeaderFg: '$text',
-		desktopHeaderHoverFg: '#7b8c88',
+		desktopHeaderHoverFg: ':darken<7<$text',
 		desktopHeaderSearchBg: 'rgba(0, 0, 0, 0.05)',
 		desktopHeaderSearchHoverBg: 'rgba(0, 0, 0, 0.08)',
 		desktopHeaderSearchFg: '#000',
@@ -156,9 +156,9 @@
 		desktopPostFormTransparentButtonActiveGradientEnd: ':lighten<33<$primary',
 		desktopRenoteFormFooter: ':lighten<33<$primary',
 		desktopTimelineHeaderShadow: 'rgba(0, 0, 0, 0.08)',
-		desktopTimelineSrc: '#6f7477',
-		desktopTimelineSrcHover: '#525a5f',
-		desktopWindowTitle: '#666',
+		desktopTimelineSrc: '$text',
+		desktopTimelineSrcHover: ':darken<7<$text',
+		desktopWindowTitle: '$text',
 		desktopWindowShadow: 'rgba(0, 0, 0, 0.2)',
 		desktopDriveBg: '#fff',
 		desktopDriveFolderBg: ':lighten<31<$primary',
-- 
cgit v1.2.3-freya


From 35489ef5b7dde1ffda11cb1ab83fc26c17e41196 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 4 Oct 2018 13:48:26 +0900
Subject: Improve default theme definition (dark)

---
 src/client/theme/dark.json5 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
index 2042bd7931..72362a2305 100644
--- a/src/client/theme/dark.json5
+++ b/src/client/theme/dark.json5
@@ -46,15 +46,15 @@
 		noteHeaderBadgeBg: 'rgba(0, 0, 0, 0.25)',
 		noteHeaderAdminFg: '#f15f71',
 		noteHeaderAdminBg: '#5d282e',
-		noteHeaderAcct: '#606984',
-		noteHeaderInfo: '#606984',
+		noteHeaderAcct: ':alpha<0.65<$text',
+		noteHeaderInfo: ':alpha<0.5<$text',
 
-		noteActions: '#606984',
-		noteActionsHover: '#a1a8bf',
+		noteActions: ':alpha<0.45<$text',
+		noteActionsHover: ':alpha<0.6<$text',
 		noteActionsReplyHover: '#0af',
 		noteActionsRenoteHover: '#8d0',
 		noteActionsReactionHover: '#fa0',
-		noteActionsHighlighted: '#707b97',
+		noteActionsHighlighted: ':alpha<0.7<$text',
 
 		noteAttachedFile: 'rgba(255, 255, 255, 0.1)',
 
-- 
cgit v1.2.3-freya


From 02e7e3b9712b1c30f2183952c3325ef2ebe6ea21 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 5 Oct 2018 03:21:45 +0900
Subject: Clean up

---
 src/client/app/desktop/views/pages/admin/admin.announcements.vue | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/pages/admin/admin.announcements.vue b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
index 722fa227cf..5c1ed74b29 100644
--- a/src/client/app/desktop/views/pages/admin/admin.announcements.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.announcements.vue
@@ -44,8 +44,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 .qldxjjsrseehkusjuoooapmsprvfrxyl
 	textarea
 		width 100%
-- 
cgit v1.2.3-freya


From 63a8d556e513bef14ff941edb06e120fc784227c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 5 Oct 2018 12:10:00 +0900
Subject: :art:

---
 .../mobile/views/components/drive.file-detail.vue  | 30 +++-------------------
 1 file changed, 4 insertions(+), 26 deletions(-)

(limited to 'src/client')

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 de46297fcb..7425afe1e2 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -38,10 +38,10 @@
 	</div>
 	<div class="menu">
 		<div>
-			<a :href="`${file.url}?download`" :download="file.name">%fa:download%%i18n:@download%</a>
-			<button @click="rename">%fa:pencil-alt%%i18n:@rename%</button>
-			<button @click="move">%fa:R folder-open%%i18n:@move%</button>
-			<button @click="del">%fa:trash-alt R%%i18n:@delete%</button>
+			<ui-button link :href="`${file.url}?download`" :download="file.name">%fa:download% %i18n:@download%</ui-button>
+			<ui-button @click="rename">%fa:pencil-alt% %i18n:@rename%</ui-button>
+			<ui-button @click="move">%fa:R folder-open% %i18n:@move%</ui-button>
+			<ui-button @click="del">%fa:trash-alt R% %i18n:@delete%</ui-button>
 		</div>
 	</div>
 	<div class="exif" v-show="exif">
@@ -205,28 +205,6 @@ export default Vue.extend({
 			max-width 500px
 			margin 0 auto
 
-			> *
-				display block
-				width 100%
-				padding 10px 16px
-				margin 0 0 12px 0
-				color var(--primaryForeground)
-				font-size 0.9em
-				text-align center
-				text-decoration none
-				background var(--primary)
-				border none
-				border-radius 3px
-
-				&:last-child
-					margin-bottom 0
-
-				&:active
-					background var(--primaryDarken10)
-
-				> [data-fa]
-					margin-right 4px
-
 	> .hash
 		padding 14px
 		border-top solid 1px var(--faceDivider)
-- 
cgit v1.2.3-freya


From d0570d7fe3a3bf3c6b0312dece74bacc04c3534a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 7 Oct 2018 11:06:17 +0900
Subject: V10 (#2826)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update CHANGELOG.md

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update CHANGELOG.md

* Update CHANGELOG.md

* wip

* Update CHANGELOG.md

* wip

* wip

* wip

* wip
---
 CHANGELOG.md                                       |  82 +++++
 package.json                                       |   3 +-
 .../app/common/scripts/compose-notification.ts     |   6 +-
 src/client/app/common/scripts/note-subscriber.ts   | 105 +++++++
 src/client/app/common/scripts/stream.ts            | 318 ++++++++++++++++++++
 src/client/app/common/scripts/streaming/drive.ts   |  34 ---
 .../streaming/games/reversi/reversi-game.ts        |  13 -
 .../scripts/streaming/games/reversi/reversi.ts     |  31 --
 .../common/scripts/streaming/global-timeline.ts    |  34 ---
 src/client/app/common/scripts/streaming/hashtag.ts |  13 -
 src/client/app/common/scripts/streaming/home.ts    | 126 --------
 .../common/scripts/streaming/hybrid-timeline.ts    |  34 ---
 .../app/common/scripts/streaming/local-timeline.ts |  34 ---
 .../common/scripts/streaming/messaging-index.ts    |  34 ---
 .../app/common/scripts/streaming/messaging.ts      |  20 --
 .../app/common/scripts/streaming/notes-stats.ts    |  30 --
 .../app/common/scripts/streaming/server-stats.ts   |  30 --
 .../app/common/scripts/streaming/stream-manager.ts | 109 -------
 src/client/app/common/scripts/streaming/stream.ts  | 137 ---------
 .../app/common/scripts/streaming/user-list.ts      |  17 --
 .../components/games/reversi/reversi.gameroom.vue  |   8 +-
 .../components/games/reversi/reversi.index.vue     |   9 +-
 .../views/components/games/reversi/reversi.vue     |   8 +-
 .../app/common/views/components/messaging-room.vue |   8 +-
 .../app/common/views/components/messaging.vue      |  10 +-
 src/client/app/common/views/components/signin.vue  |   2 +-
 src/client/app/common/views/components/signup.vue  |   4 +-
 .../common/views/components/stream-indicator.vue   |   2 +-
 .../common/views/components/welcome-timeline.vue   |   9 +-
 .../app/common/views/widgets/photo-stream.vue      |  11 +-
 .../app/common/views/widgets/posts-monitor.vue     |   8 +-
 src/client/app/common/views/widgets/server.vue     |   8 +-
 src/client/app/config.ts                           |   2 +-
 src/client/app/desktop/script.ts                   |  84 +++---
 src/client/app/desktop/views/components/drive.vue  |  13 +-
 .../app/desktop/views/components/follow-button.vue |  11 +-
 src/client/app/desktop/views/components/home.vue   |   6 +-
 .../app/desktop/views/components/note-detail.vue   |   3 +
 .../app/desktop/views/components/notes.note.vue    |  86 +-----
 .../app/desktop/views/components/notifications.vue |  14 +-
 .../desktop/views/components/settings.signins.vue  |  12 +-
 .../app/desktop/views/components/timeline.core.vue |  61 +---
 .../app/desktop/views/components/ui.header.nav.vue |  12 +-
 .../views/components/user-list-timeline.vue        |   1 -
 .../desktop/views/pages/admin/admin.dashboard.vue  |   8 +-
 .../app/desktop/views/pages/deck/deck.direct.vue   |  10 +-
 .../desktop/views/pages/deck/deck.hashtag-tl.vue   |   3 +-
 .../app/desktop/views/pages/deck/deck.list-tl.vue  |   1 -
 .../app/desktop/views/pages/deck/deck.mentions.vue |  10 +-
 .../app/desktop/views/pages/deck/deck.note.vue     |  68 +----
 .../views/pages/deck/deck.notifications.vue        |  11 +-
 .../app/desktop/views/pages/deck/deck.tl.vue       |  21 +-
 src/client/app/mios.ts                             | 135 ++-------
 src/client/app/mobile/views/components/drive.vue   |  13 +-
 .../app/mobile/views/components/follow-button.vue  |  10 +-
 .../app/mobile/views/components/note-detail.vue    |   3 +
 src/client/app/mobile/views/components/note.vue    |  86 +-----
 .../app/mobile/views/components/notifications.vue  |  17 +-
 .../app/mobile/views/components/ui.header.vue      |  17 +-
 src/client/app/mobile/views/components/ui.nav.vue  |  10 +-
 src/client/app/mobile/views/components/ui.vue      |  17 +-
 .../mobile/views/components/user-list-timeline.vue |   1 -
 .../app/mobile/views/pages/home.timeline.vue       |  60 +---
 src/client/app/tsconfig.json                       |   3 +-
 src/docs/stream.ja-JP.md                           |   8 +-
 src/notify.ts                                      |   6 +-
 src/server/api/call.ts                             |   4 +
 src/server/api/common/read-messaging-message.ts    |   4 +-
 src/server/api/common/read-notification.ts         |   4 +-
 src/server/api/endpoints/games/reversi/match.ts    |   6 +-
 src/server/api/endpoints/i/regenerate_token.ts     |   4 +-
 src/server/api/endpoints/i/update.ts               |   4 +-
 .../api/endpoints/i/update_client_setting.ts       |   4 +-
 src/server/api/endpoints/i/update_home.ts          |   4 +-
 src/server/api/endpoints/i/update_mobile_home.ts   |   4 +-
 src/server/api/endpoints/i/update_widget.ts        |   4 +-
 .../api/endpoints/messaging/messages/create.ts     |  10 +-
 src/server/api/endpoints/notes/polls/vote.ts       |   5 +-
 .../endpoints/notifications/mark_all_as_read.ts    |   4 +-
 src/server/api/private/signin.ts                   |   4 +-
 src/server/api/service/twitter.ts                  |   6 +-
 src/server/api/stream/channel.ts                   |  39 +++
 src/server/api/stream/channels/drive.ts            |  12 +
 .../api/stream/channels/games/reversi-game.ts      | 309 +++++++++++++++++++
 src/server/api/stream/channels/games/reversi.ts    |  30 ++
 src/server/api/stream/channels/global-timeline.ts  |  39 +++
 src/server/api/stream/channels/hashtag.ts          |  33 ++
 src/server/api/stream/channels/home-timeline.ts    |  39 +++
 src/server/api/stream/channels/hybrid-timeline.ts  |  41 +++
 src/server/api/stream/channels/index.ts            |  31 ++
 src/server/api/stream/channels/local-timeline.ts   |  39 +++
 src/server/api/stream/channels/main.ts             |  25 ++
 src/server/api/stream/channels/messaging-index.ts  |  12 +
 src/server/api/stream/channels/messaging.ts        |  26 ++
 src/server/api/stream/channels/notes-stats.ts      |  34 +++
 src/server/api/stream/channels/server-stats.ts     |  37 +++
 src/server/api/stream/channels/user-list.ts        |  14 +
 src/server/api/stream/drive.ts                     |   9 -
 src/server/api/stream/games/reversi-game.ts        | 332 ---------------------
 src/server/api/stream/games/reversi.ts             |  28 --
 src/server/api/stream/global-timeline.ts           |  27 --
 src/server/api/stream/hashtag.ts                   |  40 ---
 src/server/api/stream/home.ts                      | 110 -------
 src/server/api/stream/hybrid-timeline.ts           |  38 ---
 src/server/api/stream/index.ts                     | 213 +++++++++++++
 src/server/api/stream/local-timeline.ts            |  35 ---
 src/server/api/stream/messaging-index.ts           |   9 -
 src/server/api/stream/messaging.ts                 |  25 --
 src/server/api/stream/notes-stats.ts               |  35 ---
 src/server/api/stream/server-stats.ts              |  38 ---
 src/server/api/stream/user-list.ts                 |  13 -
 src/server/api/streaming.ts                        |  73 +----
 src/services/drive/add-file.ts                     |   6 +-
 src/services/following/create.ts                   |   6 +-
 src/services/following/delete.ts                   |   4 +-
 src/services/following/requests/accept.ts          |   6 +-
 src/services/following/requests/cancel.ts          |   4 +-
 src/services/following/requests/create.ts          |   6 +-
 src/services/following/requests/reject.ts          |   4 +-
 src/services/note/create.ts                        |  14 +-
 src/services/note/delete.ts                        |   2 +-
 src/services/note/reaction/create.ts               |   4 +-
 src/services/note/read.ts                          |   6 +-
 src/services/note/unread.ts                        |   6 +-
 src/stream.ts                                      |  36 ++-
 tsconfig.json                                      |   3 +-
 126 files changed, 1811 insertions(+), 2272 deletions(-)
 create mode 100644 src/client/app/common/scripts/note-subscriber.ts
 create mode 100644 src/client/app/common/scripts/stream.ts
 delete mode 100644 src/client/app/common/scripts/streaming/drive.ts
 delete mode 100644 src/client/app/common/scripts/streaming/games/reversi/reversi-game.ts
 delete mode 100644 src/client/app/common/scripts/streaming/games/reversi/reversi.ts
 delete mode 100644 src/client/app/common/scripts/streaming/global-timeline.ts
 delete mode 100644 src/client/app/common/scripts/streaming/hashtag.ts
 delete mode 100644 src/client/app/common/scripts/streaming/home.ts
 delete mode 100644 src/client/app/common/scripts/streaming/hybrid-timeline.ts
 delete mode 100644 src/client/app/common/scripts/streaming/local-timeline.ts
 delete mode 100644 src/client/app/common/scripts/streaming/messaging-index.ts
 delete mode 100644 src/client/app/common/scripts/streaming/messaging.ts
 delete mode 100644 src/client/app/common/scripts/streaming/notes-stats.ts
 delete mode 100644 src/client/app/common/scripts/streaming/server-stats.ts
 delete mode 100644 src/client/app/common/scripts/streaming/stream-manager.ts
 delete mode 100644 src/client/app/common/scripts/streaming/stream.ts
 delete mode 100644 src/client/app/common/scripts/streaming/user-list.ts
 create mode 100644 src/server/api/stream/channel.ts
 create mode 100644 src/server/api/stream/channels/drive.ts
 create mode 100644 src/server/api/stream/channels/games/reversi-game.ts
 create mode 100644 src/server/api/stream/channels/games/reversi.ts
 create mode 100644 src/server/api/stream/channels/global-timeline.ts
 create mode 100644 src/server/api/stream/channels/hashtag.ts
 create mode 100644 src/server/api/stream/channels/home-timeline.ts
 create mode 100644 src/server/api/stream/channels/hybrid-timeline.ts
 create mode 100644 src/server/api/stream/channels/index.ts
 create mode 100644 src/server/api/stream/channels/local-timeline.ts
 create mode 100644 src/server/api/stream/channels/main.ts
 create mode 100644 src/server/api/stream/channels/messaging-index.ts
 create mode 100644 src/server/api/stream/channels/messaging.ts
 create mode 100644 src/server/api/stream/channels/notes-stats.ts
 create mode 100644 src/server/api/stream/channels/server-stats.ts
 create mode 100644 src/server/api/stream/channels/user-list.ts
 delete mode 100644 src/server/api/stream/drive.ts
 delete mode 100644 src/server/api/stream/games/reversi-game.ts
 delete mode 100644 src/server/api/stream/games/reversi.ts
 delete mode 100644 src/server/api/stream/global-timeline.ts
 delete mode 100644 src/server/api/stream/hashtag.ts
 delete mode 100644 src/server/api/stream/home.ts
 delete mode 100644 src/server/api/stream/hybrid-timeline.ts
 create mode 100644 src/server/api/stream/index.ts
 delete mode 100644 src/server/api/stream/local-timeline.ts
 delete mode 100644 src/server/api/stream/messaging-index.ts
 delete mode 100644 src/server/api/stream/messaging.ts
 delete mode 100644 src/server/api/stream/notes-stats.ts
 delete mode 100644 src/server/api/stream/server-stats.ts
 delete mode 100644 src/server/api/stream/user-list.ts

(limited to 'src/client')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c492e43839..b26010b146 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,88 @@ ChangeLog
 
 This document describes breaking changes only.
 
+10.0.0
+------
+
+ストリーミングAPIに破壊的変更があります。運営者がすべきことはありません。
+
+変更は以下の通りです
+
+* ストリーミングでやり取りする際の snake_case が全て camelCase に
+* リバーシのストリームエンドポイント名が reversi → gamesReversi、reversiGame → gamesReversiGame に
+* ストリーミングの個々のエンドポイントが廃止され、一旦元となるストリームに接続してから、個々のチャンネル(今までのエンドポイント)に接続します。詳細は後述します。
+* ストリームから流れてくる、キャプチャした投稿の更新イベントに投稿自体のデータは含まれず、代わりにアクションが設定されるようになります。詳細は後述します。
+* ストリームに接続する際に追加で指定していたパラメータ(トークン除く)が、URLにクエリとして含むのではなくチャンネル接続時にパラメータ指定するように
+
+### 個々のエンドポイントが廃止されることによる新しいストリーミングAPIの利用方法
+具体的には、まず https://example.misskey/streaming にwebsocket接続します。
+次に、例えば「messaging」ストリーム(チャンネルと呼びます)に接続したいときは、ストリームに次のようなデータを送信します:
+``` javascript
+{
+  type: 'connect',
+  body: {
+    channel: 'messaging',
+    id: 'foobar',
+    params: {
+      otherparty: 'xxxxxxxxxxxx'
+    }
+  }
+}
+```
+ここで、`id`にはそのチャンネルとやり取りするための任意のIDを設定します。
+IDはチャンネルごとではなく「チャンネルの接続ごと」です。なぜなら、同じチャンネルに異なるパラメータで複数接続するケースもあるからです。
+`params`はチャンネルに接続する際のパラメータです。チャンネルによって接続時に必要とされるパラメータは異なります。パラメータ不要のチャンネルに接続する際は、このプロパティは省略可能です。
+
+チャンネルにメッセージを送信するには、次のようなデータを送信します:
+``` javascript
+{
+  type: 'channel',
+  body: {
+    id: 'foobar',
+    type: 'something',
+    body: {
+      some: 'thing'
+    }
+  }
+}
+```
+ここで、`id`にはチャンネルに接続するときに指定したIDを設定します。
+
+逆に、チャンネルからメッセージが流れてくると、次のようなデータが受信されます:
+``` javascript
+{
+  type: 'channel',
+  body: {
+    id: 'foobar',
+    type: 'something',
+    body: {
+      some: 'thing'
+    }
+  }
+}
+```
+ここで、`id`にはチャンネルに接続するときに指定したIDが設定されています。
+
+### 投稿のキャプチャに関する変更
+投稿の更新イベントに投稿情報は含まれなくなりました。代わりに、その投稿が「リアクションされた」「アンケートに投票された」「削除された」といったアクション情報が設定されます。
+
+具体的には次のようなデータが受信されます:
+``` javascript
+{
+  type: 'noteUpdated',
+  body: {
+    id: 'xxxxxxxxxxx',
+    type: 'reacted',
+    body: {
+      reaction: 'hmm'
+    }
+  }
+}
+```
+
+* reacted ... 投稿にリアクションされた。`reaction`プロパティにリアクションコードが含まれます。
+* pollVoted ... アンケートに投票された。`choice`プロパティに選択肢ID、`userId`に投票者IDが含まれます。
+
 9.0.0
 -----
 
diff --git a/package.json b/package.json
index 27bf5c0f13..dc76ad0f81 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
 		"@types/websocket": "0.0.40",
 		"@types/ws": "6.0.1",
 		"animejs": "2.2.0",
+		"autobind-decorator": "2.1.0",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
@@ -225,8 +226,8 @@
 		"vuex-persistedstate": "2.5.4",
 		"web-push": "3.3.3",
 		"webfinger.js": "2.6.6",
-		"webpack-cli": "3.1.2",
 		"webpack": "4.20.2",
+		"webpack-cli": "3.1.2",
 		"websocket": "1.0.28",
 		"ws": "6.0.0",
 		"xev": "2.0.1"
diff --git a/src/client/app/common/scripts/compose-notification.ts b/src/client/app/common/scripts/compose-notification.ts
index f42af94370..65087cc98e 100644
--- a/src/client/app/common/scripts/compose-notification.ts
+++ b/src/client/app/common/scripts/compose-notification.ts
@@ -13,21 +13,21 @@ type Notification = {
 
 export default function(type, data): Notification {
 	switch (type) {
-		case 'drive_file_created':
+		case 'driveFileCreated':
 			return {
 				title: '%i18n:common.notification.file-uploaded%',
 				body: data.name,
 				icon: data.url
 			};
 
-		case 'unread_messaging_message':
+		case 'unreadMessagingMessage':
 			return {
 				title: '%i18n:common.notification.message-from%'.split("{}")[0] + `${getUserName(data.user)}` + '%i18n:common.notification.message-from%'.split("{}")[1] ,
 				body: data.text, // TODO: getMessagingMessageSummary(data),
 				icon: data.user.avatarUrl
 			};
 
-		case 'reversi_invited':
+		case 'reversiInvited':
 			return {
 				title: '%i18n:common.notification.reversi-invited%',
 				body: '%i18n:common.notification.reversi-invited-by%'.split("{}")[0] + `${getUserName(data.parent)}` + '%i18n:common.notification.reversi-invited-by%'.split("{}")[1],
diff --git a/src/client/app/common/scripts/note-subscriber.ts b/src/client/app/common/scripts/note-subscriber.ts
new file mode 100644
index 0000000000..5fc82942d5
--- /dev/null
+++ b/src/client/app/common/scripts/note-subscriber.ts
@@ -0,0 +1,105 @@
+import Vue from 'vue';
+
+export default prop => ({
+	data() {
+		return {
+			connection: null
+		};
+	},
+
+	computed: {
+		$_ns_note_(): any {
+			return this[prop];
+		},
+
+		$_ns_isRenote(): boolean {
+			return (this.$_ns_note_.renote &&
+				this.$_ns_note_.text == null &&
+				this.$_ns_note_.fileIds.length == 0 &&
+				this.$_ns_note_.poll == null);
+		},
+
+		$_ns_target(): any {
+			return this._ns_isRenote ? this.$_ns_note_.renote : this.$_ns_note_;
+		},
+	},
+
+	created() {
+		if (this.$store.getters.isSignedIn) {
+			this.connection = (this as any).os.stream;
+		}
+	},
+
+	mounted() {
+		this.capture(true);
+
+		if (this.$store.getters.isSignedIn) {
+			this.connection.on('_connected_', this.onStreamConnected);
+		}
+	},
+
+	beforeDestroy() {
+		this.decapture(true);
+
+		if (this.$store.getters.isSignedIn) {
+			this.connection.off('_connected_', this.onStreamConnected);
+		}
+	},
+
+	methods: {
+		capture(withHandler = false) {
+			if (this.$store.getters.isSignedIn) {
+				const data = {
+					id: this.$_ns_target.id
+				} as any;
+
+				if (
+					(this.$_ns_target.visibleUserIds || []).includes(this.$store.state.i.id) ||
+					(this.$_ns_target.mentions || []).includes(this.$store.state.i.id)
+				) {
+					data.read = true;
+				}
+
+				this.connection.send('sn', data);
+				if (withHandler) this.connection.on('noteUpdated', this.onStreamNoteUpdated);
+			}
+		},
+
+		decapture(withHandler = false) {
+			if (this.$store.getters.isSignedIn) {
+				this.connection.send('un', {
+					id: this.$_ns_target.id
+				});
+				if (withHandler) this.connection.off('noteUpdated', this.onStreamNoteUpdated);
+			}
+		},
+
+		onStreamConnected() {
+			this.capture();
+		},
+
+		onStreamNoteUpdated(data) {
+			const { type, id, body } = data;
+
+			if (id !== this.$_ns_target.id) return;
+
+			switch (type) {
+				case 'reacted': {
+					const reaction = body.reaction;
+					if (this.$_ns_target.reactionCounts == null) Vue.set(this.$_ns_target, 'reactionCounts', {});
+					this.$_ns_target.reactionCounts[reaction] = (this.$_ns_target.reactionCounts[reaction] || 0) + 1;
+					break;
+				}
+
+				case 'pollVoted': {
+					if (body.userId == this.$store.state.i.id) return;
+					const choice = body.choice;
+					this.$_ns_target.poll.choices.find(c => c.id === choice).votes++;
+					break;
+				}
+			}
+
+			this.$emit(`update:${prop}`, this.$_ns_note_);
+		},
+	}
+});
diff --git a/src/client/app/common/scripts/stream.ts b/src/client/app/common/scripts/stream.ts
new file mode 100644
index 0000000000..7dc130937b
--- /dev/null
+++ b/src/client/app/common/scripts/stream.ts
@@ -0,0 +1,318 @@
+import autobind from 'autobind-decorator';
+import { EventEmitter } from 'eventemitter3';
+import * as ReconnectingWebsocket from 'reconnecting-websocket';
+import { wsUrl } from '../../config';
+import MiOS from '../../mios';
+
+/**
+ * Misskey stream connection
+ */
+export default class Stream extends EventEmitter {
+	private stream: ReconnectingWebsocket;
+	private state: string;
+	private buffer: any[];
+	private sharedConnections: SharedConnection[] = [];
+	private nonSharedConnections: NonSharedConnection[] = [];
+
+	constructor(os: MiOS) {
+		super();
+
+		this.state = 'initializing';
+		this.buffer = [];
+
+		const user = os.store.state.i;
+
+		this.stream = new ReconnectingWebsocket(wsUrl + (user ? `?i=${user.token}` : ''));
+		this.stream.addEventListener('open', this.onOpen);
+		this.stream.addEventListener('close', this.onClose);
+		this.stream.addEventListener('message', this.onMessage);
+
+		if (user) {
+			const main = this.useSharedConnection('main');
+
+			// 自分の情報が更新されたとき
+			main.on('meUpdated', i => {
+				os.store.dispatch('mergeMe', i);
+			});
+
+			main.on('readAllNotifications', () => {
+				os.store.dispatch('mergeMe', {
+					hasUnreadNotification: false
+				});
+			});
+
+			main.on('unreadNotification', () => {
+				os.store.dispatch('mergeMe', {
+					hasUnreadNotification: true
+				});
+			});
+
+			main.on('readAllMessagingMessages', () => {
+				os.store.dispatch('mergeMe', {
+					hasUnreadMessagingMessage: false
+				});
+			});
+
+			main.on('unreadMessagingMessage', () => {
+				os.store.dispatch('mergeMe', {
+					hasUnreadMessagingMessage: true
+				});
+			});
+
+			main.on('unreadMention', () => {
+				os.store.dispatch('mergeMe', {
+					hasUnreadMentions: true
+				});
+			});
+
+			main.on('readAllUnreadMentions', () => {
+				os.store.dispatch('mergeMe', {
+					hasUnreadMentions: false
+				});
+			});
+
+			main.on('unreadSpecifiedNote', () => {
+				os.store.dispatch('mergeMe', {
+					hasUnreadSpecifiedNotes: true
+				});
+			});
+
+			main.on('readAllUnreadSpecifiedNotes', () => {
+				os.store.dispatch('mergeMe', {
+					hasUnreadSpecifiedNotes: false
+				});
+			});
+
+			main.on('clientSettingUpdated', x => {
+				os.store.commit('settings/set', {
+					key: x.key,
+					value: x.value
+				});
+			});
+
+			main.on('homeUpdated', x => {
+				os.store.commit('settings/setHome', x);
+			});
+
+			main.on('mobileHomeUpdated', x => {
+				os.store.commit('settings/setMobileHome', x);
+			});
+
+			main.on('widgetUpdated', x => {
+				os.store.commit('settings/setWidget', {
+					id: x.id,
+					data: x.data
+				});
+			});
+
+			// トークンが再生成されたとき
+			// このままではMisskeyが利用できないので強制的にサインアウトさせる
+			main.on('myTokenRegenerated', () => {
+				alert('%i18n:common.my-token-regenerated%');
+				os.signout();
+			});
+		}
+	}
+
+	public useSharedConnection = (channel: string): SharedConnection => {
+		const existConnection = this.sharedConnections.find(c => c.channel === channel);
+
+		if (existConnection) {
+			existConnection.use();
+			return existConnection;
+		} else {
+			const connection = new SharedConnection(this, channel);
+			connection.use();
+			this.sharedConnections.push(connection);
+			return connection;
+		}
+	}
+
+	@autobind
+	public removeSharedConnection(connection: SharedConnection) {
+		this.sharedConnections = this.sharedConnections.filter(c => c.id !== connection.id);
+	}
+
+	public connectToChannel = (channel: string, params?: any): NonSharedConnection => {
+		const connection = new NonSharedConnection(this, channel, params);
+		this.nonSharedConnections.push(connection);
+		return connection;
+	}
+
+	@autobind
+	public disconnectToChannel(connection: NonSharedConnection) {
+		this.nonSharedConnections = this.nonSharedConnections.filter(c => c.id !== connection.id);
+	}
+
+	/**
+	 * Callback of when open connection
+	 */
+	@autobind
+	private onOpen() {
+		const isReconnect = this.state == 'reconnecting';
+
+		this.state = 'connected';
+		this.emit('_connected_');
+
+		// バッファーを処理
+		const _buffer = [].concat(this.buffer); // Shallow copy
+		this.buffer = []; // Clear buffer
+		_buffer.forEach(data => {
+			this.send(data); // Resend each buffered messages
+		});
+
+		// チャンネル再接続
+		if (isReconnect) {
+			this.sharedConnections.forEach(c => {
+				c.connect();
+			});
+			this.nonSharedConnections.forEach(c => {
+				c.connect();
+			});
+		}
+	}
+
+	/**
+	 * Callback of when close connection
+	 */
+	@autobind
+	private onClose() {
+		this.state = 'reconnecting';
+		this.emit('_disconnected_');
+	}
+
+	/**
+	 * Callback of when received a message from connection
+	 */
+	@autobind
+	private onMessage(message) {
+		const { type, body } = JSON.parse(message.data);
+
+		if (type == 'channel') {
+			const id = body.id;
+			const connection = this.sharedConnections.find(c => c.id === id) || this.nonSharedConnections.find(c => c.id === id);
+			connection.emit(body.type, body.body);
+		} else {
+			this.emit(type, body);
+		}
+	}
+
+	/**
+	 * Send a message to connection
+	 */
+	@autobind
+	public send(typeOrPayload, payload?) {
+		const data = payload === undefined ? typeOrPayload : {
+			type: typeOrPayload,
+			body: payload
+		};
+
+		// まだ接続が確立されていなかったらバッファリングして次に接続した時に送信する
+		if (this.state != 'connected') {
+			this.buffer.push(data);
+			return;
+		}
+
+		this.stream.send(JSON.stringify(data));
+	}
+
+	/**
+	 * Close this connection
+	 */
+	@autobind
+	public close() {
+		this.stream.removeEventListener('open', this.onOpen);
+		this.stream.removeEventListener('message', this.onMessage);
+	}
+}
+
+abstract class Connection extends EventEmitter {
+	public channel: string;
+	public id: string;
+	protected params: any;
+	protected stream: Stream;
+
+	constructor(stream: Stream, channel: string, params?: any) {
+		super();
+
+		this.stream = stream;
+		this.channel = channel;
+		this.params = params;
+		this.id = Math.random().toString();
+		this.connect();
+	}
+
+	@autobind
+	public connect() {
+		this.stream.send('connect', {
+			channel: this.channel,
+			id: this.id,
+			params: this.params
+		});
+	}
+
+	@autobind
+	public send(typeOrPayload, payload?) {
+		const data = payload === undefined ? typeOrPayload : {
+			type: typeOrPayload,
+			body: payload
+		};
+
+		this.stream.send('channel', {
+			id: this.id,
+			body: data
+		});
+	}
+
+	public abstract dispose: () => void;
+}
+
+class SharedConnection extends Connection {
+	private users = 0;
+	private disposeTimerId: any;
+
+	constructor(stream: Stream, channel: string) {
+		super(stream, channel);
+	}
+
+	@autobind
+	public use() {
+		this.users++;
+
+		// タイマー解除
+		if (this.disposeTimerId) {
+			clearTimeout(this.disposeTimerId);
+			this.disposeTimerId = null;
+		}
+	}
+
+	@autobind
+	public dispose() {
+		this.users--;
+
+		// そのコネクションの利用者が誰もいなくなったら
+		if (this.users === 0) {
+			// また直ぐに再利用される可能性があるので、一定時間待ち、
+			// 新たな利用者が現れなければコネクションを切断する
+			this.disposeTimerId = setTimeout(() => {
+				this.disposeTimerId = null;
+				this.removeAllListeners();
+				this.stream.send('disconnect', { id: this.id });
+				this.stream.removeSharedConnection(this);
+			}, 3000);
+		}
+	}
+}
+
+class NonSharedConnection extends Connection {
+	constructor(stream: Stream, channel: string, params?: any) {
+		super(stream, channel, params);
+	}
+
+	@autobind
+	public dispose() {
+		this.removeAllListeners();
+		this.stream.send('disconnect', { id: this.id });
+		this.stream.disconnectToChannel(this);
+	}
+}
diff --git a/src/client/app/common/scripts/streaming/drive.ts b/src/client/app/common/scripts/streaming/drive.ts
deleted file mode 100644
index 50fff05737..0000000000
--- a/src/client/app/common/scripts/streaming/drive.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Drive stream connection
- */
-export class DriveStream extends Stream {
-	constructor(os: MiOS, me) {
-		super(os, 'drive', {
-			i: me.token
-		});
-	}
-}
-
-export class DriveStreamManager extends StreamManager<DriveStream> {
-	private me;
-	private os: MiOS;
-
-	constructor(os: MiOS, me) {
-		super();
-
-		this.me = me;
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new DriveStream(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/games/reversi/reversi-game.ts b/src/client/app/common/scripts/streaming/games/reversi/reversi-game.ts
deleted file mode 100644
index adfa75ff3b..0000000000
--- a/src/client/app/common/scripts/streaming/games/reversi/reversi-game.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Stream from '../../stream';
-import MiOS from '../../../../../mios';
-
-export class ReversiGameStream extends Stream {
-	constructor(os: MiOS, me, game) {
-		super(os, 'games/reversi-game', me ? {
-			i: me.token,
-			game: game.id
-		} : {
-			game: game.id
-		});
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/games/reversi/reversi.ts b/src/client/app/common/scripts/streaming/games/reversi/reversi.ts
deleted file mode 100644
index 1f4fd8c63e..0000000000
--- a/src/client/app/common/scripts/streaming/games/reversi/reversi.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import StreamManager from '../../stream-manager';
-import Stream from '../../stream';
-import MiOS from '../../../../../mios';
-
-export class ReversiStream extends Stream {
-	constructor(os: MiOS, me) {
-		super(os, 'games/reversi', {
-			i: me.token
-		});
-	}
-}
-
-export class ReversiStreamManager extends StreamManager<ReversiStream> {
-	private me;
-	private os: MiOS;
-
-	constructor(os: MiOS, me) {
-		super();
-
-		this.me = me;
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new ReversiStream(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/global-timeline.ts b/src/client/app/common/scripts/streaming/global-timeline.ts
deleted file mode 100644
index a639f1595c..0000000000
--- a/src/client/app/common/scripts/streaming/global-timeline.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Global timeline stream connection
- */
-export class GlobalTimelineStream extends Stream {
-	constructor(os: MiOS, me) {
-		super(os, 'global-timeline', {
-			i: me.token
-		});
-	}
-}
-
-export class GlobalTimelineStreamManager extends StreamManager<GlobalTimelineStream> {
-	private me;
-	private os: MiOS;
-
-	constructor(os: MiOS, me) {
-		super();
-
-		this.me = me;
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new GlobalTimelineStream(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/hashtag.ts b/src/client/app/common/scripts/streaming/hashtag.ts
deleted file mode 100644
index 276b8f8d3d..0000000000
--- a/src/client/app/common/scripts/streaming/hashtag.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Stream from './stream';
-import MiOS from '../../../mios';
-
-export class HashtagStream extends Stream {
-	constructor(os: MiOS, me, q) {
-		super(os, 'hashtag', me ? {
-			i: me.token,
-			q: JSON.stringify(q)
-		} : {
-			q: JSON.stringify(q)
-		});
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts
deleted file mode 100644
index 26729507fb..0000000000
--- a/src/client/app/common/scripts/streaming/home.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Home stream connection
- */
-export class HomeStream extends Stream {
-	constructor(os: MiOS, me) {
-		super(os, '', {
-			i: me.token
-		});
-
-		// 最終利用日時を更新するため定期的にaliveメッセージを送信
-		setInterval(() => {
-			this.send({ type: 'alive' });
-			me.lastUsedAt = new Date();
-		}, 1000 * 60);
-
-		// 自分の情報が更新されたとき
-		this.on('meUpdated', i => {
-			if (os.debug) {
-				console.log('I updated:', i);
-			}
-
-			os.store.dispatch('mergeMe', i);
-		});
-
-		this.on('read_all_notifications', () => {
-			os.store.dispatch('mergeMe', {
-				hasUnreadNotification: false
-			});
-		});
-
-		this.on('unread_notification', () => {
-			os.store.dispatch('mergeMe', {
-				hasUnreadNotification: true
-			});
-		});
-
-		this.on('read_all_messaging_messages', () => {
-			os.store.dispatch('mergeMe', {
-				hasUnreadMessagingMessage: false
-			});
-		});
-
-		this.on('unread_messaging_message', () => {
-			os.store.dispatch('mergeMe', {
-				hasUnreadMessagingMessage: true
-			});
-		});
-
-		this.on('unreadMention', () => {
-			os.store.dispatch('mergeMe', {
-				hasUnreadMentions: true
-			});
-		});
-
-		this.on('readAllUnreadMentions', () => {
-			os.store.dispatch('mergeMe', {
-				hasUnreadMentions: false
-			});
-		});
-
-		this.on('unreadSpecifiedNote', () => {
-			os.store.dispatch('mergeMe', {
-				hasUnreadSpecifiedNotes: true
-			});
-		});
-
-		this.on('readAllUnreadSpecifiedNotes', () => {
-			os.store.dispatch('mergeMe', {
-				hasUnreadSpecifiedNotes: false
-			});
-		});
-
-		this.on('clientSettingUpdated', x => {
-			os.store.commit('settings/set', {
-				key: x.key,
-				value: x.value
-			});
-		});
-
-		this.on('home_updated', x => {
-			os.store.commit('settings/setHome', x);
-		});
-
-		this.on('mobile_home_updated', x => {
-			os.store.commit('settings/setMobileHome', x);
-		});
-
-		this.on('widgetUpdated', x => {
-			os.store.commit('settings/setWidget', {
-				id: x.id,
-				data: x.data
-			});
-		});
-
-		// トークンが再生成されたとき
-		// このままではMisskeyが利用できないので強制的にサインアウトさせる
-		this.on('my_token_regenerated', () => {
-			alert('%i18n:common.my-token-regenerated%');
-			os.signout();
-		});
-	}
-}
-
-export class HomeStreamManager extends StreamManager<HomeStream> {
-	private me;
-	private os: MiOS;
-
-	constructor(os: MiOS, me) {
-		super();
-
-		this.me = me;
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new HomeStream(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/hybrid-timeline.ts b/src/client/app/common/scripts/streaming/hybrid-timeline.ts
deleted file mode 100644
index cd290797c4..0000000000
--- a/src/client/app/common/scripts/streaming/hybrid-timeline.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Hybrid timeline stream connection
- */
-export class HybridTimelineStream extends Stream {
-	constructor(os: MiOS, me) {
-		super(os, 'hybrid-timeline', {
-			i: me.token
-		});
-	}
-}
-
-export class HybridTimelineStreamManager extends StreamManager<HybridTimelineStream> {
-	private me;
-	private os: MiOS;
-
-	constructor(os: MiOS, me) {
-		super();
-
-		this.me = me;
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new HybridTimelineStream(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/local-timeline.ts b/src/client/app/common/scripts/streaming/local-timeline.ts
deleted file mode 100644
index 41c36aa14c..0000000000
--- a/src/client/app/common/scripts/streaming/local-timeline.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Local timeline stream connection
- */
-export class LocalTimelineStream extends Stream {
-	constructor(os: MiOS, me) {
-		super(os, 'local-timeline', me ? {
-			i: me.token
-		} : {});
-	}
-}
-
-export class LocalTimelineStreamManager extends StreamManager<LocalTimelineStream> {
-	private me;
-	private os: MiOS;
-
-	constructor(os: MiOS, me) {
-		super();
-
-		this.me = me;
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new LocalTimelineStream(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/messaging-index.ts b/src/client/app/common/scripts/streaming/messaging-index.ts
deleted file mode 100644
index addcccb952..0000000000
--- a/src/client/app/common/scripts/streaming/messaging-index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Messaging index stream connection
- */
-export class MessagingIndexStream extends Stream {
-	constructor(os: MiOS, me) {
-		super(os, 'messaging-index', {
-			i: me.token
-		});
-	}
-}
-
-export class MessagingIndexStreamManager extends StreamManager<MessagingIndexStream> {
-	private me;
-	private os: MiOS;
-
-	constructor(os: MiOS, me) {
-		super();
-
-		this.me = me;
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new MessagingIndexStream(this.os, this.me);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/messaging.ts b/src/client/app/common/scripts/streaming/messaging.ts
deleted file mode 100644
index a59377d867..0000000000
--- a/src/client/app/common/scripts/streaming/messaging.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import Stream from './stream';
-import MiOS from '../../../mios';
-
-/**
- * Messaging stream connection
- */
-export class MessagingStream extends Stream {
-	constructor(os: MiOS, me, otherparty) {
-		super(os, 'messaging', {
-			i: me.token,
-			otherparty
-		});
-
-		(this as any).on('_connected_', () => {
-			this.send({
-				i: me.token
-			});
-		});
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/notes-stats.ts b/src/client/app/common/scripts/streaming/notes-stats.ts
deleted file mode 100644
index 9e3e78a709..0000000000
--- a/src/client/app/common/scripts/streaming/notes-stats.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Notes stats stream connection
- */
-export class NotesStatsStream extends Stream {
-	constructor(os: MiOS) {
-		super(os, 'notes-stats');
-	}
-}
-
-export class NotesStatsStreamManager extends StreamManager<NotesStatsStream> {
-	private os: MiOS;
-
-	constructor(os: MiOS) {
-		super();
-
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new NotesStatsStream(this.os);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/server-stats.ts b/src/client/app/common/scripts/streaming/server-stats.ts
deleted file mode 100644
index 9983dfcaf0..0000000000
--- a/src/client/app/common/scripts/streaming/server-stats.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import Stream from './stream';
-import StreamManager from './stream-manager';
-import MiOS from '../../../mios';
-
-/**
- * Server stats stream connection
- */
-export class ServerStatsStream extends Stream {
-	constructor(os: MiOS) {
-		super(os, 'server-stats');
-	}
-}
-
-export class ServerStatsStreamManager extends StreamManager<ServerStatsStream> {
-	private os: MiOS;
-
-	constructor(os: MiOS) {
-		super();
-
-		this.os = os;
-	}
-
-	public getConnection() {
-		if (this.connection == null) {
-			this.connection = new ServerStatsStream(this.os);
-		}
-
-		return this.connection;
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/stream-manager.ts b/src/client/app/common/scripts/streaming/stream-manager.ts
deleted file mode 100644
index 8dd06f67d3..0000000000
--- a/src/client/app/common/scripts/streaming/stream-manager.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { EventEmitter } from 'eventemitter3';
-import * as uuid from 'uuid';
-import Connection from './stream';
-import { erase } from '../../../../../prelude/array';
-
-/**
- * ストリーム接続を管理するクラス
- * 複数の場所から同じストリームを利用する際、接続をまとめたりする
- */
-export default abstract class StreamManager<T extends Connection> extends EventEmitter {
-	private _connection: T = null;
-
-	private disposeTimerId: any;
-
-	/**
-	 * コネクションを必要としているユーザー
-	 */
-	private users = [];
-
-	protected set connection(connection: T) {
-		this._connection = connection;
-
-		if (this._connection == null) {
-			this.emit('disconnected');
-		} else {
-			this.emit('connected', this._connection);
-
-			this._connection.on('_connected_', () => {
-				this.emit('_connected_');
-			});
-
-			this._connection.on('_disconnected_', () => {
-				this.emit('_disconnected_');
-			});
-
-			this._connection.user = 'Managed';
-		}
-	}
-
-	protected get connection() {
-		return this._connection;
-	}
-
-	/**
-	 * コネクションを持っているか否か
-	 */
-	public get hasConnection() {
-		return this._connection != null;
-	}
-
-	public get state(): string {
-		if (!this.hasConnection) return 'no-connection';
-		return this._connection.state;
-	}
-
-	/**
-	 * コネクションを要求します
-	 */
-	public abstract getConnection(): T;
-
-	/**
-	 * 現在接続しているコネクションを取得します
-	 */
-	public borrow() {
-		return this._connection;
-	}
-
-	/**
-	 * コネクションを要求するためのユーザーIDを発行します
-	 */
-	public use() {
-		// タイマー解除
-		if (this.disposeTimerId) {
-			clearTimeout(this.disposeTimerId);
-			this.disposeTimerId = null;
-		}
-
-		// ユーザーID生成
-		const userId = uuid();
-
-		this.users.push(userId);
-
-		this._connection.user = `Managed (${ this.users.length })`;
-
-		return userId;
-	}
-
-	/**
-	 * コネクションを利用し終わってもう必要ないことを通知します
-	 * @param userId use で発行したユーザーID
-	 */
-	public dispose(userId) {
-		this.users = erase(userId, this.users);
-
-		this._connection.user = `Managed (${ this.users.length })`;
-
-		// 誰もコネクションの利用者がいなくなったら
-		if (this.users.length == 0) {
-			// また直ぐに再利用される可能性があるので、一定時間待ち、
-			// 新たな利用者が現れなければコネクションを切断する
-			this.disposeTimerId = setTimeout(() => {
-				this.disposeTimerId = null;
-
-				this.connection.close();
-				this.connection = null;
-			}, 3000);
-		}
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/stream.ts b/src/client/app/common/scripts/streaming/stream.ts
deleted file mode 100644
index 4ab78f1190..0000000000
--- a/src/client/app/common/scripts/streaming/stream.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { EventEmitter } from 'eventemitter3';
-import * as uuid from 'uuid';
-import * as ReconnectingWebsocket from 'reconnecting-websocket';
-import { wsUrl } from '../../../config';
-import MiOS from '../../../mios';
-
-/**
- * Misskey stream connection
- */
-export default class Connection extends EventEmitter {
-	public state: string;
-	private buffer: any[];
-	public socket: ReconnectingWebsocket;
-	public name: string;
-	public connectedAt: Date;
-	public user: string = null;
-	public in: number = 0;
-	public out: number = 0;
-	public inout: Array<{
-		type: 'in' | 'out',
-		at: Date,
-		data: string
-	}> = [];
-	public id: string;
-	public isSuspended = false;
-	private os: MiOS;
-
-	constructor(os: MiOS, endpoint, params?) {
-		super();
-
-		//#region BIND
-		this.onOpen =    this.onOpen.bind(this);
-		this.onClose =   this.onClose.bind(this);
-		this.onMessage = this.onMessage.bind(this);
-		this.send =      this.send.bind(this);
-		this.close =     this.close.bind(this);
-		//#endregion
-
-		this.id = uuid();
-		this.os = os;
-		this.name = endpoint;
-		this.state = 'initializing';
-		this.buffer = [];
-
-		const query = params
-			? Object.keys(params)
-				.map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`)
-				.join('&')
-			: null;
-
-		this.socket = new ReconnectingWebsocket(`${wsUrl}/${endpoint}${query ? `?${query}` : ''}`);
-		this.socket.addEventListener('open', this.onOpen);
-		this.socket.addEventListener('close', this.onClose);
-		this.socket.addEventListener('message', this.onMessage);
-
-		// Register this connection for debugging
-		this.os.registerStreamConnection(this);
-	}
-
-	/**
-	 * Callback of when open connection
-	 */
-	private onOpen() {
-		this.state = 'connected';
-		this.emit('_connected_');
-
-		this.connectedAt = new Date();
-
-		// バッファーを処理
-		const _buffer = [].concat(this.buffer); // Shallow copy
-		this.buffer = []; // Clear buffer
-		_buffer.forEach(data => {
-			this.send(data); // Resend each buffered messages
-
-			if (this.os.debug) {
-				this.out++;
-				this.inout.push({ type: 'out', at: new Date(), data });
-			}
-		});
-	}
-
-	/**
-	 * Callback of when close connection
-	 */
-	private onClose() {
-		this.state = 'reconnecting';
-		this.emit('_disconnected_');
-	}
-
-	/**
-	 * Callback of when received a message from connection
-	 */
-	private onMessage(message) {
-		if (this.isSuspended) return;
-
-		if (this.os.debug) {
-			this.in++;
-			this.inout.push({ type: 'in', at: new Date(), data: message.data });
-		}
-
-		try {
-			const msg = JSON.parse(message.data);
-			if (msg.type) this.emit(msg.type, msg.body);
-		} catch (e) {
-			// noop
-		}
-	}
-
-	/**
-	 * Send a message to connection
-	 */
-	public send(data) {
-		if (this.isSuspended) return;
-
-		// まだ接続が確立されていなかったらバッファリングして次に接続した時に送信する
-		if (this.state != 'connected') {
-			this.buffer.push(data);
-			return;
-		}
-
-		if (this.os.debug) {
-			this.out++;
-			this.inout.push({ type: 'out', at: new Date(), data });
-		}
-
-		this.socket.send(JSON.stringify(data));
-	}
-
-	/**
-	 * Close this connection
-	 */
-	public close() {
-		this.os.unregisterStreamConnection(this);
-		this.socket.removeEventListener('open', this.onOpen);
-		this.socket.removeEventListener('message', this.onMessage);
-	}
-}
diff --git a/src/client/app/common/scripts/streaming/user-list.ts b/src/client/app/common/scripts/streaming/user-list.ts
deleted file mode 100644
index 30a52b98dd..0000000000
--- a/src/client/app/common/scripts/streaming/user-list.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-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/common/views/components/games/reversi/reversi.gameroom.vue b/src/client/app/common/views/components/games/reversi/reversi.gameroom.vue
index 1539c88de0..0a18e0b19a 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.gameroom.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.gameroom.vue
@@ -9,7 +9,6 @@
 import Vue from 'vue';
 import XGame from './reversi.game.vue';
 import XRoom from './reversi.room.vue';
-import { ReversiGameStream } from '../../../../scripts/streaming/games/reversi/reversi-game';
 
 export default Vue.extend({
 	components: {
@@ -34,12 +33,13 @@ export default Vue.extend({
 	},
 	created() {
 		this.g = this.game;
-		this.connection = new ReversiGameStream((this as any).os, this.$store.state.i, this.game);
+		this.connection = (this as any).os.stream.connectToChannel('gamesReversiGame', {
+			gameId: this.game.id
+		});
 		this.connection.on('started', this.onStarted);
 	},
 	beforeDestroy() {
-		this.connection.off('started', this.onStarted);
-		this.connection.close();
+		this.connection.dispose();
 	},
 	methods: {
 		onStarted(game) {
diff --git a/src/client/app/common/views/components/games/reversi/reversi.index.vue b/src/client/app/common/views/components/games/reversi/reversi.index.vue
index 3725aa6cb4..a040162802 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.index.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.index.vue
@@ -59,15 +59,13 @@ export default Vue.extend({
 			myGames: [],
 			matching: null,
 			invitations: [],
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 
 	mounted() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.streams.reversiStream.getConnection();
-			this.connectionId = (this as any).os.streams.reversiStream.use();
+			this.connection = (this as any).os.stream.useSharedConnection('gamesReversi');
 
 			this.connection.on('invited', this.onInvited);
 
@@ -90,8 +88,7 @@ export default Vue.extend({
 
 	beforeDestroy() {
 		if (this.connection) {
-			this.connection.off('invited', this.onInvited);
-			(this as any).os.streams.reversiStream.dispose(this.connectionId);
+			this.connection.dispose();
 		}
 	},
 
diff --git a/src/client/app/common/views/components/games/reversi/reversi.vue b/src/client/app/common/views/components/games/reversi/reversi.vue
index 6eb9511ce9..f2156bc41b 100644
--- a/src/client/app/common/views/components/games/reversi/reversi.vue
+++ b/src/client/app/common/views/components/games/reversi/reversi.vue
@@ -47,7 +47,6 @@ export default Vue.extend({
 			game: null,
 			matching: null,
 			connection: null,
-			connectionId: null,
 			pingClock: null
 		};
 	},
@@ -66,8 +65,7 @@ export default Vue.extend({
 		this.fetch();
 
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.streams.reversiStream.getConnection();
-			this.connectionId = (this as any).os.streams.reversiStream.use();
+			this.connection = (this as any).os.stream.useSharedConnection('gamesReversi');
 
 			this.connection.on('matched', this.onMatched);
 
@@ -84,9 +82,7 @@ export default Vue.extend({
 
 	beforeDestroy() {
 		if (this.connection) {
-			this.connection.off('matched', this.onMatched);
-			(this as any).os.streams.reversiStream.dispose(this.connectionId);
-
+			this.connection.dispose();
 			clearInterval(this.pingClock);
 		}
 	},
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index 98661bc39d..c2cd79e116 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -30,7 +30,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { MessagingStream } from '../../scripts/streaming/messaging';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import { url } from '../../../config';
@@ -72,7 +71,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = new MessagingStream((this as any).os, this.$store.state.i, this.user.id);
+		this.connection =((this as any).os.stream.connectToChannel('messaging', { otherparty: this.user.id });
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
@@ -92,9 +91,7 @@ export default Vue.extend({
 	},
 
 	beforeDestroy() {
-		this.connection.off('message', this.onMessage);
-		this.connection.off('read', this.onRead);
-		this.connection.close();
+		this.connection.dispose();
 
 		if (this.isNaked) {
 			window.removeEventListener('scroll', this.onScroll);
@@ -166,6 +163,7 @@ export default Vue.extend({
 		},
 
 		onMessage(message) {
+			console.log(message);
 			// サウンドを再生する
 			if (this.$store.state.device.enableSounds) {
 				const sound = new Audio(`${url}/assets/message.mp3`);
diff --git a/src/client/app/common/views/components/messaging.vue b/src/client/app/common/views/components/messaging.vue
index 91453e16ec..f5b5e232f6 100644
--- a/src/client/app/common/views/components/messaging.vue
+++ b/src/client/app/common/views/components/messaging.vue
@@ -71,13 +71,11 @@ export default Vue.extend({
 			messages: [],
 			q: null,
 			result: [],
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 	mounted() {
-		this.connection = (this as any).os.streams.messagingIndexStream.getConnection();
-		this.connectionId = (this as any).os.streams.messagingIndexStream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('messagingIndex');
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
@@ -88,9 +86,7 @@ export default Vue.extend({
 		});
 	},
 	beforeDestroy() {
-		this.connection.off('message', this.onMessage);
-		this.connection.off('read', this.onRead);
-		(this as any).os.streams.messagingIndexStream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 	methods: {
 		getAcct,
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 7025ecea33..9224f82cb9 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -56,7 +56,7 @@ export default Vue.extend({
 				username: this.username,
 				password: this.password,
 				token: this.user && this.user.twoFactorEnabled ? this.token : undefined
-			}).then(() => {
+			}, true).then(() => {
 				location.reload();
 			}).catch(() => {
 				alert('%i18n:@login-failed%');
diff --git a/src/client/app/common/views/components/signup.vue b/src/client/app/common/views/components/signup.vue
index b817ca729d..8e06b13491 100644
--- a/src/client/app/common/views/components/signup.vue
+++ b/src/client/app/common/views/components/signup.vue
@@ -131,11 +131,11 @@ export default Vue.extend({
 				password: this.password,
 				invitationCode: this.invitationCode,
 				'g-recaptcha-response': this.meta.recaptchaSitekey != null ? (window as any).grecaptcha.getResponse() : null
-			}).then(() => {
+			}, true).then(() => {
 				(this as any).api('signin', {
 					username: this.username,
 					password: this.password
-				}).then(() => {
+				}, true).then(() => {
 					location.href = '/';
 				});
 			}).catch(() => {
diff --git a/src/client/app/common/views/components/stream-indicator.vue b/src/client/app/common/views/components/stream-indicator.vue
index d573db32e6..0f25b37cc9 100644
--- a/src/client/app/common/views/components/stream-indicator.vue
+++ b/src/client/app/common/views/components/stream-indicator.vue
@@ -22,7 +22,7 @@ import * as anime from 'animejs';
 export default Vue.extend({
 	computed: {
 		stream() {
-			return (this as any).os.stream;
+			return (this as any).os.stream.useSharedConnection('main');
 		}
 	},
 	created() {
diff --git a/src/client/app/common/views/components/welcome-timeline.vue b/src/client/app/common/views/components/welcome-timeline.vue
index 6934fb4856..4a66db57b8 100644
--- a/src/client/app/common/views/components/welcome-timeline.vue
+++ b/src/client/app/common/views/components/welcome-timeline.vue
@@ -38,23 +38,20 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			notes: [],
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 
 	mounted() {
 		this.fetch();
 
-		this.connection = (this as any).os.streams.localTimelineStream.getConnection();
-		this.connectionId = (this as any).os.streams.localTimelineStream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('localTimeline');
 
 		this.connection.on('note', this.onNote);
 	},
 
 	beforeDestroy() {
-		this.connection.off('note', this.onNote);
-		(this as any).os.streams.localTimelineStream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 
 	methods: {
diff --git a/src/client/app/common/views/widgets/photo-stream.vue b/src/client/app/common/views/widgets/photo-stream.vue
index 3e24c58e8e..047b01df4f 100644
--- a/src/client/app/common/views/widgets/photo-stream.vue
+++ b/src/client/app/common/views/widgets/photo-stream.vue
@@ -24,15 +24,13 @@ export default define({
 		return {
 			images: [],
 			fetching: true,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 
-		this.connection.on('drive_file_created', this.onDriveFileCreated);
+		this.connection.on('driveFileCreated', this.onDriveFileCreated);
 
 		(this as any).api('drive/stream', {
 			type: 'image/*',
@@ -43,8 +41,7 @@ export default define({
 		});
 	},
 	beforeDestroy() {
-		this.connection.off('drive_file_created', this.onDriveFileCreated);
-		(this as any).os.stream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 	methods: {
 		onDriveFileCreated(file) {
diff --git a/src/client/app/common/views/widgets/posts-monitor.vue b/src/client/app/common/views/widgets/posts-monitor.vue
index 18df1241a9..1c70e6dbc4 100644
--- a/src/client/app/common/views/widgets/posts-monitor.vue
+++ b/src/client/app/common/views/widgets/posts-monitor.vue
@@ -82,7 +82,6 @@ export default define({
 	data() {
 		return {
 			connection: null,
-			connectionId: null,
 			viewBoxY: 30,
 			stats: [],
 			fediGradientId: uuid(),
@@ -110,8 +109,7 @@ export default define({
 		}
 	},
 	mounted() {
-		this.connection = (this as any).os.streams.notesStatsStream.getConnection();
-		this.connectionId = (this as any).os.streams.notesStatsStream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('notesStats');
 
 		this.connection.on('stats', this.onStats);
 		this.connection.on('statsLog', this.onStatsLog);
@@ -121,9 +119,7 @@ export default define({
 		});
 	},
 	beforeDestroy() {
-		this.connection.off('stats', this.onStats);
-		this.connection.off('statsLog', this.onStatsLog);
-		(this as any).os.streams.notesStatsStream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 	methods: {
 		toggle() {
diff --git a/src/client/app/common/views/widgets/server.vue b/src/client/app/common/views/widgets/server.vue
index d796a3ae05..62d75e2bf6 100644
--- a/src/client/app/common/views/widgets/server.vue
+++ b/src/client/app/common/views/widgets/server.vue
@@ -45,8 +45,7 @@ export default define({
 		return {
 			fetching: true,
 			meta: null,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 	mounted() {
@@ -55,11 +54,10 @@ export default define({
 			this.fetching = false;
 		});
 
-		this.connection = (this as any).os.streams.serverStatsStream.getConnection();
-		this.connectionId = (this as any).os.streams.serverStatsStream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('serverStats');
 	},
 	beforeDestroy() {
-		(this as any).os.streams.serverStatsStream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 	methods: {
 		toggle() {
diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index a326c521db..c3bc427eab 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -12,7 +12,7 @@ export const host = address.host;
 export const hostname = address.hostname;
 export const url = address.origin;
 export const apiUrl = url + '/api';
-export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://');
+export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
 export const lang = _LANG_;
 export const langs = _LANGS_;
 export const themeColor = _THEME_COLOR_;
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 05aa928fa3..85c81d73a2 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -9,7 +9,6 @@ import './style.styl';
 
 import init from '../init';
 import fuckAdBlock from '../common/scripts/fuck-ad-block';
-import { HomeStreamManager } from '../common/scripts/streaming/home';
 import composeNotification from '../common/scripts/compose-notification';
 
 import chooseDriveFolder from './api/choose-drive-folder';
@@ -37,6 +36,7 @@ import MkTag from './views/pages/tag.vue';
 import MkReversi from './views/pages/games/reversi.vue';
 import MkShare from './views/pages/share.vue';
 import MkFollow from '../common/views/pages/follow.vue';
+import MiOS from '../mios';
 
 /**
  * init
@@ -102,62 +102,56 @@ init(async (launch) => {
 		}
 
 		if ((Notification as any).permission == 'granted') {
-			registerNotifications(os.stream);
+			registerNotifications(os);
 		}
 	}
 }, true);
 
-function registerNotifications(stream: HomeStreamManager) {
+function registerNotifications(os: MiOS) {
+	const stream = os.stream;
+
 	if (stream == null) return;
 
-	if (stream.hasConnection) {
-		attach(stream.borrow());
-	}
+	const connection = stream.useSharedConnection('main');
 
-	stream.on('connected', connection => {
-		attach(connection);
-	});
-
-	function attach(connection) {
-		connection.on('notification', notification => {
-			const _n = composeNotification('notification', notification);
-			const n = new Notification(_n.title, {
-				body: _n.body,
-				icon: _n.icon
-			});
-			setTimeout(n.close.bind(n), 6000);
+	connection.on('notification', notification => {
+		const _n = composeNotification('notification', notification);
+		const n = new Notification(_n.title, {
+			body: _n.body,
+			icon: _n.icon
 		});
+		setTimeout(n.close.bind(n), 6000);
+	});
 
-		connection.on('drive_file_created', file => {
-			const _n = composeNotification('drive_file_created', file);
-			const n = new Notification(_n.title, {
-				body: _n.body,
-				icon: _n.icon
-			});
-			setTimeout(n.close.bind(n), 5000);
+	connection.on('driveFileCreated', file => {
+		const _n = composeNotification('driveFileCreated', file);
+		const n = new Notification(_n.title, {
+			body: _n.body,
+			icon: _n.icon
 		});
+		setTimeout(n.close.bind(n), 5000);
+	});
 
-		connection.on('unread_messaging_message', message => {
-			const _n = composeNotification('unread_messaging_message', message);
-			const n = new Notification(_n.title, {
-				body: _n.body,
-				icon: _n.icon
-			});
-			n.onclick = () => {
-				n.close();
-				/*(riot as any).mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
-					user: message.user
-				});*/
-			};
-			setTimeout(n.close.bind(n), 7000);
+	connection.on('unreadMessagingMessage', message => {
+		const _n = composeNotification('unreadMessagingMessage', message);
+		const n = new Notification(_n.title, {
+			body: _n.body,
+			icon: _n.icon
 		});
+		n.onclick = () => {
+			n.close();
+			/*(riot as any).mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
+				user: message.user
+			});*/
+		};
+		setTimeout(n.close.bind(n), 7000);
+	});
 
-		connection.on('reversi_invited', matching => {
-			const _n = composeNotification('reversi_invited', matching);
-			const n = new Notification(_n.title, {
-				body: _n.body,
-				icon: _n.icon
-			});
+	connection.on('reversiInvited', matching => {
+		const _n = composeNotification('reversiInvited', matching);
+		const n = new Notification(_n.title, {
+			body: _n.body,
+			icon: _n.icon
 		});
-	}
+	});
 }
diff --git a/src/client/app/desktop/views/components/drive.vue b/src/client/app/desktop/views/components/drive.vue
index f9b7eea64e..1376a04d99 100644
--- a/src/client/app/desktop/views/components/drive.vue
+++ b/src/client/app/desktop/views/components/drive.vue
@@ -98,8 +98,7 @@ export default Vue.extend({
 			hierarchyFolders: [],
 			selectedFiles: [],
 			uploadings: [],
-			connection: null,
-			connectionId: null,
+			connection: null
 
 			/**
 			 * ドロップされようとしているか
@@ -116,8 +115,7 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.connection = (this as any).os.streams.driveStream.getConnection();
-		this.connectionId = (this as any).os.streams.driveStream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('drive');
 
 		this.connection.on('file_created', this.onStreamDriveFileCreated);
 		this.connection.on('file_updated', this.onStreamDriveFileUpdated);
@@ -132,12 +130,7 @@ export default Vue.extend({
 		}
 	},
 	beforeDestroy() {
-		this.connection.off('file_created', this.onStreamDriveFileCreated);
-		this.connection.off('file_updated', this.onStreamDriveFileUpdated);
-		this.connection.off('file_deleted', this.onStreamDriveFileDeleted);
-		this.connection.off('folder_created', this.onStreamDriveFolderCreated);
-		this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
-		(this as any).os.streams.driveStream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 	methods: {
 		onContextmenu(e) {
diff --git a/src/client/app/desktop/views/components/follow-button.vue b/src/client/app/desktop/views/components/follow-button.vue
index 4d4bd5cc5a..4d3d61dfe0 100644
--- a/src/client/app/desktop/views/components/follow-button.vue
+++ b/src/client/app/desktop/views/components/follow-button.vue
@@ -34,23 +34,18 @@ export default Vue.extend({
 		return {
 			u: this.user,
 			wait: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
-
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 		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);
+		this.connection.dispose();
 	},
 
 	methods: {
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index bdaf2ddf47..9008e26263 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -141,7 +141,6 @@ export default Vue.extend({
 	data() {
 		return {
 			connection: null,
-			connectionId: null,
 			widgetAdderSelected: null,
 			trash: []
 		};
@@ -176,12 +175,11 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 	},
 
 	beforeDestroy() {
-		(this as any).os.stream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 
 	methods: {
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue
index 0c4b560e98..b119f23d7a 100644
--- a/src/client/app/desktop/views/components/note-detail.vue
+++ b/src/client/app/desktop/views/components/note-detail.vue
@@ -93,12 +93,15 @@ import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './notes.note.sub.vue';
 import { sum } from '../../../../../prelude/array';
+import noteSubscriber from '../../../common/scripts/note-subscriber';
 
 export default Vue.extend({
 	components: {
 		XSub
 	},
 
+	mixins: [noteSubscriber('note')],
+
 	props: {
 		note: {
 			type: Object,
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index b628d045aa..3892260181 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -77,6 +77,7 @@ import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './notes.note.sub.vue';
 import { sum } from '../../../../../prelude/array';
+import noteSubscriber from '../../../common/scripts/note-subscriber';
 
 function focus(el, fn) {
 	const target = fn(el);
@@ -94,6 +95,8 @@ export default Vue.extend({
 		XSub
 	},
 
+	mixins: [noteSubscriber('note')],
+
 	props: {
 		note: {
 			type: Object,
@@ -104,9 +107,7 @@ export default Vue.extend({
 	data() {
 		return {
 			showContent: false,
-			isDetailOpened: false,
-			connection: null,
-			connectionId: null
+			isDetailOpened: false
 		};
 	},
 
@@ -168,86 +169,7 @@ export default Vue.extend({
 		}
 	},
 
-	created() {
-		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-		}
-	},
-
-	mounted() {
-		this.capture(true);
-
-		if (this.$store.getters.isSignedIn) {
-			this.connection.on('_connected_', this.onStreamConnected);
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = this.$store.getters.isSignedIn ? this.$store.state.settings.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]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	beforeDestroy() {
-		this.decapture(true);
-
-		if (this.$store.getters.isSignedIn) {
-			this.connection.off('_connected_', this.onStreamConnected);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-
 	methods: {
-		capture(withHandler = false) {
-			if (this.$store.getters.isSignedIn) {
-				const data = {
-					type: 'capture',
-					id: this.p.id
-				} as any;
-				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
-					data.read = true;
-				}
-				this.connection.send(data);
-				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-
-		decapture(withHandler = false) {
-			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
-					type: 'decapture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-
-		onStreamConnected() {
-			this.capture();
-		},
-
-		onStreamNoteUpdated(data) {
-			const note = data.note;
-			if (note.id == this.note.id) {
-				this.$emit('update:note', note);
-			} else if (note.id == this.note.renoteId) {
-				this.note.renote = note;
-			}
-		},
-
 		reply(viaKeyboard = false) {
 			(this as any).os.new(MkPostFormWindow, {
 				reply: this.p,
diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index 1f3f62395a..95b8e1355a 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -118,10 +118,10 @@ export default Vue.extend({
 			notifications: [],
 			moreNotifications: false,
 			connection: null,
-			connectionId: null,
 			getNoteSummary
 		};
 	},
+
 	computed: {
 		_notifications(): any[] {
 			return (this.notifications as any).map(notification => {
@@ -133,9 +133,9 @@ export default Vue.extend({
 			});
 		}
 	},
+
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 
 		this.connection.on('notification', this.onNotification);
 
@@ -153,10 +153,11 @@ export default Vue.extend({
 			this.fetching = false;
 		});
 	},
+
 	beforeDestroy() {
-		this.connection.off('notification', this.onNotification);
-		(this as any).os.stream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
+
 	methods: {
 		fetchMoreNotifications() {
 			this.fetchingMoreNotifications = true;
@@ -177,10 +178,11 @@ export default Vue.extend({
 				this.fetchingMoreNotifications = false;
 			});
 		},
+
 		onNotification(notification) {
 			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
 			this.connection.send({
-				type: 'read_notification',
+				type: 'readNotification',
 				id: notification.id
 			});
 
diff --git a/src/client/app/desktop/views/components/settings.signins.vue b/src/client/app/desktop/views/components/settings.signins.vue
index a414c95c27..7d1bb4f4e7 100644
--- a/src/client/app/desktop/views/components/settings.signins.vue
+++ b/src/client/app/desktop/views/components/settings.signins.vue
@@ -23,25 +23,25 @@ export default Vue.extend({
 		return {
 			fetching: true,
 			signins: [],
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
+
 	mounted() {
 		(this as any).api('i/signin_history').then(signins => {
 			this.signins = signins;
 			this.fetching = false;
 		});
 
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 
 		this.connection.on('signin', this.onSignin);
 	},
+
 	beforeDestroy() {
-		this.connection.off('signin', this.onSignin);
-		(this as any).os.stream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
+
 	methods: {
 		onSignin(signin) {
 			this.signins.unshift(signin);
diff --git a/src/client/app/desktop/views/components/timeline.core.vue b/src/client/app/desktop/views/components/timeline.core.vue
index aef873dd11..2c17e936eb 100644
--- a/src/client/app/desktop/views/components/timeline.core.vue
+++ b/src/client/app/desktop/views/components/timeline.core.vue
@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { HashtagStream } from '../../../common/scripts/streaming/hashtag';
 
 const fetchLimit = 10;
 
@@ -35,9 +34,7 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			streamManager: null,
 			connection: null,
-			connectionId: null,
 			date: null,
 			baseQuery: {
 				includeMyRenotes: this.$store.state.settings.showMyRenotes,
@@ -69,69 +66,33 @@ export default Vue.extend({
 			this.query = {
 				query: this.tagTl.query
 			};
-			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+			this.connection = (this as any).os.stream.connectToChannel('hashtag', { q: this.tagTl.query });
 			this.connection.on('note', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.connection.close();
-			});
 		} else if (this.src == 'home') {
 			this.endpoint = 'notes/timeline';
 			const onChangeFollowing = () => {
 				this.fetch();
 			};
-			this.streamManager = (this as any).os.stream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('homeTimeline');
 			this.connection.on('note', prepend);
 			this.connection.on('follow', onChangeFollowing);
 			this.connection.on('unfollow', onChangeFollowing);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.connection.off('follow', onChangeFollowing);
-				this.connection.off('unfollow', onChangeFollowing);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'local') {
 			this.endpoint = 'notes/local-timeline';
-			this.streamManager = (this as any).os.streams.localTimelineStream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('localTimeline');
 			this.connection.on('note', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'hybrid') {
 			this.endpoint = 'notes/hybrid-timeline';
-			this.streamManager = (this as any).os.streams.hybridTimelineStream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('hybridTimeline');
 			this.connection.on('note', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'global') {
 			this.endpoint = 'notes/global-timeline';
-			this.streamManager = (this as any).os.streams.globalTimelineStream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('globalTimeline');
 			this.connection.on('note', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'mentions') {
 			this.endpoint = 'notes/mentions';
-			this.streamManager = (this as any).os.stream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('main');
 			this.connection.on('mention', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('mention', prepend);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'messages') {
 			this.endpoint = 'notes/mentions';
 			this.query = {
@@ -142,21 +103,15 @@ export default Vue.extend({
 					prepend(note);
 				}
 			};
-			this.streamManager = (this as any).os.stream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('main');
 			this.connection.on('mention', onNote);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('mention', onNote);
-				this.streamManager.dispose(this.connectionId);
-			});
 		}
 
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		this.$emit('beforeDestroy');
+		this.connection.dispose();
 	},
 
 	methods: {
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 4f679db938..122570a696 100644
--- a/src/client/app/desktop/views/components/ui.header.nav.vue
+++ b/src/client/app/desktop/views/components/ui.header.nav.vue
@@ -42,8 +42,7 @@ export default Vue.extend({
 	data() {
 		return {
 			hasGameInvitations: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 	computed: {
@@ -53,18 +52,15 @@ export default Vue.extend({
 	},
 	mounted() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
+			this.connection = (this as any).os.stream.useSharedConnection('main');
 
-			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversiInvited', this.onReversiInvited);
 			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 		}
 	},
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('reversi_invited', this.onReversiInvited);
-			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
-			(this as any).os.stream.dispose(this.connectionId);
+			this.connection.dispose();
 		}
 	},
 	methods: {
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 0a6f758763..3407851fc5 100644
--- a/src/client/app/desktop/views/components/user-list-timeline.vue
+++ b/src/client/app/desktop/views/components/user-list-timeline.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { UserListStream } from '../../../common/scripts/streaming/user-list';
 
 const fetchLimit = 10;
 
diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
index 1b0c5f8125..c0075220bc 100644
--- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
@@ -56,13 +56,11 @@ export default Vue.extend({
 			disableLocalTimeline: false,
 			bannerUrl: null,
 			inviteCode: null,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 	created() {
-		this.connection = (this as any).os.streams.serverStatsStream.getConnection();
-		this.connectionId = (this as any).os.streams.serverStatsStream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('serverStats');
 
 		(this as any).os.getMeta().then(meta => {
 			this.disableRegistration = meta.disableRegistration;
@@ -75,7 +73,7 @@ export default Vue.extend({
 		});
 	},
 	beforeDestroy() {
-		(this as any).os.streams.serverStatsStream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 	methods: {
 		invite() {
diff --git a/src/client/app/desktop/views/pages/deck/deck.direct.vue b/src/client/app/desktop/views/pages/deck/deck.direct.vue
index ec9e6b9c3d..c771e58a6e 100644
--- a/src/client/app/desktop/views/pages/deck/deck.direct.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.direct.vue
@@ -21,23 +21,19 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
-
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 		this.connection.on('mention', this.onNote);
 
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		this.connection.off('mention', this.onNote);
-		(this as any).os.stream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 
 	methods: {
diff --git a/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue b/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
index f38d5a6df5..02d99d3883 100644
--- a/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.hashtag-tl.vue
@@ -5,7 +5,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import XNotes from './deck.notes.vue';
-import { HashtagStream } from '../../../../common/scripts/streaming/hashtag';
 
 const fetchLimit = 10;
 
@@ -48,7 +47,7 @@ export default Vue.extend({
 
 	mounted() {
 		if (this.connection) this.connection.close();
-		this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+		this.connection = (this as any).os.stream.connectToChannel('hashtag', this.tagTl.query);
 		this.connection.on('note', this.onNote);
 
 		this.fetch();
diff --git a/src/client/app/desktop/views/pages/deck/deck.list-tl.vue b/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
index e82e76e4d0..e543130310 100644
--- a/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.list-tl.vue
@@ -5,7 +5,6 @@
 <script lang="ts">
 import Vue from 'vue';
 import XNotes from './deck.notes.vue';
-import { UserListStream } from '../../../../common/scripts/streaming/user-list';
 
 const fetchLimit = 10;
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.mentions.vue b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
index cecb75f067..17b572f146 100644
--- a/src/client/app/desktop/views/pages/deck/deck.mentions.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.mentions.vue
@@ -21,23 +21,19 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
-
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 		this.connection.on('mention', this.onNote);
 
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		this.connection.off('mention', this.onNote);
-		(this as any).os.stream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 
 	methods: {
diff --git a/src/client/app/desktop/views/pages/deck/deck.note.vue b/src/client/app/desktop/views/pages/deck/deck.note.vue
index eac0e78f0f..e843ac54fe 100644
--- a/src/client/app/desktop/views/pages/deck/deck.note.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.note.vue
@@ -70,12 +70,15 @@ import parse from '../../../../../../mfm/parse';
 import MkNoteMenu from '../../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../../common/views/components/reaction-picker.vue';
 import XSub from './deck.note.sub.vue';
+import noteSubscriber from '../../../../common/scripts/note-subscriber';
 
 export default Vue.extend({
 	components: {
 		XSub
 	},
 
+	mixins: [noteSubscriber('note')],
+
 	props: {
 		note: {
 			type: Object,
@@ -90,9 +93,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			showContent: false,
-			connection: null,
-			connectionId: null
+			showContent: false
 		};
 	},
 
@@ -120,68 +121,7 @@ export default Vue.extend({
 		}
 	},
 
-	created() {
-		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-		}
-	},
-
-	mounted() {
-		this.capture(true);
-
-		if (this.$store.getters.isSignedIn) {
-			this.connection.on('_connected_', this.onStreamConnected);
-		}
-	},
-
-	beforeDestroy() {
-		this.decapture(true);
-
-		if (this.$store.getters.isSignedIn) {
-			this.connection.off('_connected_', this.onStreamConnected);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-
 	methods: {
-		capture(withHandler = false) {
-			if (this.$store.getters.isSignedIn) {
-				const data = {
-					type: 'capture',
-					id: this.p.id
-				} as any;
-				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
-					data.read = true;
-				}
-				this.connection.send(data);
-				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-
-		decapture(withHandler = false) {
-			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
-					type: 'decapture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-
-		onStreamConnected() {
-			this.capture();
-		},
-
-		onStreamNoteUpdated(data) {
-			const note = data.note;
-			if (note.id == this.note.id) {
-				this.$emit('update:note', note);
-			} else if (note.id == this.note.renoteId) {
-				this.note.renote = note;
-			}
-		},
-
 		reply() {
 			(this as any).apis.post({
 				reply: this.p
diff --git a/src/client/app/desktop/views/pages/deck/deck.notifications.vue b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
index 1417cc3ee8..29de691fe2 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -38,8 +38,7 @@ export default Vue.extend({
 			notifications: [],
 			queue: [],
 			moreNotifications: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 
@@ -62,8 +61,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 
 		this.connection.on('notification', this.onNotification);
 
@@ -86,8 +84,7 @@ export default Vue.extend({
 	},
 
 	beforeDestroy() {
-		this.connection.off('notification', this.onNotification);
-		(this as any).os.stream.dispose(this.connectionId);
+		this.connection.dispose();
 
 		this.column.$off('top', this.onTop);
 		this.column.$off('bottom', this.onBottom);
@@ -117,7 +114,7 @@ export default Vue.extend({
 		onNotification(notification) {
 			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
 			this.connection.send({
-				type: 'read_notification',
+				type: 'readNotification',
 				id: notification.id
 			});
 
diff --git a/src/client/app/desktop/views/pages/deck/deck.tl.vue b/src/client/app/desktop/views/pages/deck/deck.tl.vue
index 120ceb7fc2..8aed80fa1b 100644
--- a/src/client/app/desktop/views/pages/deck/deck.tl.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.tl.vue
@@ -36,18 +36,17 @@ export default Vue.extend({
 			fetching: true,
 			moreFetching: false,
 			existMore: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 
 	computed: {
 		stream(): any {
 			switch (this.src) {
-				case 'home': return (this as any).os.stream;
-				case 'local': return (this as any).os.streams.localTimelineStream;
-				case 'hybrid': return (this as any).os.streams.hybridTimelineStream;
-				case 'global': return (this as any).os.streams.globalTimelineStream;
+				case 'home': return (this as any).os.stream.useSharedConnection('homeTimeline');
+				case 'local': return (this as any).os.stream.useSharedConnection('localTimeline');
+				case 'hybrid': return (this as any).os.stream.useSharedConnection('hybridTimeline');
+				case 'global': return (this as any).os.stream.useSharedConnection('globalTimeline');
 			}
 		},
 
@@ -68,8 +67,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = this.stream.getConnection();
-		this.connectionId = this.stream.use();
+		this.connection = this.stream;
 
 		this.connection.on('note', this.onNote);
 		if (this.src == 'home') {
@@ -81,12 +79,7 @@ export default Vue.extend({
 	},
 
 	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);
+		this.connection.dispose();
 	},
 
 	methods: {
diff --git a/src/client/app/mios.ts b/src/client/app/mios.ts
index ed9e3a6aeb..42171e71fa 100644
--- a/src/client/app/mios.ts
+++ b/src/client/app/mios.ts
@@ -1,3 +1,4 @@
+import autobind from 'autobind-decorator';
 import Vue from 'vue';
 import { EventEmitter } from 'eventemitter3';
 import * as uuid from 'uuid';
@@ -5,19 +6,9 @@ import * as uuid from 'uuid';
 import initStore from './store';
 import { apiUrl, version, lang } from './config';
 import Progress from './common/scripts/loading';
-import Connection from './common/scripts/streaming/stream';
-import { HomeStreamManager } from './common/scripts/streaming/home';
-import { DriveStreamManager } from './common/scripts/streaming/drive';
-import { ServerStatsStreamManager } from './common/scripts/streaming/server-stats';
-import { NotesStatsStreamManager } from './common/scripts/streaming/notes-stats';
-import { MessagingIndexStreamManager } from './common/scripts/streaming/messaging-index';
-import { ReversiStreamManager } from './common/scripts/streaming/games/reversi/reversi';
 
 import Err from './common/views/components/connect-failed.vue';
-import { LocalTimelineStreamManager } from './common/scripts/streaming/local-timeline';
-import { HybridTimelineStreamManager } from './common/scripts/streaming/hybrid-timeline';
-import { GlobalTimelineStreamManager } from './common/scripts/streaming/global-timeline';
-import { erase } from '../../prelude/array';
+import Stream from './common/scripts/stream';
 
 //#region api requests
 let spinner = null;
@@ -102,30 +93,7 @@ export default class MiOS extends EventEmitter {
 	/**
 	 * A connection manager of home stream
 	 */
-	public stream: HomeStreamManager;
-
-	/**
-	 * Connection managers
-	 */
-	public streams: {
-		localTimelineStream: LocalTimelineStreamManager;
-		hybridTimelineStream: HybridTimelineStreamManager;
-		globalTimelineStream: GlobalTimelineStreamManager;
-		driveStream: DriveStreamManager;
-		serverStatsStream: ServerStatsStreamManager;
-		notesStatsStream: NotesStatsStreamManager;
-		messagingIndexStream: MessagingIndexStreamManager;
-		reversiStream: ReversiStreamManager;
-	} = {
-		localTimelineStream: null,
-		hybridTimelineStream: null,
-		globalTimelineStream: null,
-		driveStream: null,
-		serverStatsStream: null,
-		notesStatsStream: null,
-		messagingIndexStream: null,
-		reversiStream: null
-	};
+	public stream: Stream;
 
 	/**
 	 * A registration of service worker
@@ -151,71 +119,36 @@ export default class MiOS extends EventEmitter {
 
 		this.shouldRegisterSw = shouldRegisterSw;
 
-		//#region BIND
-		this.log = this.log.bind(this);
-		this.logInfo = this.logInfo.bind(this);
-		this.logWarn = this.logWarn.bind(this);
-		this.logError = this.logError.bind(this);
-		this.init = this.init.bind(this);
-		this.api = this.api.bind(this);
-		this.getMeta = this.getMeta.bind(this);
-		this.registerSw = this.registerSw.bind(this);
-		//#endregion
-
 		if (this.debug) {
 			(window as any).os = this;
 		}
 	}
 
-	private googleMapsIniting = false;
-
-	public getGoogleMaps() {
-		return new Promise((res, rej) => {
-			if ((window as any).google && (window as any).google.maps) {
-				res((window as any).google.maps);
-			} else {
-				this.once('init-google-maps', () => {
-					res((window as any).google.maps);
-				});
-
-				//#region load google maps api
-				if (!this.googleMapsIniting) {
-					this.googleMapsIniting = true;
-					(window as any).initGoogleMaps = () => {
-						this.emit('init-google-maps');
-					};
-					const head = document.getElementsByTagName('head')[0];
-					const script = document.createElement('script');
-					script.setAttribute('src', `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}&callback=initGoogleMaps`);
-					script.setAttribute('async', 'true');
-					script.setAttribute('defer', 'true');
-					head.appendChild(script);
-				}
-				//#endregion
-			}
-		});
-	}
-
+	@autobind
 	public log(...args) {
 		if (!this.debug) return;
 		console.log.apply(null, args);
 	}
 
+	@autobind
 	public logInfo(...args) {
 		if (!this.debug) return;
 		console.info.apply(null, args);
 	}
 
+	@autobind
 	public logWarn(...args) {
 		if (!this.debug) return;
 		console.warn.apply(null, args);
 	}
 
+	@autobind
 	public logError(...args) {
 		if (!this.debug) return;
 		console.error.apply(null, args);
 	}
 
+	@autobind
 	public signout() {
 		this.store.dispatch('logout');
 		location.href = '/';
@@ -225,27 +158,10 @@ export default class MiOS extends EventEmitter {
 	 * Initialize MiOS (boot)
 	 * @param callback A function that call when initialized
 	 */
+	@autobind
 	public async init(callback) {
 		this.store = initStore(this);
 
-		//#region Init stream managers
-		this.streams.serverStatsStream = new ServerStatsStreamManager(this);
-		this.streams.notesStatsStream = new NotesStatsStreamManager(this);
-		this.streams.localTimelineStream = new LocalTimelineStreamManager(this, this.store.state.i);
-
-		this.once('signedin', () => {
-			// Init home stream manager
-			this.stream = new HomeStreamManager(this, this.store.state.i);
-
-			// Init other stream manager
-			this.streams.hybridTimelineStream = new HybridTimelineStreamManager(this, this.store.state.i);
-			this.streams.globalTimelineStream = new GlobalTimelineStreamManager(this, this.store.state.i);
-			this.streams.driveStream = new DriveStreamManager(this, this.store.state.i);
-			this.streams.messagingIndexStream = new MessagingIndexStreamManager(this, this.store.state.i);
-			this.streams.reversiStream = new ReversiStreamManager(this, this.store.state.i);
-		});
-		//#endregion
-
 		// ユーザーをフェッチしてコールバックする
 		const fetchme = (token, cb) => {
 			let me = null;
@@ -296,6 +212,8 @@ export default class MiOS extends EventEmitter {
 		const fetched = () => {
 			this.emit('signedin');
 
+			this.stream = new Stream(this);
+
 			// Finish init
 			callback();
 
@@ -328,6 +246,8 @@ export default class MiOS extends EventEmitter {
 				} else {
 					// Finish init
 					callback();
+
+					this.stream = new Stream(this);
 				}
 			});
 		}
@@ -336,6 +256,7 @@ export default class MiOS extends EventEmitter {
 	/**
 	 * Register service worker
 	 */
+	@autobind
 	private registerSw() {
 		// Check whether service worker and push manager supported
 		const isSwSupported =
@@ -418,7 +339,8 @@ export default class MiOS extends EventEmitter {
 	 * @param endpoint エンドポイント名
 	 * @param data パラメータ
 	 */
-	public api(endpoint: string, data: { [x: string]: any } = {}): Promise<{ [x: string]: any }> {
+	@autobind
+	public api(endpoint: string, data: { [x: string]: any } = {}, forceFetch = false): Promise<{ [x: string]: any }> {
 		if (++pending === 1) {
 			spinner = document.createElement('div');
 			spinner.setAttribute('id', 'wait');
@@ -430,13 +352,12 @@ export default class MiOS extends EventEmitter {
 		};
 
 		const promise = new Promise((resolve, reject) => {
-			const viaStream = this.stream && this.stream.hasConnection && this.store.state.device.apiViaStream;
+			const viaStream = this.stream && this.store.state.device.apiViaStream && !forceFetch;
 
 			if (viaStream) {
-				const stream = this.stream.borrow();
 				const id = Math.random().toString();
 
-				stream.once(`api-res:${id}`, res => {
+				this.stream.once(`api:${id}`, res => {
 					if (res == null || Object.keys(res).length == 0) {
 						resolve(null);
 					} else if (res.res) {
@@ -446,11 +367,10 @@ export default class MiOS extends EventEmitter {
 					}
 				});
 
-				stream.send({
-					type: 'api',
-					id,
-					endpoint,
-					data
+				this.stream.send('api', {
+					id: id,
+					ep: endpoint,
+					data: data
 				});
 			} else {
 				// Append a credential
@@ -503,6 +423,7 @@ export default class MiOS extends EventEmitter {
 	 * Misskeyのメタ情報を取得します
 	 * @param force キャッシュを無視するか否か
 	 */
+	@autobind
 	public getMeta(force = false) {
 		return new Promise<{ [x: string]: any }>(async (res, rej) => {
 			if (this.isMetaFetching) {
@@ -530,16 +451,6 @@ export default class MiOS extends EventEmitter {
 			}
 		});
 	}
-
-	public connections: Connection[] = [];
-
-	public registerStreamConnection(connection: Connection) {
-		this.connections.push(connection);
-	}
-
-	public unregisterStreamConnection(connection: Connection) {
-		this.connections = erase(connection, this.connections);
-	}
 }
 
 class WindowSystem extends EventEmitter {
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 8919462511..469f6da240 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -81,8 +81,7 @@ export default Vue.extend({
 			hierarchyFolders: [],
 			selectedFiles: [],
 			info: null,
-			connection: null,
-			connectionId: null,
+			connection: null
 
 			fetching: true,
 			fetchingMoreFiles: false,
@@ -102,8 +101,7 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		this.connection = (this as any).os.streams.driveStream.getConnection();
-		this.connectionId = (this as any).os.streams.driveStream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('drive');
 
 		this.connection.on('file_created', this.onStreamDriveFileCreated);
 		this.connection.on('file_updated', this.onStreamDriveFileUpdated);
@@ -124,12 +122,7 @@ export default Vue.extend({
 		}
 	},
 	beforeDestroy() {
-		this.connection.off('file_created', this.onStreamDriveFileCreated);
-		this.connection.off('file_updated', this.onStreamDriveFileUpdated);
-		this.connection.off('file_deleted', this.onStreamDriveFileDeleted);
-		this.connection.off('folder_created', this.onStreamDriveFolderCreated);
-		this.connection.off('folder_updated', this.onStreamDriveFolderUpdated);
-		(this as any).os.streams.driveStream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
 	methods: {
 		onStreamDriveFileCreated(file) {
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue
index aea2d285e4..3c8b2f98e6 100644
--- a/src/client/app/mobile/views/components/follow-button.vue
+++ b/src/client/app/mobile/views/components/follow-button.vue
@@ -28,21 +28,17 @@ export default Vue.extend({
 		return {
 			u: this.user,
 			wait: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 
 		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);
+		this.connection.dispose();
 	},
 	methods: {
 
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index 48d6d32868..082f72f1a9 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -92,12 +92,15 @@ import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './note.sub.vue';
 import { sum } from '../../../../../prelude/array';
+import noteSubscriber from '../../../common/scripts/note-subscriber';
 
 export default Vue.extend({
 	components: {
 		XSub
 	},
 
+	mixins: [noteSubscriber('note')],
+
 	props: {
 		note: {
 			type: Object,
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 4af19ade29..db1be4a00e 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -69,19 +69,20 @@ import MkNoteMenu from '../../../common/views/components/note-menu.vue';
 import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
 import XSub from './note.sub.vue';
 import { sum } from '../../../../../prelude/array';
+import noteSubscriber from '../../../common/scripts/note-subscriber';
 
 export default Vue.extend({
 	components: {
 		XSub
 	},
 
+	mixins: [noteSubscriber('note')],
+
 	props: ['note'],
 
 	data() {
 		return {
-			showContent: false,
-			connection: null,
-			connectionId: null
+			showContent: false
 		};
 	},
 
@@ -115,86 +116,7 @@ export default Vue.extend({
 		}
 	},
 
-	created() {
-		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
-		}
-	},
-
-	mounted() {
-		this.capture(true);
-
-		if (this.$store.getters.isSignedIn) {
-			this.connection.on('_connected_', this.onStreamConnected);
-		}
-
-		// Draw map
-		if (this.p.geo) {
-			const shouldShowMap = this.$store.getters.isSignedIn ? this.$store.state.settings.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]);
-					const map = new maps.Map(this.$refs.map, {
-						center: uluru,
-						zoom: 15
-					});
-					new maps.Marker({
-						position: uluru,
-						map: map
-					});
-				});
-			}
-		}
-	},
-
-	beforeDestroy() {
-		this.decapture(true);
-
-		if (this.$store.getters.isSignedIn) {
-			this.connection.off('_connected_', this.onStreamConnected);
-			(this as any).os.stream.dispose(this.connectionId);
-		}
-	},
-
 	methods: {
-		capture(withHandler = false) {
-			if (this.$store.getters.isSignedIn) {
-				const data = {
-					type: 'capture',
-					id: this.p.id
-				} as any;
-				if ((this.p.visibleUserIds || []).includes(this.$store.state.i.id) || (this.p.mentions || []).includes(this.$store.state.i.id)) {
-					data.read = true;
-				}
-				this.connection.send(data);
-				if (withHandler) this.connection.on('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-
-		decapture(withHandler = false) {
-			if (this.$store.getters.isSignedIn) {
-				this.connection.send({
-					type: 'decapture',
-					id: this.p.id
-				});
-				if (withHandler) this.connection.off('note-updated', this.onStreamNoteUpdated);
-			}
-		},
-
-		onStreamConnected() {
-			this.capture();
-		},
-
-		onStreamNoteUpdated(data) {
-			const note = data.note;
-			if (note.id == this.note.id) {
-				this.$emit('update:note', note);
-			} else if (note.id == this.note.renoteId) {
-				this.note.renote = note;
-			}
-		},
-
 		reply() {
 			(this as any).apis.post({
 				reply: this.p
diff --git a/src/client/app/mobile/views/components/notifications.vue b/src/client/app/mobile/views/components/notifications.vue
index bfb6c1e62a..e1a2967071 100644
--- a/src/client/app/mobile/views/components/notifications.vue
+++ b/src/client/app/mobile/views/components/notifications.vue
@@ -23,6 +23,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+
 export default Vue.extend({
 	data() {
 		return {
@@ -30,10 +31,10 @@ export default Vue.extend({
 			fetchingMoreNotifications: false,
 			notifications: [],
 			moreNotifications: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
+
 	computed: {
 		_notifications(): any[] {
 			return (this.notifications as any).map(notification => {
@@ -45,9 +46,9 @@ export default Vue.extend({
 			});
 		}
 	},
+
 	mounted() {
-		this.connection = (this as any).os.stream.getConnection();
-		this.connectionId = (this as any).os.stream.use();
+		this.connection = (this as any).os.stream.useSharedConnection('main');
 
 		this.connection.on('notification', this.onNotification);
 
@@ -66,10 +67,11 @@ export default Vue.extend({
 			this.$emit('fetched');
 		});
 	},
+
 	beforeDestroy() {
-		this.connection.off('notification', this.onNotification);
-		(this as any).os.stream.dispose(this.connectionId);
+		this.connection.dispose();
 	},
+
 	methods: {
 		fetchMoreNotifications() {
 			this.fetchingMoreNotifications = true;
@@ -90,10 +92,11 @@ export default Vue.extend({
 				this.fetchingMoreNotifications = false;
 			});
 		},
+
 		onNotification(notification) {
 			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
 			this.connection.send({
-				type: 'read_notification',
+				type: 'readNotification',
 				id: notification.id
 			});
 
diff --git a/src/client/app/mobile/views/components/ui.header.vue b/src/client/app/mobile/views/components/ui.header.vue
index 7fd68002e7..9793d03a8c 100644
--- a/src/client/app/mobile/views/components/ui.header.vue
+++ b/src/client/app/mobile/views/components/ui.header.vue
@@ -24,44 +24,47 @@ import { env } from '../../../config';
 
 export default Vue.extend({
 	props: ['func'],
+
 	data() {
 		return {
 			hasGameInvitation: false,
 			connection: null,
-			connectionId: null,
 			env: env
 		};
 	},
+
 	computed: {
 		hasUnreadNotification(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadNotification;
 		},
+
 		hasUnreadMessagingMessage(): boolean {
 			return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
 		}
 	},
+
 	mounted() {
 		this.$store.commit('setUiHeaderHeight', this.$refs.root.offsetHeight);
 
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
+			this.connection = (this as any).os.stream.useSharedConnection('main');
 
-			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversiInvited', this.onReversiInvited);
 			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 		}
 	},
+
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('reversi_invited', this.onReversiInvited);
-			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
-			(this as any).os.stream.dispose(this.connectionId);
+			this.connection.dispose();
 		}
 	},
+
 	methods: {
 		onReversiInvited() {
 			this.hasGameInvitation = true;
 		},
+
 		onReversiNoInvites() {
 			this.hasGameInvitation = false;
 		}
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index ba122cc3e2..c9c0c082b2 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -57,7 +57,6 @@ export default Vue.extend({
 		return {
 			hasGameInvitation: false,
 			connection: null,
-			connectionId: null,
 			aboutUrl: `/docs/${lang}/about`,
 			announcements: []
 		};
@@ -79,19 +78,16 @@ export default Vue.extend({
 		});
 
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
+			this.connection = (this as any).os.stream.useSharedConnection('main');
 
-			this.connection.on('reversi_invited', this.onReversiInvited);
+			this.connection.on('reversiInvited', this.onReversiInvited);
 			this.connection.on('reversi_no_invites', this.onReversiNoInvites);
 		}
 	},
 
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('reversi_invited', this.onReversiInvited);
-			this.connection.off('reversi_no_invites', this.onReversiNoInvites);
-			(this as any).os.stream.dispose(this.connectionId);
+			this.connection.dispose();
 		}
 	},
 
diff --git a/src/client/app/mobile/views/components/ui.vue b/src/client/app/mobile/views/components/ui.vue
index d2af15d235..b16c246b10 100644
--- a/src/client/app/mobile/views/components/ui.vue
+++ b/src/client/app/mobile/views/components/ui.vue
@@ -23,40 +23,43 @@ export default Vue.extend({
 		XHeader,
 		XNav
 	},
+
 	props: ['title'],
+
 	data() {
 		return {
 			isDrawerOpening: false,
-			connection: null,
-			connectionId: null
+			connection: null
 		};
 	},
+
 	watch: {
 		'$store.state.uiHeaderHeight'() {
 			this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
 		}
 	},
+
 	mounted() {
 		this.$el.style.paddingTop = this.$store.state.uiHeaderHeight + 'px';
 
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.getConnection();
-			this.connectionId = (this as any).os.stream.use();
+			this.connection = (this as any).os.stream.useSharedConnection('main');
 
 			this.connection.on('notification', this.onNotification);
 		}
 	},
+
 	beforeDestroy() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection.off('notification', this.onNotification);
-			(this as any).os.stream.dispose(this.connectionId);
+			this.connection.dispose();
 		}
 	},
+
 	methods: {
 		onNotification(notification) {
 			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
 			this.connection.send({
-				type: 'read_notification',
+				type: 'readNotification',
 				id: notification.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 9b3f11f5c2..97200eb5b3 100644
--- a/src/client/app/mobile/views/components/user-list-timeline.vue
+++ b/src/client/app/mobile/views/components/user-list-timeline.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { UserListStream } from '../../../common/scripts/streaming/user-list';
 
 const fetchLimit = 10;
 
diff --git a/src/client/app/mobile/views/pages/home.timeline.vue b/src/client/app/mobile/views/pages/home.timeline.vue
index 225abcff6b..1979747bf7 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 { HashtagStream } from '../../../common/scripts/streaming/hashtag';
 
 const fetchLimit = 10;
 
@@ -35,7 +34,6 @@ export default Vue.extend({
 			existMore: false,
 			streamManager: null,
 			connection: null,
-			connectionId: null,
 			unreadCount: 0,
 			date: null,
 			baseQuery: {
@@ -68,69 +66,33 @@ export default Vue.extend({
 			this.query = {
 				query: this.tagTl.query
 			};
-			this.connection = new HashtagStream((this as any).os, this.$store.state.i, this.tagTl.query);
+			this.connection = (this as any).os.stream.connectToChannel('hashtag', { q: this.tagTl.query });
 			this.connection.on('note', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.connection.close();
-			});
 		} else if (this.src == 'home') {
 			this.endpoint = 'notes/timeline';
 			const onChangeFollowing = () => {
 				this.fetch();
 			};
-			this.streamManager = (this as any).os.stream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('homeTimeline');
 			this.connection.on('note', prepend);
 			this.connection.on('follow', onChangeFollowing);
 			this.connection.on('unfollow', onChangeFollowing);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.connection.off('follow', onChangeFollowing);
-				this.connection.off('unfollow', onChangeFollowing);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'local') {
 			this.endpoint = 'notes/local-timeline';
-			this.streamManager = (this as any).os.streams.localTimelineStream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('localTimeline');
 			this.connection.on('note', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'hybrid') {
 			this.endpoint = 'notes/hybrid-timeline';
-			this.streamManager = (this as any).os.streams.hybridTimelineStream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('hybridTimeline');
 			this.connection.on('note', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'global') {
 			this.endpoint = 'notes/global-timeline';
-			this.streamManager = (this as any).os.streams.globalTimelineStream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('globalTimeline');
 			this.connection.on('note', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('note', prepend);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'mentions') {
 			this.endpoint = 'notes/mentions';
-			this.streamManager = (this as any).os.stream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('main');
 			this.connection.on('mention', prepend);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('mention', prepend);
-				this.streamManager.dispose(this.connectionId);
-			});
 		} else if (this.src == 'messages') {
 			this.endpoint = 'notes/mentions';
 			this.query = {
@@ -141,21 +103,15 @@ export default Vue.extend({
 					prepend(note);
 				}
 			};
-			this.streamManager = (this as any).os.stream;
-			this.connection = this.streamManager.getConnection();
-			this.connectionId = this.streamManager.use();
+			this.connection = (this as any).os.stream.useSharedConnection('main');
 			this.connection.on('mention', onNote);
-			this.$once('beforeDestroy', () => {
-				this.connection.off('mention', onNote);
-				this.streamManager.dispose(this.connectionId);
-			});
 		}
 
 		this.fetch();
 	},
 
 	beforeDestroy() {
-		this.$emit('beforeDestroy');
+		this.connection.dispose();
 	},
 
 	methods: {
diff --git a/src/client/app/tsconfig.json b/src/client/app/tsconfig.json
index e31b52dab1..4a05469673 100644
--- a/src/client/app/tsconfig.json
+++ b/src/client/app/tsconfig.json
@@ -14,7 +14,8 @@
     "removeComments": false,
     "noLib": false,
     "strict": true,
-    "strictNullChecks": false
+    "strictNullChecks": false,
+    "experimentalDecorators": true
   },
   "compileOnSave": false,
   "include": [
diff --git a/src/docs/stream.ja-JP.md b/src/docs/stream.ja-JP.md
index c720299932..a8b0eb0cdc 100644
--- a/src/docs/stream.ja-JP.md
+++ b/src/docs/stream.ja-JP.md
@@ -55,7 +55,7 @@ APIへリクエストすると、レスポンスがストリームから次の
 
 ```json
 {
-	type: 'api-res:xxxxxxxxxxxxxxxx',
+	type: 'api:xxxxxxxxxxxxxxxx',
 	body: {
 		...
 	}
@@ -95,7 +95,7 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 
 ```json
 {
-	type: 'note-updated',
+	type: 'noteUpdated',
 	body: {
 		note: {
 			...
@@ -108,7 +108,7 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 
 ---
 
-このように、投稿の情報が更新されると、`note-updated`イベントが流れてくるようになります。`note-updated`イベントが発生するのは、以下の場合です:
+このように、投稿の情報が更新されると、`noteUpdated`イベントが流れてくるようになります。`noteUpdated`イベントが発生するのは、以下の場合です:
 
 - 投稿にリアクションが付いた
 - 投稿に添付されたアンケートに投票がされた
@@ -153,7 +153,7 @@ Misskeyは投稿のキャプチャと呼ばれる仕組みを提供していま
 
 `body`プロパティの中に、投稿情報が含まれています。
 
-### `read_all_notifications`
+### `readAllNotifications`
 
 自分宛ての通知がすべて既読になったことを表すイベントです。このイベントを利用して、「通知があることを示すアイコン」のようなものをオフにしたりする等のケースが想定されます。
 
diff --git a/src/notify.ts b/src/notify.ts
index ea7423655e..eaef63e3c3 100644
--- a/src/notify.ts
+++ b/src/notify.ts
@@ -2,7 +2,7 @@ import * as mongo from 'mongodb';
 import Notification from './models/notification';
 import Mute from './models/mute';
 import { pack } from './models/notification';
-import { publishUserStream } from './stream';
+import { publishMainStream } from './stream';
 import User from './models/user';
 import pushSw from './push-sw';
 
@@ -30,7 +30,7 @@ export default (
 	const packed = await pack(notification);
 
 	// Publish notification event
-	publishUserStream(notifiee, 'notification', packed);
+	publishMainStream(notifiee, 'notification', packed);
 
 	// Update flag
 	User.update({ _id: notifiee }, {
@@ -54,7 +54,7 @@ export default (
 			}
 			//#endregion
 
-			publishUserStream(notifiee, 'unread_notification', packed);
+			publishMainStream(notifiee, 'unreadNotification', packed);
 
 			pushSw(notifiee, 'notification', packed);
 		}
diff --git a/src/server/api/call.ts b/src/server/api/call.ts
index ee79e0a13c..7419bdc95d 100644
--- a/src/server/api/call.ts
+++ b/src/server/api/call.ts
@@ -9,6 +9,10 @@ export default (endpoint: string, user: IUser, app: IApp, data: any, file?: any)
 
 	const ep = endpoints.find(e => e.name === endpoint);
 
+	if (ep == null) {
+		return rej('ENDPOINT_NOT_FOUND');
+	}
+
 	if (ep.meta.secure && !isSecure) {
 		return rej('ACCESS_DENIED');
 	}
diff --git a/src/server/api/common/read-messaging-message.ts b/src/server/api/common/read-messaging-message.ts
index 005240a37c..075e369832 100644
--- a/src/server/api/common/read-messaging-message.ts
+++ b/src/server/api/common/read-messaging-message.ts
@@ -1,7 +1,7 @@
 import * as mongo from 'mongodb';
 import Message from '../../../models/messaging-message';
 import { IMessagingMessage as IMessage } from '../../../models/messaging-message';
-import { publishUserStream } from '../../../stream';
+import { publishMainStream } from '../../../stream';
 import { publishMessagingStream } from '../../../stream';
 import { publishMessagingIndexStream } from '../../../stream';
 import User from '../../../models/user';
@@ -71,6 +71,6 @@ export default (
 		});
 
 		// 全ての(いままで未読だった)自分宛てのメッセージを(これで)読みましたよというイベントを発行
-		publishUserStream(userId, 'read_all_messaging_messages');
+		publishMainStream(userId, 'readAllMessagingMessages');
 	}
 });
diff --git a/src/server/api/common/read-notification.ts b/src/server/api/common/read-notification.ts
index 0b0f3e4e5a..2d58ada4ce 100644
--- a/src/server/api/common/read-notification.ts
+++ b/src/server/api/common/read-notification.ts
@@ -1,6 +1,6 @@
 import * as mongo from 'mongodb';
 import { default as Notification, INotification } from '../../../models/notification';
-import { publishUserStream } from '../../../stream';
+import { publishMainStream } from '../../../stream';
 import Mute from '../../../models/mute';
 import User from '../../../models/user';
 
@@ -66,6 +66,6 @@ export default (
 		});
 
 		// 全ての(いままで未読だった)通知を(これで)読みましたよというイベントを発行
-		publishUserStream(userId, 'read_all_notifications');
+		publishMainStream(userId, 'readAllNotifications');
 	}
 });
diff --git a/src/server/api/endpoints/games/reversi/match.ts b/src/server/api/endpoints/games/reversi/match.ts
index aba400af1d..d7483a0bfd 100644
--- a/src/server/api/endpoints/games/reversi/match.ts
+++ b/src/server/api/endpoints/games/reversi/match.ts
@@ -2,7 +2,7 @@ import $ from 'cafy'; import ID from '../../../../../misc/cafy-id';
 import Matching, { pack as packMatching } from '../../../../../models/games/reversi/matching';
 import ReversiGame, { pack as packGame } from '../../../../../models/games/reversi/game';
 import User, { ILocalUser } from '../../../../../models/user';
-import { publishUserStream, publishReversiStream } from '../../../../../stream';
+import { publishMainStream, publishReversiStream } from '../../../../../stream';
 import { eighteight } from '../../../../../games/reversi/maps';
 
 export const meta = {
@@ -58,7 +58,7 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 		});
 
 		if (other == 0) {
-			publishUserStream(user._id, 'reversi_no_invites');
+			publishMainStream(user._id, 'reversi_no_invites');
 		}
 	} else {
 		// Fetch child
@@ -94,6 +94,6 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 		// 招待
 		publishReversiStream(child._id, 'invited', packed);
 
-		publishUserStream(child._id, 'reversi_invited', packed);
+		publishMainStream(child._id, 'reversiInvited', packed);
 	}
 });
diff --git a/src/server/api/endpoints/i/regenerate_token.ts b/src/server/api/endpoints/i/regenerate_token.ts
index fe4a5cd118..2d85f06cfa 100644
--- a/src/server/api/endpoints/i/regenerate_token.ts
+++ b/src/server/api/endpoints/i/regenerate_token.ts
@@ -1,7 +1,7 @@
 import $ from 'cafy';
 import * as bcrypt from 'bcryptjs';
 import User, { ILocalUser } from '../../../../models/user';
-import { publishUserStream } from '../../../../stream';
+import { publishMainStream } from '../../../../stream';
 import generateUserToken from '../../common/generate-native-user-token';
 
 export const meta = {
@@ -33,5 +33,5 @@ export default async (params: any, user: ILocalUser) => new Promise(async (res,
 	res();
 
 	// Publish event
-	publishUserStream(user._id, 'my_token_regenerated');
+	publishMainStream(user._id, 'myTokenRegenerated');
 });
diff --git a/src/server/api/endpoints/i/update.ts b/src/server/api/endpoints/i/update.ts
index c1be0b6ebc..548ce5cadb 100644
--- a/src/server/api/endpoints/i/update.ts
+++ b/src/server/api/endpoints/i/update.ts
@@ -1,6 +1,6 @@
 import $ from 'cafy'; import ID from '../../../../misc/cafy-id';
 import User, { isValidName, isValidDescription, isValidLocation, isValidBirthday, pack, ILocalUser } from '../../../../models/user';
-import { publishUserStream } from '../../../../stream';
+import { publishMainStream } from '../../../../stream';
 import DriveFile from '../../../../models/drive-file';
 import acceptAllFollowRequests from '../../../../services/following/requests/accept-all';
 import { IApp } from '../../../../models/app';
@@ -177,7 +177,7 @@ export default async (params: any, user: ILocalUser, app: IApp) => new Promise(a
 	res(iObj);
 
 	// Publish meUpdated event
-	publishUserStream(user._id, 'meUpdated', iObj);
+	publishMainStream(user._id, 'meUpdated', iObj);
 
 	// 鍵垢を解除したとき、溜まっていたフォローリクエストがあるならすべて承認
 	if (user.isLocked && ps.isLocked === false) {
diff --git a/src/server/api/endpoints/i/update_client_setting.ts b/src/server/api/endpoints/i/update_client_setting.ts
index aed93c792f..2c05299dff 100644
--- a/src/server/api/endpoints/i/update_client_setting.ts
+++ b/src/server/api/endpoints/i/update_client_setting.ts
@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import User, { ILocalUser } from '../../../../models/user';
-import { publishUserStream } from '../../../../stream';
+import { publishMainStream } from '../../../../stream';
 
 export const meta = {
 	requireCredential: true,
@@ -26,7 +26,7 @@ export default async (params: any, user: ILocalUser) => new Promise(async (res,
 	res();
 
 	// Publish event
-	publishUserStream(user._id, 'clientSettingUpdated', {
+	publishMainStream(user._id, 'clientSettingUpdated', {
 		key: name,
 		value
 	});
diff --git a/src/server/api/endpoints/i/update_home.ts b/src/server/api/endpoints/i/update_home.ts
index ffca9b90b3..27afc9fe5a 100644
--- a/src/server/api/endpoints/i/update_home.ts
+++ b/src/server/api/endpoints/i/update_home.ts
@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import User, { ILocalUser } from '../../../../models/user';
-import { publishUserStream } from '../../../../stream';
+import { publishMainStream } from '../../../../stream';
 
 export const meta = {
 	requireCredential: true,
@@ -25,5 +25,5 @@ export default async (params: any, user: ILocalUser) => new Promise(async (res,
 
 	res();
 
-	publishUserStream(user._id, 'home_updated', home);
+	publishMainStream(user._id, 'homeUpdated', home);
 });
diff --git a/src/server/api/endpoints/i/update_mobile_home.ts b/src/server/api/endpoints/i/update_mobile_home.ts
index 0b72fbe2c1..1d4df389e4 100644
--- a/src/server/api/endpoints/i/update_mobile_home.ts
+++ b/src/server/api/endpoints/i/update_mobile_home.ts
@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import User, { ILocalUser } from '../../../../models/user';
-import { publishUserStream } from '../../../../stream';
+import { publishMainStream } from '../../../../stream';
 
 export const meta = {
 	requireCredential: true,
@@ -24,5 +24,5 @@ export default async (params: any, user: ILocalUser) => new Promise(async (res,
 
 	res();
 
-	publishUserStream(user._id, 'mobile_home_updated', home);
+	publishMainStream(user._id, 'mobileHomeUpdated', home);
 });
diff --git a/src/server/api/endpoints/i/update_widget.ts b/src/server/api/endpoints/i/update_widget.ts
index 5cbe7c07a3..92499493eb 100644
--- a/src/server/api/endpoints/i/update_widget.ts
+++ b/src/server/api/endpoints/i/update_widget.ts
@@ -1,6 +1,6 @@
 import $ from 'cafy';
 import User, { ILocalUser } from '../../../../models/user';
-import { publishUserStream } from '../../../../stream';
+import { publishMainStream } from '../../../../stream';
 
 export const meta = {
 	requireCredential: true,
@@ -73,7 +73,7 @@ export default async (params: any, user: ILocalUser) => new Promise(async (res,
 	//#endregion
 
 	if (widget) {
-		publishUserStream(user._id, 'widgetUpdated', {
+		publishMainStream(user._id, 'widgetUpdated', {
 			id, data
 		});
 
diff --git a/src/server/api/endpoints/messaging/messages/create.ts b/src/server/api/endpoints/messaging/messages/create.ts
index 9a49e09248..f504f92326 100644
--- a/src/server/api/endpoints/messaging/messages/create.ts
+++ b/src/server/api/endpoints/messaging/messages/create.ts
@@ -6,7 +6,7 @@ import User, { ILocalUser } from '../../../../../models/user';
 import Mute from '../../../../../models/mute';
 import DriveFile from '../../../../../models/drive-file';
 import { pack } from '../../../../../models/messaging-message';
-import { publishUserStream } from '../../../../../stream';
+import { publishMainStream } from '../../../../../stream';
 import { publishMessagingStream, publishMessagingIndexStream } from '../../../../../stream';
 import pushSw from '../../../../../push-sw';
 
@@ -88,12 +88,12 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 	// 自分のストリーム
 	publishMessagingStream(message.userId, message.recipientId, 'message', messageObj);
 	publishMessagingIndexStream(message.userId, 'message', messageObj);
-	publishUserStream(message.userId, 'messaging_message', messageObj);
+	publishMainStream(message.userId, 'messagingMessage', messageObj);
 
 	// 相手のストリーム
 	publishMessagingStream(message.recipientId, message.userId, 'message', messageObj);
 	publishMessagingIndexStream(message.recipientId, 'message', messageObj);
-	publishUserStream(message.recipientId, 'messaging_message', messageObj);
+	publishMainStream(message.recipientId, 'messagingMessage', messageObj);
 
 	// Update flag
 	User.update({ _id: recipient._id }, {
@@ -117,8 +117,8 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 			}
 			//#endregion
 
-			publishUserStream(message.recipientId, 'unread_messaging_message', messageObj);
-			pushSw(message.recipientId, 'unread_messaging_message', messageObj);
+			publishMainStream(message.recipientId, 'unreadMessagingMessage', messageObj);
+			pushSw(message.recipientId, 'unreadMessagingMessage', messageObj);
 		}
 	}, 3000);
 
diff --git a/src/server/api/endpoints/notes/polls/vote.ts b/src/server/api/endpoints/notes/polls/vote.ts
index ab80e7f5d0..3b78d62fd3 100644
--- a/src/server/api/endpoints/notes/polls/vote.ts
+++ b/src/server/api/endpoints/notes/polls/vote.ts
@@ -72,7 +72,10 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 		$inc: inc
 	});
 
-	publishNoteStream(note._id, 'poll_voted');
+	publishNoteStream(note._id, 'pollVoted', {
+		choice: choice,
+		userId: user._id.toHexString()
+	});
 
 	// Notify
 	notify(note.userId, user._id, 'poll_vote', {
diff --git a/src/server/api/endpoints/notifications/mark_all_as_read.ts b/src/server/api/endpoints/notifications/mark_all_as_read.ts
index e2bde777b3..6487cd8b48 100644
--- a/src/server/api/endpoints/notifications/mark_all_as_read.ts
+++ b/src/server/api/endpoints/notifications/mark_all_as_read.ts
@@ -1,5 +1,5 @@
 import Notification from '../../../../models/notification';
-import { publishUserStream } from '../../../../stream';
+import { publishMainStream } from '../../../../stream';
 import User, { ILocalUser } from '../../../../models/user';
 
 export const meta = {
@@ -40,5 +40,5 @@ export default (params: any, user: ILocalUser) => new Promise(async (res, rej) =
 	});
 
 	// 全ての通知を読みましたよというイベントを発行
-	publishUserStream(user._id, 'read_all_notifications');
+	publishMainStream(user._id, 'readAllNotifications');
 });
diff --git a/src/server/api/private/signin.ts b/src/server/api/private/signin.ts
index c42fb7bd8c..0e44c2ddd6 100644
--- a/src/server/api/private/signin.ts
+++ b/src/server/api/private/signin.ts
@@ -3,7 +3,7 @@ import * as bcrypt from 'bcryptjs';
 import * as speakeasy from 'speakeasy';
 import User, { ILocalUser } from '../../../models/user';
 import Signin, { pack } from '../../../models/signin';
-import { publishUserStream } from '../../../stream';
+import { publishMainStream } from '../../../stream';
 import signin from '../common/signin';
 import config from '../../../config';
 
@@ -87,5 +87,5 @@ export default async (ctx: Koa.Context) => {
 	});
 
 	// Publish signin event
-	publishUserStream(user._id, 'signin', await pack(record));
+	publishMainStream(user._id, 'signin', await pack(record));
 };
diff --git a/src/server/api/service/twitter.ts b/src/server/api/service/twitter.ts
index aad2846bb4..f71e588628 100644
--- a/src/server/api/service/twitter.ts
+++ b/src/server/api/service/twitter.ts
@@ -4,7 +4,7 @@ import * as uuid from 'uuid';
 import autwh from 'autwh';
 import redis from '../../../db/redis';
 import User, { pack, ILocalUser } from '../../../models/user';
-import { publishUserStream } from '../../../stream';
+import { publishMainStream } from '../../../stream';
 import config from '../../../config';
 import signin from '../common/signin';
 
@@ -49,7 +49,7 @@ router.get('/disconnect/twitter', async ctx => {
 	ctx.body = `Twitterの連携を解除しました :v:`;
 
 	// Publish i updated event
-	publishUserStream(user._id, 'meUpdated', await pack(user, user, {
+	publishMainStream(user._id, 'meUpdated', await pack(user, user, {
 		detail: true,
 		includeSecrets: true
 	}));
@@ -174,7 +174,7 @@ if (config.twitter == null) {
 			ctx.body = `Twitter: @${result.screenName} を、Misskey: @${user.username} に接続しました！`;
 
 			// Publish i updated event
-			publishUserStream(user._id, 'meUpdated', await pack(user, user, {
+			publishMainStream(user._id, 'meUpdated', await pack(user, user, {
 				detail: true,
 				includeSecrets: true
 			}));
diff --git a/src/server/api/stream/channel.ts b/src/server/api/stream/channel.ts
new file mode 100644
index 0000000000..e2726060dc
--- /dev/null
+++ b/src/server/api/stream/channel.ts
@@ -0,0 +1,39 @@
+import autobind from 'autobind-decorator';
+import Connection from '.';
+
+/**
+ * Stream channel
+ */
+export default abstract class Channel {
+	protected connection: Connection;
+	public id: string;
+
+	protected get user() {
+		return this.connection.user;
+	}
+
+	protected get subscriber() {
+		return this.connection.subscriber;
+	}
+
+	constructor(id: string, connection: Connection) {
+		this.id = id;
+		this.connection = connection;
+	}
+
+	@autobind
+	public send(typeOrPayload: any, payload?: any) {
+		const type = payload === undefined ? typeOrPayload.type : typeOrPayload;
+		const body = payload === undefined ? typeOrPayload.body : payload;
+
+		this.connection.sendMessageToWs('channel', {
+			id: this.id,
+			type: type,
+			body: body
+		});
+	}
+
+	public abstract init(params: any): void;
+	public dispose?(): void;
+	public onMessage?(type: string, body: any): void;
+}
diff --git a/src/server/api/stream/channels/drive.ts b/src/server/api/stream/channels/drive.ts
new file mode 100644
index 0000000000..807fc93cd0
--- /dev/null
+++ b/src/server/api/stream/channels/drive.ts
@@ -0,0 +1,12 @@
+import autobind from 'autobind-decorator';
+import Channel from '../channel';
+
+export default class extends Channel {
+	@autobind
+	public async init(params: any) {
+		// Subscribe drive stream
+		this.subscriber.on(`driveStream:${this.user._id}`, data => {
+			this.send(data);
+		});
+	}
+}
diff --git a/src/server/api/stream/channels/games/reversi-game.ts b/src/server/api/stream/channels/games/reversi-game.ts
new file mode 100644
index 0000000000..11f1fb1feb
--- /dev/null
+++ b/src/server/api/stream/channels/games/reversi-game.ts
@@ -0,0 +1,309 @@
+import autobind from 'autobind-decorator';
+import * as CRC32 from 'crc-32';
+import ReversiGame, { pack } from '../../../../../models/games/reversi/game';
+import { publishReversiGameStream } from '../../../../../stream';
+import Reversi from '../../../../../games/reversi/core';
+import * as maps from '../../../../../games/reversi/maps';
+import Channel from '../../channel';
+
+export default class extends Channel {
+	private gameId: string;
+
+	@autobind
+	public async init(params: any) {
+		this.gameId = params.gameId as string;
+
+		// Subscribe game stream
+		this.subscriber.on(`reversiGameStream:${this.gameId}`, data => {
+			this.send(data);
+		});
+	}
+
+	@autobind
+	public onMessage(type: string, body: any) {
+		switch (type) {
+			case 'accept': this.accept(true); break;
+			case 'cancel-accept': this.accept(false); break;
+			case 'update-settings': this.updateSettings(body.settings); break;
+			case 'init-form': this.initForm(body); break;
+			case 'update-form': this.updateForm(body.id, body.value); break;
+			case 'message': this.message(body); break;
+			case 'set': this.set(body.pos); break;
+			case 'check': this.check(body.crc32); break;
+		}
+	}
+
+	@autobind
+	private async updateSettings(settings: any) {
+		const game = await ReversiGame.findOne({ _id: this.gameId });
+
+		if (game.isStarted) return;
+		if (!game.user1Id.equals(this.user._id) && !game.user2Id.equals(this.user._id)) return;
+		if (game.user1Id.equals(this.user._id) && game.user1Accepted) return;
+		if (game.user2Id.equals(this.user._id) && game.user2Accepted) return;
+
+		await ReversiGame.update({ _id: this.gameId }, {
+			$set: {
+				settings
+			}
+		});
+
+		publishReversiGameStream(this.gameId, 'updateSettings', settings);
+	}
+
+	@autobind
+	private async initForm(form: any) {
+		const game = await ReversiGame.findOne({ _id: this.gameId });
+
+		if (game.isStarted) return;
+		if (!game.user1Id.equals(this.user._id) && !game.user2Id.equals(this.user._id)) return;
+
+		const set = game.user1Id.equals(this.user._id) ? {
+			form1: form
+		} : {
+				form2: form
+			};
+
+		await ReversiGame.update({ _id: this.gameId }, {
+			$set: set
+		});
+
+		publishReversiGameStream(this.gameId, 'initForm', {
+			userId: this.user._id,
+			form
+		});
+	}
+
+	@autobind
+	private async updateForm(id: string, value: any) {
+		const game = await ReversiGame.findOne({ _id: this.gameId });
+
+		if (game.isStarted) return;
+		if (!game.user1Id.equals(this.user._id) && !game.user2Id.equals(this.user._id)) return;
+
+		const form = game.user1Id.equals(this.user._id) ? game.form2 : game.form1;
+
+		const item = form.find((i: any) => i.id == id);
+
+		if (item == null) return;
+
+		item.value = value;
+
+		const set = game.user1Id.equals(this.user._id) ? {
+			form2: form
+		} : {
+				form1: form
+			};
+
+		await ReversiGame.update({ _id: this.gameId }, {
+			$set: set
+		});
+
+		publishReversiGameStream(this.gameId, 'updateForm', {
+			userId: this.user._id,
+			id,
+			value
+		});
+	}
+
+	@autobind
+	private async message(message: any) {
+		message.id = Math.random();
+		publishReversiGameStream(this.gameId, 'message', {
+			userId: this.user._id,
+			message
+		});
+	}
+
+	@autobind
+	private async accept(accept: boolean) {
+		const game = await ReversiGame.findOne({ _id: this.gameId });
+
+		if (game.isStarted) return;
+
+		let bothAccepted = false;
+
+		if (game.user1Id.equals(this.user._id)) {
+			await ReversiGame.update({ _id: this.gameId }, {
+				$set: {
+					user1Accepted: accept
+				}
+			});
+
+			publishReversiGameStream(this.gameId, 'changeAccepts', {
+				user1: accept,
+				user2: game.user2Accepted
+			});
+
+			if (accept && game.user2Accepted) bothAccepted = true;
+		} else if (game.user2Id.equals(this.user._id)) {
+			await ReversiGame.update({ _id: this.gameId }, {
+				$set: {
+					user2Accepted: accept
+				}
+			});
+
+			publishReversiGameStream(this.gameId, 'changeAccepts', {
+				user1: game.user1Accepted,
+				user2: accept
+			});
+
+			if (accept && game.user1Accepted) bothAccepted = true;
+		} else {
+			return;
+		}
+
+		if (bothAccepted) {
+			// 3秒後、まだacceptされていたらゲーム開始
+			setTimeout(async () => {
+				const freshGame = await ReversiGame.findOne({ _id: this.gameId });
+				if (freshGame == null || freshGame.isStarted || freshGame.isEnded) return;
+				if (!freshGame.user1Accepted || !freshGame.user2Accepted) return;
+
+				let bw: number;
+				if (freshGame.settings.bw == 'random') {
+					bw = Math.random() > 0.5 ? 1 : 2;
+				} else {
+					bw = freshGame.settings.bw as number;
+				}
+
+				function getRandomMap() {
+					const mapCount = Object.entries(maps).length;
+					const rnd = Math.floor(Math.random() * mapCount);
+					return Object.values(maps)[rnd].data;
+				}
+
+				const map = freshGame.settings.map != null ? freshGame.settings.map : getRandomMap();
+
+				await ReversiGame.update({ _id: this.gameId }, {
+					$set: {
+						startedAt: new Date(),
+						isStarted: true,
+						black: bw,
+						'settings.map': map
+					}
+				});
+
+				//#region 盤面に最初から石がないなどして始まった瞬間に勝敗が決定する場合があるのでその処理
+				const o = new Reversi(map, {
+					isLlotheo: freshGame.settings.isLlotheo,
+					canPutEverywhere: freshGame.settings.canPutEverywhere,
+					loopedBoard: freshGame.settings.loopedBoard
+				});
+
+				if (o.isEnded) {
+					let winner;
+					if (o.winner === true) {
+						winner = freshGame.black == 1 ? freshGame.user1Id : freshGame.user2Id;
+					} else if (o.winner === false) {
+						winner = freshGame.black == 1 ? freshGame.user2Id : freshGame.user1Id;
+					} else {
+						winner = null;
+					}
+
+					await ReversiGame.update({
+						_id: this.gameId
+					}, {
+							$set: {
+								isEnded: true,
+								winnerId: winner
+							}
+						});
+
+					publishReversiGameStream(this.gameId, 'ended', {
+						winnerId: winner,
+						game: await pack(this.gameId, this.user)
+					});
+				}
+				//#endregion
+
+				publishReversiGameStream(this.gameId, 'started', await pack(this.gameId, this.user));
+			}, 3000);
+		}
+	}
+
+	// 石を打つ
+	@autobind
+	private async set(pos: number) {
+		const game = await ReversiGame.findOne({ _id: this.gameId });
+
+		if (!game.isStarted) return;
+		if (game.isEnded) return;
+		if (!game.user1Id.equals(this.user._id) && !game.user2Id.equals(this.user._id)) return;
+
+		const o = new Reversi(game.settings.map, {
+			isLlotheo: game.settings.isLlotheo,
+			canPutEverywhere: game.settings.canPutEverywhere,
+			loopedBoard: game.settings.loopedBoard
+		});
+
+		game.logs.forEach(log => {
+			o.put(log.color, log.pos);
+		});
+
+		const myColor =
+			(game.user1Id.equals(this.user._id) && game.black == 1) || (game.user2Id.equals(this.user._id) && game.black == 2)
+				? true
+				: false;
+
+		if (!o.canPut(myColor, pos)) return;
+		o.put(myColor, pos);
+
+		let winner;
+		if (o.isEnded) {
+			if (o.winner === true) {
+				winner = game.black == 1 ? game.user1Id : game.user2Id;
+			} else if (o.winner === false) {
+				winner = game.black == 1 ? game.user2Id : game.user1Id;
+			} else {
+				winner = null;
+			}
+		}
+
+		const log = {
+			at: new Date(),
+			color: myColor,
+			pos
+		};
+
+		const crc32 = CRC32.str(game.logs.map(x => x.pos.toString()).join('') + pos.toString());
+
+		await ReversiGame.update({
+			_id: this.gameId
+		}, {
+				$set: {
+					crc32,
+					isEnded: o.isEnded,
+					winnerId: winner
+				},
+				$push: {
+					logs: log
+				}
+			});
+
+		publishReversiGameStream(this.gameId, 'set', Object.assign(log, {
+			next: o.turn
+		}));
+
+		if (o.isEnded) {
+			publishReversiGameStream(this.gameId, 'ended', {
+				winnerId: winner,
+				game: await pack(this.gameId, this.user)
+			});
+		}
+	}
+
+	@autobind
+	private async check(crc32: string) {
+		const game = await ReversiGame.findOne({ _id: this.gameId });
+
+		if (!game.isStarted) return;
+
+		// 互換性のため
+		if (game.crc32 == null) return;
+
+		if (crc32 !== game.crc32) {
+			this.send('rescue', await pack(game, this.user));
+		}
+	}
+}
diff --git a/src/server/api/stream/channels/games/reversi.ts b/src/server/api/stream/channels/games/reversi.ts
new file mode 100644
index 0000000000..d75025c944
--- /dev/null
+++ b/src/server/api/stream/channels/games/reversi.ts
@@ -0,0 +1,30 @@
+import autobind from 'autobind-decorator';
+import * as mongo from 'mongodb';
+import Matching, { pack } from '../../../../../models/games/reversi/matching';
+import { publishMainStream } from '../../../../../stream';
+import Channel from '../../channel';
+
+export default class extends Channel {
+	@autobind
+	public async init(params: any) {
+		// Subscribe reversi stream
+		this.subscriber.on(`reversiStream:${this.user._id}`, data => {
+			this.send(data);
+		});
+	}
+
+	@autobind
+	public async onMessage(type: string, body: any) {
+		switch (type) {
+			case 'ping':
+				if (body.id == null) return;
+				const matching = await Matching.findOne({
+					parentId: this.user._id,
+					childId: new mongo.ObjectID(body.id)
+				});
+				if (matching == null) return;
+				publishMainStream(matching.childId, 'reversiInvited', await pack(matching, matching.childId));
+				break;
+		}
+	}
+}
diff --git a/src/server/api/stream/channels/global-timeline.ts b/src/server/api/stream/channels/global-timeline.ts
new file mode 100644
index 0000000000..ab0fe5d094
--- /dev/null
+++ b/src/server/api/stream/channels/global-timeline.ts
@@ -0,0 +1,39 @@
+import autobind from 'autobind-decorator';
+import Mute from '../../../../models/mute';
+import { pack } from '../../../../models/note';
+import shouldMuteThisNote from '../../../../misc/should-mute-this-note';
+import Channel from '../channel';
+
+export default class extends Channel {
+	private mutedUserIds: string[] = [];
+
+	@autobind
+	public async init(params: any) {
+		// Subscribe events
+		this.subscriber.on('globalTimeline', this.onNote);
+
+		const mute = await Mute.find({ muterId: this.user._id });
+		this.mutedUserIds = mute.map(m => m.muteeId.toString());
+	}
+
+	@autobind
+	private async onNote(note: any) {
+		// Renoteなら再pack
+		if (note.renoteId != null) {
+			note.renote = await pack(note.renoteId, this.user, {
+				detail: true
+			});
+		}
+
+		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
+		if (shouldMuteThisNote(note, this.mutedUserIds)) return;
+
+		this.send('note', note);
+	}
+
+	@autobind
+	public dispose() {
+		// Unsubscribe events
+		this.subscriber.off('globalTimeline', this.onNote);
+	}
+}
diff --git a/src/server/api/stream/channels/hashtag.ts b/src/server/api/stream/channels/hashtag.ts
new file mode 100644
index 0000000000..652b0caa5b
--- /dev/null
+++ b/src/server/api/stream/channels/hashtag.ts
@@ -0,0 +1,33 @@
+import autobind from 'autobind-decorator';
+import Mute from '../../../../models/mute';
+import { pack } from '../../../../models/note';
+import shouldMuteThisNote from '../../../../misc/should-mute-this-note';
+import Channel from '../channel';
+
+export default class extends Channel {
+	@autobind
+	public async init(params: any) {
+		const mute = this.user ? await Mute.find({ muterId: this.user._id }) : null;
+		const mutedUserIds = mute ? mute.map(m => m.muteeId.toString()) : [];
+
+		const q: Array<string[]> = params.q;
+
+		// Subscribe stream
+		this.subscriber.on('hashtag', async note => {
+			const matched = q.some(tags => tags.every(tag => note.tags.map((t: string) => t.toLowerCase()).includes(tag.toLowerCase())));
+			if (!matched) return;
+
+			// Renoteなら再pack
+			if (note.renoteId != null) {
+				note.renote = await pack(note.renoteId, this.user, {
+					detail: true
+				});
+			}
+
+			// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
+			if (shouldMuteThisNote(note, mutedUserIds)) return;
+
+			this.send('note', note);
+		});
+	}
+}
diff --git a/src/server/api/stream/channels/home-timeline.ts b/src/server/api/stream/channels/home-timeline.ts
new file mode 100644
index 0000000000..4c674e75ef
--- /dev/null
+++ b/src/server/api/stream/channels/home-timeline.ts
@@ -0,0 +1,39 @@
+import autobind from 'autobind-decorator';
+import Mute from '../../../../models/mute';
+import { pack } from '../../../../models/note';
+import shouldMuteThisNote from '../../../../misc/should-mute-this-note';
+import Channel from '../channel';
+
+export default class extends Channel {
+	private mutedUserIds: string[] = [];
+
+	@autobind
+	public async init(params: any) {
+		// Subscribe events
+		this.subscriber.on(`homeTimeline:${this.user._id}`, this.onNote);
+
+		const mute = await Mute.find({ muterId: this.user._id });
+		this.mutedUserIds = mute.map(m => m.muteeId.toString());
+	}
+
+	@autobind
+	private async onNote(note: any) {
+		// Renoteなら再pack
+		if (note.renoteId != null) {
+			note.renote = await pack(note.renoteId, this.user, {
+				detail: true
+			});
+		}
+
+		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
+		if (shouldMuteThisNote(note, this.mutedUserIds)) return;
+
+		this.send('note', note);
+	}
+
+	@autobind
+	public dispose() {
+		// Unsubscribe events
+		this.subscriber.off(`homeTimeline:${this.user._id}`, this.onNote);
+	}
+}
diff --git a/src/server/api/stream/channels/hybrid-timeline.ts b/src/server/api/stream/channels/hybrid-timeline.ts
new file mode 100644
index 0000000000..0b12ab3a8f
--- /dev/null
+++ b/src/server/api/stream/channels/hybrid-timeline.ts
@@ -0,0 +1,41 @@
+import autobind from 'autobind-decorator';
+import Mute from '../../../../models/mute';
+import { pack } from '../../../../models/note';
+import shouldMuteThisNote from '../../../../misc/should-mute-this-note';
+import Channel from '../channel';
+
+export default class extends Channel {
+	private mutedUserIds: string[] = [];
+
+	@autobind
+	public async init(params: any) {
+		// Subscribe events
+		this.subscriber.on('hybridTimeline', this.onNewNote);
+		this.subscriber.on(`hybridTimeline:${this.user._id}`, this.onNewNote);
+
+		const mute = await Mute.find({ muterId: this.user._id });
+		this.mutedUserIds = mute.map(m => m.muteeId.toString());
+	}
+
+	@autobind
+	private async onNewNote(note: any) {
+		// Renoteなら再pack
+		if (note.renoteId != null) {
+			note.renote = await pack(note.renoteId, this.user, {
+				detail: true
+			});
+		}
+
+		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
+		if (shouldMuteThisNote(note, this.mutedUserIds)) return;
+
+		this.send('note', note);
+	}
+
+	@autobind
+	public dispose() {
+		// Unsubscribe events
+		this.subscriber.off('hybridTimeline', this.onNewNote);
+		this.subscriber.off(`hybridTimeline:${this.user._id}`, this.onNewNote);
+	}
+}
diff --git a/src/server/api/stream/channels/index.ts b/src/server/api/stream/channels/index.ts
new file mode 100644
index 0000000000..7e71590d00
--- /dev/null
+++ b/src/server/api/stream/channels/index.ts
@@ -0,0 +1,31 @@
+import main from './main';
+import homeTimeline from './home-timeline';
+import localTimeline from './local-timeline';
+import hybridTimeline from './hybrid-timeline';
+import globalTimeline from './global-timeline';
+import notesStats from './notes-stats';
+import serverStats from './server-stats';
+import userList from './user-list';
+import messaging from './messaging';
+import messagingIndex from './messaging-index';
+import drive from './drive';
+import hashtag from './hashtag';
+import gamesReversi from './games/reversi';
+import gamesReversiGame from './games/reversi-game';
+
+export default {
+	main,
+	homeTimeline,
+	localTimeline,
+	hybridTimeline,
+	globalTimeline,
+	notesStats,
+	serverStats,
+	userList,
+	messaging,
+	messagingIndex,
+	drive,
+	hashtag,
+	gamesReversi,
+	gamesReversiGame
+};
diff --git a/src/server/api/stream/channels/local-timeline.ts b/src/server/api/stream/channels/local-timeline.ts
new file mode 100644
index 0000000000..769ec6392f
--- /dev/null
+++ b/src/server/api/stream/channels/local-timeline.ts
@@ -0,0 +1,39 @@
+import autobind from 'autobind-decorator';
+import Mute from '../../../../models/mute';
+import { pack } from '../../../../models/note';
+import shouldMuteThisNote from '../../../../misc/should-mute-this-note';
+import Channel from '../channel';
+
+export default class extends Channel {
+	private mutedUserIds: string[] = [];
+
+	@autobind
+	public async init(params: any) {
+		// Subscribe events
+		this.subscriber.on('localTimeline', this.onNote);
+
+		const mute = this.user ? await Mute.find({ muterId: this.user._id }) : null;
+		this.mutedUserIds = mute ? mute.map(m => m.muteeId.toString()) : [];
+	}
+
+	@autobind
+	private async onNote(note: any) {
+		// Renoteなら再pack
+		if (note.renoteId != null) {
+			note.renote = await pack(note.renoteId, this.user, {
+				detail: true
+			});
+		}
+
+		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
+		if (shouldMuteThisNote(note, this.mutedUserIds)) return;
+
+		this.send('note', note);
+	}
+
+	@autobind
+	public dispose() {
+		// Unsubscribe events
+		this.subscriber.off('localTimeline', this.onNote);
+	}
+}
diff --git a/src/server/api/stream/channels/main.ts b/src/server/api/stream/channels/main.ts
new file mode 100644
index 0000000000..a6c5b12760
--- /dev/null
+++ b/src/server/api/stream/channels/main.ts
@@ -0,0 +1,25 @@
+import autobind from 'autobind-decorator';
+import Mute from '../../../../models/mute';
+import Channel from '../channel';
+
+export default class extends Channel {
+	@autobind
+	public async init(params: any) {
+		const mute = await Mute.find({ muterId: this.user._id });
+		const mutedUserIds = mute.map(m => m.muteeId.toString());
+
+		// Subscribe main stream channel
+		this.subscriber.on(`mainStream:${this.user._id}`, async data => {
+			const { type, body } = data;
+
+			switch (type) {
+				case 'notification': {
+					if (!mutedUserIds.includes(body.userId)) {
+						this.send('notification', body);
+					}
+					break;
+				}
+			}
+		});
+	}
+}
diff --git a/src/server/api/stream/channels/messaging-index.ts b/src/server/api/stream/channels/messaging-index.ts
new file mode 100644
index 0000000000..6e87cca7f4
--- /dev/null
+++ b/src/server/api/stream/channels/messaging-index.ts
@@ -0,0 +1,12 @@
+import autobind from 'autobind-decorator';
+import Channel from '../channel';
+
+export default class extends Channel {
+	@autobind
+	public async init(params: any) {
+		// Subscribe messaging index stream
+		this.subscriber.on(`messagingIndexStream:${this.user._id}`, data => {
+			this.send(data);
+		});
+	}
+}
diff --git a/src/server/api/stream/channels/messaging.ts b/src/server/api/stream/channels/messaging.ts
new file mode 100644
index 0000000000..e1a78c8678
--- /dev/null
+++ b/src/server/api/stream/channels/messaging.ts
@@ -0,0 +1,26 @@
+import autobind from 'autobind-decorator';
+import read from '../../common/read-messaging-message';
+import Channel from '../channel';
+
+export default class extends Channel {
+	private otherpartyId: string;
+
+	@autobind
+	public async init(params: any) {
+		this.otherpartyId = params.otherparty as string;
+
+		// Subscribe messaging stream
+		this.subscriber.on(`messagingStream:${this.user._id}-${this.otherpartyId}`, data => {
+			this.send(data);
+		});
+	}
+
+	@autobind
+	public onMessage(type: string, body: any) {
+		switch (type) {
+			case 'read':
+				read(this.user._id, this.otherpartyId, body.id);
+				break;
+		}
+	}
+}
diff --git a/src/server/api/stream/channels/notes-stats.ts b/src/server/api/stream/channels/notes-stats.ts
new file mode 100644
index 0000000000..cc68d9886d
--- /dev/null
+++ b/src/server/api/stream/channels/notes-stats.ts
@@ -0,0 +1,34 @@
+import autobind from 'autobind-decorator';
+import Xev from 'xev';
+import Channel from '../channel';
+
+const ev = new Xev();
+
+export default class extends Channel {
+	@autobind
+	public async init(params: any) {
+		ev.addListener('notesStats', this.onStats);
+	}
+
+	@autobind
+	private onStats(stats: any) {
+		this.send('stats', stats);
+	}
+
+	@autobind
+	public onMessage(type: string, body: any) {
+		switch (type) {
+			case 'requestLog':
+				ev.once(`notesStatsLog:${body.id}`, statsLog => {
+					this.send('statsLog', statsLog);
+				});
+				ev.emit('requestNotesStatsLog', body.id);
+				break;
+		}
+	}
+
+	@autobind
+	public dispose() {
+		ev.removeListener('notesStats', this.onStats);
+	}
+}
diff --git a/src/server/api/stream/channels/server-stats.ts b/src/server/api/stream/channels/server-stats.ts
new file mode 100644
index 0000000000..28a566e8ae
--- /dev/null
+++ b/src/server/api/stream/channels/server-stats.ts
@@ -0,0 +1,37 @@
+import autobind from 'autobind-decorator';
+import Xev from 'xev';
+import Channel from '../channel';
+
+const ev = new Xev();
+
+export default class extends Channel {
+	@autobind
+	public async init(params: any) {
+		ev.addListener('serverStats', this.onStats);
+	}
+
+	@autobind
+	private onStats(stats: any) {
+		this.send('stats', stats);
+	}
+
+	@autobind
+	public onMessage(type: string, body: any) {
+		switch (type) {
+			case 'requestLog':
+				ev.once(`serverStatsLog:${body.id}`, statsLog => {
+					this.send('statsLog', statsLog);
+				});
+				ev.emit('requestServerStatsLog', {
+					id: body.id,
+					length: body.length
+				});
+				break;
+		}
+	}
+
+	@autobind
+	public dispose() {
+		ev.removeListener('serverStats', this.onStats);
+	}
+}
diff --git a/src/server/api/stream/channels/user-list.ts b/src/server/api/stream/channels/user-list.ts
new file mode 100644
index 0000000000..4ace308923
--- /dev/null
+++ b/src/server/api/stream/channels/user-list.ts
@@ -0,0 +1,14 @@
+import autobind from 'autobind-decorator';
+import Channel from '../channel';
+
+export default class extends Channel {
+	@autobind
+	public async init(params: any) {
+		const listId = params.listId as string;
+
+		// Subscribe stream
+		this.subscriber.on(`userListStream:${listId}`, data => {
+			this.send(data);
+		});
+	}
+}
diff --git a/src/server/api/stream/drive.ts b/src/server/api/stream/drive.ts
deleted file mode 100644
index 28c241e1bc..0000000000
--- a/src/server/api/stream/drive.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-export default function(request: websocket.request, connection: websocket.connection, subscriber: Xev, user: any): void {
-	// Subscribe drive stream
-	subscriber.on(`drive-stream:${user._id}`, data => {
-		connection.send(JSON.stringify(data));
-	});
-}
diff --git a/src/server/api/stream/games/reversi-game.ts b/src/server/api/stream/games/reversi-game.ts
deleted file mode 100644
index 5cbbf42d59..0000000000
--- a/src/server/api/stream/games/reversi-game.ts
+++ /dev/null
@@ -1,332 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-import * as CRC32 from 'crc-32';
-import ReversiGame, { pack } from '../../../../models/games/reversi/game';
-import { publishReversiGameStream } from '../../../../stream';
-import Reversi from '../../../../games/reversi/core';
-import * as maps from '../../../../games/reversi/maps';
-import { ParsedUrlQuery } from 'querystring';
-
-export default function(request: websocket.request, connection: websocket.connection, subscriber: Xev, user?: any): void {
-	const q = request.resourceURL.query as ParsedUrlQuery;
-	const gameId = q.game as string;
-
-	// Subscribe game stream
-	subscriber.on(`reversi-game-stream:${gameId}`, data => {
-		connection.send(JSON.stringify(data));
-	});
-
-	connection.on('message', async (data) => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'accept':
-				accept(true);
-				break;
-
-			case 'cancel-accept':
-				accept(false);
-				break;
-
-			case 'update-settings':
-				if (msg.settings == null) return;
-				updateSettings(msg.settings);
-				break;
-
-			case 'init-form':
-				if (msg.body == null) return;
-				initForm(msg.body);
-				break;
-
-			case 'update-form':
-				if (msg.id == null || msg.value === undefined) return;
-				updateForm(msg.id, msg.value);
-				break;
-
-			case 'message':
-				if (msg.body == null) return;
-				message(msg.body);
-				break;
-
-			case 'set':
-				if (msg.pos == null) return;
-				set(msg.pos);
-				break;
-
-			case 'check':
-				if (msg.crc32 == null) return;
-				check(msg.crc32);
-				break;
-		}
-	});
-
-	async function updateSettings(settings: any) {
-		const game = await ReversiGame.findOne({ _id: gameId });
-
-		if (game.isStarted) return;
-		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
-		if (game.user1Id.equals(user._id) && game.user1Accepted) return;
-		if (game.user2Id.equals(user._id) && game.user2Accepted) return;
-
-		await ReversiGame.update({ _id: gameId }, {
-			$set: {
-				settings
-			}
-		});
-
-		publishReversiGameStream(gameId, 'update-settings', settings);
-	}
-
-	async function initForm(form: any) {
-		const game = await ReversiGame.findOne({ _id: gameId });
-
-		if (game.isStarted) return;
-		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
-
-		const set = game.user1Id.equals(user._id) ? {
-			form1: form
-		} : {
-				form2: form
-			};
-
-		await ReversiGame.update({ _id: gameId }, {
-			$set: set
-		});
-
-		publishReversiGameStream(gameId, 'init-form', {
-			userId: user._id,
-			form
-		});
-	}
-
-	async function updateForm(id: string, value: any) {
-		const game = await ReversiGame.findOne({ _id: gameId });
-
-		if (game.isStarted) return;
-		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
-
-		const form = game.user1Id.equals(user._id) ? game.form2 : game.form1;
-
-		const item = form.find((i: any) => i.id == id);
-
-		if (item == null) return;
-
-		item.value = value;
-
-		const set = game.user1Id.equals(user._id) ? {
-			form2: form
-		} : {
-				form1: form
-			};
-
-		await ReversiGame.update({ _id: gameId }, {
-			$set: set
-		});
-
-		publishReversiGameStream(gameId, 'update-form', {
-			userId: user._id,
-			id,
-			value
-		});
-	}
-
-	async function message(message: any) {
-		message.id = Math.random();
-		publishReversiGameStream(gameId, 'message', {
-			userId: user._id,
-			message
-		});
-	}
-
-	async function accept(accept: boolean) {
-		const game = await ReversiGame.findOne({ _id: gameId });
-
-		if (game.isStarted) return;
-
-		let bothAccepted = false;
-
-		if (game.user1Id.equals(user._id)) {
-			await ReversiGame.update({ _id: gameId }, {
-				$set: {
-					user1Accepted: accept
-				}
-			});
-
-			publishReversiGameStream(gameId, 'change-accepts', {
-				user1: accept,
-				user2: game.user2Accepted
-			});
-
-			if (accept && game.user2Accepted) bothAccepted = true;
-		} else if (game.user2Id.equals(user._id)) {
-			await ReversiGame.update({ _id: gameId }, {
-				$set: {
-					user2Accepted: accept
-				}
-			});
-
-			publishReversiGameStream(gameId, 'change-accepts', {
-				user1: game.user1Accepted,
-				user2: accept
-			});
-
-			if (accept && game.user1Accepted) bothAccepted = true;
-		} else {
-			return;
-		}
-
-		if (bothAccepted) {
-			// 3秒後、まだacceptされていたらゲーム開始
-			setTimeout(async () => {
-				const freshGame = await ReversiGame.findOne({ _id: gameId });
-				if (freshGame == null || freshGame.isStarted || freshGame.isEnded) return;
-				if (!freshGame.user1Accepted || !freshGame.user2Accepted) return;
-
-				let bw: number;
-				if (freshGame.settings.bw == 'random') {
-					bw = Math.random() > 0.5 ? 1 : 2;
-				} else {
-					bw = freshGame.settings.bw as number;
-				}
-
-				function getRandomMap() {
-					const mapCount = Object.entries(maps).length;
-					const rnd = Math.floor(Math.random() * mapCount);
-					return Object.values(maps)[rnd].data;
-				}
-
-				const map = freshGame.settings.map != null ? freshGame.settings.map : getRandomMap();
-
-				await ReversiGame.update({ _id: gameId }, {
-					$set: {
-						startedAt: new Date(),
-						isStarted: true,
-						black: bw,
-						'settings.map': map
-					}
-				});
-
-				//#region 盤面に最初から石がないなどして始まった瞬間に勝敗が決定する場合があるのでその処理
-				const o = new Reversi(map, {
-					isLlotheo: freshGame.settings.isLlotheo,
-					canPutEverywhere: freshGame.settings.canPutEverywhere,
-					loopedBoard: freshGame.settings.loopedBoard
-				});
-
-				if (o.isEnded) {
-					let winner;
-					if (o.winner === true) {
-						winner = freshGame.black == 1 ? freshGame.user1Id : freshGame.user2Id;
-					} else if (o.winner === false) {
-						winner = freshGame.black == 1 ? freshGame.user2Id : freshGame.user1Id;
-					} else {
-						winner = null;
-					}
-
-					await ReversiGame.update({
-						_id: gameId
-					}, {
-							$set: {
-								isEnded: true,
-								winnerId: winner
-							}
-						});
-
-					publishReversiGameStream(gameId, 'ended', {
-						winnerId: winner,
-						game: await pack(gameId, user)
-					});
-				}
-				//#endregion
-
-				publishReversiGameStream(gameId, 'started', await pack(gameId, user));
-			}, 3000);
-		}
-	}
-
-	// 石を打つ
-	async function set(pos: number) {
-		const game = await ReversiGame.findOne({ _id: gameId });
-
-		if (!game.isStarted) return;
-		if (game.isEnded) return;
-		if (!game.user1Id.equals(user._id) && !game.user2Id.equals(user._id)) return;
-
-		const o = new Reversi(game.settings.map, {
-			isLlotheo: game.settings.isLlotheo,
-			canPutEverywhere: game.settings.canPutEverywhere,
-			loopedBoard: game.settings.loopedBoard
-		});
-
-		game.logs.forEach(log => {
-			o.put(log.color, log.pos);
-		});
-
-		const myColor =
-			(game.user1Id.equals(user._id) && game.black == 1) || (game.user2Id.equals(user._id) && game.black == 2)
-				? true
-				: false;
-
-		if (!o.canPut(myColor, pos)) return;
-		o.put(myColor, pos);
-
-		let winner;
-		if (o.isEnded) {
-			if (o.winner === true) {
-				winner = game.black == 1 ? game.user1Id : game.user2Id;
-			} else if (o.winner === false) {
-				winner = game.black == 1 ? game.user2Id : game.user1Id;
-			} else {
-				winner = null;
-			}
-		}
-
-		const log = {
-			at: new Date(),
-			color: myColor,
-			pos
-		};
-
-		const crc32 = CRC32.str(game.logs.map(x => x.pos.toString()).join('') + pos.toString());
-
-		await ReversiGame.update({
-			_id: gameId
-		}, {
-				$set: {
-					crc32,
-					isEnded: o.isEnded,
-					winnerId: winner
-				},
-				$push: {
-					logs: log
-				}
-			});
-
-		publishReversiGameStream(gameId, 'set', Object.assign(log, {
-			next: o.turn
-		}));
-
-		if (o.isEnded) {
-			publishReversiGameStream(gameId, 'ended', {
-				winnerId: winner,
-				game: await pack(gameId, user)
-			});
-		}
-	}
-
-	async function check(crc32: string) {
-		const game = await ReversiGame.findOne({ _id: gameId });
-
-		if (!game.isStarted) return;
-
-		// 互換性のため
-		if (game.crc32 == null) return;
-
-		if (crc32 !== game.crc32) {
-			connection.send(JSON.stringify({
-				type: 'rescue',
-				body: await pack(game, user)
-			}));
-		}
-	}
-}
diff --git a/src/server/api/stream/games/reversi.ts b/src/server/api/stream/games/reversi.ts
deleted file mode 100644
index f467613b21..0000000000
--- a/src/server/api/stream/games/reversi.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as mongo from 'mongodb';
-import * as websocket from 'websocket';
-import Xev from 'xev';
-import Matching, { pack } from '../../../../models/games/reversi/matching';
-import { publishUserStream } from '../../../../stream';
-
-export default function(request: websocket.request, connection: websocket.connection, subscriber: Xev, user: any): void {
-	// Subscribe reversi stream
-	subscriber.on(`reversi-stream:${user._id}`, data => {
-		connection.send(JSON.stringify(data));
-	});
-
-	connection.on('message', async (data) => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'ping':
-				if (msg.id == null) return;
-				const matching = await Matching.findOne({
-					parentId: user._id,
-					childId: new mongo.ObjectID(msg.id)
-				});
-				if (matching == null) return;
-				publishUserStream(matching.childId, 'reversi_invited', await pack(matching, matching.childId));
-				break;
-		}
-	});
-}
diff --git a/src/server/api/stream/global-timeline.ts b/src/server/api/stream/global-timeline.ts
deleted file mode 100644
index 03852fb181..0000000000
--- a/src/server/api/stream/global-timeline.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-import { IUser } from '../../../models/user';
-import Mute from '../../../models/mute';
-import shouldMuteThisNote from '../../../misc/should-mute-this-note';
-
-export default async function(
-	request: websocket.request,
-	connection: websocket.connection,
-	subscriber: Xev,
-	user: IUser
-) {
-	const mute = await Mute.find({ muterId: user._id });
-	const mutedUserIds = mute.map(m => m.muteeId.toString());
-
-	// Subscribe stream
-	subscriber.on('global-timeline', async note => {
-		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (shouldMuteThisNote(note, mutedUserIds)) return;
-
-		connection.send(JSON.stringify({
-			type: 'note',
-			body: note
-		}));
-	});
-}
diff --git a/src/server/api/stream/hashtag.ts b/src/server/api/stream/hashtag.ts
deleted file mode 100644
index 54da4f9ad9..0000000000
--- a/src/server/api/stream/hashtag.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-import { IUser } from '../../../models/user';
-import Mute from '../../../models/mute';
-import { pack } from '../../../models/note';
-import shouldMuteThisNote from '../../../misc/should-mute-this-note';
-
-export default async function(
-	request: websocket.request,
-	connection: websocket.connection,
-	subscriber: Xev,
-	user?: IUser
-) {
-	const mute = user ? await Mute.find({ muterId: user._id }) : null;
-	const mutedUserIds = mute ? mute.map(m => m.muteeId.toString()) : [];
-
-	const q: Array<string[]> = JSON.parse((request.resourceURL.query as any).q);
-
-	// Subscribe stream
-	subscriber.on('hashtag', async note => {
-		const matched = q.some(tags => tags.every(tag => note.tags.map((t: string) => t.toLowerCase()).includes(tag.toLowerCase())));
-		if (!matched) return;
-
-		// Renoteなら再pack
-		if (note.renoteId != null) {
-			note.renote = await pack(note.renoteId, user, {
-				detail: true
-			});
-		}
-
-		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (shouldMuteThisNote(note, mutedUserIds)) return;
-
-		connection.send(JSON.stringify({
-			type: 'note',
-			body: note
-		}));
-	});
-}
diff --git a/src/server/api/stream/home.ts b/src/server/api/stream/home.ts
deleted file mode 100644
index 5575d0d523..0000000000
--- a/src/server/api/stream/home.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-import * as debug from 'debug';
-
-import User, { IUser } from '../../../models/user';
-import Mute from '../../../models/mute';
-import { pack as packNote, pack } from '../../../models/note';
-import readNotification from '../common/read-notification';
-import call from '../call';
-import { IApp } from '../../../models/app';
-import shouldMuteThisNote from '../../../misc/should-mute-this-note';
-import readNote from '../../../services/note/read';
-
-const log = debug('misskey');
-
-export default async function(
-	request: websocket.request,
-	connection: websocket.connection,
-	subscriber: Xev,
-	user: IUser,
-	app: IApp
-) {
-	const mute = await Mute.find({ muterId: user._id });
-	const mutedUserIds = mute.map(m => m.muteeId.toString());
-
-	async function onNoteStream(noteId: any) {
-		const note = await packNote(noteId, user, {
-			detail: true
-		});
-
-		connection.send(JSON.stringify({
-			type: 'note-updated',
-			body: {
-				note: note
-			}
-		}));
-	}
-
-	// Subscribe Home stream channel
-	subscriber.on(`user-stream:${user._id}`, async x => {
-		// Renoteなら再pack
-		if (x.type == 'note' && x.body.renoteId != null) {
-			x.body.renote = await pack(x.body.renoteId, user, {
-				detail: true
-			});
-		}
-
-		//#region 流れてきたメッセージがミュートしているユーザーが関わるものだったら無視する
-		if (x.type == 'note') {
-			if (shouldMuteThisNote(x.body, mutedUserIds)) return;
-		} else if (x.type == 'notification') {
-			if (mutedUserIds.includes(x.body.userId)) {
-				return;
-			}
-		}
-		//#endregion
-
-		connection.send(JSON.stringify(x));
-	});
-
-	connection.on('message', async data => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'api':
-				// 新鮮なデータを利用するためにユーザーをフェッチ
-				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 }
-					}));
-				}).catch(e => {
-					connection.send(JSON.stringify({
-						type: `api-res:${msg.id}`,
-						body: { e }
-					}));
-				});
-				break;
-
-			case 'alive':
-				// Update lastUsedAt
-				User.update({ _id: user._id }, {
-					$set: {
-						'lastUsedAt': new Date()
-					}
-				});
-				break;
-
-			case 'read_notification':
-				if (!msg.id) return;
-				readNotification(user._id, msg.id);
-				break;
-
-			case 'capture':
-				if (!msg.id) return;
-				log(`CAPTURE: ${msg.id} by @${user.username}`);
-				subscriber.on(`note-stream:${msg.id}`, onNoteStream);
-				if (msg.read) {
-					readNote(user._id, msg.id);
-				}
-				break;
-
-			case 'decapture':
-				if (!msg.id) return;
-				log(`DECAPTURE: ${msg.id} by @${user.username}`);
-				subscriber.off(`note-stream:${msg.id}`, onNoteStream);
-				break;
-		}
-	});
-}
diff --git a/src/server/api/stream/hybrid-timeline.ts b/src/server/api/stream/hybrid-timeline.ts
deleted file mode 100644
index 045b822783..0000000000
--- a/src/server/api/stream/hybrid-timeline.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-import { IUser } from '../../../models/user';
-import Mute from '../../../models/mute';
-import { pack } from '../../../models/note';
-import shouldMuteThisNote from '../../../misc/should-mute-this-note';
-
-export default async function(
-	request: websocket.request,
-	connection: websocket.connection,
-	subscriber: Xev,
-	user: IUser
-) {
-	const mute = await Mute.find({ muterId: user._id });
-	const mutedUserIds = mute.map(m => m.muteeId.toString());
-
-	// Subscribe stream
-	subscriber.on('hybrid-timeline', onEvent);
-	subscriber.on(`hybrid-timeline:${user._id}`, onEvent);
-
-	async function onEvent(note: any) {
-		// Renoteなら再pack
-		if (note.renoteId != null) {
-			note.renote = await pack(note.renoteId, user, {
-				detail: true
-			});
-		}
-
-		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (shouldMuteThisNote(note, mutedUserIds)) return;
-
-		connection.send(JSON.stringify({
-			type: 'note',
-			body: note
-		}));
-	}
-}
diff --git a/src/server/api/stream/index.ts b/src/server/api/stream/index.ts
new file mode 100644
index 0000000000..bd99f2755e
--- /dev/null
+++ b/src/server/api/stream/index.ts
@@ -0,0 +1,213 @@
+import autobind from 'autobind-decorator';
+import * as websocket from 'websocket';
+import Xev from 'xev';
+import * as debug from 'debug';
+
+import User, { IUser } from '../../../models/user';
+import readNotification from '../common/read-notification';
+import call from '../call';
+import { IApp } from '../../../models/app';
+import readNote from '../../../services/note/read';
+
+import Channel from './channel';
+import channels from './channels';
+
+const log = debug('misskey');
+
+/**
+ * Main stream connection
+ */
+export default class Connection {
+	public user?: IUser;
+	public app: IApp;
+	private wsConnection: websocket.connection;
+	public subscriber: Xev;
+	private channels: Channel[] = [];
+	private subscribingNotes: any = {};
+
+	constructor(
+		wsConnection: websocket.connection,
+		subscriber: Xev,
+		user: IUser,
+		app: IApp
+	) {
+		this.wsConnection = wsConnection;
+		this.user = user;
+		this.app = app;
+		this.subscriber = subscriber;
+
+		this.wsConnection.on('message', this.onWsConnectionMessage);
+	}
+
+	/**
+	 * クライアントからメッセージ受信時
+	 */
+	@autobind
+	private async onWsConnectionMessage(data: websocket.IMessage) {
+		const { type, body } = JSON.parse(data.utf8Data);
+
+		switch (type) {
+			case 'api': this.onApiRequest(body); break;
+			case 'alive': this.onAlive(); break;
+			case 'readNotification': this.onReadNotification(body); break;
+			case 'subNote': this.onSubscribeNote(body); break;
+			case 'sn': this.onSubscribeNote(body); break; // alias
+			case 'unsubNote': this.onUnsubscribeNote(body); break;
+			case 'un': this.onUnsubscribeNote(body); break; // alias
+			case 'connect': this.onChannelConnectRequested(body); break;
+			case 'disconnect': this.onChannelDisconnectRequested(body); break;
+			case 'channel': this.onChannelMessageRequested(body); break;
+		}
+	}
+
+	/**
+	 * APIリクエスト要求時
+	 */
+	@autobind
+	private async onApiRequest(payload: any) {
+		// 新鮮なデータを利用するためにユーザーをフェッチ
+		const user = this.user ? await User.findOne({ _id: this.user._id }) : null;
+
+		const endpoint = payload.endpoint || payload.ep; // alias
+
+		// 呼び出し
+		call(endpoint, user, this.app, payload.data).then(res => {
+			this.sendMessageToWs(`api:${payload.id}`, { res });
+		}).catch(e => {
+			this.sendMessageToWs(`api:${payload.id}`, { e });
+		});
+	}
+
+	@autobind
+	private onAlive() {
+		// Update lastUsedAt
+		User.update({ _id: this.user._id }, {
+			$set: {
+				'lastUsedAt': new Date()
+			}
+		});
+	}
+
+	@autobind
+	private onReadNotification(payload: any) {
+		if (!payload.id) return;
+		readNotification(this.user._id, payload.id);
+	}
+
+	/**
+	 * 投稿購読要求時
+	 */
+	@autobind
+	private onSubscribeNote(payload: any) {
+		if (!payload.id) return;
+
+		if (this.subscribingNotes[payload.id] == null) {
+			this.subscribingNotes[payload.id] = 0;
+		}
+
+		this.subscribingNotes[payload.id]++;
+
+		if (this.subscribingNotes[payload.id] == 1) {
+			this.subscriber.on(`noteStream:${payload.id}`, this.onNoteStreamMessage);
+		}
+
+		if (payload.read) {
+			readNote(this.user._id, payload.id);
+		}
+	}
+
+	/**
+	 * 投稿購読解除要求時
+	 */
+	@autobind
+	private onUnsubscribeNote(payload: any) {
+		if (!payload.id) return;
+
+		this.subscribingNotes[payload.id]--;
+		if (this.subscribingNotes[payload.id] <= 0) {
+			delete this.subscribingNotes[payload.id];
+			this.subscriber.off(`noteStream:${payload.id}`, this.onNoteStreamMessage);
+		}
+	}
+
+	@autobind
+	private async onNoteStreamMessage(data: any) {
+		this.sendMessageToWs('noteUpdated', {
+			id: data.body.id,
+			type: data.type,
+			body: data.body.body,
+		});
+	}
+
+	/**
+	 * チャンネル接続要求時
+	 */
+	@autobind
+	private onChannelConnectRequested(payload: any) {
+		const { channel, id, params } = payload;
+		log(`CH CONNECT: ${id} ${channel} by @${this.user.username}`);
+		this.connectChannel(id, params, (channels as any)[channel]);
+	}
+
+	/**
+	 * チャンネル切断要求時
+	 */
+	@autobind
+	private onChannelDisconnectRequested(payload: any) {
+		const { id } = payload;
+		log(`CH DISCONNECT: ${id} by @${this.user.username}`);
+		this.disconnectChannel(id);
+	}
+
+	/**
+	 * クライアントにメッセージ送信
+	 */
+	@autobind
+	public sendMessageToWs(type: string, payload: any) {
+		this.wsConnection.send(JSON.stringify({
+			type: type,
+			body: payload
+		}));
+	}
+
+	/**
+	 * チャンネルに接続
+	 */
+	@autobind
+	private connectChannel(id: string, params: any, channelClass: { new(id: string, connection: Connection): Channel }) {
+		const channel = new channelClass(id, this);
+		this.channels.push(channel);
+		channel.init(params);
+	}
+
+	/**
+	 * チャンネルから切断
+	 */
+	@autobind
+	private disconnectChannel(id: string) {
+		const channel = this.channels.find(c => c.id === id);
+
+		if (channel) {
+			if (channel.dispose) channel.dispose();
+			this.channels = this.channels.filter(c => c.id !== id);
+		}
+	}
+
+	@autobind
+	private onChannelMessageRequested(data: any) {
+		const channel = this.channels.find(c => c.id === data.id);
+		if (channel != null && channel.onMessage != null) {
+			channel.onMessage(data.type, data.body);
+		}
+	}
+
+	/**
+	 * ストリームが切れたとき
+	 */
+	@autobind
+	public dispose() {
+		this.channels.forEach(c => {
+			if (c.dispose) c.dispose();
+		});
+	}
+}
diff --git a/src/server/api/stream/local-timeline.ts b/src/server/api/stream/local-timeline.ts
deleted file mode 100644
index ae054a5f9f..0000000000
--- a/src/server/api/stream/local-timeline.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-import { IUser } from '../../../models/user';
-import Mute from '../../../models/mute';
-import { pack } from '../../../models/note';
-import shouldMuteThisNote from '../../../misc/should-mute-this-note';
-
-export default async function(
-	request: websocket.request,
-	connection: websocket.connection,
-	subscriber: Xev,
-	user?: IUser
-) {
-	const mute = user ? await Mute.find({ muterId: user._id }) : null;
-	const mutedUserIds = mute ? mute.map(m => m.muteeId.toString()) : [];
-
-	// Subscribe stream
-	subscriber.on('local-timeline', async note => {
-		// Renoteなら再pack
-		if (note.renoteId != null) {
-			note.renote = await pack(note.renoteId, user, {
-				detail: true
-			});
-		}
-
-		// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
-		if (shouldMuteThisNote(note, mutedUserIds)) return;
-
-		connection.send(JSON.stringify({
-			type: 'note',
-			body: note
-		}));
-	});
-}
diff --git a/src/server/api/stream/messaging-index.ts b/src/server/api/stream/messaging-index.ts
deleted file mode 100644
index 9af63f2812..0000000000
--- a/src/server/api/stream/messaging-index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-export default function(request: websocket.request, connection: websocket.connection, subscriber: Xev, user: any): void {
-	// Subscribe messaging index stream
-	subscriber.on(`messaging-index-stream:${user._id}`, data => {
-		connection.send(JSON.stringify(data));
-	});
-}
diff --git a/src/server/api/stream/messaging.ts b/src/server/api/stream/messaging.ts
deleted file mode 100644
index 8b352cea3c..0000000000
--- a/src/server/api/stream/messaging.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-import read from '../common/read-messaging-message';
-import { ParsedUrlQuery } from 'querystring';
-
-export default function(request: websocket.request, connection: websocket.connection, subscriber: Xev, user: any): void {
-	const q = request.resourceURL.query as ParsedUrlQuery;
-	const otherparty = q.otherparty as string;
-
-	// Subscribe messaging stream
-	subscriber.on(`messaging-stream:${user._id}-${otherparty}`, data => {
-		connection.send(JSON.stringify(data));
-	});
-
-	connection.on('message', async (data) => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'read':
-				if (!msg.id) return;
-				read(user._id, otherparty, msg.id);
-				break;
-		}
-	});
-}
diff --git a/src/server/api/stream/notes-stats.ts b/src/server/api/stream/notes-stats.ts
deleted file mode 100644
index ba99403226..0000000000
--- a/src/server/api/stream/notes-stats.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-const ev = new Xev();
-
-export default function(request: websocket.request, connection: websocket.connection): void {
-	const onStats = (stats: any) => {
-		connection.send(JSON.stringify({
-			type: 'stats',
-			body: stats
-		}));
-	};
-
-	connection.on('message', async data => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'requestLog':
-				ev.once(`notesStatsLog:${msg.id}`, statsLog => {
-					connection.send(JSON.stringify({
-						type: 'statsLog',
-						body: statsLog
-					}));
-				});
-				ev.emit('requestNotesStatsLog', msg.id);
-				break;
-		}
-	});
-
-	ev.addListener('notesStats', onStats);
-
-	connection.on('close', () => {
-		ev.removeListener('notesStats', onStats);
-	});
-}
diff --git a/src/server/api/stream/server-stats.ts b/src/server/api/stream/server-stats.ts
deleted file mode 100644
index d4fbeefa04..0000000000
--- a/src/server/api/stream/server-stats.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-
-const ev = new Xev();
-
-export default function(request: websocket.request, connection: websocket.connection): void {
-	const onStats = (stats: any) => {
-		connection.send(JSON.stringify({
-			type: 'stats',
-			body: stats
-		}));
-	};
-
-	connection.on('message', async data => {
-		const msg = JSON.parse(data.utf8Data);
-
-		switch (msg.type) {
-			case 'requestLog':
-				ev.once(`serverStatsLog:${msg.id}`, statsLog => {
-					connection.send(JSON.stringify({
-						type: 'statsLog',
-						body: statsLog
-					}));
-				});
-				ev.emit('requestServerStatsLog', {
-					id: msg.id,
-					length: msg.length
-				});
-				break;
-		}
-	});
-
-	ev.addListener('serverStats', onStats);
-
-	connection.on('close', () => {
-		ev.removeListener('serverStats', onStats);
-	});
-}
diff --git a/src/server/api/stream/user-list.ts b/src/server/api/stream/user-list.ts
deleted file mode 100644
index 30f94d5251..0000000000
--- a/src/server/api/stream/user-list.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as websocket from 'websocket';
-import Xev from 'xev';
-import { ParsedUrlQuery } from 'querystring';
-
-export default function(request: websocket.request, connection: websocket.connection, subscriber: Xev, user: any): void {
-	const q = request.resourceURL.query as ParsedUrlQuery;
-	const listId = q.listId as string;
-
-	// Subscribe stream
-	subscriber.on(`user-list-stream:${listId}`, data => {
-		connection.send(JSON.stringify(data));
-	});
-}
diff --git a/src/server/api/streaming.ts b/src/server/api/streaming.ts
index 09ec23a743..4518d21c3f 100644
--- a/src/server/api/streaming.ts
+++ b/src/server/api/streaming.ts
@@ -2,26 +2,12 @@ import * as http from 'http';
 import * as websocket from 'websocket';
 import Xev from 'xev';
 
-import homeStream from './stream/home';
-import localTimelineStream from './stream/local-timeline';
-import hybridTimelineStream from './stream/hybrid-timeline';
-import globalTimelineStream from './stream/global-timeline';
-import userListStream from './stream/user-list';
-import driveStream from './stream/drive';
-import messagingStream from './stream/messaging';
-import messagingIndexStream from './stream/messaging-index';
-import reversiGameStream from './stream/games/reversi-game';
-import reversiStream from './stream/games/reversi';
-import serverStatsStream from './stream/server-stats';
-import notesStatsStream from './stream/notes-stats';
-import hashtagStream from './stream/hashtag';
+import MainStreamConnection from './stream';
 import { ParsedUrlQuery } from 'querystring';
 import authenticate from './authenticate';
 
 module.exports = (server: http.Server) => {
-	/**
-	 * Init websocket server
-	 */
+	// Init websocket server
 	const ws = new websocket.server({
 		httpServer: server
 	});
@@ -29,20 +15,16 @@ module.exports = (server: http.Server) => {
 	ws.on('request', async (request) => {
 		const connection = request.accept();
 
-		if (request.resourceURL.pathname === '/server-stats') {
-			serverStatsStream(request, connection);
-			return;
-		}
+		const ev = new Xev();
 
-		if (request.resourceURL.pathname === '/notes-stats') {
-			notesStatsStream(request, connection);
-			return;
-		}
+		const q = request.resourceURL.query as ParsedUrlQuery;
+		const [user, app] = await authenticate(q.i as string);
 
-		const ev = new Xev();
+		const main = new MainStreamConnection(connection, ev, user, app);
 
 		connection.once('close', () => {
 			ev.removeAllListeners();
+			main.dispose();
 		});
 
 		connection.on('message', async (data) => {
@@ -50,46 +32,5 @@ module.exports = (server: http.Server) => {
 				connection.send('pong');
 			}
 		});
-
-		const q = request.resourceURL.query as ParsedUrlQuery;
-		const [user, app] = await authenticate(q.i as string);
-
-		if (request.resourceURL.pathname === '/games/reversi-game') {
-			reversiGameStream(request, connection, ev, user);
-			return;
-		}
-
-		if (request.resourceURL.pathname === '/local-timeline') {
-			localTimelineStream(request, connection, ev, user);
-			return;
-		}
-
-		if (request.resourceURL.pathname === '/hashtag') {
-			hashtagStream(request, connection, ev, user);
-			return;
-		}
-
-		if (user == null) {
-			connection.send('authentication-failed');
-			connection.close();
-			return;
-		}
-
-		const channel: any =
-			request.resourceURL.pathname === '/' ? homeStream :
-			request.resourceURL.pathname === '/hybrid-timeline' ? hybridTimelineStream :
-			request.resourceURL.pathname === '/global-timeline' ? globalTimelineStream :
-			request.resourceURL.pathname === '/user-list' ? userListStream :
-			request.resourceURL.pathname === '/drive' ? driveStream :
-			request.resourceURL.pathname === '/messaging' ? messagingStream :
-			request.resourceURL.pathname === '/messaging-index' ? messagingIndexStream :
-			request.resourceURL.pathname === '/games/reversi' ? reversiStream :
-			null;
-
-		if (channel !== null) {
-			channel(request, connection, ev, user, app);
-		} else {
-			connection.close();
-		}
 	});
 };
diff --git a/src/services/drive/add-file.ts b/src/services/drive/add-file.ts
index 666a6ca742..f8c54b2af4 100644
--- a/src/services/drive/add-file.ts
+++ b/src/services/drive/add-file.ts
@@ -12,7 +12,7 @@ import * as sharp from 'sharp';
 import DriveFile, { IMetadata, getDriveFileBucket, IDriveFile } from '../../models/drive-file';
 import DriveFolder from '../../models/drive-folder';
 import { pack } from '../../models/drive-file';
-import { publishUserStream, publishDriveStream } from '../../stream';
+import { publishMainStream, publishDriveStream } from '../../stream';
 import { isLocalUser, IUser, IRemoteUser } from '../../models/user';
 import delFile from './delete-file';
 import config from '../../config';
@@ -383,8 +383,8 @@ export default async function(
 	log(`drive file has been created ${driveFile._id}`);
 
 	pack(driveFile).then(packedFile => {
-		// Publish drive_file_created event
-		publishUserStream(user._id, 'drive_file_created', packedFile);
+		// Publish driveFileCreated event
+		publishMainStream(user._id, 'driveFileCreated', packedFile);
 		publishDriveStream(user._id, 'file_created', packedFile);
 	});
 
diff --git a/src/services/following/create.ts b/src/services/following/create.ts
index dd2fa544dc..637e3e8093 100644
--- a/src/services/following/create.ts
+++ b/src/services/following/create.ts
@@ -2,7 +2,7 @@ import User, { isLocalUser, isRemoteUser, pack as packUser, IUser } from '../../
 import Following from '../../models/following';
 import FollowingLog from '../../models/following-log';
 import FollowedLog from '../../models/followed-log';
-import { publishUserStream } from '../../stream';
+import { publishMainStream } from '../../stream';
 import notify from '../../notify';
 import pack from '../../remote/activitypub/renderer';
 import renderFollow from '../../remote/activitypub/renderer/follow';
@@ -61,12 +61,12 @@ export default async function(follower: IUser, followee: IUser) {
 
 		// Publish follow event
 		if (isLocalUser(follower)) {
-			packUser(followee, follower).then(packed => publishUserStream(follower._id, 'follow', packed));
+			packUser(followee, follower).then(packed => publishMainStream(follower._id, 'follow', packed));
 		}
 
 		// Publish followed event
 		if (isLocalUser(followee)) {
-			packUser(follower, followee).then(packed => publishUserStream(followee._id, 'followed', packed)),
+			packUser(follower, followee).then(packed => publishMainStream(followee._id, 'followed', packed)),
 
 			// 通知を作成
 			notify(followee._id, follower._id, 'follow');
diff --git a/src/services/following/delete.ts b/src/services/following/delete.ts
index 7c285e9eac..2a67acbf05 100644
--- a/src/services/following/delete.ts
+++ b/src/services/following/delete.ts
@@ -2,7 +2,7 @@ import User, { isLocalUser, isRemoteUser, pack as packUser, IUser } from '../../
 import Following from '../../models/following';
 import FollowingLog from '../../models/following-log';
 import FollowedLog from '../../models/followed-log';
-import { publishUserStream } from '../../stream';
+import { publishMainStream } from '../../stream';
 import pack from '../../remote/activitypub/renderer';
 import renderFollow from '../../remote/activitypub/renderer/follow';
 import renderUndo from '../../remote/activitypub/renderer/undo';
@@ -52,7 +52,7 @@ export default async function(follower: IUser, followee: IUser) {
 
 	// Publish unfollow event
 	if (isLocalUser(follower)) {
-		packUser(followee, follower).then(packed => publishUserStream(follower._id, 'unfollow', packed));
+		packUser(followee, follower).then(packed => publishMainStream(follower._id, 'unfollow', packed));
 	}
 
 	if (isLocalUser(follower) && isRemoteUser(followee)) {
diff --git a/src/services/following/requests/accept.ts b/src/services/following/requests/accept.ts
index 5e38879a49..e7c8df844a 100644
--- a/src/services/following/requests/accept.ts
+++ b/src/services/following/requests/accept.ts
@@ -7,7 +7,7 @@ import { deliver } from '../../../queue';
 import Following from '../../../models/following';
 import FollowingLog from '../../../models/following-log';
 import FollowedLog from '../../../models/followed-log';
-import { publishUserStream } from '../../../stream';
+import { publishMainStream } from '../../../stream';
 
 export default async function(followee: IUser, follower: IUser) {
 	const following = await Following.insert({
@@ -74,7 +74,7 @@ export default async function(followee: IUser, follower: IUser) {
 
 	packUser(followee, followee, {
 		detail: true
-	}).then(packed => publishUserStream(followee._id, 'meUpdated', packed));
+	}).then(packed => publishMainStream(followee._id, 'meUpdated', packed));
 
-	packUser(followee, follower).then(packed => publishUserStream(follower._id, 'follow', packed));
+	packUser(followee, follower).then(packed => publishMainStream(follower._id, 'follow', packed));
 }
diff --git a/src/services/following/requests/cancel.ts b/src/services/following/requests/cancel.ts
index 9655a95f04..def02d59d9 100644
--- a/src/services/following/requests/cancel.ts
+++ b/src/services/following/requests/cancel.ts
@@ -4,7 +4,7 @@ import pack from '../../../remote/activitypub/renderer';
 import renderFollow from '../../../remote/activitypub/renderer/follow';
 import renderUndo from '../../../remote/activitypub/renderer/undo';
 import { deliver } from '../../../queue';
-import { publishUserStream } from '../../../stream';
+import { publishMainStream } from '../../../stream';
 
 export default async function(followee: IUser, follower: IUser) {
 	if (isRemoteUser(followee)) {
@@ -34,5 +34,5 @@ export default async function(followee: IUser, follower: IUser) {
 
 	packUser(followee, followee, {
 		detail: true
-	}).then(packed => publishUserStream(followee._id, 'meUpdated', packed));
+	}).then(packed => publishMainStream(followee._id, 'meUpdated', packed));
 }
diff --git a/src/services/following/requests/create.ts b/src/services/following/requests/create.ts
index 946c22568c..5e613fd053 100644
--- a/src/services/following/requests/create.ts
+++ b/src/services/following/requests/create.ts
@@ -1,5 +1,5 @@
 import User, { isLocalUser, isRemoteUser, pack as packUser, IUser } from '../../../models/user';
-import { publishUserStream } from '../../../stream';
+import { publishMainStream } from '../../../stream';
 import notify from '../../../notify';
 import pack from '../../../remote/activitypub/renderer';
 import renderFollow from '../../../remote/activitypub/renderer/follow';
@@ -33,11 +33,11 @@ export default async function(follower: IUser, followee: IUser) {
 
 	// Publish receiveRequest event
 	if (isLocalUser(followee)) {
-		packUser(follower, followee).then(packed => publishUserStream(followee._id, 'receiveFollowRequest', packed));
+		packUser(follower, followee).then(packed => publishMainStream(followee._id, 'receiveFollowRequest', packed));
 
 		packUser(followee, followee, {
 			detail: true
-		}).then(packed => publishUserStream(followee._id, 'meUpdated', packed));
+		}).then(packed => publishMainStream(followee._id, 'meUpdated', packed));
 
 		// 通知を作成
 		notify(followee._id, follower._id, 'receiveFollowRequest');
diff --git a/src/services/following/requests/reject.ts b/src/services/following/requests/reject.ts
index eda6716321..91a49db997 100644
--- a/src/services/following/requests/reject.ts
+++ b/src/services/following/requests/reject.ts
@@ -4,7 +4,7 @@ import pack from '../../../remote/activitypub/renderer';
 import renderFollow from '../../../remote/activitypub/renderer/follow';
 import renderReject from '../../../remote/activitypub/renderer/reject';
 import { deliver } from '../../../queue';
-import { publishUserStream } from '../../../stream';
+import { publishMainStream } from '../../../stream';
 
 export default async function(followee: IUser, follower: IUser) {
 	if (isRemoteUser(follower)) {
@@ -23,5 +23,5 @@ export default async function(followee: IUser, follower: IUser) {
 		}
 	});
 
-	packUser(followee, follower).then(packed => publishUserStream(follower._id, 'unfollow', packed));
+	packUser(followee, follower).then(packed => publishMainStream(follower._id, 'unfollow', packed));
 }
diff --git a/src/services/note/create.ts b/src/services/note/create.ts
index 2f2ac18e9b..3dc411d434 100644
--- a/src/services/note/create.ts
+++ b/src/services/note/create.ts
@@ -1,7 +1,7 @@
 import es from '../../db/elasticsearch';
 import Note, { pack, INote } from '../../models/note';
 import User, { isLocalUser, IUser, isRemoteUser, IRemoteUser, ILocalUser } from '../../models/user';
-import { publishUserStream, publishLocalTimelineStream, publishHybridTimelineStream, publishGlobalTimelineStream, publishUserListStream, publishHashtagStream } from '../../stream';
+import { publishMainStream, publishHomeTimelineStream, publishLocalTimelineStream, publishHybridTimelineStream, publishGlobalTimelineStream, publishUserListStream, publishHashtagStream } from '../../stream';
 import Following from '../../models/following';
 import { deliver } from '../../queue';
 import renderNote from '../../remote/activitypub/renderer/note';
@@ -234,7 +234,7 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 		// 通知
 		if (isLocalUser(data.reply._user)) {
 			nm.push(data.reply.userId, 'reply');
-			publishUserStream(data.reply.userId, 'reply', noteObj);
+			publishMainStream(data.reply.userId, 'reply', noteObj);
 		}
 	}
 
@@ -257,7 +257,7 @@ export default async (user: IUser, data: Option, silent = false) => new Promise<
 
 		// Publish event
 		if (!user._id.equals(data.renote.userId) && isLocalUser(data.renote._user)) {
-			publishUserStream(data.renote.userId, 'renote', noteObj);
+			publishMainStream(data.renote.userId, 'renote', noteObj);
 		}
 	}
 
@@ -306,11 +306,11 @@ async function publish(user: IUser, note: INote, noteObj: any, reply: INote, ren
 				detail: true
 			});
 			// Publish event to myself's stream
-			publishUserStream(note.userId, 'note', detailPackedNote);
+			publishHomeTimelineStream(note.userId, detailPackedNote);
 			publishHybridTimelineStream(note.userId, detailPackedNote);
 		} else {
 			// Publish event to myself's stream
-			publishUserStream(note.userId, 'note', noteObj);
+			publishHomeTimelineStream(note.userId, noteObj);
 
 			// Publish note to local and hybrid timeline stream
 			if (note.visibility != 'home') {
@@ -495,7 +495,7 @@ async function publishToFollowers(note: INote, user: IUser, noteActivity: any) {
 			}
 
 			// Publish event to followers stream
-			publishUserStream(following.followerId, 'note', detailPackedNote);
+			publishHomeTimelineStream(following.followerId, detailPackedNote);
 
 			if (isRemoteUser(user) || note.visibility != 'public') {
 				publishHybridTimelineStream(following.followerId, detailPackedNote);
@@ -526,7 +526,7 @@ function createMentionedEvents(mentionedUsers: IUser[], note: INote, nm: Notific
 			detail: true
 		});
 
-		publishUserStream(u._id, 'mention', detailPackedNote);
+		publishMainStream(u._id, 'mention', detailPackedNote);
 
 		// Create notification
 		nm.push(u._id, 'mention');
diff --git a/src/services/note/delete.ts b/src/services/note/delete.ts
index b164d59781..b5cf42ec28 100644
--- a/src/services/note/delete.ts
+++ b/src/services/note/delete.ts
@@ -30,7 +30,7 @@ export default async function(user: IUser, note: INote) {
 		}
 	});
 
-	publishNoteStream(note._id, 'deleted');
+	publishNoteStream(note._id, 'deleted', {});
 
 	//#region ローカルの投稿なら削除アクティビティを配送
 	if (isLocalUser(user)) {
diff --git a/src/services/note/reaction/create.ts b/src/services/note/reaction/create.ts
index 5b6267b0dd..6884014e33 100644
--- a/src/services/note/reaction/create.ts
+++ b/src/services/note/reaction/create.ts
@@ -43,7 +43,9 @@ export default async (user: IUser, note: INote, reaction: string) => new Promise
 		$inc: inc
 	});
 
-	publishNoteStream(note._id, 'reacted');
+	publishNoteStream(note._id, 'reacted', {
+		reaction: reaction
+	});
 
 	// リアクションされたユーザーがローカルユーザーなら通知を作成
 	if (isLocalUser(note._user)) {
diff --git a/src/services/note/read.ts b/src/services/note/read.ts
index 8622597bc0..caf5cf318f 100644
--- a/src/services/note/read.ts
+++ b/src/services/note/read.ts
@@ -1,5 +1,5 @@
 import * as mongo from 'mongodb';
-import { publishUserStream } from '../../stream';
+import { publishMainStream } from '../../stream';
 import User from '../../models/user';
 import NoteUnread from '../../models/note-unread';
 
@@ -56,11 +56,11 @@ export default (
 
 	if (count1 == 0) {
 		// 全て既読になったイベントを発行
-		publishUserStream(userId, 'readAllUnreadMentions');
+		publishMainStream(userId, 'readAllUnreadMentions');
 	}
 
 	if (count2 == 0) {
 		// 全て既読になったイベントを発行
-		publishUserStream(userId, 'readAllUnreadSpecifiedNotes');
+		publishMainStream(userId, 'readAllUnreadSpecifiedNotes');
 	}
 });
diff --git a/src/services/note/unread.ts b/src/services/note/unread.ts
index 2d50976283..5953f61fe1 100644
--- a/src/services/note/unread.ts
+++ b/src/services/note/unread.ts
@@ -2,7 +2,7 @@ import NoteUnread from '../../models/note-unread';
 import User, { IUser } from '../../models/user';
 import { INote } from '../../models/note';
 import Mute from '../../models/mute';
-import { publishUserStream } from '../../stream';
+import { publishMainStream } from '../../stream';
 
 export default async function(user: IUser, note: INote, isSpecified = false) {
 	//#region ミュートしているなら無視
@@ -38,10 +38,10 @@ export default async function(user: IUser, note: INote, isSpecified = false) {
 			}
 		});
 
-		publishUserStream(user._id, 'unreadMention', note._id);
+		publishMainStream(user._id, 'unreadMention', note._id);
 
 		if (isSpecified) {
-			publishUserStream(user._id, 'unreadSpecifiedNote', note._id);
+			publishMainStream(user._id, 'unreadSpecifiedNote', note._id);
 		}
 	}, 3000);
 }
diff --git a/src/stream.ts b/src/stream.ts
index 8a8d8b4cf0..4cd8fc8b2c 100644
--- a/src/stream.ts
+++ b/src/stream.ts
@@ -31,52 +31,59 @@ class Publisher {
 		this.ev.emit(channel, message);
 	}
 
-	public publishUserStream = (userId: ID, type: string, value?: any): void => {
-		this.publish(`user-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	public publishMainStream = (userId: ID, type: string, value?: any): void => {
+		this.publish(`mainStream:${userId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
 	public publishDriveStream = (userId: ID, type: string, value?: any): void => {
-		this.publish(`drive-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+		this.publish(`driveStream:${userId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
-	public publishNoteStream = (noteId: ID, type: string): void => {
-		this.publish(`note-stream:${noteId}`, null, noteId);
+	public publishNoteStream = (noteId: ID, type: string, value: any): void => {
+		this.publish(`noteStream:${noteId}`, type, {
+			id: noteId,
+			body: value
+		});
 	}
 
 	public publishUserListStream = (listId: ID, type: string, value?: any): void => {
-		this.publish(`user-list-stream:${listId}`, type, typeof value === 'undefined' ? null : value);
+		this.publish(`userListStream:${listId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
 	public publishMessagingStream = (userId: ID, otherpartyId: ID, type: string, value?: any): void => {
-		this.publish(`messaging-stream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
+		this.publish(`messagingStream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
 	public publishMessagingIndexStream = (userId: ID, type: string, value?: any): void => {
-		this.publish(`messaging-index-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+		this.publish(`messagingIndexStream:${userId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
 	public publishReversiStream = (userId: ID, type: string, value?: any): void => {
-		this.publish(`reversi-stream:${userId}`, type, typeof value === 'undefined' ? null : value);
+		this.publish(`reversiStream:${userId}`, type, typeof value === 'undefined' ? null : value);
 	}
 
 	public publishReversiGameStream = (gameId: ID, type: string, value?: any): void => {
-		this.publish(`reversi-game-stream:${gameId}`, type, typeof value === 'undefined' ? null : value);
+		this.publish(`reversiGameStream:${gameId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishHomeTimelineStream = (userId: ID, note: any): void => {
+		this.publish(`homeTimeline:${userId}`, null, note);
 	}
 
 	public publishLocalTimelineStream = async (note: any): Promise<void> => {
 		const meta = await this.getMeta();
 		if (meta.disableLocalTimeline) return;
-		this.publish('local-timeline', null, note);
+		this.publish('localTimeline', null, note);
 	}
 
 	public publishHybridTimelineStream = async (userId: ID, note: any): Promise<void> => {
 		const meta = await this.getMeta();
 		if (meta.disableLocalTimeline) return;
-		this.publish(userId ? `hybrid-timeline:${userId}` : 'hybrid-timeline', null, note);
+		this.publish(userId ? `hybridTimeline:${userId}` : 'hybridTimeline', null, note);
 	}
 
 	public publishGlobalTimelineStream = (note: any): void => {
-		this.publish('global-timeline', null, note);
+		this.publish('globalTimeline', null, note);
 	}
 
 	public publishHashtagStream = (note: any): void => {
@@ -88,7 +95,7 @@ const publisher = new Publisher();
 
 export default publisher;
 
-export const publishUserStream = publisher.publishUserStream;
+export const publishMainStream = publisher.publishMainStream;
 export const publishDriveStream = publisher.publishDriveStream;
 export const publishNoteStream = publisher.publishNoteStream;
 export const publishUserListStream = publisher.publishUserListStream;
@@ -96,6 +103,7 @@ export const publishMessagingStream = publisher.publishMessagingStream;
 export const publishMessagingIndexStream = publisher.publishMessagingIndexStream;
 export const publishReversiStream = publisher.publishReversiStream;
 export const publishReversiGameStream = publisher.publishReversiGameStream;
+export const publishHomeTimelineStream = publisher.publishHomeTimelineStream;
 export const publishLocalTimelineStream = publisher.publishLocalTimelineStream;
 export const publishHybridTimelineStream = publisher.publishHybridTimelineStream;
 export const publishGlobalTimelineStream = publisher.publishGlobalTimelineStream;
diff --git a/tsconfig.json b/tsconfig.json
index 76221c282a..ff4eaf917a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,8 @@
     "removeComments": false,
     "noLib": false,
     "strict": true,
-    "strictNullChecks": false
+    "strictNullChecks": false,
+    "experimentalDecorators": true
   },
   "compileOnSave": false,
   "include": [
-- 
cgit v1.2.3-freya


From 3e897727ca7c8b0b5ba11c9d1866dc87ea136c22 Mon Sep 17 00:00:00 2001
From: sei0o inoue <sei0okun@gmail.com>
Date: Sun, 7 Oct 2018 16:51:46 +0900
Subject: Fix #2773 (#2841)

* Added an API endpoint to check the existence of the file

* fix #2773: Now we can prevent users from posting the same images

* bug fix
---
 src/client/app/common/scripts/get-md5.ts           |   8 ++
 .../app/common/views/components/uploader.vue       | 108 +++++++++++++--------
 .../api/endpoints/drive/files/check_existence.ts   |  38 ++++++++
 3 files changed, 113 insertions(+), 41 deletions(-)
 create mode 100644 src/client/app/common/scripts/get-md5.ts
 create mode 100644 src/server/api/endpoints/drive/files/check_existence.ts

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/get-md5.ts b/src/client/app/common/scripts/get-md5.ts
new file mode 100644
index 0000000000..24ac04c1ad
--- /dev/null
+++ b/src/client/app/common/scripts/get-md5.ts
@@ -0,0 +1,8 @@
+const crypto = require('crypto');
+
+export default (data: ArrayBuffer) => {
+  const buf = new Buffer(data);
+  const hash = crypto.createHash("md5");
+  hash.update(buf);
+  return hash.digest("hex");
+};
\ No newline at end of file
diff --git a/src/client/app/common/views/components/uploader.vue b/src/client/app/common/views/components/uploader.vue
index 19b0d15708..fed6477c05 100644
--- a/src/client/app/common/views/components/uploader.vue
+++ b/src/client/app/common/views/components/uploader.vue
@@ -20,6 +20,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { apiUrl } from '../../../config';
+import getMD5 from '../../scripts/get-md5';
 
 export default Vue.extend({
 	data() {
@@ -28,53 +29,78 @@ export default Vue.extend({
 		};
 	},
 	methods: {
-		upload(file, folder) {
+		checkExistence(fileData: ArrayBuffer): Promise<any> {
+			return new Promise((resolve, reject) => {
+				const data = new FormData();
+				data.append('md5', getMD5(fileData));
+
+				(this as any).api('drive/files/check_existence', {
+					md5: getMD5(fileData)
+				}).then(resp => {
+					resolve(resp.file);
+				});
+			});
+		},
+
+		upload(file: File, folder: any) {
 			if (folder && typeof folder == 'object') folder = folder.id;
 
 			const id = Math.random();
 
-			const ctx = {
-				id: id,
-				name: file.name || 'untitled',
-				progress: undefined,
-				img: undefined
-			};
-
-			this.uploads.push(ctx);
-			this.$emit('change', this.uploads);
-
 			const reader = new FileReader();
 			reader.onload = (e: any) => {
-				ctx.img = e.target.result;
-			};
-			reader.readAsDataURL(file);
-
-			const data = new FormData();
-			data.append('i', this.$store.state.i.token);
-			data.append('file', file);
-
-			if (folder) data.append('folderId', folder);
-
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', apiUrl + '/drive/files/create', true);
-			xhr.onload = (e: any) => {
-				const driveFile = JSON.parse(e.target.response);
-
-				this.$emit('uploaded', driveFile);
-
-				this.uploads = this.uploads.filter(x => x.id != id);
-				this.$emit('change', this.uploads);
-			};
-
-			xhr.upload.onprogress = e => {
-				if (e.lengthComputable) {
-					if (ctx.progress == undefined) ctx.progress = {};
-					ctx.progress.max = e.total;
-					ctx.progress.value = e.loaded;
-				}
-			};
-
-			xhr.send(data);
+				this.checkExistence(e.target.result).then(result => {
+					console.log(result);
+					if (result !== null) {
+						this.$emit('uploaded', result);
+						return;
+					}
+
+					// Upload if the file didn't exist yet
+					const buf = new Uint8Array(e.target.result);
+					let bin = "";
+					// We use for-of loop instead of apply() to avoid RangeError
+					// SEE: https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string
+					for (const byte of buf) bin += String.fromCharCode(byte);
+					const ctx = {
+						id: id,
+						name: file.name || 'untitled',
+						progress: undefined,
+						img: 'data:*/*;base64,' + btoa(bin)
+					};
+
+					this.uploads.push(ctx);
+					this.$emit('change', this.uploads);
+
+					const data = new FormData();
+					data.append('i', this.$store.state.i.token);
+					data.append('file', file);
+
+					if (folder) data.append('folderId', folder);
+
+					const xhr = new XMLHttpRequest();
+					xhr.open('POST', apiUrl + '/drive/files/create', true);
+					xhr.onload = (e: any) => {
+						const driveFile = JSON.parse(e.target.response);
+
+						this.$emit('uploaded', driveFile);
+
+						this.uploads = this.uploads.filter(x => x.id != id);
+						this.$emit('change', this.uploads);
+					};
+
+					xhr.upload.onprogress = e => {
+						if (e.lengthComputable) {
+							if (ctx.progress == undefined) ctx.progress = {};
+							ctx.progress.max = e.total;
+							ctx.progress.value = e.loaded;
+						}
+					};
+
+					xhr.send(data);
+				})
+			}
+			reader.readAsArrayBuffer(file);
 		}
 	}
 });
diff --git a/src/server/api/endpoints/drive/files/check_existence.ts b/src/server/api/endpoints/drive/files/check_existence.ts
new file mode 100644
index 0000000000..73d75b7caf
--- /dev/null
+++ b/src/server/api/endpoints/drive/files/check_existence.ts
@@ -0,0 +1,38 @@
+import $ from 'cafy';
+import DriveFile, { pack } from '../../../../../models/drive-file';
+import { ILocalUser } from '../../../../../models/user';
+
+export const meta = {
+	desc: {
+		'ja-JP': '与えられたMD5ハッシュ値を持つファイルがドライブに存在するかどうかを返します。',
+		'en-US': 'Returns whether the file with the given MD5 hash exists in the user\'s drive.'
+	},
+
+	requireCredential: true,
+
+	kind: 'drive-read',
+
+	params: {
+		md5: $.str.note({
+			desc: {
+				'ja-JP': 'ファイルのMD5ハッシュ'
+			}
+		})
+	}
+};
+
+export default (params: any, user: ILocalUser) => new Promise(async (res, rej) => {
+	const [md5, md5Err] = $.str.get(params.md5);
+	if (md5Err) return rej('invalid md5 param');
+
+	const file = await DriveFile.findOne({
+		md5: md5,
+		'metadata.userId': user._id
+	});
+
+	if (file === null) {
+		res({ file: null });
+	} else {
+		res({ file: await pack(file) });
+	}
+});
-- 
cgit v1.2.3-freya


From 75cd580c3adca8dc8de69fdf0d5d023e2b16d38c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 7 Oct 2018 19:30:24 +0900
Subject: Improve theming

---
 src/client/app/mobile/views/components/post-form.vue | 2 +-
 src/client/theme/dark.json5                          | 1 +
 src/client/theme/light.json5                         | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index e4ec1aa576..3de920cf22 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -478,7 +478,7 @@ export default Vue.extend({
 					width 48px
 					height 48px
 					font-size 20px
-					color #657786
+					color var(--mobilePostFormButton)
 					background transparent
 					outline none
 					border none
diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
index 72362a2305..1f4585d14d 100644
--- a/src/client/theme/dark.json5
+++ b/src/client/theme/dark.json5
@@ -175,6 +175,7 @@
 		mobileNavBackdrop: 'rgba(0, 0, 0, 0.7)',
 		mobilePostFormDivider: 'rgba(0, 0, 0, 0.2)',
 		mobilePostFormTextareaBg: 'rgba(0, 0, 0, 0.3)',
+		mobilePostFormButton: '$text',
 		mobileDriveNavBg: ':alpha<0.75<$secondary',
 		mobileHomeTlItemHover: 'rgba(255, 255, 255, 0.1)',
 		mobileUserPageName: '#fff',
diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
index 90d0d40187..acb2a6d682 100644
--- a/src/client/theme/light.json5
+++ b/src/client/theme/light.json5
@@ -175,6 +175,7 @@
 		mobileNavBackdrop: 'rgba(0, 0, 0, 0.2)',
 		mobilePostFormDivider: 'rgba(0, 0, 0, 0.1)',
 		mobilePostFormTextareaBg: '#fff',
+		mobilePostFormButton: '$text',
 		mobileDriveNavBg: ':alpha<0.75<$secondary',
 		mobileHomeTlItemHover: 'rgba(0, 0, 0, 0.05)',
 		mobileUserPageName: '#757c82',
-- 
cgit v1.2.3-freya


From 0adcb646fe57771d4c6c9e3192d2761831bd6064 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 7 Oct 2018 19:35:25 +0900
Subject: Fix bug

---
 src/client/app/common/views/components/stream-indicator.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/stream-indicator.vue b/src/client/app/common/views/components/stream-indicator.vue
index 0f25b37cc9..12bf78f130 100644
--- a/src/client/app/common/views/components/stream-indicator.vue
+++ b/src/client/app/common/views/components/stream-indicator.vue
@@ -1,14 +1,14 @@
 <template>
 <div class="mk-stream-indicator">
-	<p v-if=" stream.state == 'initializing' ">
+	<p v-if="stream.state == 'initializing'">
 		%fa:spinner .pulse%
 		<span>%i18n:@connecting%<mk-ellipsis/></span>
 	</p>
-	<p v-if=" stream.state == 'reconnecting' ">
+	<p v-if="stream.state == 'reconnecting'">
 		%fa:spinner .pulse%
 		<span>%i18n:@reconnecting%<mk-ellipsis/></span>
 	</p>
-	<p v-if=" stream.state == 'connected' ">
+	<p v-if="stream.state == 'connected'">
 		%fa:check%
 		<span>%i18n:@connected%</span>
 	</p>
@@ -22,7 +22,7 @@ import * as anime from 'animejs';
 export default Vue.extend({
 	computed: {
 		stream() {
-			return (this as any).os.stream.useSharedConnection('main');
+			return (this as any).os.stream;
 		}
 	},
 	created() {
-- 
cgit v1.2.3-freya


From b6a330928db0cf62ac0cfe484cd5e148edb9ce12 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 7 Oct 2018 20:08:42 +0900
Subject: 投稿の削除イベントを受け取るように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/common/scripts/note-subscriber.ts       | 11 +++++++++++
 src/client/app/desktop/views/components/notes.note.vue |  2 +-
 src/client/app/mobile/views/components/note.vue        |  2 +-
 src/services/note/delete.ts                            |  8 ++++++--
 4 files changed, 19 insertions(+), 4 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/note-subscriber.ts b/src/client/app/common/scripts/note-subscriber.ts
index 5fc82942d5..c41897e70f 100644
--- a/src/client/app/common/scripts/note-subscriber.ts
+++ b/src/client/app/common/scripts/note-subscriber.ts
@@ -97,6 +97,17 @@ export default prop => ({
 					this.$_ns_target.poll.choices.find(c => c.id === choice).votes++;
 					break;
 				}
+
+				case 'deleted': {
+					Vue.set(this.$_ns_target, 'deletedAt', body.deletedAt);
+					this.$_ns_target.text = null;
+					this.$_ns_target.tags = [];
+					this.$_ns_target.fileIds = [];
+					this.$_ns_target.poll = null;
+					this.$_ns_target.geo = null;
+					this.$_ns_target.cw = null;
+					break;
+				}
 			}
 
 			this.$emit(`update:${prop}`, this.$_ns_note_);
diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue
index 3892260181..2db1479823 100644
--- a/src/client/app/desktop/views/components/notes.note.vue
+++ b/src/client/app/desktop/views/components/notes.note.vue
@@ -38,7 +38,7 @@
 					<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 				</div>
 			</div>
-			<footer>
+			<footer v-if="p.deletedAt == null">
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
 				<button class="replyButton" @click="reply()" title="%i18n:@reply%">
 					<template v-if="p.reply">%fa:reply-all%</template>
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index db1be4a00e..f370fbf874 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -39,7 +39,7 @@
 				</div>
 				<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
 			</div>
-			<footer>
+			<footer v-if="p.deletedAt == null">
 				<mk-reactions-viewer :note="p" ref="reactionsViewer"/>
 				<button @click="reply">
 					<template v-if="p.reply">%fa:reply-all%</template>
diff --git a/src/services/note/delete.ts b/src/services/note/delete.ts
index b5cf42ec28..2b99b4b85e 100644
--- a/src/services/note/delete.ts
+++ b/src/services/note/delete.ts
@@ -15,12 +15,14 @@ import config from '../../config';
  * @param note 投稿
  */
 export default async function(user: IUser, note: INote) {
+	const deletedAt = new Date();
+
 	await Note.update({
 		_id: note._id,
 		userId: user._id
 	}, {
 		$set: {
-			deletedAt: new Date(),
+			deletedAt: deletedAt,
 			text: null,
 			tags: [],
 			fileIds: [],
@@ -30,7 +32,9 @@ export default async function(user: IUser, note: INote) {
 		}
 	});
 
-	publishNoteStream(note._id, 'deleted', {});
+	publishNoteStream(note._id, 'deleted', {
+		deletedAt: deletedAt
+	});
 
 	//#region ローカルの投稿なら削除アクティビティを配送
 	if (isLocalUser(user)) {
-- 
cgit v1.2.3-freya


From 4182a0cf4c068926ed21c22d63643e12479480d8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 8 Oct 2018 01:03:07 +0900
Subject: Fix

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

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 1ff762abc2..7859a59254 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -6,19 +6,12 @@
 	</div>
 </div>
 <div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else>
-	<video class="video"
-		:src="video.url"
-		:title="video.name"
-		controls
-		@dblclick.prevent="onClick"
-		ref="video"
-		v-if="inlinePlayable" />
 	<a class="thumbnail"
 		:href="video.url"
 		:style="imageStyle"
 		@click.prevent="onClick"
 		:title="video.name"
-		v-else>
+	>
 		%fa:R play-circle%
 	</a>
 </div>
@@ -46,7 +39,7 @@ export default Vue.extend({
 	computed: {
 		imageStyle(): any {
 			return {
-				'background-image': `url(${this.video.url})`
+				'background-image': null // TODO `url(${this.video.thumbnailUrl})`
 			};
 		}
 	},
diff --git a/src/client/app/mobile/views/components/media-video.vue b/src/client/app/mobile/views/components/media-video.vue
index 1e2c1ea7b0..59ba695b93 100644
--- a/src/client/app/mobile/views/components/media-video.vue
+++ b/src/client/app/mobile/views/components/media-video.vue
@@ -9,7 +9,8 @@
 	:href="video.url"
 	target="_blank"
 	:style="imageStyle"
-	:title="video.name">
+	:title="video.name"
+>
 	%fa:R play-circle%
 </a>
 </template>
@@ -32,7 +33,7 @@ export default Vue.extend({
 	computed: {
 		imageStyle(): any {
 			return {
-				'background-image': `url(${this.video.url})`
+				'background-image': null // TODO `url(${this.video.thumbnailUrl})`
 			};
 		}
 	}
-- 
cgit v1.2.3-freya


From 03d0ce1f89d04880b55ede067d26cf486744acc5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 8 Oct 2018 01:10:30 +0900
Subject: Improve theme

---
 src/client/theme/pink.json5 | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'src/client')

diff --git a/src/client/theme/pink.json5 b/src/client/theme/pink.json5
index e228b4b4fa..71e963dc91 100644
--- a/src/client/theme/pink.json5
+++ b/src/client/theme/pink.json5
@@ -1,20 +1,20 @@
 {
 	id: 'e9c8c01d-9c15-48d0-9b5c-3d00843b5b36',
 
-	name: 'Strawberry Milk',
-	author: 'syuilo',
+	name: 'Lavender',
+	author: 'sokuyuku & syuilo',
 
 	base: 'light',
 
 	vars: {
-		primary: 'rgb(251, 78, 112)',
-		secondary: 'rgb(255, 218, 240)',
-		text: 'rgb(113, 91, 102)',
+		primary: 'rgb(206, 147, 191)',
+		secondary: 'rgb(253, 242, 243)',
+		text: 'rgb(161, 139, 146)',
 	},
 
 	props: {
-		renoteGradient: '#ffb1c9',
-		renoteText: '#ff588d',
-		quoteBorder: '#ff6c9b',
+		renoteGradient: '#f7e4ec',
+		renoteText: '$primary',
+		quoteBorder: '$primary',
 	},
 }
-- 
cgit v1.2.3-freya


From a780e7b936c826d7919b38d60dbd60c627f4dd6f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 8 Oct 2018 01:14:46 +0900
Subject: Clean up

---
 src/client/app/common/views/components/messaging-room.vue | 1 -
 src/client/app/common/views/components/uploader.vue       | 5 +----
 2 files changed, 1 insertion(+), 5 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue
index c2cd79e116..488dff528f 100644
--- a/src/client/app/common/views/components/messaging-room.vue
+++ b/src/client/app/common/views/components/messaging-room.vue
@@ -163,7 +163,6 @@ export default Vue.extend({
 		},
 
 		onMessage(message) {
-			console.log(message);
 			// サウンドを再生する
 			if (this.$store.state.device.enableSounds) {
 				const sound = new Audio(`${url}/assets/message.mp3`);
diff --git a/src/client/app/common/views/components/uploader.vue b/src/client/app/common/views/components/uploader.vue
index fed6477c05..b812064bbb 100644
--- a/src/client/app/common/views/components/uploader.vue
+++ b/src/client/app/common/views/components/uploader.vue
@@ -50,7 +50,6 @@ export default Vue.extend({
 			const reader = new FileReader();
 			reader.onload = (e: any) => {
 				this.checkExistence(e.target.result).then(result => {
-					console.log(result);
 					if (result !== null) {
 						this.$emit('uploaded', result);
 						return;
@@ -58,7 +57,7 @@ export default Vue.extend({
 
 					// Upload if the file didn't exist yet
 					const buf = new Uint8Array(e.target.result);
-					let bin = "";
+					let bin = '';
 					// We use for-of loop instead of apply() to avoid RangeError
 					// SEE: https://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string
 					for (const byte of buf) bin += String.fromCharCode(byte);
@@ -107,8 +106,6 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-
-
 .mk-uploader
 	overflow auto
 
-- 
cgit v1.2.3-freya


From 674764a0354fac94116271bbac303c25cb2406cc Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 8 Oct 2018 01:16:32 +0900
Subject: Fix

---
 src/client/app/common/scripts/stream.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client')

diff --git a/src/client/app/common/scripts/stream.ts b/src/client/app/common/scripts/stream.ts
index 7dc130937b..3b1a94adf9 100644
--- a/src/client/app/common/scripts/stream.ts
+++ b/src/client/app/common/scripts/stream.ts
@@ -1,6 +1,6 @@
 import autobind from 'autobind-decorator';
 import { EventEmitter } from 'eventemitter3';
-import * as ReconnectingWebsocket from 'reconnecting-websocket';
+import ReconnectingWebsocket from 'reconnecting-websocket';
 import { wsUrl } from '../../config';
 import MiOS from '../../mios';
 
-- 
cgit v1.2.3-freya


From d9edc1eb1d89831f53039cbc31f3132067f41ff5 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 8 Oct 2018 09:08:02 +0900
Subject: Improve theme

---
 src/client/app/desktop/views/components/ui.header.clock.vue | 2 +-
 src/client/theme/dark.json5                                 | 2 +-
 src/client/theme/light.json5                                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/src/client/app/desktop/views/components/ui.header.clock.vue b/src/client/app/desktop/views/components/ui.header.clock.vue
index 1c3f12f2f2..b8b638bc41 100644
--- a/src/client/app/desktop/views/components/ui.header.clock.vue
+++ b/src/client/app/desktop/views/components/ui.header.clock.vue
@@ -89,7 +89,7 @@ export default Vue.extend({
 			display table-cell
 			vertical-align middle
 			height 48px
-			color #9eaba8
+			color var(--desktopHeaderFg)
 
 			> .yyyymmdd
 				opacity 0.7
diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
index 1f4585d14d..f993e5ef1f 100644
--- a/src/client/theme/dark.json5
+++ b/src/client/theme/dark.json5
@@ -98,7 +98,7 @@
 
 		calendarWeek: '#43d5dc',
 		calendarSaturdayOrSunday: '#ff6679',
-		calendarDay: '#c5ced6',
+		calendarDay: '$text',
 
 		materBg: 'rgba(0, 0, 0, 0.3)',
 
diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
index acb2a6d682..db851b66c4 100644
--- a/src/client/theme/light.json5
+++ b/src/client/theme/light.json5
@@ -98,7 +98,7 @@
 
 		calendarWeek: '#19a2a9',
 		calendarSaturdayOrSunday: '#ef95a0',
-		calendarDay: '#777',
+		calendarDay: '$text',
 
 		materBg: 'rgba(0, 0, 0, 0.1)',
 
-- 
cgit v1.2.3-freya


From 567cedc7cc82057d47e2891b8f19e32f2d584d7b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 8 Oct 2018 15:23:10 +0900
Subject: Improve usability

---
 locales/ja-JP.yml                                |  2 ++
 src/client/app/common/views/components/theme.vue | 24 +++++++++++++++++++++---
 src/client/theme/dark.json5                      |  1 +
 src/client/theme/light.json5                     |  1 +
 4 files changed, 25 insertions(+), 3 deletions(-)

(limited to 'src/client')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 99c865e2b5..f9cc57d370 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -288,6 +288,8 @@ common/views/components/media-banner.vue:
 common/views/components/theme.vue:
   light-theme: "非ダークモード時に使用するテーマ"
   dark-theme: "ダークモード時に使用するテーマ"
+  light-themes: "明るいテーマ"
+  dark-themes: "暗いテーマ"
   install-a-theme: "テーマのインストール"
   theme-code: "テーマコード"
   install: "インストール"
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/theme.vue
index 4b0e6da24c..9eda3c5796 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/theme.vue
@@ -3,14 +3,24 @@
 	<label>
 		<span>%i18n:@light-theme%</span>
 		<ui-select v-model="light" placeholder="%i18n:@light-theme%">
-			<option v-for="x in themes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			<optgroup label="%i18n:@light-themes%">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup label="%i18n:@dark-themes%">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
 		</ui-select>
 	</label>
 
 	<label>
 		<span>%i18n:@dark-theme%</span>
 		<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
-			<option v-for="x in themes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			<optgroup label="%i18n:@dark-themes%">
+				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup label="%i18n:@light-themes%">
+				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</optgroup>
 		</ui-select>
 	</label>
 
@@ -120,7 +130,15 @@ export default Vue.extend({
 
 	computed: {
 		themes(): Theme[] {
-			return this.$store.state.device.themes.concat(builtinThemes);
+			return builtinThemes.concat(this.$store.state.device.themes);
+		},
+
+		darkThemes(): Theme[] {
+			return this.themes.filter(t => t.base == 'dark' || t.kind == 'dark');
+		},
+
+		lightThemes(): Theme[] {
+			return this.themes.filter(t => t.base == 'light' || t.kind == 'light');
 		},
 
 		installedThemes(): Theme[] {
diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5
index f993e5ef1f..4fa38a3ae0 100644
--- a/src/client/theme/dark.json5
+++ b/src/client/theme/dark.json5
@@ -4,6 +4,7 @@
 	name: 'Dark',
 	author: 'syuilo',
 	desc: 'Default dark theme',
+	kind: 'dark',
 
 	vars: {
 		primary: '#fb4e4e',
diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5
index db851b66c4..9f17a63dda 100644
--- a/src/client/theme/light.json5
+++ b/src/client/theme/light.json5
@@ -4,6 +4,7 @@
 	name: 'Light',
 	author: 'syuilo',
 	desc: 'Default light theme',
+	kind: 'light',
 
 	vars: {
 		primary: '#fb4e4e',
-- 
cgit v1.2.3-freya


From a70ced8e90dfdff9744bc3ce674d3bb2afa83ab2 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 8 Oct 2018 15:23:20 +0900
Subject: Add new theme

---
 src/client/app/theme.ts      |  2 ++
 src/client/theme/black.json5 | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 src/client/theme/black.json5

(limited to 'src/client')

diff --git a/src/client/app/theme.ts b/src/client/app/theme.ts
index 828ce33862..9c5be74fa1 100644
--- a/src/client/app/theme.ts
+++ b/src/client/app/theme.ts
@@ -13,12 +13,14 @@ export type Theme = {
 export const lightTheme: Theme = require('../theme/light.json5');
 export const darkTheme: Theme = require('../theme/dark.json5');
 export const pinkTheme: Theme = require('../theme/pink.json5');
+export const blackTheme: Theme = require('../theme/black.json5');
 export const halloweenTheme: Theme = require('../theme/halloween.json5');
 
 export const builtinThemes = [
 	lightTheme,
 	darkTheme,
 	pinkTheme,
+	blackTheme,
 	halloweenTheme
 ];
 
diff --git a/src/client/theme/black.json5 b/src/client/theme/black.json5
new file mode 100644
index 0000000000..91a812f88a
--- /dev/null
+++ b/src/client/theme/black.json5
@@ -0,0 +1,20 @@
+{
+	id: 'bb5a8287-a072-4b0a-8ae5-ea2a0d33f4f2',
+
+	name: 'Future',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	vars: {
+		primary: 'rgb(94, 158, 185)',
+		secondary: 'rgb(22, 24, 30)',
+		text: 'rgb(214, 218, 224)',
+	},
+
+	props: {
+		renoteGradient: '#0a2d3c',
+		renoteText: '$primary',
+		quoteBorder: '$primary',
+	},
+}
-- 
cgit v1.2.3-freya