refactored the way status suspensibility works

src/components/status_body/status_body.js

@@ -15,32 +15,41 @@ library.add(faFile, faMusic, faImage, faLink, faPollH)
 
 const StatusBody = {
   name: 'StatusBody',
-  props: [
-    'compact',
-    'collapse', // replaces newlines with spaces
-    'status',
-    'focused',
-    'noHeading',
-    'fullContent',
-    'singleLine',
-    'showingTall',
-    'expandingSubject',
-    'showingLongSubject',
-    'toggleShowingTall',
-    'toggleExpandingSubject',
-    'toggleShowingLongSubject',
-  ],
+  props: {
+    status: {
+      // Main thing
+      type: Object,
+      required: true,
+    },
+    compact: {
+      // Resizes emoji and minimizes vertical space used
+      // Primarily used for showing status in react notifications
+      type: Boolean,
+      default: false,
+    },
+    collapse: {
+      // replaces newlines with spaces
+      type: Boolean,
+      default: false,
+    },
+    singleLine: {
+      // Show entire thing (subject and content) in a single line
+      // Primarily used in chats
+      type: Boolean,
+      default: false,
+    },
+  },
   data() {
     return {
       postLength: this.status.text.length,
       parseReadyDone: false,
+      showingTall: false,
+      showingLongSubject: false,
+      expandingSubject: null,
     }
   },
   emits: ['parseReady'],
   computed: {
-    localCollapseSubjectDefault() {
-      return this.mergedConfig.collapseMessageWithSubject
-    },
     allowNonSquareEmoji() {
       return this.mergedConfig.nonSquareEmoji
     },
@@ -51,32 +60,31 @@ const StatusBody = {
     //
     // Using max-height + overflow: auto for status components resulted in false positives
     // very often with japanese characters, and it was very annoying.
-    tallStatus() {
+    hasLongSubject() {
+      return this.status.summary.length > 240
+    },
+    hasSubject() {
+      return !!this.status.summary
+    },
+    // When a status has a subject and is also tall, we should only have one show more/less
+    // button. If the default is to collapse statuses with subjects, we just treat it like
+    // a status with a subject; otherwise, we just treat it like a tall status.
+    mightHideBecauseSubject() {
+      return this.hasSubject && this.mergedConfig.collapseMessageWithSubject
+    },
+    mightHideBecauseTall() {
       if (this.singleLine || this.compact) return false
       const lengthScore =
         this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
       return lengthScore > 20
     },
-    longSubject() {
-      return this.status.summary.length > 240
-    },
-    // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
-    mightHideBecauseSubject() {
-      return !!this.status.summary && this.localCollapseSubjectDefault
-    },
-    mightHideBecauseTall() {
-      return (
-        this.tallStatus &&
-        !(this.status.summary && this.localCollapseSubjectDefault)
-      )
-    },
     hideSubjectStatus() {
       return this.mightHideBecauseSubject && !this.expandingSubject
     },
     hideTallStatus() {
       return this.mightHideBecauseTall && !this.showingTall
     },
-    shouldShowToggle() {
+    shouldShowExpandToggle() {
       return this.mightHideBecauseSubject || this.mightHideBecauseTall
     },
     toggleButtonClasses() {
@@ -97,6 +105,11 @@ const StatusBody = {
           : this.$t('general.show_more')
       }
     },
+    shouldHide() {
+      return (
+        !this.showingMore && this.mightHideBecauseSubject && this.hasSubject
+      )
+    },
     showingMore() {
       return (
         (this.mightHideBecauseTall && this.showingTall) ||
@@ -147,9 +160,9 @@ const StatusBody = {
     },
     toggleShowMore() {
       if (this.mightHideBecauseTall) {
-        this.toggleShowingTall()
+        this.showingTall = !this.showingTall
       } else if (this.mightHideBecauseSubject) {
-        this.toggleExpandingSubject()
+        this.expandingSubject = !this.expandingSubject
       }
     },
     generateTagLink(tag) {