3 files changed, 40 insertions, 16 deletions
diff --git a/src/components/status/status.js b/src/components/status/status.js
index cd6e2f72..e48b2eb8 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,3 +1,4 @@
+import ReplyButton from '../reply_button/reply_button.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
@@ -19,6 +20,7 @@ import { unescape, uniqBy } from 'lodash'
 const Status = {
   name: 'Status',
   components: {
+    ReplyButton,
     FavoriteButton,
     ReactButton,
     RetweetButton,
@@ -158,7 +160,7 @@ const Status = {
       return this.mergedConfig.hideFilteredStatuses
     },
     hideStatus () {
-      return this.deleted || (this.muted && this.hideFilteredStatuses) || this.virtualHidden
+      return (this.muted && this.hideFilteredStatuses) || this.virtualHidden
     },
     isFocused () {
       // retweet or root of an expanded conversation
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index c92d870b..ecca288f 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -25,6 +25,18 @@ $status-margin: 0.75em;
     --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
+  .gravestone {
+    padding: $status-margin;
+    color: $fallback--faint;
+    color: var(--faint, $fallback--faint);
+    display: flex;
+
+    .deleted-text {
+      margin: 0.5em 0;
+      align-items: center;
+    }
+  }
+  
   &.-conversation {
     border-left-width: 4px;
     border-left-style: solid;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index aa67e433..ffae32fc 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"
@@ -323,21 +324,11 @@
             v-if="!noHeading && !isPreview"
             class="status-actions"
           >
-            <div>
-              <i
-                v-if="loggedIn"
-                class="button-icon button-reply icon-reply"
-                :title="$t('tool_tip.reply')"
-                :class="{'-active': replying}"
-                @click.prevent="toggleReplying"
-              />
-              <i
-                v-else
-                class="button-icon button-reply -disabled icon-reply"
-                :title="$t('tool_tip.reply')"
-              />
-              <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
-            </div>
+            <reply-button
+              :replying="replying"
+              :status="status"
+              @toggle="toggleReplying"
+            />
             <retweet-button
               :visibility="status.visibility"
               :logged-in="loggedIn"
@@ -361,6 +352,25 @@
         </div>
       </div>
       <div
+        v-else
+        class="gravestone"
+      >
+        <div class="left-side">
+          <UserAvatar :compact="compact" />
+        </div>
+        <div class="right-side">
+          <div class="deleted-text">
+            {{ $t('status.status_deleted') }}
+          </div>
+          <reply-button
+            v-if="replying"
+            :replying="replying"
+            :status="status"
+            @toggle="toggleReplying"
+          />
+        </div>
+      </div>
+      <div
         v-if="replying"
         class="status-container reply-form"
       >