From 72877b5c06dd46f7334029664175fabd4e7e16ab Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 2 Nov 2016 18:38:30 +0100
Subject: [PATCH 1/8] CSS fixes.

---
 src/components/attachment/attachment.vue | 13 ++++++++++++-
 src/components/status/status.vue         |  4 ++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index d20b704b..0e67f48e 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -4,7 +4,7 @@
       <img :src="nsfwImage"></img>
     </a>
 
-    <a v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
+    <a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
 
     <video v-if="type === 'webm' && !nsfw" :src="attachment.url" controls></video>
 
@@ -29,5 +29,16 @@
      video {
          height: 100%;
      }
+
+     a.image-attachment {
+         display: flex;
+         flex: 1;
+
+         img {
+             width: 100%;
+             height: 100%;
+             flex: 1;
+         }
+     }
  }
 </style>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4d8700d5..685ec244 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -60,4 +60,8 @@
          word-break: break-all;
      }
  }
+
+ .status-actions {
+     padding-top: 5px;
+ }
 </style>

From 17d7617a0c1146e9bf77a5d484acb747fbb5c7b5 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 3 Nov 2016 16:58:32 +0100
Subject: [PATCH 2/8] Add background image.

---
 src/App.html | 2 +-
 src/App.js   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App.html b/src/App.html
index 1b067684..f80797e1 100644
--- a/src/App.html
+++ b/src/App.html
@@ -1,4 +1,4 @@
-<div id="app">
+<div id="app" v-bind:style="style">
   <nav class='container'>
     <div class='item'>
       <a route-to='friends-timeline' href="#">Pleroma FE</a>
diff --git a/src/App.js b/src/App.js
index 48284b4c..3c677566 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,5 +4,9 @@ export default {
   name: 'app',
   components: {
     UserPanel
+  },
+  computed: {
+    user () { return this.$store.state.users.currentUser || {} },
+    style () { return { 'background-image': `url(${this.user.background_image})` } }
   }
 }

From 1ef6cac272f9ec27756365ab95310b25520e818c Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 3 Nov 2016 16:58:50 +0100
Subject: [PATCH 3/8] Attachment styling fixes.

---
 src/components/attachment/attachment.vue | 34 ++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 0e67f48e..7feab42c 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -30,6 +30,40 @@
          height: 100%;
      }
 
+     .oembed {
+         img {
+             width: 100%;
+             height: 100%;
+         }
+     }
+
+    .oembed {
+        border: 1px solid rgba(0, 0, 0, 0.14);
+        width: 100%;
+
+        display: flex;
+        .image {
+            flex: 1;
+            img {
+                border: 0px;
+                border-radius: 0;
+            }
+        }
+
+        .text {
+            flex: 2;
+            margin: 8px;
+            h1 {
+                font-size: 14px;
+                margin: 0px;
+
+                a {
+                    color: black;
+                }
+            }
+        }
+    }
+
      a.image-attachment {
          display: flex;
          flex: 1;

From 78538da82faf56dca7850e0bbb9f258b26c739fe Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 3 Nov 2016 16:59:06 +0100
Subject: [PATCH 4/8] Track status lists by id.

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

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8fdcc42f..1e779638 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -7,7 +7,7 @@
         </p>
       </div>
     </a>
-    <status v-for="status in timeline.visibleStatuses" v-bind:statusoid="status"></status>
+    <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
   </div>
 </template>
 <script src="./timeline.js"></script>

From 7e2c52b12cf6883f32716230b0fdcdad7a26632b Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 3 Nov 2016 16:59:27 +0100
Subject: [PATCH 5/8] Add replies.

---
 src/components/post_status_form/post_status_form.js | 10 +++++++---
 src/components/status/status.js                     | 12 +++++++++++-
 src/components/status/status.vue                    | 11 +++++++----
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 596c9f58..0944d841 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,16 +1,20 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 
 const PostStatusForm = {
-  data() {
+  props: [
+    'replyTo'
+  ],
+  data () {
     return {
       newStatus: { }
     }
   },
   methods: {
-    postStatus(newStatus) {
+    postStatus (newStatus) {
       statusPoster.postStatus({
         status: newStatus.status,
-        store: this.$store
+        store: this.$store,
+        inReplyToStatusId: this.replyTo
       })
       this.newStatus = { }
     }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index f3816daa..2e6565e8 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,8 +1,12 @@
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
+import PostStatusForm from '../post_status_form/post_status_form.vue'
 
 const Status = {
   props: [ 'statusoid' ],
+  data: () => ({
+    replying: false
+  }),
   computed: {
     retweet () { return !!this.statusoid.retweeted_status },
     retweeter () { return this.statusoid.user.name },
@@ -16,7 +20,13 @@ const Status = {
   },
   components: {
     Attachment,
-    FavoriteButton
+    FavoriteButton,
+    PostStatusForm
+  },
+  methods: {
+    toggleReplying () {
+      this.replying = !this.replying
+    }
   }
 }
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 685ec244..ab827325 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -2,7 +2,7 @@
   <div class="status-el">
     <div v-if="retweet" class="media container retweet-info">
       <div class="media-left">
-        <i class='fa fa-retweet'></i>
+        <i class='fa icon-retweet'></i>
       </div>
       <div class="media-body">
         Retweeted by {{retweeter}}
@@ -34,8 +34,10 @@
 
         <div>
           <div class='status-actions'>
-            <div ng-click="toggleReplying()">
-              <i class='fa icon-reply'></i>
+            <div>
+              <a href="#" v-on:click.prevent="toggleReplying()">
+                <i class='fa icon-reply'></i>
+              </a>
             </div>
             <div>
               <i class='fa icon-retweet'></i>
@@ -43,7 +45,7 @@
             <favorite-button :status=status></favorite-button>
           </div>
 
-          <!-- <post-status-form ng-if="replying" toggle="toggleReplying" reply-to-status="status" reply-to="{{status.id}}"></post-status-form> -->
+          <post-status-form v-if="replying" :reply-to="status.id"></post-status-form>
         </div>
       </div>
     </div>
@@ -55,6 +57,7 @@
 <style lang="scss">
  .status-el {
      word-wrap: break-word;
+     word-break: break-word;
 
      a {
          word-break: break-all;

From 9ff8bf4c143f849635d64f5d0344ff999908fe34 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 3 Nov 2016 17:17:32 +0100
Subject: [PATCH 6/8] Make mention strings work.

---
 .../post_status_form/post_status_form.js      | 32 +++++++++++++++++--
 src/components/status/status.vue              |  2 +-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 0944d841..0d4d87f2 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,12 +1,40 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
+import { reject, map, uniqBy } from 'lodash';
+
+const buildMentionsString = ({user, attentions}, currentUser) => {
+
+  let allAttentions = [...attentions]
+
+  allAttentions.unshift(user)
+
+  allAttentions = uniqBy(allAttentions, 'id')
+  allAttentions = reject(allAttentions, {id: currentUser.id})
+
+  let mentions = map(allAttentions, (attention) => {
+    return `@${attention.screen_name}`
+  })
+
+  return mentions.join(' ') + ' '
+}
 
 const PostStatusForm = {
   props: [
-    'replyTo'
+    'replyTo',
+    'repliedUser',
+    'attentions'
   ],
   data () {
+    let statusText = ''
+
+    if (this.replyTo) {
+      const currentUser = this.$store.state.users.currentUser
+      statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
+    }
+
     return {
-      newStatus: { }
+      newStatus: {
+        status: statusText
+      }
     }
   },
   methods: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ab827325..f3d36c54 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -45,7 +45,7 @@
             <favorite-button :status=status></favorite-button>
           </div>
 
-          <post-status-form v-if="replying" :reply-to="status.id"></post-status-form>
+          <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user"></post-status-form>
         </div>
       </div>
     </div>

From 2c999ce5a2f1246b6e982b188302a0e5a0775d7d Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 3 Nov 2016 17:28:44 +0100
Subject: [PATCH 7/8] CSS fixes...

---
 src/App.scss | 30 +++---------------------------
 1 file changed, 3 insertions(+), 27 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 3c04d020..a15751aa 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -179,33 +179,6 @@ status.ng-enter.ng-enter-active {
         width: 100%;
     }
 
-    .oembed {
-        border: 1px solid rgba(0, 0, 0, 0.14);
-        width: 100%;
-
-        display: flex;
-        .image {
-            flex: 1;
-            display: flex;
-            img {
-                border: 0px;
-                border-radius: 0;
-            }
-        }
-
-        .text {
-            flex: 2;
-            margin: 8px;
-            h1 {
-                font-size: 14px;
-                margin: 0px;
-
-                a {
-                    color: black;
-                }
-            }
-        }
-    }
 }
 
 .media-body {
@@ -381,3 +354,6 @@ attention {
         }
     }
 }
+nav {
+    z-index: 1000;
+}

From 572aceb7e7a86c227f2d92c0abf651ba9c3cb4df Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 3 Nov 2016 17:35:49 +0100
Subject: [PATCH 8/8] Hide after posting.

---
 src/components/post_status_form/post_status_form.js | 1 +
 src/components/status/status.vue                    | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 0d4d87f2..2c015154 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -45,6 +45,7 @@ const PostStatusForm = {
         inReplyToStatusId: this.replyTo
       })
       this.newStatus = { }
+      this.$emit('posted')
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index f3d36c54..8361aa52 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -35,7 +35,7 @@
         <div>
           <div class='status-actions'>
             <div>
-              <a href="#" v-on:click.prevent="toggleReplying()">
+              <a href="#" v-on:click.prevent="toggleReplying">
                 <i class='fa icon-reply'></i>
               </a>
             </div>
@@ -45,7 +45,7 @@
             <favorite-button :status=status></favorite-button>
           </div>
 
-          <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user"></post-status-form>
+          <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form>
         </div>
       </div>
     </div>