:v:

3 files changed, 210 insertions, 187 deletions

diff --git a/src/client/app/desktop/views/components/notifications.vue b/src/client/app/desktop/views/components/notifications.vue
index f2247a782c..ada97d5c86 100644
--- a/src/client/app/desktop/views/components/notifications.vue
+++ b/src/client/app/desktop/views/components/notifications.vue
@@ -206,7 +206,7 @@ root(isDark)
 				margin 0
 				padding 16px
 				overflow-wrap break-word
-				font-size 0.9em
+				font-size 12px
 				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
 
 				&:last-child
diff --git a/src/client/app/desktop/views/pages/deck/deck.notification.vue b/src/client/app/desktop/views/pages/deck/deck.notification.vue
new file mode 100644
index 0000000000..a145a94f8a
--- /dev/null
+++ b/src/client/app/desktop/views/pages/deck/deck.notification.vue
@@ -0,0 +1,179 @@
+<template>
+<div class="dsfykdcjpuwfvpefwufddclpjhzktmpw">
+	<div class="notification reaction" v-if="notification.type == 'reaction'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				<mk-reaction-icon :reaction="notification.reaction"/>
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+			<router-link class="note-ref" :to="notification.note | notePage">
+				%fa:quote-left%{{ getNoteSummary(notification.note) }}
+				%fa:quote-right%
+			</router-link>
+		</div>
+	</div>
+
+	<div class="notification renote" v-if="notification.type == 'renote'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				%fa:retweet%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+			<router-link class="note-ref" :to="notification.note | notePage">
+				%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
+			</router-link>
+		</div>
+	</div>
+
+	<div class="notification follow" v-if="notification.type == 'follow'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				%fa:user-plus%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+		</div>
+	</div>
+
+	<div class="notification followRequest" v-if="notification.type == 'receiveFollowRequest'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				%fa:user-clock%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+		</div>
+	</div>
+
+	<div class="notification poll_vote" v-if="notification.type == 'poll_vote'">
+		<mk-avatar class="avatar" :user="notification.user"/>
+		<div>
+			<header>
+				%fa:chart-pie%
+				<router-link :to="notification.user | userPage">{{ notification.user | userName }}</router-link>
+				<mk-time :time="notification.createdAt"/>
+			</header>
+			<router-link class="note-ref" :to="notification.note | notePage">
+				%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
+			</router-link>
+		</div>
+	</div>
+
+	<template v-if="notification.type == 'quote'">
+		<x-note :note="notification.note" @update:note="onNoteUpdated"/>
+	</template>
+
+	<template v-if="notification.type == 'reply'">
+		<x-note :note="notification.note" @update:note="onNoteUpdated"/>
+	</template>
+
+	<template v-if="notification.type == 'mention'">
+		<x-note :note="notification.note" @update:note="onNoteUpdated"/>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import getNoteSummary from '../../../../../../renderers/get-note-summary';
+import XNote from './deck.note.vue';
+
+export default Vue.extend({
+	components: {
+		XNote
+	},
+	props: ['notification'],
+	data() {
+		return {
+			getNoteSummary
+		};
+	},
+	methods: {
+		onNoteUpdated(note) {
+			switch (this.notification.type) {
+				case 'quote':
+				case 'reply':
+				case 'mention':
+					Vue.set(this.notification, 'note', note);
+					break;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	> .notification
+		padding 16px
+		font-size 12px
+		overflow-wrap break-word
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .avatar
+			display block
+			float left
+			width 36px
+			height 36px
+			border-radius 6px
+
+		> div
+			float right
+			width calc(100% - 36px)
+			padding-left 8px
+
+			> header
+				display flex
+				align-items baseline
+				white-space nowrap
+
+				i, .mk-reaction-icon
+					margin-right 4px
+
+				> .mk-time
+					margin-left auto
+					color isDark ? #606984 : #c0c0c0
+					font-size 0.9em
+
+			> .note-preview
+				color isDark ? #fff : #717171
+
+			> .note-ref
+				color isDark ? #fff : #717171
+
+				[data-fa]
+					font-size 1em
+					font-weight normal
+					font-style normal
+					display inline-block
+					margin-right 3px
+
+		&.renote
+			> div > header i
+				color #77B255
+
+		&.follow
+			> div > header i
+				color #53c7ce
+
+		&.receiveFollowRequest
+			> 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 7a9646b587..31a3673dd3 100644
--- a/src/client/app/desktop/views/pages/deck/deck.notifications.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.notifications.vue
@@ -1,102 +1,14 @@
 <template>
 <div class="oxynyeqmfvracxnglgulyqfgqxnxmehl">
-	<div class="notifications" v-if="notifications.length != 0">
-		<transition-group name="mk-notifications" class="transition">
-			<template v-for="(notification, i) in _notifications">
-				<div class="notification" :class="notification.type" :key="notification.id">
-					<mk-time :time="notification.createdAt"/>
-
-					<template v-if="notification.type == 'reaction'">
-						<mk-avatar class="avatar" :user="notification.user"/>
-						<div class="text">
-							<p>
-								<mk-reaction-icon :reaction="notification.reaction"/>
-								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
-							</p>
-							<router-link class="note-ref" :to="notification.note | notePage">
-								%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
-							</router-link>
-						</div>
-					</template>
-
-					<template v-if="notification.type == 'renote'">
-						<mk-avatar class="avatar" :user="notification.note.user"/>
-						<div class="text">
-							<p>%fa:retweet%
-								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-							</p>
-							<router-link class="note-ref" :to="notification.note | notePage">
-								%fa:quote-left%{{ getNoteSummary(notification.note.renote) }}%fa:quote-right%
-							</router-link>
-						</div>
-					</template>
-
-					<template v-if="notification.type == 'quote'">
-						<mk-avatar class="avatar" :user="notification.note.user"/>
-						<div class="text">
-							<p>%fa:quote-left%
-								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-							</p>
-							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
-						</div>
-					</template>
-
-					<template v-if="notification.type == 'follow'">
-						<mk-avatar class="avatar" :user="notification.user"/>
-						<div class="text">
-							<p>%fa:user-plus%
-								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
-							</p>
-						</div>
-					</template>
-
-					<template v-if="notification.type == 'receiveFollowRequest'">
-						<mk-avatar class="avatar" :user="notification.user"/>
-						<div class="text">
-							<p>%fa:user-clock%
-								<router-link :to="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</router-link>
-							</p>
-						</div>
-					</template>
-
-					<template v-if="notification.type == 'reply'">
-						<mk-avatar class="avatar" :user="notification.note.user"/>
-						<div class="text">
-							<p>%fa:reply%
-								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-							</p>
-							<router-link class="note-preview" :to="notification.note | notePage">{{ getNoteSummary(notification.note) }}</router-link>
-						</div>
-					</template>
-
-					<template v-if="notification.type == 'mention'">
-						<mk-avatar class="avatar" :user="notification.note.user"/>
-						<div class="text">
-							<p>%fa:at%
-								<router-link :to="notification.note.user | userPage" v-user-preview="notification.note.userId">{{ notification.note.user | userName }}</router-link>
-							</p>
-							<a class="note-preview" :href="notification.note | notePage">{{ getNoteSummary(notification.note) }}</a>
-						</div>
-					</template>
-
-					<template v-if="notification.type == 'poll_vote'">
-						<mk-avatar class="avatar" :user="notification.user"/>
-						<div class="text">
-							<p>%fa:chart-pie%<a :href="notification.user | userPage" v-user-preview="notification.user.id">{{ notification.user | userName }}</a></p>
-							<router-link class="note-ref" :to="notification.note | notePage">
-								%fa:quote-left%{{ getNoteSummary(notification.note) }}%fa:quote-right%
-							</router-link>
-						</div>
-					</template>
-				</div>
-
-				<p class="date" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date" :key="notification.id + '-time'">
-					<span>%fa:angle-up%{{ notification._datetext }}</span>
-					<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
-				</p>
-			</template>
-		</transition-group>
-	</div>
+	<transition-group 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'">
+				<span>%fa:angle-up%{{ notification._datetext }}</span>
+				<span>%fa:angle-down%{{ _notifications[i + 1]._datetext }}</span>
+			</p>
+		</template>
+	</transition-group>
 	<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>
@@ -107,9 +19,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import getNoteSummary from '../../../../../../renderers/get-note-summary';
+import XNotification from './deck.notification.vue';
 
 export default Vue.extend({
+	components: {
+		XNotification
+	},
 	data() {
 		return {
 			fetching: true,
@@ -117,8 +32,7 @@ export default Vue.extend({
 			notifications: [],
 			moreNotifications: false,
 			connection: null,
-			connectionId: null,
-			getNoteSummary
+			connectionId: null
 		};
 	},
 	computed: {
@@ -191,6 +105,7 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 root(isDark)
+
 	.transition
 		.mk-notifications-enter
 		.mk-notifications-leave-to
@@ -201,96 +116,25 @@ root(isDark)
 			transition transform .3s ease, opacity .3s ease
 
 	> .notifications
-		> *
-			> .notification
-				margin 0
-				padding 16px
-				overflow-wrap break-word
-				font-size 0.9em
-				border-bottom solid 1px isDark ? #1c2023 : rgba(#000, 0.05)
-
-				&:last-child
-					border-bottom none
-
-				> .mk-time
-					display inline
-					position absolute
-					top 16px
-					right 12px
-					vertical-align top
-					color isDark ? #606984 : rgba(#000, 0.6)
-					font-size small
-
-				&:after
-					content ""
-					display block
-					clear both
-
-				> .avatar
-					display block
-					float left
-					position -webkit-sticky
-					position sticky
-					top 16px
-					width 36px
-					height 36px
-					border-radius 6px
-
-				> .text
-					float right
-					width calc(100% - 36px)
-					padding-left 8px
-
-					p
-						margin 0
-
-						i, .mk-reaction-icon
-							margin-right 4px
-
-				.note-preview
-					color isDark ? #c2cad4 : rgba(#000, 0.7)
-
-				.note-ref
-					color isDark ? #c2cad4 : rgba(#000, 0.7)
-
-					[data-fa]
-						font-size 1em
-						font-weight normal
-						font-style normal
-						display inline-block
-						margin-right 3px
-
-				&.renote, &.quote
-					.text p i
-						color #77B255
-
-				&.follow
-					.text p i
-						color #53c7ce
-
-				&.receiveFollowRequest
-					.text p i
-						color #888
 
-				&.reply, &.mention
-					.text p i
-						color #555
+		> .notification:not(:last-child)
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
-			> .date
-				display block
-				margin 0
-				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)
+		> .date
+			display block
+			margin 0
+			line-height 32px
+			text-align center
+			font-size 0.8em
+			color isDark ? #666b79 : #aaa
+			background isDark ? #242731 : #fdfdfd
+			border-bottom solid 1px isDark ? #1c2023 : #eaeaea
 
-				span
-					margin 0 16px
+			span
+				margin 0 16px
 
-				[data-fa]
-					margin-right 8px
+			i
+				margin-right 8px
 
 	> .more
 		display block