1 files changed, 86 insertions, 21 deletions

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e2fb5d36..eb521280 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" v-if="!hideReply" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -11,8 +11,8 @@
       <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
-          <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
-          <a v-else :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
+          <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
+          <a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
           <i class='fa icon-retweet retweeted'></i>
           {{$t('timeline.repeated')}}
         </div>
@@ -57,10 +57,16 @@
               <router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }">
                 <timeago :since="status.created_at" :auto-update="60"></timeago>
               </router-link>
-              <span v-if="status.visibility"><i :class="visibilityIcon(status.visibility)"></i> </span>
-              <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-link-ext"></i></a>
+              <div class="visibility-icon" v-if="status.visibility">
+                <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
+              </div>
+              <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url" title="Source">
+                <i class="icon-link-ext-alt"></i>
+              </a>
               <template v-if="expandable">
-                <a href="#" @click.prevent="toggleExpanded"><i class="icon-plus-squared"></i></a>
+                <a href="#" @click.prevent="toggleExpanded" title="Expand">
+                  <i class="icon-plus-squared"></i>
+                </a>
               </template>
               <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a>
             </div>
@@ -74,13 +80,15 @@
           </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="!hideSubjectStatus"></div>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary" v-else></div>
+            <a v-if="hideSubjectStatus" 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'>
-            <attachment :size="attachmentSize" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id">
+          <div v-if='status.attachments && !hideSubjectStatus' class='attachments media-body'>
+            <attachment :size="attachmentSize" :status-id="status.id" :nsfw="nsfwClickthrough" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id">
             </attachment>
           </div>
 
@@ -98,7 +106,7 @@
       </div>
       <div class="container" v-if="replying">
         <div class="reply-left"/>
-        <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :message-scope="status.visibility" v-on:posted="toggleReplying"/>
+        <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
       </div>
     </template>
   </div>
@@ -141,6 +149,7 @@
   margin-top: 0.25em;
   margin-left: 0.5em;
   z-index: 50;
+
   .status {
     flex: 1;
     border: 0;
@@ -155,6 +164,7 @@
   text-align: center;
   border-width: 1px;
   border-style: solid;
+
   i {
     font-size: 2em;
   }
@@ -196,6 +206,7 @@
 
   .media-heading {
     flex-wrap: nowrap;
+    line-height: 18px;
   }
 
   .media-heading-left {
@@ -218,12 +229,22 @@
       flex: 1 0;
       display: flex;
       flex-wrap: wrap;
-      align-content: center;
+      align-items: baseline;
+
+      .user-name {
+        margin-right: .45em;
+
+        img {
+          width: 14px;
+          height: 14px;
+          vertical-align: middle;
+          object-fit: contain
+        }
+      }
     }
+
     .links {
       display: flex;
-      padding-top: 1px;
-      margin-left: 0.2em;
       font-size: 12px;
       color: $fallback--link;
       color: var(--link, $fallback--link);
@@ -247,19 +268,25 @@
   }
 
   .media-heading-right {
+    display: inline-flex;
     flex-shrink: 0;
-    display: flex;
     flex-wrap: nowrap;
-    max-height: 1.5em;
-    margin-left: 0.25em;
+    margin-left: .25em;
+    align-self: baseline;
+
     .timeago {
       margin-right: 0.2em;
       font-size: 12px;
-      padding-top: 1px;
+      align-self: last baseline;
     }
-    i {
+
+    > * {
       margin-left: 0.2em;
     }
+    a:hover i {
+      color: $fallback--fg;
+      color: var(--fg, $fallback--fg);
+    }
   }
 
   a {
@@ -289,7 +316,7 @@
     }
   }
 
-  .tall-status-unhider {
+  .status-unhider, .cw-status-hider {
     width: 100%;
     text-align: center;
   }
@@ -308,16 +335,41 @@
       font-style: italic;
     }
 
+    pre {
+      overflow: auto;
+    }
+
     p {
       margin: 0;
       margin-top: 0.2em;
       margin-bottom: 0.5em;
     }
+
+    h1 {
+      font-size: 1.1em;
+      line-height: 1.2em;
+      margin: 1.4em 0;
+    }
+
+    h2 {
+      font-size: 1.1em;
+      margin: 1.0em 0;
+    }
+
+    h3 {
+      font-size: 1em;
+      margin: 1.2em 0;
+    }
+
+    h4 {
+      margin: 1.1em 0;
+    }
   }
 
   .retweet-info {
     padding: 0.4em 0.6em 0 0.6em;
     margin: 0;
+
     .avatar {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@@ -333,9 +385,22 @@
       display: flex;
       align-content: center;
       flex-wrap: wrap;
+
+      .user-name {
+        font-weight: bold;
+
+        img {
+          width: 14px;
+          height: 14px;
+          vertical-align: middle;
+          object-fit: contain
+        }
+      }
+
       i {
         padding: 0 0.2em;
       }
+
       a {
         max-width: 100%;
         overflow: hidden;