Add an optional setting to remain deleted note (#3271)

Co-authored-by: Aya Morisawa <AyaMorisawa4869@gmail.com>
Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

4 files changed, 24 insertions, 5 deletions

diff --git a/src/client/app/desktop/views/components/note.vue b/src/client/app/desktop/views/components/note.vue
index 86534adc49..71d7ae4203 100644
--- a/src/client/app/desktop/views/components/note.vue
+++ b/src/client/app/desktop/views/components/note.vue
@@ -2,7 +2,7 @@
 <div
 	class="note"
 	:class="{ mini }"
-	v-show="appearNote.deletedAt == null && !hideThisNote"
+	v-show="(this.$store.state.settings.remainDeletedNote || appearNote.deletedAt == null) && !hideThisNote"
 	:tabindex="appearNote.deletedAt == null ? '-1' : null"
 	v-hotkey="keymap"
 	:title="title"
@@ -32,7 +32,7 @@
 		<mk-avatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
 			<mk-note-header class="header" :note="appearNote" :mini="mini"/>
-			<div class="body">
+			<div class="body" v-if="appearNote.deletedAt == null">
 				<p v-if="appearNote.cw != null" class="cw">
 					<span class="text" v-if="appearNote.cw != ''">{{ appearNote.cw }}</span>
 					<mk-cw-button v-model="showContent"/>
@@ -53,7 +53,7 @@
 					<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini"/>
 				</div>
 			</div>
-			<footer>
+			<footer v-if="appearNote.deletedAt == null">
 				<span class="app" v-if="appearNote.app && mini && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
 				<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
 				<button class="replyButton" @click="reply()" :title="$t('reply')">
@@ -71,6 +71,7 @@
 					<fa icon="ellipsis-h"/>
 				</button>
 			</footer>
+			<div class="deleted" v-if="appearNote.deletedAt != null">{{ $t('deleted') }}</div>
 		</div>
 	</article>
 	<div class="replies" v-if="detail && replies.length > 0">
@@ -89,6 +90,7 @@ import noteSubscriber from '../../../common/scripts/note-subscriber';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/note.vue'),
+
 	components: {
 		XSub
 	},
@@ -343,6 +345,7 @@ export default Vue.extend({
 					margin-left 0.5em
 					color var(--noteHeaderInfo)
 					font-size 0.8em
+
 				> button
 					margin 0 28px 0 0
 					padding 0 8px
@@ -376,6 +379,10 @@ export default Vue.extend({
 					&.reacted, &.reacted:hover
 						color var(--noteActionsReactionHover)
 
+			> .deleted
+				color var(--noteText)
+				opacity 0.7
+
 </style>
 
 <style lang="stylus" module>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 1ef9e3ef3d..1c3f0e8cc4 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -130,6 +130,7 @@
 				<ui-switch v-model="showReplyTarget">{{ $t('show-reply-target') }}</ui-switch>
 				<ui-switch v-model="showMaps">{{ $t('show-maps') }}</ui-switch>
 				<ui-switch v-model="disableAnimatedMfm">{{ $t('@.disable-animated-mfm') }}</ui-switch>
+				<ui-switch v-model="remainDeletedNote">{{ $t('remain-deleted-note') }}</ui-switch>
 			</section>
 			<section>
 				<header>{{ $t('deck-column-align') }}</header>
@@ -529,6 +530,11 @@ export default Vue.extend({
 		disableAnimatedMfm: {
 			get() { return this.$store.state.settings.disableAnimatedMfm; },
 			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
+		},
+
+		remainDeletedNote: {
+			get() { return this.$store.state.settings.remainDeletedNote; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'remainDeletedNote', value }); }
 		}
 	},
 	created() {
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 4c38aecd01..5b34cfb070 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -28,7 +28,7 @@
 		<mk-avatar class="avatar" :user="appearNote.user" v-if="$store.state.device.postStyle != 'smart'"/>
 		<div class="main">
 			<mk-note-header class="header" :note="appearNote" :mini="true"/>
-			<div class="body">
+			<div class="body" v-if="appearNote.deletedAt == null">
 				<p v-if="appearNote.cw != null" class="cw">
 					<span class="text" v-if="appearNote.cw != ''">{{ appearNote.cw }}</span>
 					<mk-cw-button v-model="showContent"/>
@@ -50,7 +50,7 @@
 				</div>
 				<span class="app" v-if="appearNote.app && $store.state.settings.showVia">via <b>{{ appearNote.app.name }}</b></span>
 			</div>
-			<footer>
+			<footer v-if="appearNote.deletedAt == null">
 				<mk-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()">
 					<template v-if="appearNote.reply"><fa icon="reply-all"/></template>
@@ -67,6 +67,7 @@
 					<fa icon="ellipsis-h"/>
 				</button>
 			</footer>
+			<div class="deleted" v-if="appearNote.deletedAt != null">{{ $t('deleted') }}</div>
 		</div>
 	</article>
 </div>
@@ -355,6 +356,10 @@ export default Vue.extend({
 					&.reacted
 						color var(--primary)
 
+			> .deleted
+				color var(--noteText)
+				opacity 0.7
+
 </style>
 
 <style lang="stylus" module>
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 065015b3db..0a16a71a2a 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -15,6 +15,7 @@ const defaultSettings = {
 	tagTimelines: [],
 	fetchOnScroll: true,
 	showMaps: true,
+	remainDeletedNote: false,
 	showPostFormOnTopOfTl: false,
 	suggestRecentHashtags: true,
 	showClockOnHeader: true,