src/components/attachment/attachment.vue

 <template>
-  <div class="attachment">
-    <a class="image-attachment" v-if="nsfw" v-on:click.prevent="showNsfw()">
-      <img :key="nsfwImage" :src="nsfwImage"></img>
+  <div class="attachment base03-border" :class="{[type]: true, loading}" v-show="!isEmpty">
+    <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
+      <img :key="nsfwImage" :src="nsfwImage"/>
     </a>
+    <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
+      <a href="#" @click.prevent="toggleHidden()">Hide</a>
+    </div>
 
-    <a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
+    <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank">
+      <img class="base03-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"/>
+    </a>
 
-    <video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>
+    <video class="base03" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video>
 
-    <span v-if="type === 'unknown'">Don't know how to display this...</span>
+    <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
 
-    <div v-if="type === 'html' && attachment.oembed" class="oembed">
+    <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed">
       <div v-if="attachment.thumb_url" class="image">
-        <img :src="attachment.thumb_url"></img>
+        <img :src="attachment.thumb_url"/>
       </div>
       <div class="text">
         <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
@@ -28,59 +33,91 @@
   .attachments {
       display: flex;
       flex-wrap: wrap;
-      .attachment {
+      margin-right: -0.7em;
 
+      .attachment.media-upload-container {
+        flex: 0 0 auto;
+        max-height: 300px;
+        max-width: 100%;
+      }
+      
+      .attachment {
           flex: 1 0 30%;
-          display: flex;
-          margin: 0.2em;
+          margin: 0.5em 0.7em 0.6em 0.0em;
           align-self: flex-start;
 
+          border-style: solid;
+          border-width: 1px;
+          border-radius: 5px;
+          overflow: hidden;
+
+          // fixes small gap below video
+          &.video {
+            line-height: 0;
+          }
+
+          &.html {
+            flex-basis: 90%;
+            width: 100%;
+            display: flex;
+          }
+
+          &.loading {
+            cursor: progress;
+          }
+
+          .hider {
+              position: absolute;
+              margin: 10px;
+              padding: 5px;
+              background: rgba(230,230,230,0.6);
+              font-weight: bold;
+              z-index: 4;
+          }
+
           video {
+              max-height: 500px;
               height: 100%;
-              border: 1px solid;
-              border-radius: 0.5em;
               width: 100%;
+              z-index: 0;
           }
 
-          img.media-upload {
+          audio {
               width: 100%;
-              height: 100%;
-              flex: 1;
-              border: 1px solid;
-              border-radius: 0.5em;
           }
 
+          img.media-upload {
+              margin-bottom: -2px;
+              max-height: 300px;
+              max-width: 100%;
+          }
 
           .oembed {
+              width: 100%;
+              margin-right: 15px;
+              display: flex;
+
               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;
+                      border-radius: 5px;
+                      height: 100%;
+                      object-fit: cover;
                   }
               }
 
               .text {
                   flex: 2;
                   margin: 8px;
+                  word-break: break-all;
                   h1 {
                       font-size: 14px;
                       margin: 0px;
-
-                      a {
-                          color: black;
-                      }
                   }
               }
           }
@@ -90,11 +127,10 @@
               flex: 1;
 
               img {
+                  object-fit: contain;
                   width: 100%;
-                  flex: 1;
-                  border: 1px solid;
-                  border-radius: 0.5em;
-                  width: 100%;
+                  height: 100%; /* If this isn't here, chrome will stretch the images */
+                  max-height: 500px;
               }
           }
       }

src/components/chat/chat.js

+const chat = {
+  data () {
+    return {
+      currentMessage: '',
+      channel: null
+    }
+  },
+  computed: {
+    messages () {
+      return this.$store.state.chat.messages
+    }
+  },
+  methods: {
+    submit (message) {
+      this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
+      this.currentMessage = ''
+    }
+  }
+}
+
+export default chat

src/components/chat/chat.vue

+<template>
+  <div class="chat-panel panel panel-default">
+    <div class="panel-heading timeline-heading base02-background base04">
+      <div class="title">
+        {{$t('chat.title')}}
+      </div>
+    </div>
+    <div class="panel-body base01-background">
+      <div class="chat-window">
+        <div class="chat-message" v-for="message in messages" :key="message.id">
+          <span class="chat-avatar">
+            <img :src="message.author.avatar" />
+            {{message.author.username}}:
+          </span>
+          <span class="chat-text">
+            {{message.text}}
+          </span>
+        </div>
+      </div>
+      <div class="chat-input">
+        <form @submit.prevent="submit(currentMessage)">
+          <input v-model="currentMessage" type="text" >
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./chat.js"></script>
+
+
+<style lang="scss">
+ .chat-window {
+   max-height: 80vh;
+   overflow-y: auto;
+   overflow-x: hidden;
+ }
+ .chat-message {
+   padding: 0.2em 0.5em
+ }
+ .chat-avatar {
+     img {
+         height: 32px;
+         width: 32px;
+         border-radius: 5px;
+         margin-right: 0.5em;
+     }
+ }
+ .chat-input {
+     display: flex;
+     form {
+         flex: auto;
+         input {
+             margin: 0.5em;
+             width: fill-available;
+         }
+     }
+ }
+</style>

src/components/conversation-page/conversation-page.js

+import Conversation from '../conversation/conversation.vue'
+import { find, toInteger } from 'lodash'
+
+const conversationPage = {
+  components: {
+    Conversation
+  },
+  computed: {
+    statusoid () {
+      const id = toInteger(this.$route.params.id)
+      const statuses = this.$store.state.statuses.allStatuses
+      const status = find(statuses, {id})
+
+      return status
+    }
+  }
+}
+
+export default conversationPage

src/components/conversation-page/conversation-page.vue

+<template>
+  <conversation :collapsable="false" :statusoid="statusoid"></conversation>
+</template>
+
+<script src="./conversation-page.js"></script>

src/components/conversation/conversation.js

+import { reduce, filter, sortBy } from 'lodash'
+import { statusType } from '../../modules/statuses.js'
+import Status from '../status/status.vue'
+
+const sortAndFilterConversation = (conversation) => {
+  conversation = filter(conversation, (status) => statusType(status) !== 'retweet')
+  return sortBy(conversation, 'id')
+}
+
+const conversation = {
+  data () {
+    return {
+      highlight: null
+    }
+  },
+  props: [
+    'statusoid',
+    'collapsable'
+  ],
+  computed: {
+    status () { return this.statusoid },
+    conversation () {
+      if (!this.status) {
+        return false
+      }
+
+      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)
+    },
+    replies () {
+      let i = 1
+      return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => {
+        const irid = Number(in_reply_to_status_id)
+        if (irid) {
+          result[irid] = result[irid] || []
+          result[irid].push({
+            name: `#${i}`,
+            id: id
+          })
+        }
+        i++
+        return result
+      }, {})
+    }
+  },
+  components: {
+    Status
+  },
+  created () {
+    this.fetchConversation()
+  },
+  watch: {
+    '$route': 'fetchConversation'
+  },
+  methods: {
+    fetchConversation () {
+      if (this.status) {
+        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})
+          .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
+          .then(() => this.fetchConversation())
+      }
+    },
+    getReplies (id) {
+      id = Number(id)
+      return this.replies[id] || []
+    },
+    focused (id) {
+      if (this.statusoid.retweeted_status) {
+        return (id === this.statusoid.retweeted_status.id)
+      } else {
+        return (id === this.statusoid.id)
+      }
+    },
+    setHighlight (id) {
+      this.highlight = Number(id)
+    }
+  }
+}
+
+export default conversation

src/components/conversation/conversation.vue

+<template>
+  <div class="timeline panel panel-default">
+    <div class="panel-heading base02-background base04 base03-border conversation-heading">
+      {{ $t('timeline.conversation') }}
+      <span v-if="collapsable" style="float:right;">
+        <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
+      </span>
+    </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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./conversation.js"></script>

src/components/delete_button/delete_button.js

+const DeleteButton = {
+  props: [ 'status' ],
+  methods: {
+    deleteStatus () {
+      const confirmed = window.confirm('Do you really want to delete this status?')
+      if (confirmed) {
+        this.$store.dispatch('deleteStatus', { id: this.status.id })
+      }
+    }
+  },
+  computed: {
+    currentUser () { return this.$store.state.users.currentUser },
+    canDelete () { return this.currentUser.rights.delete_others_notice || this.status.user.id === this.currentUser.id }
+  }
+}
+
+export default DeleteButton

src/components/delete_button/delete_button.vue

+<template>
+  <div v-if="canDelete">
+    <a href="#" v-on:click.prevent="deleteStatus()">
+      <i class='base09 icon-cancel delete-status'></i>
+    </a>
+  </div>
+</template>
+
+<script src="./delete_button.js" ></script>
+
+<style lang='scss'>
+  @import '../../_variables.scss';
+
+  .icon-cancel,.delete-status {
+    cursor: pointer;
+    &:hover {
+      color: $red;
+    }
+  }
+</style>

src/components/favorite_button/favorite_button.js

 const FavoriteButton = {
-  props: [ 'status' ],
+  props: ['status'],
+  data () {
+    return {
+      animated: false
+    }
+  },
   methods: {
     favorite () {
       if (!this.status.favorited) {
@@ -7,13 +12,18 @@ const FavoriteButton = {
       } else {
         this.$store.dispatch('unfavorite', {id: this.status.id})
       }
+      this.animated = true
+      setTimeout(() => {
+        this.animated = false
+      }, 500)
     }
   },
   computed: {
     classes () {
       return {
         'icon-star-empty': !this.status.favorited,
-        'icon-star': this.status.favorited
+        'icon-star': this.status.favorited,
+        'animate-spin': this.animated
       }
     }
   }

src/components/favorite_button/favorite_button.vue

 <template>
   <div>
-    <i :class='classes' class='favorite-button fa' v-on:click.prevent='favorite()'></i>
+    <i :class='classes' class='favorite-button base09' @click.prevent='favorite()'/>
     <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>
@@ -8,14 +8,15 @@
 <script src="./favorite_button.js" ></script>
 
 <style lang='scss'>
-  @import '../../_variables.scss';
   .favorite-button {
       cursor: pointer;
+      animation-duration: 0.6s;
       &:hover {
-        color: $main-color;
+        color: orange;
       }
   }
-  .icon-star {
-      color: $main-color;
+  .favorite-button.icon-star {
+      color: orange;
   }
+
 </style>

src/components/friends_timeline/friends_timeline.vue

 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading">Friends Timeline</div>
-    <div class="panel-body">
-      <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
-    </div>
-  </div>
+  <Timeline :title="$t('nav.timeline')" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
 </template>
 
 <script src="./friends_timeline.js"></script>

src/components/hello/Hello.js

-export default {
-  name: 'hello',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js app'
-    }
-  }
-}

src/components/hello/Hello.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-      <br>
-      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This template</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script src='./Hello.js'></script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
-</style>

src/components/login_form/login_form.js

 const LoginForm = {
   data: () => ({
-    user: {}
+    user: {},
+    authError: false
   }),
   computed: {
-    loggingIn () { return this.$store.state.users.loggingIn }
+    loggingIn () { return this.$store.state.users.loggingIn },
+    registrationOpen () { return this.$store.state.config.registrationOpen }
   },
   methods: {
     submit () {
-      this.$store.dispatch('loginUser', this.user).then(() => {
-        this.$router.push('/main/friends')
-      })
+      this.$store.dispatch('loginUser', this.user).then(
+        () => {},
+        (error) => {
+          this.authError = error
+          this.user.username = ''
+          this.user.password = ''
+        }
+      )
     }
   }
 }

src/components/login_form/login_form.vue

 <template>
-  <div class="login panel panel-default">
+  <div class="login panel panel-default base00-background">
     <!-- Default panel contents -->
-    <div class="panel-heading">
-      Log in
+    <div class="panel-heading base02-background base04">
+      {{$t('login.login')}}
     </div>
     <div class="panel-body">
-      <form v-on:submit.prevent='submit(user)'>
+      <form v-on:submit.prevent='submit(user)' class='login-form'>
         <div class='form-group'>
-          <label for='username'>Username</label>
+          <label for='username'>{{$t('login.username')}}</label>
           <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
         </div>
         <div class='form-group'>
-          <label for='password'>Password</label>
+          <label for='password'>{{$t('login.password')}}</label>
           <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
         </div>
         <div class='form-group'>
-          <button :disabled="loggingIn" type='submit' class='btn btn-default'>Submit</button>
+          <div class='login-bottom'>
+            <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
+            <button :disabled="loggingIn" type='submit' class='btn btn-default base04 base02-background'>{{$t('login.login')}}</button>
+          </div>
+        </div>
+        <div v-if="authError" class='form-group'>
+          <div class='error base05'>{{authError}}</div>
         </div>
       </form>
     </div>
@@ -23,3 +29,42 @@
 </template>
 
 <script src="./login_form.js" ></script>
+
+<style lang="scss">
+
+.login-form {
+  input {
+    border-width: 1px;
+    border-style: solid;
+    border-color: silver;
+    border-radius: 5px;
+    padding: 0.1em 0.2em 0.2em 0.2em;
+  }
+
+  .btn {
+    min-height: 28px;
+    width: 10em;
+  }
+
+  .error {
+    border-radius: 5px;
+    text-align: center;
+    background-color: rgba(255, 48, 16, 0.65);
+    min-height: 28px;
+    line-height: 28px;
+  }
+
+  .register {
+    flex: 1 1;
+  }
+
+  .login-bottom {
+    margin-top: 1.0em;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+</style>

src/components/media_upload/media_upload.js

@@ -3,12 +3,22 @@ import statusPosterService from '../../services/status_poster/status_poster.serv
 
 const mediaUpload = {
   mounted () {
-    const store = this.$store
     const input = this.$el.querySelector('input')
-    const self = this
 
     input.addEventListener('change', ({target}) => {
       const file = target.files[0]
+      this.uploadFile(file)
+    })
+  },
+  data () {
+    return {
+      uploading: false
+    }
+  },
+  methods: {
+    uploadFile (file) {
+      const self = this
+      const store = this.$store
       const formData = new FormData()
       formData.append('media', file)
 
@@ -19,15 +29,34 @@ const mediaUpload = {
         .then((fileData) => {
           self.$emit('uploaded', fileData)
           self.uploading = false
-        }, (error) => {
+        }, (error) => { // eslint-disable-line handle-callback-err
           self.$emit('upload-failed')
           self.uploading = false
         })
-    })
+    },
+    fileDrop (e) {
+      if (e.dataTransfer.files.length > 0) {
+        e.preventDefault()  // allow dropping text like before
+        this.uploadFile(e.dataTransfer.files[0])
+      }
+    },
+    fileDrag (e) {
+      let types = e.dataTransfer.types
+      if (types.contains('Files')) {
+        e.dataTransfer.dropEffect = 'copy'
+      } else {
+        e.dataTransfer.dropEffect = 'none'
+      }
+    }
   },
-  data () {
-    return {
-      uploading: false
+  props: [
+    'dropFiles'
+  ],
+  watch: {
+    'dropFiles': function (fileInfos) {
+      if (!this.uploading) {
+        this.uploadFile(fileInfos[0])
+      }
     }
   }
 }

src/components/media_upload/media_upload.vue

 <template>
-  <div class="media-upload">
+  <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
     <label class="btn btn-default">
-      <i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
-      <i class="fa icon-upload" v-if="!uploading"></i>
+      <i class="base09 icon-spin4 animate-spin" v-if="uploading"></i>
+      <i class="base09 icon-upload" v-if="!uploading"></i>
       <input type=file style="position: fixed; top: -100em"></input>
     </label>
   </div>
@@ -15,4 +15,8 @@
      font-size: 26px;
      flex: 1;
  }
+
+ .icon-upload {
+     cursor: pointer;
+ }
 </style>