Merge branch 'develop'

16 files changed, 99 insertions, 66 deletions

diff --git a/src/client/app.vue b/src/client/app.vue
index 1e9fd6c0a9..b47c092ed2 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -43,7 +43,6 @@
 				<button class="item _button account" @click="openAccountMenu" v-if="$store.getters.isSignedIn">
 					<mk-avatar :user="$store.state.i" class="avatar"/><mk-acct class="text" :user="$store.state.i"/>
 				</button>
-				<div class="divider"></div>
 				<button class="item _button index active" @click="top()" v-if="$route.name === 'index'">
 					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
 				</button>
@@ -164,7 +163,6 @@ import { v4 as uuid } from 'uuid';
 import i18n from './i18n';
 import { host, instanceName } from './config';
 import { search } from './scripts/search';
-import { isDeviceDarkmode } from './scripts/is-device-darkmode';
 import MkToast from './components/toast.vue';
 
 const DESKTOP_THRESHOLD = 1100;
@@ -225,10 +223,6 @@ export default Vue.extend({
 	},
 
 	created() {
-		if (this.$store.state.device.syncDeviceDarkMode) {
-			this.$store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
-		}
-
 		if (this.$store.getters.isSignedIn) {
 			this.connection = this.$root.stream.useSharedConnection('main');
 			this.connection.on('notification', this.onNotification);
@@ -622,12 +616,12 @@ export default Vue.extend({
 .mk-app {
 	$header-height: 60px;
 	$nav-width: 250px;
-	$nav-icon-only-width: 74px;
+	$nav-icon-only-width: 80px;
 	$main-width: 650px;
 	$ui-font-size: 1em;
 	$nav-icon-only-threshold: 1300px;
-	$nav-hide-threshold: 700px;
-	$side-hide-threshold: 1100px;
+	$nav-hide-threshold: 650px;
+	$side-hide-threshold: 1070px;
 
 	min-height: 100vh;
 	box-sizing: border-box;
@@ -822,8 +816,6 @@ export default Vue.extend({
 			z-index: 1001;
 			width: $nav-width;
 			height: 100vh;
-			padding: 16px 0;
-			padding-bottom: calc(3.7rem + 24px);
 			box-sizing: border-box;
 			overflow: auto;
 			background: var(--navBg);
@@ -836,13 +828,21 @@ export default Vue.extend({
 
 			@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {
 				width: $nav-icon-only-width;
-				padding: 8px 0;
-				padding-bottom: calc(3.7rem + 24px);
 
 				> .divider {
 					margin: 8px auto;
 					width: calc(100% - 32px);
 				}
+
+				> .item {
+					&:first-child {
+						margin-bottom: 8px;
+					}
+
+					&:last-child {
+						margin-top: 8px;
+					}
+				}
 			}
 
 			> .item {
@@ -892,15 +892,25 @@ export default Vue.extend({
 					color: var(--navActive);
 				}
 
+				&:first-child {
+					position: sticky;
+					z-index: 1;
+					top: 0;
+					padding-top: 8px;
+					padding-bottom: 8px;
+					margin-bottom: 16px;
+					background: var(--navBg);
+					border-bottom: solid 1px var(--divider);
+				}
+
 				&:last-child {
-					position: fixed;
+					position: sticky;
 					bottom: 0;
-					width: inherit;
 					padding-top: 8px;
 					padding-bottom: 8px;
+					margin-top: 16px;
 					background: var(--navBg);
 					border-top: solid 1px var(--divider);
-					border-right: solid 1px var(--divider);
 				}
 
 				@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {
diff --git a/src/client/assets/unread.svg b/src/client/assets/unread.svg
new file mode 100644
index 0000000000..8c3cc9f475
--- /dev/null
+++ b/src/client/assets/unread.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"

+	 y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">

+<circle fill="#3AA2DC" cx="16.5" cy="16.5" r="6"/>

+</svg>

diff --git a/src/client/components/analog-clock.vue b/src/client/components/analog-clock.vue
index b689266780..81c6598c7a 100644
--- a/src/client/components/analog-clock.vue
+++ b/src/client/components/analog-clock.vue
@@ -38,13 +38,6 @@ import Vue from 'vue';
 import * as tinycolor from 'tinycolor2';
 
 export default Vue.extend({
-	props: {
-		smooth: {
-			type: Boolean,
-			default: false
-		}
-	},
-
 	data() {
 		return {
 			now: new Date(),
@@ -83,9 +76,6 @@ export default Vue.extend({
 			return tinycolor(this.computedStyle.getPropertyValue('--accent')).toHexString();
 		},
 
-		ms(): number {
-			return this.now.getMilliseconds() * (this.smooth ? 1 : 0);
-		},
 		s(): number {
 			return this.now.getSeconds();
 		},
@@ -97,13 +87,13 @@ export default Vue.extend({
 		},
 
 		hAngle(): number {
-			return Math.PI * (this.h % 12 + (this.m + (this.s + this.ms / 1000) / 60) / 60) / 6;
+			return Math.PI * (this.h % 12 + (this.m + this.s / 60) / 60) / 6;
 		},
 		mAngle(): number {
-			return Math.PI * (this.m + (this.s + this.ms / 1000) / 60) / 30;
+			return Math.PI * (this.m + this.s / 60) / 30;
 		},
 		sAngle(): number {
-			return Math.PI * (this.s + this.ms / 1000) / 30;
+			return Math.PI * this.s / 30;
 		},
 
 		graduations(): any {
@@ -121,7 +111,7 @@ export default Vue.extend({
 		const update = () => {
 			if (this.enabled) {
 				this.tick();
-				requestAnimationFrame(update);
+				setTimeout(update, 1000);
 			}
 		};
 		update();
diff --git a/src/client/components/link.vue b/src/client/components/link.vue
index f4e07c1627..11de688520 100644
--- a/src/client/components/link.vue
+++ b/src/client/components/link.vue
@@ -13,7 +13,7 @@
 import Vue from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { url as local } from '../config';
-import XUrlPreview from './url-preview-popup.vue';
+import MkUrlPreview from './url-preview-popup.vue';
 
 export default Vue.extend({
 	props: {
@@ -44,7 +44,7 @@ export default Vue.extend({
 			if (!document.body.contains(this.$el)) return;
 			if (this.preview) return;
 
-			this.preview = new XUrlPreview({
+			this.preview = new MkUrlPreview({
 				parent: this,
 				propsData: {
 					url: this.url,
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index b3126e0673..48e37c33d3 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -49,7 +49,7 @@
 						<x-media-list :media-list="appearNote.files"/>
 					</div>
 					<x-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
-					<x-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" class="url-preview"/>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
 				</div>
 			</div>
@@ -97,7 +97,7 @@ import XReactionsViewer from './reactions-viewer.vue';
 import XMediaList from './media-list.vue';
 import XCwButton from './cw-button.vue';
 import XPoll from './poll.vue';
-import XUrlPreview from './url-preview.vue';
+import MkUrlPreview from './url-preview.vue';
 import MkReactionPicker from './reaction-picker.vue';
 import pleaseLogin from '../scripts/please-login';
 import { focusPrev, focusNext } from '../scripts/focus';
@@ -115,7 +115,7 @@ export default Vue.extend({
 		XMediaList,
 		XCwButton,
 		XPoll,
-		XUrlPreview,
+		MkUrlPreview,
 	},
 
 	props: {
diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 26fdbf44a9..938566e9e2 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -1,19 +1,19 @@
 <template>
 <div class="fgmtyycl _panel" :style="{ top: top + 'px', left: left + 'px' }">
-	<x-url-preview :url="url"/>
+	<mk-url-preview :url="url"/>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../i18n';
-import XUrlPreview from './url-preview.vue';
+import MkUrlPreview from './url-preview.vue';
 
 export default Vue.extend({
 	i18n,
 
 	components: {
-		XUrlPreview
+		MkUrlPreview
 	},
 
 	props: {
diff --git a/src/client/components/url.vue b/src/client/components/url.vue
index df16bc9c24..409bb128f6 100644
--- a/src/client/components/url.vue
+++ b/src/client/components/url.vue
@@ -23,7 +23,7 @@ import Vue from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode';
 import { url as local } from '../config';
-import XUrlPreview from './url-preview-popup.vue';
+import MkUrlPreview from './url-preview-popup.vue';
 
 export default Vue.extend({
 	props: {
@@ -70,7 +70,7 @@ export default Vue.extend({
 			if (!document.body.contains(this.$el)) return;
 			if (this.preview) return;
 
-			this.preview = new XUrlPreview({
+			this.preview = new MkUrlPreview({
 				parent: this,
 				propsData: {
 					url: this.url,
diff --git a/src/client/init.ts b/src/client/init.ts
index f1790ac4d9..d7b693e4c8 100644
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -144,6 +144,12 @@ os.init(async () => {
 		}
 	}, false)
 
+	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', mql => {
+		if (os.store.state.device.syncDeviceDarkMode) {
+			os.store.commit('device/set', { key: 'darkMode', value: mql.matches });
+		}
+	});
+
 	if ('Notification' in window && os.store.getters.isSignedIn) {
 		// 許可を得ていなかったらリクエスト
 		if (Notification.permission === 'default') {
diff --git a/src/client/pages/messaging.vue b/src/client/pages/messaging/index.vue
index 47d761d895..702979a098 100644
--- a/src/client/pages/messaging.vue
+++ b/src/client/pages/messaging/index.vue
@@ -42,10 +42,10 @@
 <script lang="ts">
 import Vue from 'vue';
 import { faUser, faUsers, faComments, faPlus } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../i18n';
-import getAcct from '../../misc/acct/render';
-import MkButton from '../components/ui/button.vue';
-import MkUserSelect from '../components/user-select.vue';
+import i18n from '../../i18n';
+import getAcct from '../../../misc/acct/render';
+import MkButton from '../../components/ui/button.vue';
+import MkUserSelect from '../../components/user-select.vue';
 
 export default Vue.extend({
 	i18n,
diff --git a/src/client/pages/messaging-room.form.vue b/src/client/pages/messaging/messaging-room.form.vue
index 72e2632772..0cd3dfcc85 100644
--- a/src/client/pages/messaging-room.form.vue
+++ b/src/client/pages/messaging/messaging-room.form.vue
@@ -27,14 +27,14 @@ import Vue from 'vue';
 import { faPaperPlane, faPhotoVideo, faLaughSquint } from '@fortawesome/free-solid-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as autosize from 'autosize';
-import i18n from '../i18n';
-import { formatTimeString } from '../../misc/format-time-string';
-import { selectFile } from '../scripts/select-file';
+import i18n from '../../i18n';
+import { formatTimeString } from '../../../misc/format-time-string';
+import { selectFile } from '../../scripts/select-file';
 
 export default Vue.extend({
 	i18n,
 	components: {
-		XUploader: () => import('../components/uploader.vue').then(m => m.default),
+		XUploader: () => import('../../components/uploader.vue').then(m => m.default),
 	},
 	props: {
 		user: {
@@ -221,7 +221,7 @@ export default Vue.extend({
 		},
 
 		async insertEmoji(ev) {
-			const vm = this.$root.new(await import('../components/emoji-picker.vue').then(m => m.default), {
+			const vm = this.$root.new(await import('../../components/emoji-picker.vue').then(m => m.default), {
 				source: ev.currentTarget || ev.target
 			}).$once('chosen', emoji => {
 				insertTextAtCursor(this.$refs.text, emoji);
diff --git a/src/client/pages/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index f26ef449b2..4988b70a22 100644
--- a/src/client/pages/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -21,7 +21,7 @@
 			</div>
 		</div>
 		<div></div>
-		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
+		<mk-url-preview v-for="url in urls" :url="url" :key="url" style="margin: 8px 0;"/>
 		<footer>
 			<template v-if="isGroup">
 				<span class="read" v-if="message.reads.length > 0">{{ $t('messageRead') }} {{ message.reads.length }}</span>
@@ -38,12 +38,16 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../i18n';
-import { parse } from '../../mfm/parse';
-import { unique } from '../../prelude/array';
+import i18n from '../../i18n';
+import { parse } from '../../../mfm/parse';
+import { unique } from '../../../prelude/array';
+import MkUrlPreview from '../../components/url-preview.vue';
 
 export default Vue.extend({
 	i18n,
+	components: {
+		MkUrlPreview
+	},
 	props: {
 		message: {
 			required: true
@@ -223,10 +227,6 @@ export default Vue.extend({
 			}
 		}
 
-		> .mk-url-preview {
-			margin: 8px 0;
-		}
-
 		> footer {
 			display: block;
 			margin: 2px 0 0 0;
diff --git a/src/client/pages/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index 5fca8c0ff3..0a20c56c29 100644
--- a/src/client/pages/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -37,12 +37,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import { faArrowCircleDown, faFlag, faUsers, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import i18n from '../i18n';
-import XList from '../components/date-separated-list.vue';
+import i18n from '../../i18n';
+import XList from '../../components/date-separated-list.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
-import { url } from '../config';
-import parseAcct from '../../misc/acct/parse';
+import { url } from '../../config';
+import parseAcct from '../../../misc/acct/parse';
 
 export default Vue.extend({
 	i18n,
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 7cf6f4b4b2..2b1b3083a4 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -3,6 +3,8 @@
 	<portal to="icon"><fa :icon="faCog"/></portal>
 	<portal to="title">{{ $t('clinetSettings') }}</portal>
 
+	<router-link v-if="$store.getters.isSignedIn" class="_panel _buttonPrimary" to="/my/settings" style="margin-bottom: var(--margin);">{{ $t('accountSettings') }}</router-link>
+
 	<x-theme/>
 
 	<section class="_card">
diff --git a/src/client/router.ts b/src/client/router.ts
index 3b2bbe9c80..83445fea7e 100644
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -31,9 +31,9 @@ export const router = new VueRouter({
 		{ path: '/my/favorites', component: page('favorites') },
 		{ path: '/my/messages', component: page('messages') },
 		{ path: '/my/mentions', component: page('mentions') },
-		{ path: '/my/messaging', name: 'messaging', component: page('messaging') },
-		{ path: '/my/messaging/:user', component: page('messaging-room') },
-		{ path: '/my/messaging/group/:group', component: page('messaging-room') },
+		{ path: '/my/messaging', name: 'messaging', component: page('messaging/index') },
+		{ path: '/my/messaging/:user', component: page('messaging/messaging-room') },
+		{ path: '/my/messaging/group/:group', component: page('messaging/messaging-room') },
 		{ path: '/my/drive', name: 'drive', component: page('drive') },
 		{ path: '/my/drive/folder/:folder', component: page('drive') },
 		{ path: '/my/pages', name: 'pages', component: page('pages') },
diff --git a/src/client/scripts/is-device-darkmode.ts b/src/client/scripts/is-device-darkmode.ts
index 21c26823c7..854f38e517 100644
--- a/src/client/scripts/is-device-darkmode.ts
+++ b/src/client/scripts/is-device-darkmode.ts
@@ -1,3 +1,3 @@
 export function isDeviceDarkmode() {
-	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+	return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }
diff --git a/src/client/style.scss b/src/client/style.scss
index fee64c7ca8..7b509e5b51 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -292,7 +292,7 @@ main ._panel {
 	box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider);
 }
 
-._panel._button {
+.__panelButton {
 	display: flex;
 	width: 100%;
 	min-height: 48px;
@@ -300,6 +300,24 @@ main ._panel {
 	justify-content: center;
 }
 
+._panel._button {
+	@extend .__panelButton;
+}
+
+._panel._buttonPrimary {
+	@extend .__panelButton;
+	color: var(--accent);
+	background: var(--panel);
+
+	&:not(:disabled):hover {
+		background: var(--panel);
+	}
+
+	&:not(:disabled):active {
+		background: var(--panel);
+	}
+}
+
 ._card {
 	@extend ._panel;