Refactor

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