Merge branch 'develop'

2 files changed, 23 insertions, 26 deletions

diff --git a/src/client/components/notes.vue b/src/client/components/notes.vue
index 65dda17575..0cf4dee2dd 100644
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-notes" v-size="[{ max: 500 }]">
-	<div class="empty" v-if="empty">
+	<div class="_fullinfo" v-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $t('noNotes') }}</div>
 	</div>
@@ -90,18 +90,6 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .mk-notes {
-	> .empty {
-		padding: 32px;
-		text-align: center;
-
-		> img {
-			vertical-align: bottom;
-			height: 128px;
-			margin-bottom: 16px;
-			border-radius: 16px;
-		}
-	}
-
 	> .notes {
 		> ::v-deep *:not(:last-child) {
 			margin-bottom: var(--marginFull);
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index d768c0b074..f415887e76 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -1,22 +1,24 @@
 <template>
 <div class="mk-notification" :class="notification.type" v-size="[{ max: 500 }, { max: 600 }]">
 	<div class="head">
-		<mk-avatar class="avatar" :user="notification.user"/>
-		<div class="icon" :class="notification.type">
+		<mk-avatar v-if="notification.user" class="icon" :user="notification.user"/>
+		<img v-else class="icon" :src="notification.icon" alt=""/>
+		<div class="sub-icon" :class="notification.type">
 			<fa :icon="faPlus" v-if="notification.type === 'follow'"/>
-			<fa :icon="faClock" v-if="notification.type === 'receiveFollowRequest'"/>
-			<fa :icon="faCheck" v-if="notification.type === 'followRequestAccepted'"/>
-			<fa :icon="faIdCardAlt" v-if="notification.type === 'groupInvited'"/>
-			<fa :icon="faRetweet" v-if="notification.type === 'renote'"/>
-			<fa :icon="faReply" v-if="notification.type === 'reply'"/>
-			<fa :icon="faAt" v-if="notification.type === 'mention'"/>
-			<fa :icon="faQuoteLeft" v-if="notification.type === 'quote'"/>
-			<x-reaction-icon v-if="notification.type === 'reaction'" :reaction="notification.reaction" :no-style="true"/>
+			<fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
+			<fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
+			<fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
+			<fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
+			<fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
+			<fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
+			<fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
+			<x-reaction-icon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :no-style="true"/>
 		</div>
 	</div>
 	<div class="tail">
 		<header>
-			<router-link class="name" :to="notification.user | userPage" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link>
+			<router-link v-if="notification.user" class="name" :to="notification.user | userPage" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link>
+			<span v-else>{{ notification.header }}</span>
 			<mk-time :time="notification.createdAt" v-if="withTime"/>
 		</header>
 		<router-link v-if="notification.type === 'reaction'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
@@ -42,6 +44,9 @@
 		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span>
 		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span>
 		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $t('groupInvited') }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ $t('reject') }}</button></div></span>
+		<span v-if="notification.type === 'app'" class="text">
+			<mfm :text="notification.body" :nowrap="!full"/>
+		</span>
 	</div>
 </div>
 </template>
@@ -142,14 +147,14 @@ export default Vue.extend({
 		height: 42px;
 		margin-right: 8px;
 
-		> .avatar {
+		> .icon {
 			display: block;
 			width: 100%;
 			height: 100%;
 			border-radius: 6px;
 		}
 
-		> .icon {
+		> .sub-icon {
 			position: absolute;
 			z-index: 1;
 			bottom: -2px;
@@ -163,6 +168,10 @@ export default Vue.extend({
 			font-size: 12px;
 			pointer-events: none;
 
+			&:empty {
+				display: none;
+			}
+
 			> * {
 				color: #fff;
 				width: 100%;