2.33.0

New Crowdin translations

README.md

@@ -12,10 +12,12 @@
 > Lead Maintainer: [syuilo][syuilo-link]
 
 **[Misskey](https://misskey.xyz)** is a completely open source,
-ultimately sophisticated new type of mini-blog based SNS.
+ultimately sophisticated professional microblogging software.
 
 <a href="https://www.patreon.com/syuilo"><img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" alt="Become a Patron!" width="160" /></a>
 
+![](https://c10.patreonusercontent.com/3/e30%3D/patreon-posts/RsKWEDEKf8D_wYDQWAbex9CSb-1DnXW1nfqfLvuys5ROj2k0VF6_luuzHMTyf95n.png?token-time=1529539200&token-hash=RmcSP0947mw5o2-B6g1L6aU_OoDXANe198kLU6HMO30%3D)
+
 :sparkles: Features
 ----------------------------------------------------------------
 * Reactions

cli/update-remote-user.js

@@ -0,0 +1,12 @@
+const updatePerson = require('../built/remote/activitypub/models/person').updatePerson;
+
+const args = process.argv.slice(2);
+const user = args[0];
+
+console.log(`Updating ${user}...`);
+
+updatePerson(user).then(() => {
+	console.log(`Updated ${user}`);
+}, e => {
+	console.error(e);
+});

locales/fr.yml

@@ -5,7 +5,7 @@ meta:
 common:
   misskey: "Une planète du fédiverse"
   about-title: "Une ⭐ du fédiverse."
-  about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
+  about: "Merci d'avoir découvert Misskey. Misskey est une <b>plateforme de micro-blogging distribuée</b> née sur Terre. Parce qu'il fait partie du Fédiverse (un univers composé de diverses plateformes de réseaux sociaux organisées), il est mutuellement connecté avec d'autres plateformes de réseaux sociaux. Désirez-vous prendre une pause, pendant un instant, loin de l'agitation de la ville et plonger dans un nouvel Internet ?"
   time:
     unknown: "inconnu"
     future: "future"
@@ -24,7 +24,7 @@ common:
     wednesday: "M"
     thursday: "J"
     friday: "V"
-    saturday: "土"
+    saturday: "S"
   reactions:
     like: "Aime"
     love: "Adore"
@@ -78,13 +78,13 @@ common:
     list: "Liste"
     swap-left: "Déplacer à gauche"
     swap-right: "Déplacer à droite"
-    swap-up: "上に移動"
-    swap-down: "下に移動"
+    swap-up: "Vers le haut"
+    swap-down: "Vers le bas"
     remove: "Supprimer"
     add-column: "Ajouter une colonne"
     rename: "Renommer"
-    stack-left: "左に重ねる"
-    pop-right: "右に出す"
+    stack-left: "Vers la gauche"
+    pop-right: "Vers la droite"
 common/views/components/connect-failed.vue:
   title: "Impossible de se connecter au server."
   description: "Il y a soit un problème avec votre connexion internet, soit le serveur est hors-ligne ou en maintenance. Veuillez {ressayer} plus tard."
@@ -308,7 +308,7 @@ desktop/views/components/drive.vue:
 desktop/views/components/follow-button.vue:
   following: "Abonnements"
   follow: "Suivre"
-  request-pending: "フォロー許可待ち"
+  request-pending: "En attente d'approbation"
   follow-request: "Demande d'abonnement"
 desktop/views/components/followers-window.vue:
   followers: "{} abonnés"
@@ -320,7 +320,7 @@ desktop/views/components/following.vue:
   empty: "Vous ne suivez aucun compte."
 desktop/views/components/friends-maker.vue:
   title: "Utilisateurs recommandés :"
-  empty: "おすすめのユーザーは見つかりませんでした。"
+  empty: "Impossible de trouver des utilisateurs à recommander."
   fetching: "Chargement"
   refresh: "Plus"
   close: "Fermer"
@@ -411,7 +411,7 @@ desktop/views/components/settings.vue:
   behaviour: "Comportement"
   fetch-on-scroll: "Chargement lors du défilement"
   fetch-on-scroll-desc: "ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。"
-  auto-popout: "ウィンドウの自動ポップアウト"
+  auto-popout: "Fenêtre contextuelle automatique"
   auto-popout-desc: "ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトします。この設定はブラウザに記憶されます。"
   advanced: "Paramètres avancés"
   api-via-stream: "Requête API via le flux"
@@ -810,7 +810,7 @@ mobile/views/pages/selectdrive.vue:
 mobile/views/pages/settings.vue:
   signed-in-as: "Connecté en tant que {}"
   lang: "Langue"
-  lang-tip: "変更はページの再読み込み後に反映されます。"
+  lang-tip: "Le rechargement de la page est requis afin d'appliquer les modifications."
   recommended: "Recommandé"
   auto: "Automatique"
   specify-language: "Spécifier la langue"

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "2.31.0",
-	"clientVersion": "1.0.6276",
+	"version": "2.33.0",
+	"clientVersion": "1.0.6292",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,

src/client/app/common/views/components/index.ts

@@ -2,6 +2,7 @@ import Vue from 'vue';
 
 import analogClock from './analog-clock.vue';
 import menu from './menu.vue';
+import noteHeader from './note-header.vue';
 import signin from './signin.vue';
 import signup from './signup.vue';
 import forkit from './forkit.vue';
@@ -31,6 +32,7 @@ import welcomeTimeline from './welcome-timeline.vue';
 
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
+Vue.component('mk-note-header', noteHeader);
 Vue.component('mk-signin', signin);
 Vue.component('mk-signup', signup);
 Vue.component('mk-forkit', forkit);

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

@@ -4,7 +4,7 @@
 	<div class="popover" :class="{ hukidasi }" ref="popover">
 		<template v-for="item in items">
 			<div v-if="item === null"></div>
-			<button v-if="item" @click="clicked(item.onClick)" v-html="item.content"></button>
+			<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text"></button>
 		</template>
 	</div>
 </div>

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

@@ -0,0 +1,117 @@
+<template>
+<header class="bvonvjxbwzaiskogyhbwgyxvcgserpmu">
+	<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle == 'smart'"/>
+	<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
+	<span class="is-admin" v-if="note.user.isAdmin">admin</span>
+	<span class="is-bot" v-if="note.user.isBot">bot</span>
+	<span class="is-cat" v-if="note.user.isCat">cat</span>
+	<span class="username"><mk-acct :user="note.user"/></span>
+	<div class="info">
+		<span class="app" v-if="note.app && !mini">via <b>{{ note.app.name }}</b></span>
+		<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
+		<router-link class="created-at" :to="note | notePage">
+			<mk-time :time="note.createdAt"/>
+		</router-link>
+		<span class="visibility" v-if="note.visibility != 'public'">
+			<template v-if="note.visibility == 'home'">%fa:home%</template>
+			<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
+			<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
+			<template v-if="note.visibility == 'private'">%fa:lock%</template>
+		</span>
+	</div>
+</header>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		note: {
+			type: Object,
+			required: true
+		},
+		mini: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+	display flex
+	align-items baseline
+	white-space nowrap
+
+	> .avatar
+		flex-shrink 0
+		margin-right 8px
+		width 20px
+		height 20px
+		border-radius 100%
+
+	> .name
+		display block
+		margin 0 .5em 0 0
+		padding 0
+		overflow hidden
+		color isDark ? #fff : #627079
+		font-size 1em
+		font-weight bold
+		text-decoration none
+		text-overflow ellipsis
+
+		&:hover
+			text-decoration underline
+
+	> .is-admin
+	> .is-bot
+	> .is-cat
+		align-self center
+		margin 0 .5em 0 0
+		padding 1px 6px
+		font-size 12px
+		color isDark ? #758188 : #aaa
+		border solid 1px isDark ? #57616f : #ddd
+		border-radius 3px
+
+		&.is-admin
+			border-color isDark ? #d42c41 : #f56a7b
+			color isDark ? #d42c41 : #f56a7b
+
+	> .username
+		margin 0 .5em 0 0
+		overflow hidden
+		text-overflow ellipsis
+		color isDark ? #606984 : #ccc
+
+	> .info
+		margin-left auto
+		font-size 0.9em
+
+		> *
+			color isDark ? #606984 : #c0c0c0
+
+		> .mobile
+			margin-right 8px
+
+		> .app
+			margin-right 8px
+			padding-right 8px
+			border-right solid 1px isDark ? #1c2023 : #eaeaea
+
+		> .visibility
+			margin-left 8px
+
+.bvonvjxbwzaiskogyhbwgyxvcgserpmu[data-darkmode]
+	root(true)
+
+.bvonvjxbwzaiskogyhbwgyxvcgserpmu:not([data-darkmode])
+	root(false)
+
+</style>

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

@@ -13,23 +13,23 @@ export default Vue.extend({
 		items() {
 			const items = [];
 			items.push({
-				content: '%i18n:@favorite%',
-				onClick: this.favorite
+				text: '%i18n:@favorite%',
+				action: this.favorite
 			});
 			if (this.note.userId == this.$store.state.i.id) {
 				items.push({
-					content: '%i18n:@pin%',
-					onClick: this.pin
+					text: '%i18n:@pin%',
+					action: this.pin
 				});
 				items.push({
-					content: '%i18n:@delete%',
-					onClick: this.del
+					text: '%i18n:@delete%',
+					action: this.del
 				});
 			}
 			if (this.note.uri) {
 				items.push({
-					content: '%i18n:@remote%',
-					onClick: () => {
+					text: '%i18n:@remote%',
+					action: () => {
 						window.open(this.note.uri, '_blank');
 					}
 				});

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

@@ -1,15 +1,17 @@
 <template>
 <ul class="menu">
-	<li v-for="(item, i) in menu" :class="item.type">
-		<template v-if="item.type == 'item'">
-			<p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
-		</template>
-		<template v-if="item.type == 'link'">
-			<a :href="item.href" :target="item.target" @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</a>
-		</template>
-		<template v-else-if="item.type == 'nest'">
-			<p><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}...<span class="caret">%fa:caret-right%</span></p>
-			<me-nu :menu="item.menu" @x="click"/>
+	<li v-for="(item, i) in menu" :class="item ? item.type : item === null ? 'divider' : null">
+		<template v-if="item">
+			<template v-if="item.type == null || item.type == 'item'">
+				<p @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</p>
+			</template>
+			<template v-else-if="item.type == 'link'">
+				<a :href="item.href" :target="item.target" @click="click(item)"><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}</a>
+			</template>
+			<template v-else-if="item.type == 'nest'">
+				<p><span :class="$style.icon" v-if="item.icon" v-html="item.icon"></span>{{ item.text }}...<span class="caret">%fa:caret-right%</span></p>
+				<me-nu :menu="item.menu" @x="click"/>
+			</template>
 		</template>
 	</li>
 </ul>

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

@@ -1,5 +1,5 @@
 <template>
-<div class="context-menu" :style="{ left: `${x}px`, top: `${y}px` }" @contextmenu.prevent="() => {}">
+<div class="context-menu" @contextmenu.prevent="() => {}">
 	<x-menu :menu="menu" @x="click"/>
 </div>
 </template>
@@ -17,6 +17,23 @@ export default Vue.extend({
 	props: ['x', 'y', 'menu'],
 	mounted() {
 		this.$nextTick(() => {
+			const width = this.$el.offsetWidth;
+			const height = this.$el.offsetHeight;
+
+			let x = this.x;
+			let y = this.y;
+
+			if (x + width > window.innerWidth) {
+				x = window.innerWidth - width;
+			}
+
+			if (y + height > window.innerHeight) {
+				y = window.innerHeight - height;
+			}
+
+			this.$el.style.left = x + 'px';
+			this.$el.style.top = y + 'px';
+
 			Array.from(document.querySelectorAll('body *')).forEach(el => {
 				el.addEventListener('mousedown', this.onMousedown);
 			});
@@ -38,7 +55,7 @@ export default Vue.extend({
 			return false;
 		},
 		click(item) {
-			if (item.onClick) item.onClick();
+			if (item.action) item.action();
 			this.close();
 		},
 		close() {
@@ -59,7 +76,6 @@ root(isDark)
 	$item-height = 38px
 	$padding = 10px
 
-	display none
 	position fixed
 	top 0
 	left 0

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

@@ -66,37 +66,33 @@ export default Vue.extend({
 				type: 'item',
 				text: '%i18n:@contextmenu.rename%',
 				icon: '%fa:i-cursor%',
-				onClick: this.rename
+				action: this.rename
 			}, {
 				type: 'item',
 				text: '%i18n:@contextmenu.copy-url%',
 				icon: '%fa:link%',
-				onClick: this.copyUrl
+				action: this.copyUrl
 			}, {
 				type: 'link',
 				href: `${this.file.url}?download`,
 				text: '%i18n:@contextmenu.download%',
 				icon: '%fa:download%',
-			}, {
-				type: 'divider',
-			}, {
+			}, null, {
 				type: 'item',
 				text: '%i18n:common.delete%',
 				icon: '%fa:R trash-alt%',
-				onClick: this.deleteFile
-			}, {
-				type: 'divider',
-			}, {
+				action: this.deleteFile
+			}, null, {
 				type: 'nest',
 				text: '%i18n:@contextmenu.else-files%',
 				menu: [{
 					type: 'item',
 					text: '%i18n:@contextmenu.set-as-avatar%',
-					onClick: this.setAsAvatar
+					action: this.setAsAvatar
 				}, {
 					type: 'item',
 					text: '%i18n:@contextmenu.set-as-banner%',
-					onClick: this.setAsBanner
+					action: this.setAsBanner
 				}]
 			}, {
 				type: 'nest',
@@ -104,7 +100,7 @@ export default Vue.extend({
 				menu: [{
 					type: 'item',
 					text: '%i18n:@contextmenu.add-app%...',
-					onClick: this.addApp
+					action: this.addApp
 				}]
 			}], {
 				closed: () => {

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

@@ -56,26 +56,22 @@ export default Vue.extend({
 				type: 'item',
 				text: '%i18n:@contextmenu.move-to-this-folder%',
 				icon: '%fa:arrow-right%',
-				onClick: this.go
+				action: this.go
 			}, {
 				type: 'item',
 				text: '%i18n:@contextmenu.show-in-new-window%',
 				icon: '%fa:R window-restore%',
-				onClick: this.newWindow
-			}, {
-				type: 'divider',
-			}, {
+				action: this.newWindow
+			}, null, {
 				type: 'item',
 				text: '%i18n:@contextmenu.rename%',
 				icon: '%fa:i-cursor%',
-				onClick: this.rename
-			}, {
-				type: 'divider',
-			}, {
+				action: this.rename
+			}, null, {
 				type: 'item',
 				text: '%i18n:common.delete%',
 				icon: '%fa:R trash-alt%',
-				onClick: this.deleteFolder
+				action: this.deleteFolder
 			}], {
 				closed: () => {
 					this.isContextmenuShowing = false;

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

@@ -140,17 +140,17 @@ export default Vue.extend({
 				type: 'item',
 				text: '%i18n:@contextmenu.create-folder%',
 				icon: '%fa:R folder%',
-				onClick: this.createFolder
+				action: this.createFolder
 			}, {
 				type: 'item',
 				text: '%i18n:@contextmenu.upload%',
 				icon: '%fa:upload%',
-				onClick: this.selectLocalFile
+				action: this.selectLocalFile
 			}, {
 				type: 'item',
 				text: '%i18n:@contextmenu.url-upload%',
 				icon: '%fa:cloud-upload-alt%',
-				onClick: this.urlUpload
+				action: this.urlUpload
 			}]);
 		},
 

src/client/app/desktop/views/components/note-preview.vue

@@ -2,22 +2,7 @@
 <div class="mk-note-preview" :title="title">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
-		<header>
-			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
-			<span class="username"><mk-acct :user="note.user"/></span>
-			<div class="info">
-				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
-				<router-link class="created-at" :to="note | notePage">
-					<mk-time :time="note.createdAt"/>
-				</router-link>
-				<span class="visibility" v-if="note.visibility != 'public'">
-					<template v-if="note.visibility == 'home'">%fa:home%</template>
-					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
-					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
-					<template v-if="note.visibility == 'private'">%fa:lock%</template>
-				</span>
-			</div>
-		</header>
+		<mk-note-header class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
 		</div>
@@ -56,43 +41,6 @@ root(isDark)
 		flex 1
 		min-width 0
 
-		> header
-			display flex
-			align-items baseline
-			white-space nowrap
-
-			> .name
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color isDark ? #fff : #607073
-				font-size 1em
-				font-weight bold
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .username
-				margin 0 .5em 0 0
-				overflow hidden
-				text-overflow ellipsis
-				color isDark ? #606984 : #d1d8da
-
-			> .info
-				margin-left auto
-				font-size 0.9em
-
-				> *
-					color isDark ? #606984 : #b2b8bb
-
-				> .mobile
-					margin-right 6px
-
-				> .visibility
-					margin-left 6px
-
 		> .body
 
 			> .text

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

@@ -2,25 +2,7 @@
 <div class="sub" :title="title">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
-		<header>
-			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link>
-			<span class="is-admin" v-if="note.user.isAdmin">admin</span>
-			<span class="is-bot" v-if="note.user.isBot">bot</span>
-			<span class="is-cat" v-if="note.user.isCat">cat</span>
-			<span class="username"><mk-acct :user="note.user"/></span>
-			<div class="info">
-				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
-				<router-link class="created-at" :to="note | notePage">
-					<mk-time :time="note.createdAt"/>
-				</router-link>
-				<span class="visibility" v-if="note.visibility != 'public'">
-					<template v-if="note.visibility == 'home'">%fa:home%</template>
-					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
-					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
-					<template v-if="note.visibility == 'private'">%fa:lock%</template>
-				</span>
-			</div>
-		</header>
+		<mk-note-header class="header" :note="note"/>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
 		</div>
@@ -62,57 +44,8 @@ root(isDark)
 		flex 1
 		min-width 0
 
-		> header
-			display flex
-			align-items baseline
+		> .header
 			margin-bottom 2px
-			white-space nowrap
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color isDark ? #fff : #607073
-				font-size 1em
-				font-weight bold
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .is-admin
-			> .is-bot
-			> .is-cat
-				align-self center
-				margin 0 0.5em 0 0
-				padding 1px 5px
-				font-size 10px
-				color isDark ? #758188 : #aaa
-				border solid 1px isDark ? #57616f : #ddd
-				border-radius 3px
-
-				&.is-admin
-					border-color isDark ? #d42c41 : #f56a7b
-					color isDark ? #d42c41 : #f56a7b
-
-			> .username
-				margin 0 .5em 0 0
-				color isDark ? #606984 : #d1d8da
-
-			> .info
-				margin-left auto
-				font-size 0.9em
-
-				> *
-					color isDark ? #606984 : #b2b8bb
-
-				> .mobile
-					margin-right 6px
-
-				> .visibility
-					margin-left 6px
 
 		> .body
 

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

@@ -14,26 +14,7 @@
 	<article>
 		<mk-avatar class="avatar" :user="p.user"/>
 		<div class="main">
-			<header>
-				<router-link class="name" :to="p.user | userPage" v-user-preview="p.user.id">{{ p.user | userName }}</router-link>
-				<span class="is-admin" v-if="p.user.isAdmin">admin</span>
-				<span class="is-bot" v-if="p.user.isBot">bot</span>
-				<span class="is-cat" v-if="p.user.isCat">cat</span>
-				<span class="username"><mk-acct :user="p.user"/></span>
-				<div class="info">
-					<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
-					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="p | notePage">
-						<mk-time :time="p.createdAt"/>
-					</router-link>
-					<span class="visibility" v-if="p.visibility != 'public'">
-						<template v-if="p.visibility == 'home'">%fa:home%</template>
-						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
-						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
-						<template v-if="p.visibility == 'private'">%fa:lock%</template>
-					</span>
-				</div>
-			</header>
+			<mk-note-header class="header" :note="p"/>
 			<div class="body">
 				<p v-if="p.cw != null" class="cw">
 					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
@@ -409,64 +390,8 @@ root(isDark)
 			flex 1
 			min-width 0
 
-			> header
-				display flex
-				align-items baseline
+			> .header
 				margin-bottom 4px
-				white-space nowrap
-
-				> .name
-					display block
-					margin 0 .5em 0 0
-					padding 0
-					overflow hidden
-					color isDark ? #fff : #627079
-					font-size 1em
-					font-weight bold
-					text-decoration none
-					text-overflow ellipsis
-
-					&:hover
-						text-decoration underline
-
-				> .is-admin
-				> .is-bot
-				> .is-cat
-					align-self center
-					margin 0 .5em 0 0
-					padding 1px 6px
-					font-size 12px
-					color isDark ? #758188 : #aaa
-					border solid 1px isDark ? #57616f : #ddd
-					border-radius 3px
-
-					&.is-admin
-						border-color isDark ? #d42c41 : #f56a7b
-						color isDark ? #d42c41 : #f56a7b
-
-				> .username
-					margin 0 .5em 0 0
-					overflow hidden
-					text-overflow ellipsis
-					color isDark ? #606984 : #ccc
-
-				> .info
-					margin-left auto
-					font-size 0.9em
-
-					> *
-						color isDark ? #606984 : #c0c0c0
-
-					> .mobile
-						margin-right 8px
-
-					> .app
-						margin-right 8px
-						padding-right 8px
-						border-right solid 1px isDark ? #1c2023 : #eaeaea
-
-					> .visibility
-						margin-left 8px
 
 			> .body
 

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

@@ -1,6 +1,6 @@
 <template>
 <div class="mk-ui" :style="style">
-	<x-header class="header"/>
+	<x-header class="header" v-show="!zenMode"/>
 	<div class="content">
 		<slot></slot>
 	</div>
@@ -16,6 +16,11 @@ 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 {};
@@ -39,6 +44,11 @@ export default Vue.extend({
 				e.preventDefault();
 				(this as any).apis.post();
 			}
+
+			if (e.which == 90) { // z
+				e.preventDefault();
+				this.zenMode = !this.zenMode;
+			}
 		}
 	}
 });

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -1,14 +1,16 @@
 <template>
-<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging }">
+<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready }"
+		@dragover.prevent.stop="onDragover"
+		@dragenter.prevent="onDragenter"
+		@dragleave="onDragleave"
+		@drop.prevent.stop="onDrop"
+>
 	<header :class="{ indicate: count > 0 }"
 			draggable="true"
 			@click="toggleActive"
 			@dragstart="onDragstart"
 			@dragend="onDragend"
-			@dragover.prevent.stop="onDragover"
-			@dragenter.prevent="onDragenter"
-			@dragleave="onDragleave"
-			@drop.prevent.stop="onDrop"
+			@contextmenu.prevent.stop="onContextmenu"
 		>
 		<slot name="header"></slot>
 		<span class="count" v-if="count > 0">({{ count }})</span>
@@ -23,6 +25,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import Menu from '../../../../common/views/components/menu.vue';
+import contextmenu from '../../../api/contextmenu';
 
 export default Vue.extend({
 	props: {
@@ -64,7 +67,8 @@ export default Vue.extend({
 			count: 0,
 			active: true,
 			dragging: false,
-			draghover: false
+			draghover: false,
+			dropready: false
 		};
 	},
 
@@ -73,6 +77,9 @@ export default Vue.extend({
 			if (v && this.isScrollTop()) {
 				this.$emit('top');
 			}
+		},
+		dragging(v) {
+			this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
 		}
 	},
 
@@ -86,12 +93,25 @@ export default Vue.extend({
 
 	mounted() {
 		this.$refs.body.addEventListener('scroll', this.onScroll, { passive: true });
+		this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
+		this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
 	},
+
 	beforeDestroy() {
 		this.$refs.body.removeEventListener('scroll', this.onScroll);
+		this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
+		this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
 	},
 
 	methods: {
+		onOtherDragStart() {
+			this.dropready = true;
+		},
+
+		onOtherDragEnd() {
+			this.dropready = false;
+		},
+
 		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));
@@ -114,10 +134,11 @@ export default Vue.extend({
 			}
 		},
 
-		showMenu() {
+		getMenu() {
 			const items = [{
-				content: '%fa:pencil-alt% %i18n:common.deck.rename%',
-				onClick: () => {
+				icon: '%fa:pencil-alt%',
+				text: '%i18n:common.deck.rename%',
+				action: () => {
 					(this as any).apis.input({
 						title: '%i18n:common.deck.rename%',
 						default: this.name,
@@ -127,38 +148,45 @@ export default Vue.extend({
 					});
 				}
 			}, null, {
-				content: '%fa:arrow-left% %i18n:common.deck.swap-left%',
-				onClick: () => {
+				icon: '%fa:arrow-left%',
+				text: '%i18n:common.deck.swap-left%',
+				action: () => {
 					this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
 				}
 			}, {
-				content: '%fa:arrow-right% %i18n:common.deck.swap-right%',
-				onClick: () => {
+				icon: '%fa:arrow-right%',
+				text: '%i18n:common.deck.swap-right%',
+				action: () => {
 					this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
-				content: '%fa:arrow-up% %i18n:common.deck.swap-up%',
-				onClick: () => {
+				icon: '%fa:arrow-up%',
+				text: '%i18n:common.deck.swap-up%',
+				action: () => {
 					this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
 				}
 			} : undefined, this.isStacked ? {
-				content: '%fa:arrow-down% %i18n:common.deck.swap-down%',
-				onClick: () => {
+				icon: '%fa:arrow-down%',
+				text: '%i18n:common.deck.swap-down%',
+				action: () => {
 					this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
-				content: '%fa:window-restore R% %i18n:common.deck.stack-left%',
-				onClick: () => {
+				icon: '%fa:window-restore R%',
+				text: '%i18n:common.deck.stack-left%',
+				action: () => {
 					this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
 				}
 			}, this.isStacked ? {
-				content: '%fa:window-maximize R% %i18n:common.deck.pop-right%',
-				onClick: () => {
+				icon: '%fa:window-maximize R%',
+				text: '%i18n:common.deck.pop-right%',
+				action: () => {
 					this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
 				}
 			} : undefined, null, {
-				content: '%fa:trash-alt R% %i18n:common.deck.remove%',
-				onClick: () => {
+				icon: '%fa:trash-alt R%',
+				text: '%i18n:common.deck.remove%',
+				action: () => {
 					this.$store.dispatch('settings/removeDeckColumn', this.column.id);
 				}
 			}];
@@ -168,10 +196,18 @@ export default Vue.extend({
 				this.menu.reverse().forEach(i => items.unshift(i));
 			}
 
+			return items;
+		},
+
+		onContextmenu(e) {
+			contextmenu((this as any).os)(e, this.getMenu());
+		},
+
+		showMenu() {
 			this.os.new(Menu, {
 				source: this.$refs.menu,
 				compact: false,
-				items
+				items: this.getMenu()
 			});
 		},
 
@@ -208,6 +244,7 @@ export default Vue.extend({
 
 		onDrop(e) {
 			this.draghover = false;
+			this.$root.$emit('deck.column.dragEnd');
 
 			const id = e.dataTransfer.getData('mk-deck-column');
 			if (id != null && id != '') {
@@ -236,8 +273,14 @@ root(isDark)
 	overflow hidden
 
 	&.draghover
+		box-shadow 0 0 0 2px rgba($theme-color, 0.8)
+
 	&.dragging
-		box-shadow 0 0 0 2px rgba($theme-color, 0.7)
+		box-shadow 0 0 0 2px rgba($theme-color, 0.4)
+
+	&.dropready
+		*
+			pointer-events none
 
 	&:not(.active)
 		flex-basis $header-height

src/client/app/desktop/views/pages/deck/deck.note.sub.vue

@@ -2,25 +2,7 @@
 <div class="fnlfosztlhtptnongximhlbykxblytcq">
 	<mk-avatar class="avatar" :user="note.user"/>
 	<div class="main">
-		<header>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span class="is-admin" v-if="note.user.isAdmin">%i18n:@admin%</span>
-			<span class="is-bot" v-if="note.user.isBot">%i18n:@bot%</span>
-			<span class="is-cat" v-if="note.user.isCat">%i18n:@cat%</span>
-			<span class="username"><mk-acct :user="note.user"/></span>
-			<div class="info">
-				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
-				<router-link class="created-at" :to="note | notePage">
-					<mk-time :time="note.createdAt"/>
-				</router-link>
-				<span class="visibility" v-if="note.visibility != 'public'">
-					<template v-if="note.visibility == 'home'">%fa:home%</template>
-					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
-					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
-					<template v-if="note.visibility == 'private'">%fa:lock%</template>
-				</span>
-			</div>
-		</header>
+		<mk-note-header class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
 		</div>
@@ -72,66 +54,8 @@ root(isDark)
 		flex 1
 		min-width 0
 
-		> header
-			display flex
-			align-items baseline
+		> .header
 			margin-bottom 2px
-			white-space nowrap
-
-			> .avatar
-				flex-shrink 0
-				margin-right 8px
-				width 18px
-				height 18px
-				border-radius 100%
-
-			> .name
-				display block
-				margin 0 0.5em 0 0
-				padding 0
-				overflow hidden
-				color isDark ? #fff : #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .is-admin
-			> .is-bot
-			> .is-cat
-				align-self center
-				margin 0 0.5em 0 0
-				padding 1px 5px
-				font-size 0.8em
-				color isDark ? #758188 : #aaa
-				border solid 1px isDark ? #57616f : #ddd
-				border-radius 3px
-
-				&.is-admin
-					border-color isDark ? #d42c41 : #f56a7b
-					color isDark ? #d42c41 : #f56a7b
-
-			> .username
-				text-align left
-				margin 0
-				color isDark ? #606984 : #d1d8da
-
-			> .info
-				margin-left auto
-				font-size 0.9em
-
-				> *
-					color isDark ? #606984 : #b2b8bb
-
-				> .mobile
-					margin-right 6px
-
-				> .visibility
-					margin-left 6px
 
 		> .body
 

src/client/app/desktop/views/pages/deck/deck.note.vue

@@ -14,25 +14,7 @@
 	<article>
 		<mk-avatar class="avatar" :user="p.user"/>
 		<div class="main">
-			<header>
-				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
-				<span class="is-admin" v-if="p.user.isAdmin">admin</span>
-				<span class="is-bot" v-if="p.user.isBot">bot</span>
-				<span class="is-cat" v-if="p.user.isCat">cat</span>
-				<span class="username"><mk-acct :user="p.user"/></span>
-				<div class="info">
-					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="p | notePage">
-						<mk-time :time="p.createdAt"/>
-					</router-link>
-					<span class="visibility" v-if="p.visibility != 'public'">
-						<template v-if="p.visibility == 'home'">%fa:home%</template>
-						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
-						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
-						<template v-if="p.visibility == 'private'">%fa:lock%</template>
-					</span>
-				</div>
-			</header>
+			<mk-note-header class="header" :note="p" :mini="true"/>
 			<div class="body">
 				<p v-if="p.cw != null" class="cw">
 					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
@@ -292,62 +274,6 @@ root(isDark)
 			flex 1
 			min-width 0
 
-			> header
-				display flex
-				align-items baseline
-				white-space nowrap
-
-				> .avatar
-					flex-shrink 0
-					margin-right 8px
-					width 20px
-					height 20px
-					border-radius 100%
-
-				> .name
-					display block
-					margin 0 0.5em 0 0
-					padding 0
-					overflow hidden
-					color isDark ? #fff : #627079
-					font-weight bold
-					text-decoration none
-					text-overflow ellipsis
-
-				> .is-admin
-				> .is-bot
-				> .is-cat
-					align-self center
-					margin 0 0.5em 0 0
-					padding 1px 6px
-					font-size 0.8em
-					color isDark ? #758188 : #aaa
-					border solid 1px isDark ? #57616f : #ddd
-					border-radius 3px
-
-					&.is-admin
-						border-color isDark ? #d42c41 : #f56a7b
-						color isDark ? #d42c41 : #f56a7b
-
-				> .username
-					margin 0 0.5em 0 0
-					overflow hidden
-					text-overflow ellipsis
-					color isDark ? #606984 : #ccc
-
-				> .info
-					margin-left auto
-					font-size 0.9em
-
-					> *
-						color isDark ? #606984 : #c0c0c0
-
-					> .mobile
-						margin-right 6px
-
-					> .visibility
-						margin-left 6px
-
 			> .body
 
 				> .cw

src/client/app/desktop/views/pages/deck/deck.notes.vue

@@ -31,7 +31,7 @@ import Vue from 'vue';
 
 import XNote from './deck.note.vue';
 
-const displayLimit = 30;
+const displayLimit = 20;
 
 export default Vue.extend({
 	components: {

src/client/app/desktop/views/pages/deck/deck.notifications.vue

@@ -21,20 +21,27 @@
 import Vue from 'vue';
 import XNotification from './deck.notification.vue';
 
+const displayLimit = 20;
+
 export default Vue.extend({
 	components: {
 		XNotification
 	},
+
+	inject: ['column', 'isScrollTop', 'count'],
+
 	data() {
 		return {
 			fetching: true,
 			fetchingMoreNotifications: false,
 			notifications: [],
+			queue: [],
 			moreNotifications: false,
 			connection: null,
 			connectionId: null
 		};
 	},
+
 	computed: {
 		_notifications(): any[] {
 			return (this.notifications as any).map(notification => {
@@ -46,12 +53,22 @@ export default Vue.extend({
 			});
 		}
 	},
+
+	watch: {
+		queue(q) {
+			this.count(q.length);
+		}
+	},
+
 	mounted() {
 		this.connection = (this as any).os.stream.getConnection();
 		this.connectionId = (this as any).os.stream.use();
 
 		this.connection.on('notification', this.onNotification);
 
+		this.column.$on('top', this.onTop);
+		this.column.$on('bottom', this.onBottom);
+
 		const max = 10;
 
 		(this as any).api('i/notifications', {
@@ -66,10 +83,15 @@ export default Vue.extend({
 			this.fetching = false;
 		});
 	},
+
 	beforeDestroy() {
 		this.connection.off('notification', this.onNotification);
 		(this as any).os.stream.dispose(this.connectionId);
+
+		this.column.$off('top', this.onTop);
+		this.column.$off('bottom', this.onBottom);
 	},
+
 	methods: {
 		fetchMoreNotifications() {
 			this.fetchingMoreNotifications = true;
@@ -90,6 +112,7 @@ export default Vue.extend({
 				this.fetchingMoreNotifications = false;
 			});
 		},
+
 		onNotification(notification) {
 			// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
 			this.connection.send({
@@ -97,7 +120,34 @@ export default Vue.extend({
 				id: notification.id
 			});
 
-			this.notifications.unshift(notification);
+			this.prepend(notification);
+		},
+
+		prepend(notification) {
+			if (this.isScrollTop()) {
+				// Prepend the notification
+				this.notifications.unshift(notification);
+
+				// オーバーフローしたら古い通知は捨てる
+				if (this.notifications.length >= displayLimit) {
+					this.notifications = this.notifications.slice(0, displayLimit);
+				}
+			} else {
+				this.queue.push(notification);
+			}
+		},
+
+		releaseQueue() {
+			this.queue.forEach(n => this.prepend(n));
+			this.queue = [];
+		},
+
+		onTop() {
+			this.releaseQueue();
+		},
+
+		onBottom() {
+			this.fetchMoreNotifications();
 		}
 	}
 });

src/client/app/desktop/views/pages/deck/deck.tl-column.vue

@@ -45,8 +45,9 @@ export default Vue.extend({
 		return {
 			edit: false,
 			menu: [{
-				content: '%fa:cog% %i18n:@edit%',
-				onClick: () => {
+				icon: '%fa:cog%',
+				text: '%i18n:@edit%',
+				action: () => {
 					this.edit = !this.edit;
 				}
 			}]

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

@@ -102,32 +102,36 @@ export default Vue.extend({
 				source: this.$refs.add,
 				compact: true,
 				items: [{
-					content: '%i18n:common.deck.home%',
-					onClick: () => {
+					icon: '%fa:home%',
+					text: '%i18n:common.deck.home%',
+					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
 							type: 'home'
 						});
 					}
 				}, {
-					content: '%i18n:common.deck.local%',
-					onClick: () => {
+					icon: '%fa:comments R%',
+					text: '%i18n:common.deck.local%',
+					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
 							type: 'local'
 						});
 					}
 				}, {
-					content: '%i18n:common.deck.global%',
-					onClick: () => {
+					icon: '%fa:globe%',
+					text: '%i18n:common.deck.global%',
+					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
 							type: 'global'
 						});
 					}
 				}, {
-					content: '%i18n:common.deck.list%',
-					onClick: () => {
+					icon: '%fa:list%',
+					text: '%i18n:common.deck.list%',
+					action: () => {
 						const w = (this as any).os.new(MkUserListsWindow);
 						w.$once('choosen', list => {
 							this.$store.dispatch('settings/addDeckColumn', {
@@ -139,16 +143,18 @@ export default Vue.extend({
 						});
 					}
 				}, {
-					content: '%i18n:common.deck.notifications%',
-					onClick: () => {
+					icon: '%fa:bell R%',
+					text: '%i18n:common.deck.notifications%',
+					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
 							type: 'notifications'
 						});
 					}
 				}, {
-					content: '%i18n:common.deck.widgets%',
-					onClick: () => {
+					icon: '%fa:calculator%',
+					text: '%i18n:common.deck.widgets%',
+					action: () => {
 						this.$store.dispatch('settings/addDeckColumn', {
 							id: uuid(),
 							type: 'widgets',

src/client/app/desktop/views/pages/deck/deck.widgets-column.vue

@@ -92,8 +92,9 @@ export default Vue.extend({
 
 	created() {
 		this.menu = [{
-			content: '%fa:cog% %i18n:@edit%',
-			onClick: () => {
+			icon: '%fa:cog%',
+			text: '%i18n:@edit%',
+			action: () => {
 				this.edit = !this.edit;
 			}
 		}];

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

@@ -2,26 +2,7 @@
 <div class="mk-note-preview" :class="{ smart: $store.state.device.postStyle == 'smart' }">
 	<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle != 'smart'"/>
 	<div class="main">
-		<header>
-			<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle == 'smart'"/>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span class="is-admin" v-if="note.user.isAdmin">%i18n:@admin%</span>
-			<span class="is-bot" v-if="note.user.isBot">%i18n:@bot%</span>
-			<span class="is-cat" v-if="note.user.isCat">%i18n:@cat%</span>
-			<span class="username"><mk-acct :user="note.user"/></span>
-			<div class="info">
-				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
-				<router-link class="created-at" :to="note | notePage">
-					<mk-time :time="note.createdAt"/>
-				</router-link>
-				<span class="visibility" v-if="note.visibility != 'public'">
-					<template v-if="note.visibility == 'home'">%fa:home%</template>
-					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
-					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
-					<template v-if="note.visibility == 'private'">%fa:lock%</template>
-				</span>
-			</div>
-		</header>
+		<mk-note-header class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
 		</div>
@@ -79,64 +60,8 @@ root(isDark)
 		flex 1
 		min-width 0
 
-		> header
-			display flex
-			align-items baseline
+		> .header
 			margin-bottom 2px
-			white-space nowrap
-
-			> .avatar
-				flex-shrink 0
-				margin-right 8px
-				width 18px
-				height 18px
-				border-radius 100%
-
-			> .name
-				display block
-				margin 0 .5em 0 0
-				padding 0
-				overflow hidden
-				color isDark ? #fff : #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-			> .is-admin
-			> .is-bot
-			> .is-cat
-				align-self center
-				margin 0 0.5em 0 0
-				padding 1px 6px
-				font-size 0.8em
-				color isDark ? #758188 : #aaa
-				border solid 1px isDark ? #57616f : #ddd
-				border-radius 3px
-
-				&.is-admin
-					border-color isDark ? #d42c41 : #f56a7b
-					color isDark ? #d42c41 : #f56a7b
-
-			> .username
-				margin 0 .5em 0 0
-				overflow hidden
-				text-overflow ellipsis
-				color isDark ? #606984 : #d1d8da
-
-			> .info
-				margin-left auto
-				font-size 0.9em
-
-				> *
-					color isDark ? #606984 : #b2b8bb
-
-				> .mobile
-					margin-right 6px
-
-				> .visibility
-					margin-left 6px
 
 		> .body
 

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

@@ -2,26 +2,7 @@
 <div class="sub" :class="{ smart: $store.state.device.postStyle == 'smart' }">
 	<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle != 'smart'"/>
 	<div class="main">
-		<header>
-			<mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle == 'smart'"/>
-			<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
-			<span class="is-admin" v-if="note.user.isAdmin">%i18n:@admin%</span>
-			<span class="is-bot" v-if="note.user.isBot">%i18n:@bot%</span>
-			<span class="is-cat" v-if="note.user.isCat">%i18n:@cat%</span>
-			<span class="username"><mk-acct :user="note.user"/></span>
-			<div class="info">
-				<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
-				<router-link class="created-at" :to="note | notePage">
-					<mk-time :time="note.createdAt"/>
-				</router-link>
-				<span class="visibility" v-if="note.visibility != 'public'">
-					<template v-if="note.visibility == 'home'">%fa:home%</template>
-					<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
-					<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
-					<template v-if="note.visibility == 'private'">%fa:lock%</template>
-				</span>
-			</div>
-		</header>
+		<mk-note-header class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<mk-sub-note-content class="text" :note="note"/>
 		</div>
@@ -92,66 +73,8 @@ root(isDark)
 		flex 1
 		min-width 0
 
-		> header
-			display flex
-			align-items baseline
+		> .header
 			margin-bottom 2px
-			white-space nowrap
-
-			> .avatar
-				flex-shrink 0
-				margin-right 8px
-				width 18px
-				height 18px
-				border-radius 100%
-
-			> .name
-				display block
-				margin 0 0.5em 0 0
-				padding 0
-				overflow hidden
-				color isDark ? #fff : #607073
-				font-size 1em
-				font-weight 700
-				text-align left
-				text-decoration none
-				text-overflow ellipsis
-
-				&:hover
-					text-decoration underline
-
-			> .is-admin
-			> .is-bot
-			> .is-cat
-				align-self center
-				margin 0 0.5em 0 0
-				padding 1px 5px
-				font-size 0.8em
-				color isDark ? #758188 : #aaa
-				border solid 1px isDark ? #57616f : #ddd
-				border-radius 3px
-
-				&.is-admin
-					border-color isDark ? #d42c41 : #f56a7b
-					color isDark ? #d42c41 : #f56a7b
-
-			> .username
-				text-align left
-				margin 0
-				color isDark ? #606984 : #d1d8da
-
-			> .info
-				margin-left auto
-				font-size 0.9em
-
-				> *
-					color isDark ? #606984 : #b2b8bb
-
-				> .mobile
-					margin-right 6px
-
-				> .visibility
-					margin-left 6px
 
 		> .body
 

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

@@ -14,26 +14,7 @@
 	<article>
 		<mk-avatar class="avatar" :user="p.user" v-if="$store.state.device.postStyle != 'smart'"/>
 		<div class="main">
-			<header>
-				<mk-avatar class="avatar" :user="p.user" v-if="$store.state.device.postStyle == 'smart'"/>
-				<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
-				<span class="is-admin" v-if="p.user.isAdmin">admin</span>
-				<span class="is-bot" v-if="p.user.isBot">bot</span>
-				<span class="is-cat" v-if="p.user.isCat">cat</span>
-				<span class="username"><mk-acct :user="p.user"/></span>
-				<div class="info">
-					<span class="mobile" v-if="p.viaMobile">%fa:mobile-alt%</span>
-					<router-link class="created-at" :to="p | notePage">
-						<mk-time :time="p.createdAt"/>
-					</router-link>
-					<span class="visibility" v-if="p.visibility != 'public'">
-						<template v-if="p.visibility == 'home'">%fa:home%</template>
-						<template v-if="p.visibility == 'followers'">%fa:unlock%</template>
-						<template v-if="p.visibility == 'specified'">%fa:envelope%</template>
-						<template v-if="p.visibility == 'private'">%fa:lock%</template>
-					</span>
-				</div>
-			</header>
+			<mk-note-header class="header" :note="p" :mini="true"/>
 			<div class="body">
 				<p v-if="p.cw != null" class="cw">
 					<span class="text" v-if="p.cw != ''">{{ p.cw }}</span>
@@ -358,65 +339,10 @@ root(isDark)
 			flex 1
 			min-width 0
 
-			> header
-				display flex
-				align-items baseline
-				white-space nowrap
-
+			> .header
 				@media (min-width 500px)
 					margin-bottom 2px
 
-				> .avatar
-					flex-shrink 0
-					margin-right 8px
-					width 20px
-					height 20px
-					border-radius 100%
-
-				> .name
-					display block
-					margin 0 0.5em 0 0
-					padding 0
-					overflow hidden
-					color isDark ? #fff : #627079
-					font-weight bold
-					text-decoration none
-					text-overflow ellipsis
-
-				> .is-admin
-				> .is-bot
-				> .is-cat
-					align-self center
-					margin 0 0.5em 0 0
-					padding 1px 6px
-					font-size 0.8em
-					color isDark ? #758188 : #aaa
-					border solid 1px isDark ? #57616f : #ddd
-					border-radius 3px
-
-					&.is-admin
-						border-color isDark ? #d42c41 : #f56a7b
-						color isDark ? #d42c41 : #f56a7b
-
-				> .username
-					margin 0 0.5em 0 0
-					overflow hidden
-					text-overflow ellipsis
-					color isDark ? #606984 : #ccc
-
-				> .info
-					margin-left auto
-					font-size 0.9em
-
-					> *
-						color isDark ? #606984 : #c0c0c0
-
-					> .mobile
-						margin-right 6px
-
-					> .visibility
-						margin-left 6px
-
 			> .body
 				@media (min-width 700px)
 					font-size 1.1em