Refactoring for consistency

The disabled/deleted part comes first (similar to guard clauses)

components/Comment.vue

@@ -1,37 +1,39 @@
 <template>
-  <div :class="{'comment': true, 'disabled-content': (deleted && isModerator)}">
+  <div v-if="(comment.deleted || comment.disabled) && !isModerator">
-    <div v-if="displaysComment">
-      <ds-space
-        margin-bottom="x-small"
-      >
-        <hc-user :user="author" />
-      </ds-space>
-      <no-ssr>
-        <content-menu
-          placement="bottom-end"
-          resource-type="comment"
-          :resource="comment"
-          style="float-right"
-          :is-owner="isAuthor(author.id)"
-        />
-      </no-ssr>
-      <!-- eslint-disable vue/no-v-html -->
-      <!-- TODO: replace editor content with tiptap render view -->
-      <ds-space margin-bottom="small" />
-      <div
-        style="padding-left: 40px;"
-        v-html="comment.contentExcerpt"
-      />
-    </div>
-    <!-- eslint-enable vue/no-v-html -->
     <ds-text
-      v-else
       style="padding-left: 40px; font-weight: bold;"
       color="soft"
     >
       <ds-icon name="ban" /> {{ this.$t('comment.content.unavailable-placeholder') }}
     </ds-text>
   </div>
+  <div
+    v-else
+    :class="{'comment': true, 'disabled-content': (comment.deleted || comment.disabled)}"
+  >
+    <ds-space
+      margin-bottom="x-small"
+    >
+      <hc-user :user="author" />
+    </ds-space>
+    <no-ssr>
+      <content-menu
+        placement="bottom-end"
+        resource-type="comment"
+        :resource="comment"
+        style="float-right"
+        :is-owner="isAuthor(author.id)"
+      />
+    </no-ssr>
+    <!-- eslint-disable vue/no-v-html -->
+    <!-- TODO: replace editor content with tiptap render view -->
+    <ds-space margin-bottom="small" />
+    <div
+      style="padding-left: 40px;"
+      v-html="comment.contentExcerpt"
+    />
+  <!-- eslint-enable vue/no-v-html -->
+  </div>
 </template>
 
 <script>
@@ -57,12 +59,8 @@ export default {
       user: 'auth/user',
       isModerator: 'auth/isModerator'
     }),
-    deleted() {
-      const { disabled, deleted } = this.comment
-      return disabled || deleted
-    },
     displaysComment() {
-      return !this.deleted || this.isModerator
+      return !this.unavailable || this.isModerator
     },
     author() {
       if (this.deleted) return {}

components/User.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!user || (user.disabled && !isModerator)">
+  <div v-if="!user || ((user.disabled || user.deleted) && !isModerator)">
     <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
       <ds-avatar
         style="display: inline-block; vertical-align: middle;"