Merge remote-tracking branch 'origin/develop' into settings-changed

* origin/develop: (48 commits)
  fix/leftover-emoji-checkboxes-in-settings
  Apply 1 suggestion(s) to 1 file(s)
  Translated using Weblate (Spanish)
  Translated using Weblate (Persian)
  Translated using Weblate (Persian)
  Translated using Weblate (Polish)
  update changelog
  Stop click propagation when unhiding nsfw
  Fix Follow Requests title style
  Translated using Weblate (Persian)
  Translated using Weblate (Persian)
  Translated using Weblate (French)
  Added translation using Weblate (Persian)
  Translated using Weblate (Chinese (Traditional))
  Translated using Weblate (Chinese (Simplified))
  Translated using Weblate (Italian)
  Translated using Weblate (English)
  Translated using Weblate (English)
  Translated using Weblate (Basque)
  Translated using Weblate (Spanish)
  ...

2 files changed, 28 insertions, 3 deletions

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 45fb2bf6..069c0b40 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -44,7 +44,8 @@ const conversation = {
     'isPage',
     'pinnedStatusIdsObject',
     'inProfile',
-    'profileUserId'
+    'profileUserId',
+    'virtualHidden'
   ],
   created () {
     if (this.isPage) {
@@ -52,6 +53,13 @@ const conversation = {
     }
   },
   computed: {
+    hideStatus () {
+      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
+        return this.virtualHidden && this.$refs.statusComponent[0].suspendable
+      } else {
+        return this.virtualHidden
+      }
+    },
     status () {
       return this.$store.state.statuses.allStatusesObject[this.statusId]
     },
@@ -102,6 +110,10 @@ const conversation = {
     },
     isExpanded () {
       return this.expanded || this.isPage
+    },
+    hiddenStyle () {
+      const height = (this.status && this.status.virtualHeight) || '120px'
+      return this.virtualHidden ? { height } : {}
     }
   },
   components: {
@@ -121,6 +133,12 @@ const conversation = {
       if (value) {
         this.fetchConversation()
       }
+    },
+    virtualHidden (value) {
+      this.$store.dispatch(
+        'setVirtualHeight',
+        { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
+      )
     }
   },
   methods: {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 997a4d10..e0b9fcc5 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,5 +1,7 @@
 <template>
   <div
+    v-if="!hideStatus"
+    :style="hiddenStyle"
     class="Conversation"
     :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
   >
@@ -18,6 +20,7 @@
     <status
       v-for="status in conversation"
       :key="status.id"
+      ref="statusComponent"
       :inline-expanded="collapsable && isExpanded"
       :statusoid="status"
       :expandable="!isExpanded"
@@ -33,6 +36,10 @@
       @toggleExpanded="toggleExpanded"
     />
   </div>
+  <div
+    v-else
+    :style="hiddenStyle"
+  />
 </template>
 
 <script src="./conversation.js"></script>
@@ -53,8 +60,8 @@
     .conversation-status {
       border-color: $fallback--border;
       border-color: var(--border, $fallback--border);
-      border-left: 4px solid $fallback--cRed;
-      border-left: 4px solid var(--cRed, $fallback--cRed);
+      border-left-color: $fallback--cRed;
+      border-left-color: var(--cRed, $fallback--cRed);
     }
 
     .conversation-status:last-child {