1 files changed, 28 insertions, 21 deletions

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 02715253..aea5b78b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+    <div v-if="error" class="alert error">
+      {{error}}
+      <i class="button-icon icon-cancel" @click="clearError"></i>
+    </div>
     <template v-if="muted && !isPreview">
       <div class="media status container muted">
         <small>
@@ -12,6 +16,10 @@
       </div>
     </template>
     <template v-else>
+      <div v-if="showPinned && statusoid.pinned" class="status-pin">
+        <i class="fa icon-pin faint"></i>
+        <span class="faint">{{$t('status.pinned')}}</span>
+      </div>
       <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
         <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :user="statusoid.user"/>
         <div class="media-body faint">
@@ -95,7 +103,7 @@
               v-if="preview"
               :isPreview="true"
               :statusoid="preview"
-              :compact=true
+              :compact="true"
             />
             <div v-else class="status-preview status-preview-loading">
               <i class="icon-spin4 animate-spin"></i>
@@ -157,18 +165,18 @@
           </transition>
 
           <div v-if="!noHeading && !isPreview" class='status-actions media-body'>
-            <div v-if="loggedIn">
-              <i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'icon-reply-active': replying}"></i>
+            <div>
+              <i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'button-icon-active': replying}" v-if="loggedIn"/>
+              <i class="button-icon button-icon-disabled icon-reply" :title="$t('tool_tip.reply')" v-else />
               <span v-if="status.replies_count > 0">{{status.replies_count}}</span>
             </div>
             <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
             <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
-            <delete-button :status='status'></delete-button>
+            <extra-buttons :status="status" @onError="showError" @onSuccess="clearError"></extra-buttons>
           </div>
         </div>
       </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" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
       </div>
     </template>
@@ -198,6 +206,13 @@ $status-margin: 0.75em;
   max-width: 100%;
 }
 
+.status-pin {
+  padding: $status-margin $status-margin 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .status-preview {
   position: absolute;
   max-width: 95%;
@@ -241,7 +256,6 @@ $status-margin: 0.75em;
 }
 
 .status-el {
-  hyphens: auto;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -570,15 +584,13 @@ $status-margin: 0.75em;
   }
 }
 
-.icon-reply:hover {
-  color: $fallback--cBlue;
-  color: var(--cBlue, $fallback--cBlue);
-  cursor: pointer;
-}
-
-.icon-reply.icon-reply-active {
-  color: $fallback--cBlue;
-  color: var(--cBlue, $fallback--cBlue);
+.button-icon.icon-reply {
+  &:not(.button-icon-disabled):hover,
+  &.button-icon-active {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+    cursor: pointer;
+  }
 }
 
 .status:hover .animated.avatar {
@@ -618,16 +630,11 @@ a.unmute {
   margin-left: auto;
 }
 
-.reply-left {
-  flex: 0;
-  min-width: 48px;
-}
-
 .reply-body {
   flex: 1;
 }
 
-.timeline > {
+.timeline :not(.panel-disabled) > {
   .status-el:last-child {
     border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);