Add support for configurable CW clickthrough.

src/components/settings/settings.js

@@ -15,6 +15,7 @@ const settings = {
       streamingLocal: this.$store.state.config.streaming,
       pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused,
       hoverPreviewLocal: this.$store.state.config.hoverPreview,
+      expandCWLocal: this.$store.state.config.expandCW,
       stopGifs: this.$store.state.config.stopGifs,
       loopSilentAvailable:
         // Firefox
@@ -65,6 +66,9 @@ const settings = {
       value = filter(value.split('\n'), (word) => trim(word).length > 0)
       this.$store.dispatch('setOption', { name: 'muteWords', value })
     },
+    expandCWLocal (value) {
+      this.$store.dispatch('setOption', { name: 'expandCW', value })
+    },
     stopGifs (value) {
       this.$store.dispatch('setOption', { name: 'stopGifs', value })
     }

src/components/settings/settings.vue

@@ -34,6 +34,10 @@
           <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
           <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
         </li>
+        <li>
+          <input type="checkbox" id="expandCW" v-model="expandCWLocal">
+          <label for="expandCW">{{$t('settings.expand_cw')}}</label>
+        </li>
       </ul>
     </div>
     <div class="setting-item">

src/components/status/status.js

@@ -22,15 +22,18 @@ const Status = {
     'noHeading',
     'inlineExpanded'
   ],
-  data: () => ({
+  data () {
+    return {
       replying: false,
       expanded: false,
       unmuted: false,
       userExpanded: false,
       preview: null,
       showPreview: false,
-    showingTall: false
-  }),
+      showingTall: false,
+      expandingCW: this.$store.state.config.expandCW
+    }
+  },
   computed: {
     muteWords () {
       return this.$store.state.config.muteWords
@@ -98,12 +101,27 @@ const Status = {
     //
     // Using max-height + overflow: auto for status components resulted in false positives
     // very often with japanese characters, and it was very annoying.
+    tallStatus () {
+      const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
+      return lengthScore > 20
+    },
+    hideCWStatus () {
+        if (this.tallStatus && this.$store.state.config.expandCW) {
+          return false
+        }
+        return !this.expandingCW && this.status.summary
+    },
     hideTallStatus () {
+      if (this.status.summary && !this.$store.state.config.expandCW) {
+        return false
+      }
       if (this.showingTall) {
         return false
       }
-      const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
-      return lengthScore > 20
+      return this.tallStatus
+    },
+    showingMore () {
+      return this.showingTall || (this.status.summary && this.expandingCW)
     },
     attachmentSize () {
       if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
@@ -163,8 +181,16 @@ const Status = {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     },
-    toggleShowTall () {
-      this.showingTall = !this.showingTall
+    toggleShowMore () {
+      if (this.showingTall) {
+        this.showingTall = false
+      } else if (this.expandingCW) {
+        this.expandingCW = false
+      } else if (this.hideTallStatus) {
+        this.showingTall = true
+      } else if (this.hideCWStatus) {
+        this.expandingCW = true
+      }
     },
     replyEnter (id, event) {
       this.showPreview = true

src/components/status/status.vue

@@ -76,9 +76,11 @@
           </div>
 
           <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper">
-            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowTall">Show more</a>
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
-            <a v-if="showingTall" href="#" class="tall-status-unhider" @click.prevent="toggleShowTall">Show less</a>
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideCWStatus"></div>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary" v-else></div>
+            <a v-if="hideCWStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a>
+            <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
           </div>
 
           <div v-if='status.attachments' class='attachments media-body'>
@@ -310,7 +312,7 @@
     }
   }
 
-  .tall-status-unhider {
+  .status-unhider, .cw-status-hider {
     width: 100%;
     text-align: center;
   }

src/i18n/messages.js

@@ -317,6 +317,7 @@ const en = {
     hide_attachments_in_tl: 'Hide attachments in timeline',
     hide_attachments_in_convo: 'Hide attachments in conversations',
     nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding',
+    expand_cw: 'Expand posts with subjects by default',
     stop_gifs: 'Play-on-hover GIFs',
     autoload: 'Enable automatic loading when scrolled to the bottom',
     streaming: 'Enable automatic streaming of new posts when scrolled to the top',

src/modules/config.js

@@ -7,6 +7,7 @@ const defaultState = {
   hideAttachments: false,
   hideAttachmentsInConv: false,
   hideNsfw: true,
+  expandCW: false,
   loopVideo: true,
   loopVideoSilentOnly: true,
   autoLoad: true,