From 40ca0b394ea066dea95c672eb0a42a35c9e65317 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Sun, 6 Sep 2020 15:28:09 +0300
Subject: [PATCH] add basic deletes support that works with masto WS

---
 src/components/status/status.js            |  2 +-
 src/components/status/status.scss          | 11 +++++++++
 src/components/status/status.vue           | 26 ++++++++++++++++++++++
 src/components/user_avatar/user_avatar.vue | 11 +++++++++
 src/i18n/en.json                           |  3 ++-
 src/modules/api.js                         |  2 ++
 src/modules/statuses.js                    |  4 ++++
 7 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/components/status/status.js b/src/components/status/status.js
index d263da68..5a6110c1 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -157,7 +157,7 @@ const Status = {
       return this.mergedConfig.hideFilteredStatuses
     },
     hideStatus () {
-      return this.deleted || (this.muted && this.hideFilteredStatuses)
+      return (this.muted && this.hideFilteredStatuses)
     },
     isFocused () {
       // retweet or root of an expanded conversation
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 8d292d3f..02ce3ffa 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -25,6 +25,17 @@ $status-margin: 0.75em;
     --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
+  .deleted {
+    padding: $status-margin;
+    color: $fallback--faint;
+    color: var(--faint, $fallback--faint);
+    display: flex;
+    .deleted-text {
+      margin: 0.5em 0;
+      align-items: center;
+    }
+  }
+
   .status-container {
     display: flex;
     padding: $status-margin;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 282ad37d..d7dfc0ab 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -95,6 +95,7 @@
       </div>
 
       <div
+        v-if="!deleted"
         :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
         :style="[ userStyle ]"
         class="status-container"
@@ -356,6 +357,31 @@
           </div>
         </div>
       </div>
+      <div
+        v-else
+        class="deleted"
+      >
+        <div class="left-side">
+          <UserAvatar :compact="compact" />
+        </div>
+        <div class="right-side">
+          <div class="deleted-text">
+            {{ $t('status.status_deleted') }}
+          </div>
+          <div
+            v-if="replying"
+            class="status-actions"
+          >
+            <i
+              v-if="loggedIn"
+              class="button-icon button-reply icon-reply"
+              :title="$t('tool_tip.reply')"
+              :class="{'-active': replying}"
+              @click.prevent="toggleReplying"
+            />
+          </div>
+        </div>
+      </div>
       <div
         v-if="replying"
         class="status-container reply-form"
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index e4e4127c..eb3d375e 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -1,5 +1,6 @@
 <template>
   <StillImage
+    v-if="user"
     class="Avatar"
     :alt="user.screen_name"
     :title="user.screen_name"
@@ -7,6 +8,11 @@
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :image-load-error="imageLoadError"
   />
+  <div
+    v-else
+    class="Avatar -placeholder"
+    :class="{ 'avatar-compact': compact }"
+  />
 </template>
 
 <script src="./user_avatar.js"></script>
@@ -42,5 +48,10 @@
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
+
+  &.-placeholder {
+    background-color: $fallback--fg;
+    background-color: var(--fg, $fallback--fg);
+  }
 }
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8540f551..850dc4cc 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -659,7 +659,8 @@
     "show_full_subject": "Show full subject",
     "hide_full_subject": "Hide full subject",
     "show_content": "Show content",
-    "hide_content": "Hide content"
+    "hide_content": "Hide content",
+    "status_deleted": "The post was deleted"
   },
   "user_card": {
     "approve": "Approve",
diff --git a/src/modules/api.js b/src/modules/api.js
index 5e213f0d..de415981 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -72,6 +72,8 @@ const api = {
                   showImmediately: timelineData.visibleStatuses.length === 0,
                   timeline: 'friends'
                 })
+              } else if (message.event === 'delete') {
+                dispatch('deleteStatusById', message.id)
               } else if (message.event === 'pleroma:chat_update') {
                 dispatch('addChatMessages', {
                   chatId: message.chatUpdate.id,
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index e108b2a7..d38684ba 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -608,6 +608,10 @@ const statuses = {
       commit('setDeleted', { status })
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
     },
+    deleteStatusById ({ rootState, commit }, id) {
+      const status = rootState.statuses.allStatusesObject[id]
+      commit('setDeleted', { status })
+    },
     markStatusesAsDeleted ({ commit }, condition) {
       commit('setManyDeleted', condition)
     },