From 39a6867557e1af5dfa4047dc3e19f80069b744a4 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 30 Mar 2017 15:11:32 +0300
Subject: Make muted notifications take much less space (handy for bot spam).

---
 src/components/status/status.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 62a55505..993ce796 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -162,8 +162,11 @@
      border-left: 4px rgba(255, 48, 16, 0.65);
      border-left-style: inherit;
  }
- .muted button {
-   margin-left: auto;
+ .muted {
+   padding: 0.1em 0.7em 0.1em 0.8em;
+   button {
+     margin-left: auto;
+   }
  }
 
  a.unmute {
-- 
cgit v1.2.3-70-g09d2


From a53555254a711654399836e0f5f052d629bf4380 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Sun, 9 Apr 2017 15:53:23 +0200
Subject: Add word-based muting to settings / statuses.

---
 src/components/settings/settings.js  |  6 +++++-
 src/components/settings/settings.vue | 11 ++++++++++-
 src/components/status/status.js      | 14 +++++++++++++-
 src/components/status/status.vue     |  7 ++++++-
 src/main.js                          |  1 +
 src/modules/config.js                |  3 ++-
 6 files changed, 37 insertions(+), 5 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 3d373283..7aa4bbc4 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -5,7 +5,8 @@ const settings = {
     return {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
-      hideNsfwLocal: this.$store.state.config.hideNsfw
+      hideNsfwLocal: this.$store.state.config.hideNsfw,
+      muteWordsString: this.$store.state.config.muteWords.join('\n')
     }
   },
   components: {
@@ -20,6 +21,9 @@ const settings = {
     },
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
+    },
+    muteWordsString (value) {
+      this.$store.dispatch('setOption', { name: 'muteWords', value: value.split('\n') })
     }
   }
 }
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 478d761a..33d46e7e 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -8,6 +8,11 @@
         <h2>Theme</h2>
         <style-switcher></style-switcher>
       </div>
+      <div class="setting-item">
+        <h2>Filtering</h2>
+        <p>All notices containing these words will be muted, one per line</p>
+        <textarea id="muteWords" v-model="muteWordsString"></textarea>
+      </div>
       <div class="setting-item">
         <h2>Attachments</h2>
         <ul class="setting-list">
@@ -32,9 +37,13 @@
 <script src="./settings.js">
 </script>
 
-<style>
+<style lang="scss">
  .setting-item {
    margin: 1em 1em 1.4em;
+   textarea {
+     width: 100%;
+     height: 100px;
+   }
  }
  .setting-list {
    list-style-type: none;
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 87fff879..bb026fe1 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -4,6 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import { filter } from 'lodash'
 
 const Status = {
   props: [
@@ -19,6 +20,9 @@ const Status = {
     userExpanded: false
   }),
   computed: {
+    muteWords () {
+      return this.$store.state.config.muteWords
+    },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
         (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
@@ -35,7 +39,15 @@ const Status = {
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
-    muted () { return !this.unmuted && this.status.user.muted },
+    muteWordHits () {
+      const statusText = this.status.text.toLowerCase()
+      const hits = filter(this.muteWords, (muteWord) => {
+        return statusText.includes(muteWord.toLowerCase())
+      })
+
+      return hits
+    },
+    muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
     isReply () { return !!this.status.in_reply_to_status_id },
     borderColor () {
       return {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 993ce796..642f1143 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -3,6 +3,7 @@
     <template v-if="muted">
       <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>
+        <small class="muteWords">{{muteWordHits.join(', ')}}</small>
         <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
       </div>
     </template>
@@ -52,7 +53,7 @@
                 <small>
                   <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
                 </small>
-                <small v-if="status.user.muted">
+                <small v-if="unmuted">
                   <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
                 </small>
               </template>
@@ -167,6 +168,10 @@
    button {
      margin-left: auto;
    }
+
+   .muteWords {
+     margin-left: 10px;
+   }
  }
 
  a.unmute {
diff --git a/src/main.js b/src/main.js
index ab0fd6c0..969ca8dc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,6 +33,7 @@ const persistedStateOptions = {
     'config.hideAttachments',
     'config.hideAttachmentsInConv',
     'config.hideNsfw',
+    'config.muteWords',
     'statuses.notifications',
     'users.users'
   ]
diff --git a/src/modules/config.js b/src/modules/config.js
index 05b4ab3b..f59dc6f0 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -6,7 +6,8 @@ const defaultState = {
   colors: {},
   hideAttachments: false,
   hideAttachmentsInConv: false,
-  hideNsfw: true
+  hideNsfw: true,
+  muteWords: []
 }
 
 const config = {
-- 
cgit v1.2.3-70-g09d2


From 1ea19dcf1d7548496b4078aee90cb3e4bbad7755 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Sun, 9 Apr 2017 16:39:19 +0200
Subject: Take unmuting out of expandable condition.

---
 src/components/status/status.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 642f1143..b471888a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -53,10 +53,10 @@
                 <small>
                   <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
                 </small>
-                <small v-if="unmuted">
-                  <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
-                </small>
               </template>
+              <small v-if="unmuted">
+                <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
+              </small>
               <small v-if="!status.is_local" class="source_url">
                 <a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
               </small>
-- 
cgit v1.2.3-70-g09d2


From a675cfbb3ebd9c4c093a4535cc5cd0e672a45500 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 12 Apr 2017 18:25:19 +0300
Subject: Goto-original-arrow button now sets conversation highlight/focus even
 when inline, setting focus now scrolls you to the focused post smoothly. Hide
 the arrow button when not expanded.

---
 src/components/conversation/conversation.js  |  8 +++++++
 src/components/conversation/conversation.vue |  2 +-
 src/components/status/status.js              | 36 +++++++++++++++++++++++++++-
 src/components/status/status.vue             | 12 ++++------
 4 files changed, 49 insertions(+), 9 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 281b0183..fa042d23 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -8,6 +8,11 @@ const sortAndFilterConversation = (conversation) => {
 }
 
 const conversation = {
+  data() {
+    return {
+      highlight: this.statusoid.id
+    }
+  },
   props: [
     'statusoid',
     'collapsable'
@@ -54,6 +59,9 @@ const conversation = {
       } else {
         return (id === this.statusoid.id)
       }
+    },
+    setHighlight(id) {
+      this.highlight = id
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 726cfb65..8b1e00ac 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true'></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status>
       </div>
     </div>
   </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index bb026fe1..b06bc08d 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -11,7 +11,8 @@ const Status = {
     'statusoid',
     'expandable',
     'inConversation',
-    'focused'
+    'focused',
+    'highlight'
   ],
   data: () => ({
     replying: false,
@@ -53,6 +54,15 @@ const Status = {
       return {
         borderBottomColor: this.$store.state.config.colors['base02']
       }
+    },
+    isFocused () {
+      // retweet or root of an expanded conversation
+      if(this.focused)
+        return true
+      // use conversation highlight only when in conversation
+      else if(!this.inConversation)
+        return false
+      return this.highlight == this.status.id
     }
   },
   components: {
@@ -75,6 +85,10 @@ const Status = {
     toggleReplying () {
       this.replying = !this.replying
     },
+    gotoOriginal () {
+      // only handled by conversation, not status_or_conversation
+      this.$emit('goto', this.status.in_reply_to_status_id)
+    },
     toggleExpanded () {
       this.$emit('toggleExpanded')
     },
@@ -84,6 +98,26 @@ const Status = {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     }
+  },
+  watch: {
+    'highlight': function (newfocus) {
+      if(this.status.id == newfocus) {
+        let rect = this.$el.getBoundingClientRect()
+        if(rect.top < 100)
+          window.scrollBy({
+            left: 0,
+            top: rect.top - 200,
+            behavior: 'smooth'
+          })
+        // will be useful when scrolling down to replies or root posts is in
+        else if(rect.bottom > window.innerHeight - 100)
+          window.scrollBy({
+            left: 0,
+            top: rect.bottom + 200,
+            behavior: 'smooth'
+          })
+      }
+    }
   }
 }
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b471888a..db33a200 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': focused }, { 'status-conversation': inConversation }]" >
+  <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
     <template v-if="muted">
       <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>
@@ -35,12 +35,10 @@
                   {{status.in_reply_to_screen_name}}
                 </router-link>
               </small>
-              <template v-if="isReply">
-                  <small>
-                      <router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }">
-                          <i class="icon-reply"></i>
-                      </router-link>
-                  </small>
+              <template v-if="isReply && !expandable">
+                <small>
+                  <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
+                </small>
               </template>
               -
               <small>
-- 
cgit v1.2.3-70-g09d2


From d389d3a7633f88933586b9660b4ad3510b7f98ee Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Mon, 22 May 2017 13:50:10 +0200
Subject: Copy cool retweet look.

---
 src/components/status/status.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index db33a200..8886b551 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -19,7 +19,8 @@
       <div class="media status container">
         <div class="media-left">
           <a :href="status.user.statusnet_profile_url">
-            <img @click.prevent="toggleUserExpanded" class='avatar' :src="status.user.profile_image_url_original">
+            <img @click.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original">
+            <img v-if="retweet" class='avatar-retweeter' :src="statusoid.user.profile_image_url_original"></img>
           </a>
         </div>
         <div class="media-body">
@@ -147,7 +148,23 @@
  }
 
  .status .avatar {
-     width: 48px;
+   width: 48px;
+   height: 48px;
+
+   &.retweeted {
+     width: 40px;
+     height: 40px;
+     margin-right: 8px;
+     margin-bottom: 8px;
+   }
+ }
+
+ .status img.avatar-retweeter {
+   width: 24px;
+   height: 24px;
+   position: absolute;
+   margin-left: 24px;
+   margin-top: 24px;
  }
 
  .status.compact .avatar {
-- 
cgit v1.2.3-70-g09d2


From 5ad4d043e7514a26a395cf72215a74362c4ca2e0 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 31 May 2017 11:47:18 +0300
Subject: Enable reply/rt/fav for mention notifications by using a barebones
 status in place of plain notification content.

---
 src/components/notifications/notifications.js   |  5 +++++
 src/components/notifications/notifications.scss |  4 ++--
 src/components/notifications/notifications.vue  | 20 ++++++++++----------
 src/components/status/status.js                 |  3 ++-
 src/components/status/status.vue                | 17 ++++++++++++++++-
 5 files changed, 35 insertions(+), 14 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c8d5e212..c0c86c68 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,3 +1,5 @@
+import Status from '../status/status.vue'
+
 import { sortBy, take, filter } from 'lodash'
 
 const Notifications = {
@@ -23,6 +25,9 @@ const Notifications = {
       return this.unseenNotifications.length
     }
   },
+  components: {
+    Status
+  },
   watch: {
     unseenCount (count) {
       if (count > 0) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5619c2d8..f02ced8d 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -45,11 +45,11 @@
       word-wrap: break-word;
       line-height:18px;
 
-      .icon-retweet {
+      .icon-retweet.lit {
         color: $green;
       }
 
-      .icon-reply {
+      .icon-reply.lit {
         color: $blue;
       }
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 9d9028ad..256d6f7a 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -11,30 +11,30 @@
           <a :href="notification.action.user.statusnet_profile_url">
             <img class='avatar' :src="notification.action.user.profile_image_url_original">
           </a>
-          <div class='text'>
+          <div class='text' style="width: 100%;">
             <div v-if="notification.type === 'favorite'">
               <h1>
                 {{ notification.action.user.name }}
                 <i class="fa icon-star"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
-            <p>{{ notification.status.text }}</p>
+            <div v-html="notification.status.statusnet_html"></div>
             </div>
             <div v-if="notification.type === 'repeat'">
               <h1>
                 {{ notification.action.user.name }}
-                <i class="fa icon-retweet"></i>
+                <i class="fa icon-retweet lit"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
-            <p>{{ notification.status.text }}</p>
+            <div v-html="notification.status.statusnet_html"></div>
             </div>
             <div v-if="notification.type === 'mention'">
-                <h1>
-                  {{ notification.action.user.name }}
-                  <i class="fa icon-reply"></i>
-                  <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
-                </h1>
-              <p>{{ notification.status.text }}</p>
+              <h1>
+                {{ notification.action.user.name }}
+                <i class="fa icon-reply lit"></i>
+                <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
+              </h1>
+              <status :compact="true" :statusoid="notification.status"></status>
             </div>
           </div>
         </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 5e7bde53..183838a8 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -12,7 +12,8 @@ const Status = {
     'expandable',
     'inConversation',
     'focused',
-    'highlight'
+    'highlight',
+    'compact'
   ],
   data: () => ({
     replying: false,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index db33a200..e06fc29a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,20 @@
 <template>
-  <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
+  <div class="status-el base00-background" v-if="compact">
+    <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
+    <div v-if="loggedIn">
+      <div class='status-actions'>
+        <div>
+          <a href="#" v-on:click.prevent="toggleReplying">
+            <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+          </a>
+        </div>
+        <retweet-button :status=status></retweet-button>
+        <favorite-button :status=status></favorite-button>
+      </div>
+    </div>
+    <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
+  </div>
+  <div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
     <template v-if="muted">
       <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>
-- 
cgit v1.2.3-70-g09d2


From ea8a700796ced7fd4be3d1c65abf34e7c65413b0 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 1 Jun 2017 01:02:04 +0300
Subject: Move a bunch of status-related styles from App to status component,
 alter status header layout for better user experience hopefully, make status
 actions placing more consistent, adjust margins.

---
 src/App.scss                     |  59 ----------------
 src/components/status/status.vue | 149 ++++++++++++++++++++++++++++++---------
 2 files changed, 115 insertions(+), 93 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/App.scss b/src/App.scss
index 0a7e1ce5..3db81537 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -134,11 +134,6 @@ main-router {
     background-color: rgba(0,0,0,0.1);
 }
 
-.media-body {
-    flex: 1;
-    padding-left: 0.5em;
-}
-
 .container > * {
     min-width: 0px;
 }
@@ -147,60 +142,6 @@ main-router {
     color: grey;
 }
 
-.status-actions {
-    width: 50%;
-    display: flex;
-
-    div, favorite-button {
-        flex: 1;
-    }
-}
-
-status-text-container {
-    display: block;
-}
-
-.status-el {
-    line-height: 18px;
-
-    .notify {
-        .avatar {
-            border-width: 3px;
-            border-style: solid;
-        }
-    }
-
-    .media-left {
-        img {
-            margin-top: 0.2em;
-            float: right;
-            margin-right: 0.3em;
-            border-radius: 5px;
-        }
-    }
-
-    .retweet-info {
-        padding: 0.7em 0 0 0.6em;
-
-        .media-left {
-            display: flex;
-
-            i {
-                align-self: center;
-                text-align: right;
-                flex: 1;
-                padding-right: 0.3em;
-            }
-        }
-    }
-
-    .media-heading {
-        small {
-            font-weight: lighter;
-        }
-        margin-bottom: 0.3em;
-    }
-}
 nav {
     z-index: 1000;
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 6fd53420..8d776307 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -43,38 +43,41 @@
             <user-card-content :user="status.user"></user-card-content>
           </div>
           <div class="user-content">
-            <h4 class="media-heading">
-              {{status.user.name}}
-              <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
-              <small v-if="status.in_reply_to_screen_name"> &gt;
-                <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
-                  {{status.in_reply_to_screen_name}}
-                </router-link>
-              </small>
-              <template v-if="isReply && !expandable">
-                <small>
-                  <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
-                </small>
-              </template>
-              -
-              <small>
-                <router-link :to="{ name: 'conversation', params: { id: status.id } }">
-                  <timeago :since="status.created_at" :auto-update="60"></timeago>
-                </router-link>
-              </small>
-              <template v-if="expandable">
-                -
-                <small>
-                  <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
+            <div class="media-heading">
+              <div class="name-and-links">
+                <h4>{{status.user.name}}</h4>
+                <div class="links">
+                  <h4>
+                  <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
+                  <small v-if="status.in_reply_to_screen_name"> &gt;
+                    <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
+                      {{status.in_reply_to_screen_name}}
+                    </router-link>
+                  </small>
+                  <template v-if="isReply && !expandable">
+                    <small>
+                      <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
+                    </small>
+                  </template>
+                  -
+                  <small>
+                    <router-link :to="{ name: 'conversation', params: { id: status.id } }">
+                      <timeago :since="status.created_at" :auto-update="60" style="opacity:0.8;"></timeago>
+                    </router-link>
+                  </small>
+                  </h4>
+                </div>
+              </div>
+              <div class="heading-icons">
+                <small v-if="unmuted">
+                  <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
                 </small>
-              </template>
-              <small v-if="unmuted">
-                <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
-              </small>
-              <small v-if="!status.is_local" class="source_url">
-                <a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
-              </small>
-            </h4>
+                <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="fa icon-binoculars"></i></a>
+                <template v-if="expandable">
+                  <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a>
+                </template>
+              </div>
+            </div>
 
             <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
 
@@ -110,20 +113,66 @@
 
 <style lang="scss">
  @import '../../_variables.scss';
+
+ status-text-container {
+    display: block;
+}
+
  .status-el {
      hyphens: auto;
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word;
      border-left-width: 0px;
+     line-height: 18px;
+
+     .notify {
+         .avatar {
+             border-width: 3px;
+             border-style: solid;
+         }
+     }
+
+     .media-body {
+       flex: 1;
+       padding-left: 0.5em;
+     }
+
 
      .user-content {
+
        min-height: 52px;
        padding-top: 1px;
      }
 
+     .media-heading {
+       display: flex;
+       min-height: 1.4em;
+       margin-bottom: 0.3em;
+
+       small {
+           font-weight: lighter;
+       }
+       h4 {
+         margin-right: 0.4em;
+       }
+       .name-and-links {
+         flex: 1 0;
+         display: flex;
+         flex-wrap: wrap;
+         .links {
+
+         }
+       }
+     }
+
      .source_url {
-       float: right;
+       margin-right: -0.25em;
+     }
+
+     .expand {
+       margin-left: 0.5em;
+       margin-right: -0.25em;
      }
 
      .greentext {
@@ -144,6 +193,30 @@
          margin-top: 0.2em;
          margin-bottom: 0.5em;
      }
+
+     .media-left {
+         img {
+             margin-top: 0.2em;
+             float: right;
+             margin-right: 0.3em;
+             border-radius: 5px;
+         }
+     }
+
+     .retweet-info {
+         padding: 0.7em 0 0 0.6em;
+
+         .media-left {
+             display: flex;
+
+             i {
+                 align-self: center;
+                 text-align: right;
+                 flex: 1;
+                 padding-right: 0.3em;
+             }
+         }
+     }
  }
 
  .status-conversation {
@@ -151,7 +224,14 @@
  }
 
  .status-actions {
-     padding-top: 5px;
+     padding-top: 0.15em;
+     width: 100%;
+     display: flex;
+
+     div, favorite-button {
+        max-width: 5.5em;
+        flex: 1;
+     }
  }
 
  .icon-reply:hover {
@@ -187,12 +267,13 @@
  }
 
  .status {
-     padding: 0.65em 0.7em 0.8em 0.8em;
+     padding: 0.4em 0.7em 0.45em 0.7em;
      border-bottom: 1px solid;
      border-bottom-color: inherit;
      border-left: 4px rgba(255, 48, 16, 0.65);
      border-left-style: inherit;
  }
+
  .muted {
    padding: 0.1em 0.7em 0.1em 0.8em;
    button {
-- 
cgit v1.2.3-70-g09d2


From 807c0d1464c97319800d59edd945125d4fe2c194 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 1 Jun 2017 01:11:57 +0300
Subject: Remove silly opacity from timestamp, make unmute icon line up with
 the rest better.

---
 src/components/status/status.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8d776307..a79634dd 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -62,16 +62,14 @@
                   -
                   <small>
                     <router-link :to="{ name: 'conversation', params: { id: status.id } }">
-                      <timeago :since="status.created_at" :auto-update="60" style="opacity:0.8;"></timeago>
+                      <timeago :since="status.created_at" :auto-update="60"></timeago>
                     </router-link>
                   </small>
                   </h4>
                 </div>
               </div>
               <div class="heading-icons">
-                <small v-if="unmuted">
-                  <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
-                </small>
+                <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
                 <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="fa icon-binoculars"></i></a>
                 <template v-if="expandable">
                   <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a>
@@ -167,12 +165,11 @@
      }
 
      .source_url {
-       margin-right: -0.25em;
+
      }
 
      .expand {
-       margin-left: 0.5em;
-       margin-right: -0.25em;
+       margin-right: -0.3em;
      }
 
      .greentext {
-- 
cgit v1.2.3-70-g09d2


From d063607b9d5e543004404d1ec6a399c26e93f4d6 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 1 Jun 2017 17:35:00 +0300
Subject: Mobile optimizations.

---
 src/components/status/status.vue | 50 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 3 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a79634dd..9b17dfff 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -45,7 +45,7 @@
           <div class="user-content">
             <div class="media-heading">
               <div class="name-and-links">
-                <h4>{{status.user.name}}</h4>
+                <h4 class="user-name">{{status.user.name}}</h4>
                 <div class="links">
                   <h4>
                   <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -159,7 +159,7 @@
          display: flex;
          flex-wrap: wrap;
          .links {
-
+           margin-right: -4em;
          }
        }
      }
@@ -226,7 +226,7 @@
      display: flex;
 
      div, favorite-button {
-        max-width: 5.5em;
+        max-width: 6em;
         flex: 1;
      }
  }
@@ -304,4 +304,48 @@
    flex: 1;
  }
 
+ @media all and (max-width: 960px) {
+   .status-el {
+     .name-and-links {
+       margin-left: -0.25em;
+
+       .user-name {
+         flex: 100%;
+       }
+     }
+
+     .status-content {
+       margin-top: 0.5em;
+       margin-left: -3.7em;
+       margin-right: 0;
+     }
+     .status-actions {
+       margin-left: -3.7em;
+     }
+   }
+   .status {
+     max-width: 100%;
+   }
+
+   .status .avatar {
+     width: 40px;
+     height: 40px;
+
+     &.retweeted {
+       width: 34px;
+       height: 34px;
+       margin-right: 8px;
+       margin-bottom: 8px;
+     }
+   }
+
+   .status img.avatar-retweeter {
+     width: 22px;
+     height: 22px;
+     position: absolute;
+     margin-left: 18px;
+     margin-top: 18px;
+   }
+ }
+
 </style>
-- 
cgit v1.2.3-70-g09d2


From 52e6b470be3420178bee02844fcfd8968f2797e7 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 1 Jun 2017 17:43:37 +0300
Subject: Revert some of those mobile optimizations, breaks mention notifs.

---
 src/components/status/status.vue | 13 -------------
 1 file changed, 13 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 9b17dfff..8fb8d894 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -308,19 +308,6 @@
    .status-el {
      .name-and-links {
        margin-left: -0.25em;
-
-       .user-name {
-         flex: 100%;
-       }
-     }
-
-     .status-content {
-       margin-top: 0.5em;
-       margin-left: -3.7em;
-       margin-right: 0;
-     }
-     .status-actions {
-       margin-left: -3.7em;
      }
    }
    .status {
-- 
cgit v1.2.3-70-g09d2


From c149330e50fd54ba875c430c4854c9ced0c86b10 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 1 Jun 2017 17:50:09 +0300
Subject: Fix bugginess with heading links overlapping icons on the right.

---
 src/components/status/status.vue | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8fb8d894..5d0a50d3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -158,9 +158,6 @@
          flex: 1 0;
          display: flex;
          flex-wrap: wrap;
-         .links {
-           margin-right: -4em;
-         }
        }
      }
 
-- 
cgit v1.2.3-70-g09d2


From 24b7d7d9d453d279850af6bb000d41b1ea0be4cb Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Fri, 2 Jun 2017 13:05:03 +0300
Subject: Add mouseover tooltips for names in notif headings and timeline
 repeats, make the timeline repeat name into a link to the repeater profile
 and use the word 'repeat' instead of 'retweet'.

---
 src/components/notifications/notifications.vue | 6 +++---
 src/components/status/status.vue               | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 256d6f7a..97989aea 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -14,7 +14,7 @@
           <div class='text' style="width: 100%;">
             <div v-if="notification.type === 'favorite'">
               <h1>
-                {{ notification.action.user.name }}
+                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
                 <i class="fa icon-star"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
@@ -22,7 +22,7 @@
             </div>
             <div v-if="notification.type === 'repeat'">
               <h1>
-                {{ notification.action.user.name }}
+                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
                 <i class="fa icon-retweet lit"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
@@ -30,7 +30,7 @@
             </div>
             <div v-if="notification.type === 'mention'">
               <h1>
-                {{ notification.action.user.name }}
+                <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
                 <i class="fa icon-reply lit"></i>
                 <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
               </h1>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5d0a50d3..cf84d177 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -28,7 +28,7 @@
           <i class='fa icon-retweet retweeted'></i>
         </div>
         <div class="media-body">
-          Retweeted by {{retweeter}}
+          Repeated by <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
         </div>
       </div>
       <div class="media status container">
-- 
cgit v1.2.3-70-g09d2


From 4fabeda3ecbd0f194f3951a2394849de504b1a89 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Sun, 4 Jun 2017 23:58:15 +0300
Subject: Add list of replies under the name/links in conversation statuses,
 clicking them will highlight the statuses and scroll you to them, expanding a
 status will scroll you to that status once the conversation has opened.

---
 src/components/conversation/conversation.js  | 24 ++++++++++++++++++++----
 src/components/conversation/conversation.vue |  2 +-
 src/components/status/status.js              | 14 ++++++++------
 src/components/status/status.vue             | 11 ++++++++++-
 4 files changed, 39 insertions(+), 12 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index e89fa84f..b4bd6296 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -10,7 +10,8 @@ const sortAndFilterConversation = (conversation) => {
 const conversation = {
   data () {
     return {
-      highlight: null
+      highlight: null,
+      statuses: []
     }
   },
   props: [
@@ -27,8 +28,8 @@ const conversation = {
       const conversationId = this.status.statusnet_conversation_id
       const statuses = this.$store.state.statuses.allStatuses
       const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
-
-      return sortAndFilterConversation(conversation)
+      this.statuses = sortAndFilterConversation(conversation)
+      return this.statuses
     }
   },
   components: {
@@ -46,6 +47,7 @@ const conversation = {
         const conversationId = this.status.statusnet_conversation_id
         this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
           .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
+          .then(() => this.setHighlight(this.statusoid.id))
       } else {
         const id = this.$route.params.id
         this.$store.state.api.backendInteractor.fetchStatus({id})
@@ -53,7 +55,21 @@ const conversation = {
           .then(() => this.fetchConversation())
       }
     },
-    focused: function (id) {
+    getReplies (id) {
+      let res = []
+      id = Number(id)
+      let i
+      for (i = 0; i < this.statuses.length; i++) {
+        if (Number(this.statuses[i].in_reply_to_status_id) === id) {
+          res.push({
+            name: `#${i}`,
+            id: this.statuses[i].id
+          })
+        }
+      }
+      return res
+    },
+    focused (id) {
       if (this.statusoid.retweeted_status) {
         return (id === this.statusoid.retweeted_status.id)
       } else {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 8b1e00ac..96e8a5d7 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight"></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
       </div>
     </div>
   </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 183838a8..7b8f304b 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -13,7 +13,8 @@ const Status = {
     'inConversation',
     'focused',
     'highlight',
-    'compact'
+    'compact',
+    'replies'
   ],
   data: () => ({
     replying: false,
@@ -87,12 +88,14 @@ const Status = {
     toggleReplying () {
       this.replying = !this.replying
     },
-    gotoOriginal () {
+    gotoOriginal (id) {
       // only handled by conversation, not status_or_conversation
-      this.$emit('goto', this.status.in_reply_to_status_id)
+      //this.$emit('goto', this.status.in_reply_to_status_id)
+      this.$emit('goto', id)
     },
     toggleExpanded () {
       this.$emit('toggleExpanded')
+      //console.log(this.replies)
     },
     toggleMute () {
       this.unmuted = !this.unmuted
@@ -108,9 +111,8 @@ const Status = {
         let rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
           window.scrollBy(0, rect.top - 200)
-        } else if (rect.bottom > window.innerHeight - 100) {
-          // will be useful when scrolling down to replies or root posts is in
-          window.scrollBy(0, rect.bottom + 200)
+        } else if (rect.bottom > window.innerHeight - 50) {
+          window.scrollBy(0, rect.bottom - window.innerHeight + 50)
         }
       }
     }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index cf84d177..5d2c0c30 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -56,7 +56,7 @@
                   </small>
                   <template v-if="isReply && !expandable">
                     <small>
-                      <a href="#" @click.prevent="gotoOriginal" ><i class="icon-reply"></i></a>
+                      <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" ><i class="icon-reply"></i></a>
                     </small>
                   </template>
                   -
@@ -67,6 +67,12 @@
                   </small>
                   </h4>
                 </div>
+                <h4 class="replies" v-if="inConversation">
+                  <small v-if="replies.length">Replies:</small>
+                  <small v-for="reply in replies">
+                    <a href="#" @click.prevent="gotoOriginal(reply.id)">{{reply.name}}&nbsp;</a>
+                  </small>
+                </h4>
               </div>
               <div class="heading-icons">
                 <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
@@ -159,6 +165,9 @@
          display: flex;
          flex-wrap: wrap;
        }
+       .replies {
+         flex-basis: 80%;
+       }
      }
 
      .source_url {
-- 
cgit v1.2.3-70-g09d2


From 64a7db1d8b015fb386380c32645ddbce591898af Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Mon, 5 Jun 2017 12:03:32 +0300
Subject: Change replies element flex to cover more width if needed.

---
 src/components/status/status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5d2c0c30..a921c9a6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -166,7 +166,7 @@
          flex-wrap: wrap;
        }
        .replies {
-         flex-basis: 80%;
+         flex-basis: 100%;
        }
      }
 
-- 
cgit v1.2.3-70-g09d2


From f915ae174d3454ade20b9f6c827ce84b04ad7089 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Wed, 7 Jun 2017 17:58:24 +0300
Subject: Add floating status-previews on reply-link mouseover in conversations
 and make them optional in the settings, fix a small visual inconsistency in
 muted statuses while editing the file already..

---
 src/components/conversation/conversation.js  | 17 ++++++++++++-
 src/components/conversation/conversation.vue | 38 +++++++++++++++++++++++++++-
 src/components/settings/settings.js          |  4 +++
 src/components/settings/settings.vue         |  4 +++
 src/components/status/status.js              |  9 +++++++
 src/components/status/status.vue             | 16 ++++++------
 src/main.js                                  |  1 +
 src/modules/config.js                        |  1 +
 8 files changed, 80 insertions(+), 10 deletions(-)

(limited to 'src/components/status/status.vue')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 3e601c3d..c91e4fde 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -10,7 +10,12 @@ const sortAndFilterConversation = (conversation) => {
 const conversation = {
   data () {
     return {
-      highlight: null
+      highlight: null,
+      preview: {
+        x: 0,
+        y: 0,
+        status
+      }
     }
   },
   props: [
@@ -76,6 +81,16 @@ const conversation = {
     },
     setHighlight (id) {
       this.highlight = Number(id)
+    },
+    setPreview (id, x, y) {
+      if (id) {
+        this.preview.x = x
+        this.preview.y = y
+        this.preview.status = filter(this.conversation, { id: id })[0]
+        console.log(this.preview.status)
+      } else {
+        this.preview.status = null
+      }
     }
   }
 }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 96e8a5d7..e8d97f99 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -8,7 +8,17 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
+        <status v-for="status in conversation" @goto="setHighlight" :key="status.id" @preview="setPreview"  :statusoid="status" :expandable='false' :focused="focused(status.id)" :inConversation='true' :highlight="highlight" :replies="getReplies(status.id)"></status>
+      </div>
+    </div>
+    <div class="status-preview base00-background base03-border" :style="{ left: preview.x + 'px', top: preview.y + 'px'}" v-if="preview.status">
+      <img class="avatar" :src="preview.status.user.profile_image_url_original">
+      <div class="text">
+        <h4>
+          {{ preview.status.user.name }}
+          <small><a>{{ preview.status.user.screen_name}}</a></small>
+        </h4>
+        <div @click.prevent="linkClicked" class="status-content" v-html="preview.status.statusnet_html"></div>
       </div>
     </div>
   </div>
@@ -21,4 +31,30 @@
     border-bottom-style: solid;
     border-bottom-width: 1px;
   }
+
+  .status-preview {
+    position: absolute;
+    max-width: 35em;
+    padding: 0.5em;
+    display: flex;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+    .avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+    .text {
+      h4 {
+        margin-bottom: 0.4em;
+        small {
+          font-weight: lighter;
+        }
+      }
+      padding: 0 0.5em 0.5em 0.5em;
+    }
+  }
 </style>
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index cfceedde..998aa354 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -8,6 +8,7 @@ const settings = {
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
       autoLoadLocal: this.$store.state.config.autoLoad,
+      hoverPreviewLocal: this.$store.state.config.hoverPreview,
       muteWordsString: this.$store.state.config.muteWords.join('\n')
     }
   },
@@ -27,6 +28,9 @@ const settings = {
     autoLoadLocal (value) {
       this.$store.dispatch('setOption', { name: 'autoLoad', value })
     },
+    hoverPreviewLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hoverPreview', value })
+    },
     muteWordsString (value) {
       value = filter(value.split('\n'), (word) => trim(word).length > 0)
       this.$store.dispatch('setOption', { name: 'muteWords', value })
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 3fab1c1c..af0242c4 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -32,6 +32,10 @@
                 <input type="checkbox" id="autoLoad" v-model="autoLoadLocal">
                 <label for="autoLoad">Enable automatic loading when scrolled to the bottom</label>
             </li>
+            <li>
+                <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
+                <label for="hoverPreview">Enable reply-link preview on mouse hover</label>
+            </li>
         </ul>
       </div>
     </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 9448b64b..99dc1b95 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -100,6 +100,15 @@ const Status = {
     },
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
+    },
+    replyEnter (id, event) {
+      if (this.$store.state.config.hoverPreview) {
+        let rect = event.target.getBoundingClientRect()
+        this.$emit('preview', Number(id), rect.left + 20, rect.top + 20 + window.pageYOffset);
+      }
+    },
+    replyLeave () {
+      this.$emit('preview', 0, 0, 0)
     }
   },
   watch: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a921c9a6..e582a80d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -19,7 +19,7 @@
       <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>
         <small class="muteWords">{{muteWordHits.join(', ')}}</small>
-        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
+        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="fa icon-eye-off"></i></a>
       </div>
     </template>
     <template v-if="!muted">
@@ -56,7 +56,7 @@
                   </small>
                   <template v-if="isReply && !expandable">
                     <small>
-                      <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" ><i class="icon-reply"></i></a>
+                      <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"><i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i></a>
                     </small>
                   </template>
                   -
@@ -70,7 +70,7 @@
                 <h4 class="replies" v-if="inConversation">
                   <small v-if="replies.length">Replies:</small>
                   <small v-for="reply in replies">
-                    <a href="#" @click.prevent="gotoOriginal(reply.id)">{{reply.name}}&nbsp;</a>
+                    <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}&nbsp;</a>
                   </small>
                 </h4>
               </div>
@@ -178,10 +178,6 @@
        margin-right: -0.3em;
      }
 
-     .greentext {
-         color: green;
-     }
-
      a {
          display: inline-block;
          word-break: break-all;
@@ -222,6 +218,10 @@
      }
  }
 
+ .greentext {
+     color: green;
+ }
+
  .status-conversation {
    border-left-style: solid;
  }
@@ -278,7 +278,7 @@
  }
 
  .muted {
-   padding: 0.1em 0.7em 0.1em 0.8em;
+   padding: 0.1em 0.4em 0.1em 0.8em;
    button {
      margin-left: auto;
    }
diff --git a/src/main.js b/src/main.js
index 351149f1..e5ecf228 100644
--- a/src/main.js
+++ b/src/main.js
@@ -34,6 +34,7 @@ const persistedStateOptions = {
     'config.hideAttachmentsInConv',
     'config.hideNsfw',
     'config.autoLoad',
+    'config.hoverPreview',
     'config.muteWords',
     'statuses.notifications',
     'users.users'
diff --git a/src/modules/config.js b/src/modules/config.js
index c9152ecc..f7d6e9c8 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -8,6 +8,7 @@ const defaultState = {
   hideAttachmentsInConv: false,
   hideNsfw: true,
   autoLoad: true,
+  hoverPreview: true,
   muteWords: []
 }
 
-- 
cgit v1.2.3-70-g09d2

