From f6b2f6eaeed78ba4e4a6d12189b7d96474e54915 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 20 Nov 2017 22:45:09 +0200
Subject: [PATCH 01/29] Fix usercard from breaking with certain colors, clean
 up code structure a bit.

---
 .../style_switcher/style_switcher.js          |  9 +--
 .../user_card_content/user_card_content.js    | 64 +++++++++++++++++++
 .../user_card_content/user_card_content.vue   | 64 +------------------
 src/services/color_convert/color_convert.js   | 34 ++++++++++
 src/services/style_setter/style_setter.js     | 22 +------
 5 files changed, 103 insertions(+), 90 deletions(-)
 create mode 100644 src/components/user_card_content/user_card_content.js
 create mode 100644 src/services/color_convert/color_convert.js

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index b1359d13..a762f914 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,3 +1,5 @@
+import { rgbstr2hex } from '../../services/color_convert/color_convert.js'
+
 export default {
   data () {
     return {
@@ -19,13 +21,6 @@ export default {
       })
   },
   mounted () {
-    const rgbstr2hex = (rgb) => {
-      if (rgb[0] === '#') {
-        return rgb
-      }
-      rgb = rgb.match(/\d+/g)
-      return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
-    }
     this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
     this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
     this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
new file mode 100644
index 00000000..6e67a321
--- /dev/null
+++ b/src/components/user_card_content/user_card_content.js
@@ -0,0 +1,64 @@
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+export default {
+  props: [ 'user', 'switcher' ],
+  computed: {
+    headingStyle () {
+      const color = this.$store.state.config.colors['base00']
+      if (color) {
+        const rgb = hex2rgb(color)
+        console.log(rgb)
+        return {
+          backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
+          backgroundImage: `url(${this.user.cover_photo})`
+        }
+      }
+    },
+    bodyStyle () {
+      return {
+        background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
+      }
+    },
+    isOtherUser () {
+      return this.user.id !== this.$store.state.users.currentUser.id
+    },
+    loggedIn () {
+      return this.$store.state.users.currentUser
+    },
+    dailyAvg () {
+      const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
+      return Math.round(this.user.statuses_count / days)
+    }
+  },
+  methods: {
+    followUser () {
+      const store = this.$store
+      store.state.api.backendInteractor.followUser(this.user.id)
+        .then((followedUser) => store.commit('addNewUsers', [followedUser]))
+    },
+    unfollowUser () {
+      const store = this.$store
+      store.state.api.backendInteractor.unfollowUser(this.user.id)
+        .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
+    },
+    blockUser () {
+      const store = this.$store
+      store.state.api.backendInteractor.blockUser(this.user.id)
+        .then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
+    },
+    unblockUser () {
+      const store = this.$store
+      store.state.api.backendInteractor.unblockUser(this.user.id)
+        .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
+    },
+    toggleMute () {
+      const store = this.$store
+      store.commit('setMuted', {user: this.user, muted: !this.user.muted})
+      store.state.api.backendInteractor.setUserMute(this.user)
+    },
+    setProfileView (v) {
+      const store = this.$store
+      store.commit('setProfileView', { v })
+    }
+  }
+}
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 5635a177..d49a7d6c 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -84,69 +84,7 @@
   </div>
 </template>
 
-<script>
-  export default {
-    props: [ 'user', 'switcher' ],
-    computed: {
-      headingStyle () {
-        let color = this.$store.state.config.colors['base00']
-        if (color) {
-          let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
-          return {
-            backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
-            backgroundImage: `url(${this.user.cover_photo})`
-          }
-        }
-      },
-      bodyStyle () {
-        return {
-          background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
-        }
-      },
-      isOtherUser () {
-        return this.user.id !== this.$store.state.users.currentUser.id
-      },
-      loggedIn () {
-        return this.$store.state.users.currentUser
-      },
-      dailyAvg () {
-        const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
-        return Math.round(this.user.statuses_count / days)
-      }
-    },
-    methods: {
-      followUser () {
-        const store = this.$store
-        store.state.api.backendInteractor.followUser(this.user.id)
-          .then((followedUser) => store.commit('addNewUsers', [followedUser]))
-      },
-      unfollowUser () {
-        const store = this.$store
-        store.state.api.backendInteractor.unfollowUser(this.user.id)
-          .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
-      },
-      blockUser () {
-        const store = this.$store
-        store.state.api.backendInteractor.blockUser(this.user.id)
-          .then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
-      },
-      unblockUser () {
-        const store = this.$store
-        store.state.api.backendInteractor.unblockUser(this.user.id)
-          .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
-      },
-      toggleMute () {
-        const store = this.$store
-        store.commit('setMuted', {user: this.user, muted: !this.user.muted})
-        store.state.api.backendInteractor.setUserMute(this.user)
-      },
-      setProfileView (v) {
-        const store = this.$store
-        store.commit('setProfileView', { v })
-      }
-    }
-  }
-</script>
+<script src="./user_card_content.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
new file mode 100644
index 00000000..13dd8979
--- /dev/null
+++ b/src/services/color_convert/color_convert.js
@@ -0,0 +1,34 @@
+import { map } from 'lodash'
+
+const rgb2hex = (r, g, b) => {
+  [r, g, b] = map([r, g, b], (val) => {
+    val = Math.ceil(val)
+    val = val < 0 ? 0 : val
+    val = val > 255 ? 255 : val
+    return val
+  })
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+}
+
+const hex2rgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null
+}
+
+const rgbstr2hex = (rgb) => {
+  if (rgb[0] === '#') {
+    return rgb
+  }
+  rgb = rgb.match(/\d+/g)
+  return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
+}
+
+export {
+  rgb2hex,
+  hex2rgb,
+  rgbstr2hex
+}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 62296e79..8e0258e8 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,4 +1,5 @@
-import { times, map } from 'lodash'
+import { times } from 'lodash'
+import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
@@ -56,16 +57,6 @@ const setStyle = (href, commit) => {
   cssEl.addEventListener('load', setDynamic)
 }
 
-const rgb2hex = (r, g, b) => {
-  [r, g, b] = map([r, g, b], (val) => {
-    val = Math.ceil(val)
-    val = val < 0 ? 0 : val
-    val = val > 255 ? 255 : val
-    return val
-  })
-  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
-}
-
 const setColors = (col, commit) => {
   const head = document.head
   const body = document.body
@@ -108,15 +99,6 @@ const setColors = (col, commit) => {
   commit('setOption', { name: 'customTheme', value: col })
 }
 
-const hex2rgb = (hex) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null
-}
-
 const setPreset = (val, commit) => {
   window.fetch('/static/styles.json')
     .then((data) => data.json())

From 592c1cfd780ea8d5e9523a9875be698501293dc8 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Tue, 21 Nov 2017 10:30:30 +0200
Subject: [PATCH 02/29] Fix padding at user card bottom, mismatching
 border-radii. Sneak in fixes for attachment previews.

---
 src/components/attachment/attachment.vue               | 4 +---
 src/components/post_status_form/post_status_form.vue   | 8 +++++++-
 src/components/user_card/user_card.vue                 | 7 ++++++-
 src/components/user_card_content/user_card_content.vue | 1 -
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 20d10cce..7a5923b4 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -82,9 +82,7 @@
           img.media-upload {
               margin-bottom: -2px;
               max-height: 300px;
-              width: 100%;
-              height: 100%;
-              flex: 1;
+              max-width: 100%;
           }
 
           .oembed {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d0210286..a0000654 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -25,7 +25,7 @@
         <i class="icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
-        <div class="attachment base03-border" v-for="file in newStatus.files">
+        <div class="attachment base03-border media-upload-container" v-for="file in newStatus.files">
           <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
           <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
           <video v-if="type(file) === 'video'" :src="file.image" controls></video>
@@ -40,6 +40,12 @@
 <script src="./post_status_form.js"></script>
 
 <style lang="scss">
+  .media-upload-container {
+    flex: 0 0 auto !important;
+    max-height: 300px;
+    max-width: 100%;
+  }
+
  .tribute-container {
    ul {
      padding: 0px;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index ba315faa..6c150a7a 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -63,9 +63,14 @@
     width: -moz-webkit-fill-available;
     stretch: fill;
     margin: 0.2em 0 0.7em 0;
-    border-radius: 5px;
+    border-radius: 10px;
     border-style: solid;
     border-color: inherit;
     border-width: 1px;
+    overflow: hidden;
+
+    p {
+      margin-bottom: 0;
+    }
   }
 </style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index d49a7d6c..4c40c55f 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -102,7 +102,6 @@
 .profile-panel-body {
   top: -0em;
   padding-top: 4em;
-
   word-wrap: break-word;
 }
 

From 4e07b89bcfb821afb65d39eb389bcb0b4de697c8 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Tue, 21 Nov 2017 10:52:09 +0200
Subject: [PATCH 03/29] not so \!important after all

---
 src/components/attachment/attachment.vue             | 7 +++++++
 src/components/post_status_form/post_status_form.vue | 7 +------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 7a5923b4..57ff2625 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -34,6 +34,13 @@
       display: flex;
       flex-wrap: wrap;
       margin-right: -0.7em;
+
+      .attachment.media-upload-container {
+        flex: 0 0 auto;
+        max-height: 300px;
+        max-width: 100%;
+      }
+      
       .attachment {
           flex: 1 0 30%;
           margin: 0.5em 0.7em 0.6em 0.0em;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a0000654..19a00aeb 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -25,7 +25,7 @@
         <i class="icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
-        <div class="attachment base03-border media-upload-container" v-for="file in newStatus.files">
+        <div class="media-upload-container attachment base03-border" v-for="file in newStatus.files">
           <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
           <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
           <video v-if="type(file) === 'video'" :src="file.image" controls></video>
@@ -40,11 +40,6 @@
 <script src="./post_status_form.js"></script>
 
 <style lang="scss">
-  .media-upload-container {
-    flex: 0 0 auto !important;
-    max-height: 300px;
-    max-width: 100%;
-  }
 
  .tribute-container {
    ul {

From fc1736618b4e1a9f178c0ae287754c6ac1244b08 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Tue, 21 Nov 2017 16:12:47 +0200
Subject: [PATCH 04/29] attempt to recognize when holes in timeline for various
 reasons, clear timeline and fetch older when showing new to get rid of holes

---
 src/components/timeline/timeline.js             | 17 +++++++++++++++--
 src/components/timeline/timeline.vue            |  2 +-
 src/modules/statuses.js                         |  7 +++++++
 src/services/api/api.service.js                 |  2 ++
 .../timeline_fetcher.service.js                 |  8 ++++++--
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index be0aefc1..9ef8406b 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -29,6 +29,13 @@ const Timeline = {
     },
     newStatusCount () {
       return this.timeline.newStatusCount
+    },
+    newStatusCountStr () {
+      if (this.timeline.flushMarker) {
+        return ''
+      } else {
+        return ` (${this.newStatusCount})`
+      }
     }
   },
   components: {
@@ -64,8 +71,14 @@ const Timeline = {
   },
   methods: {
     showNewStatuses () {
-      this.$store.commit('showNewStatuses', { timeline: this.timelineName })
-      this.paused = false
+      if (this.timeline.flushMarker) {
+        this.$store.commit('clearTimeline', { timeline: this.timelineName })
+        this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
+        this.fetchOlderStatuses()
+      } else {
+        this.$store.commit('showNewStatuses', { timeline: this.timelineName })
+        this.paused = false
+      }
     },
     fetchOlderStatuses () {
       const store = this.$store
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 0e2ed92c..365c8236 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -5,7 +5,7 @@
         {{title}}
       </div>
       <button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.show_new')}} ({{timeline.newStatusCount}})
+        {{$t('timeline.show_new')}}{{timeline.newStatusMsg}}
       </button>
       <div @click.prevent class="base06 error  loadmore-text" v-if="timelineError">
         {{$t('timeline.error_fetching')}}
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index d954b023..82a7eda1 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -9,6 +9,7 @@ export const defaultState = {
   notifications: [],
   favorites: new Set(),
   error: false,
+  flushMarker: 0,
   timelines: {
     mentions: {
       statuses: [],
@@ -422,6 +423,9 @@ export const mutations = {
     each(notifications, (notification) => {
       notification.seen = true
     })
+  },
+  queueFlush (state, { timeline, id }) {
+    state.timelines[timeline].flushMarker = id
   }
 }
 
@@ -458,6 +462,9 @@ const statuses = {
       // Optimistic retweeting...
       commit('setRetweeted', { status, value: true })
       apiService.retweet({ id: status.id, credentials: rootState.users.currentUser.credentials })
+    },
+    queueFlush ({ rootState, commit }, { timeline, id }) {
+      commit('queueFlush', { timeline, id })
     }
   },
   mutations
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 5de0a457..fa95b870 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -281,6 +281,8 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
     url += `/${tag}.json`
   }
 
+  params.push(['count', 20])
+
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
 
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 6b76eb54..a02d67d0 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -29,8 +29,12 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
   args['tag'] = tag
 
   return apiService.fetchTimeline(args)
-    .then((statuses) => update({store, statuses, timeline, showImmediately}),
-      () => store.dispatch('setError', { value: true }))
+    .then((statuses) => {
+      if (!older && statuses.length >= 20) {
+        store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
+      }
+      update({store, statuses, timeline, showImmediately})
+    }, () => store.dispatch('setError', { value: true }))
 }
 
 const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => {

From 912be5aed9c8616d4c5772617ab4eef9a50d9061 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 22 Nov 2017 00:47:20 +0200
Subject: [PATCH 05/29] Make the timeline button use the correct func for its
 text.

---
 src/components/timeline/timeline.js  | 2 +-
 src/components/timeline/timeline.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 9ef8406b..10ad4561 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -31,7 +31,7 @@ const Timeline = {
       return this.timeline.newStatusCount
     },
     newStatusCountStr () {
-      if (this.timeline.flushMarker) {
+      if (this.timeline.flushMarker > 0) {
         return ''
       } else {
         return ` (${this.newStatusCount})`
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 365c8236..9d2e1ea1 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -5,7 +5,7 @@
         {{title}}
       </div>
       <button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.show_new')}}{{timeline.newStatusMsg}}
+        {{$t('timeline.show_new')}}{{newStatusCountStr}}
       </button>
       <div @click.prevent class="base06 error  loadmore-text" v-if="timelineError">
         {{$t('timeline.error_fetching')}}

From 10be553910f3e17ee64befbcd7318230afe674b6 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Wed, 22 Nov 2017 01:00:25 +0200
Subject: [PATCH 06/29] Update icons to use base09 where appropriate, calculate
 base09 by averaging bg and text colors.

---
 src/components/delete_button/delete_button.vue     |  2 +-
 src/components/favorite_button/favorite_button.vue |  2 +-
 src/components/media_upload/media_upload.vue       |  4 ++--
 src/components/retweet_button/retweet_button.vue   |  2 +-
 src/components/status/status.vue                   | 14 +++++++-------
 src/components/user_settings/user_settings.vue     |  6 +++---
 src/services/style_setter/style_setter.js          | 11 +++++++----
 7 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue
index 304f8a63..845ac777 100644
--- a/src/components/delete_button/delete_button.vue
+++ b/src/components/delete_button/delete_button.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="canDelete">
     <a href="#" v-on:click.prevent="deleteStatus()">
-      <i class='fa icon-cancel delete-status'></i>
+      <i class='base09 icon-cancel delete-status'></i>
     </a>
   </div>
 </template>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 0abece31..044e6796 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/>
+    <i :class='classes' class='favorite-button base09' @click.prevent='favorite()'/>
     <span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index b839067b..9e6ad608 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,8 +1,8 @@
 <template>
   <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>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index d923c5c4..3226d5c6 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <i :class='classes' class='icon-retweet fa' v-on:click.prevent='retweet()'></i>
+    <i :class='classes' class='icon-retweet base09' v-on:click.prevent='retweet()'></i>
     <span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
 </template>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5e3df8ba..55c89e6c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -5,7 +5,7 @@
       <div class='status-actions'>
         <div>
           <a href="#" v-on:click.prevent="toggleReplying">
-            <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+            <i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
           </a>
         </div>
         <retweet-button :status=status></retweet-button>
@@ -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="fa icon-eye-off"></i></a>
+        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="base09 icon-eye-off"></i></a>
       </div>
     </template>
     <template v-if="!muted">
@@ -75,10 +75,10 @@
                 </h4>
               </div>
               <div class="heading-icons">
-                <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>
+                <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="base09 icon-eye-off"></i></a>
+                <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="base09 icon-binoculars"></i></a>
                 <template v-if="expandable">
-                  <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a>
+                  <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="base09 icon-plus-squared"></i></a>
                 </template>
               </div>
             </div>
@@ -94,7 +94,7 @@
               </div>
             </div>
             <div class="status-preview status-preview-loading base00-background base03-border" v-else-if="showPreview">
-              <i class="fa icon-spin4 animate-spin"></i>
+              <i class="base09 icon-spin4 animate-spin"></i>
             </div>
 
             <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
@@ -109,7 +109,7 @@
             <div class='status-actions'>
               <div>
                 <a href="#" v-on:click.prevent="toggleReplying">
-                  <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+                  <i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
                 </a>
               </div>
               <retweet-button :status=status></retweet-button>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 74b0ff2a..515fd253 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -22,7 +22,7 @@
         <div>
           <input type="file" @change="uploadFile(0, $event)" ></input>
         </div>
-        <i class="fa icon-spin4 animate-spin" v-if="uploading[0]"></i>
+        <i class="base09 icon-spin4 animate-spin" v-if="uploading[0]"></i>
         <button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
       </div>
       <div class="setting-item">
@@ -35,7 +35,7 @@
         <div>
           <input type="file" @change="uploadFile(1, $event)" ></input>
         </div>
-        <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
+        <i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
         <button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
       </div>
       <div class="setting-item">
@@ -46,7 +46,7 @@
         <div>
           <input type="file" @change="uploadFile(2, $event)" ></input>
         </div>
-        <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
+        <i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
         <button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
       </div>
     </div>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 62296e79..449ffd51 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -82,6 +82,7 @@ const setColors = (col, commit) => {
   if (isDark) {
     mod = mod * -1
   }
+
   colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b)                         // background
   colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
   colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b)                         // panels & buttons
@@ -91,11 +92,13 @@ const setColors = (col, commit) => {
   colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
   colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
   colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b)                   // links
+  colors['base09'] = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
 
-  times(9, (n) => {
-    const color = colors[`base0${8 - n}`]
-    styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max')
-    styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max')
+  const num = 10
+  times(num, (n) => {
+    const color = colors[`base0${num - 1 - n}`]
+    styleSheet.insertRule(`.base0${num - 1 - n} { color: ${color}`, 'index-max')
+    styleSheet.insertRule(`.base0${num - 1 - n}-background { background-color: ${color}`, 'index-max')
   })
 
   styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')

From 2691579ab7ee5bd34dfe57a4c0f10c34cb46726f Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Wed, 22 Nov 2017 16:28:05 +0100
Subject: [PATCH 07/29] Make default path configurable.

---
 src/main.js        | 71 +++++++++++++++++++++++-----------------------
 static/config.json |  3 +-
 2 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/main.js b/src/main.js
index b6544a5a..6c5bf83e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -63,54 +63,55 @@ const store = new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production'
 })
 
-const routes = [
-  { name: 'root', path: '/', redirect: '/main/all' },
-  { path: '/main/all', component: PublicAndExternalTimeline },
-  { path: '/main/public', component: PublicTimeline },
-  { path: '/main/friends', component: FriendsTimeline },
-  { path: '/tag/:tag', component: TagTimeline },
-  { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
-  { name: 'user-profile', path: '/users/:id', component: UserProfile },
-  { name: 'mentions', path: '/:username/mentions', component: Mentions },
-  { name: 'settings', path: '/settings', component: Settings },
-  { name: 'registration', path: '/registration', component: Registration },
-  { name: 'user-settings', path: '/user-settings', component: UserSettings }
-]
-
-const router = new VueRouter({
-  mode: 'history',
-  routes,
-  scrollBehavior: (to, from, savedPosition) => {
-    if (to.matched.some(m => m.meta.dontScroll)) {
-      return false
-    }
-    return savedPosition || { x: 0, y: 0 }
-  }
-})
-
 const i18n = new VueI18n({
   locale: currentLocale,
   fallbackLocale: 'en',
   messages
 })
 
-/* eslint-disable no-new */
-new Vue({
-  router,
-  store,
-  i18n,
-  el: '#app',
-  render: h => h(App)
-})
-
 window.fetch('/static/config.json')
   .then((res) => res.json())
-  .then(({name, theme, background, logo, registrationOpen}) => {
+  .then((data) => {
+    const {name, theme, background, logo, registrationOpen} = data
     store.dispatch('setOption', { name: 'name', value: name })
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
     store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen })
+
+    const routes = [
+      { name: 'root', path: '/', redirect: data['defaultPath'] || '/main/all' },
+      { path: '/main/all', component: PublicAndExternalTimeline },
+      { path: '/main/public', component: PublicTimeline },
+      { path: '/main/friends', component: FriendsTimeline },
+      { path: '/tag/:tag', component: TagTimeline },
+      { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+      { name: 'user-profile', path: '/users/:id', component: UserProfile },
+      { name: 'mentions', path: '/:username/mentions', component: Mentions },
+      { name: 'settings', path: '/settings', component: Settings },
+      { name: 'registration', path: '/registration', component: Registration },
+      { name: 'user-settings', path: '/user-settings', component: UserSettings }
+    ]
+
+    const router = new VueRouter({
+      mode: 'history',
+      routes,
+      scrollBehavior: (to, from, savedPosition) => {
+        if (to.matched.some(m => m.meta.dontScroll)) {
+          return false
+        }
+        return savedPosition || { x: 0, y: 0 }
+      }
+    })
+
+    /* eslint-disable no-new */
+    new Vue({
+      router,
+      store,
+      i18n,
+      el: '#app',
+      render: h => h(App)
+    })
   })
 
 window.fetch('/static/terms-of-service.html')
diff --git a/static/config.json b/static/config.json
index 8b596992..b186246b 100644
--- a/static/config.json
+++ b/static/config.json
@@ -3,5 +3,6 @@
   "theme": "pleroma-dark",
   "background": "/static/bg.jpg",
   "logo": "/static/logo.png",
-  "registrationOpen": false
+  "registrationOpen": false,
+  "defaultPath": "/main/all"
 }

From 6b773902e8dae36b2c4cf4c970fd1437cfdc13bc Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Thu, 23 Nov 2017 13:46:37 +0200
Subject: [PATCH 08/29] Fix mistake in flushMarker init, make startFetching
 behave properly with older statuses existing.

---
 src/components/timeline/timeline.js           |  4 ++--
 src/modules/statuses.js                       | 22 ++++++++++++-------
 .../timeline_fetcher.service.js               |  5 ++++-
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 10ad4561..660a8752 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -31,7 +31,7 @@ const Timeline = {
       return this.timeline.newStatusCount
     },
     newStatusCountStr () {
-      if (this.timeline.flushMarker > 0) {
+      if (this.timeline.flushMarker !== 0) {
         return ''
       } else {
         return ` (${this.newStatusCount})`
@@ -71,7 +71,7 @@ const Timeline = {
   },
   methods: {
     showNewStatuses () {
-      if (this.timeline.flushMarker) {
+      if (this.timeline.flushMarker !== 0) {
         this.$store.commit('clearTimeline', { timeline: this.timelineName })
         this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
         this.fetchOlderStatuses()
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 82a7eda1..18191424 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -9,7 +9,6 @@ export const defaultState = {
   notifications: [],
   favorites: new Set(),
   error: false,
-  flushMarker: 0,
   timelines: {
     mentions: {
       statuses: [],
@@ -23,7 +22,8 @@ export const defaultState = {
       loading: false,
       followers: [],
       friends: [],
-      viewing: 'statuses'
+      viewing: 'statuses',
+      flushMarker: 0
     },
     public: {
       statuses: [],
@@ -37,7 +37,8 @@ export const defaultState = {
       loading: false,
       followers: [],
       friends: [],
-      viewing: 'statuses'
+      viewing: 'statuses',
+      flushMarker: 0
     },
     user: {
       statuses: [],
@@ -51,7 +52,8 @@ export const defaultState = {
       loading: false,
       followers: [],
       friends: [],
-      viewing: 'statuses'
+      viewing: 'statuses',
+      flushMarker: 0
     },
     publicAndExternal: {
       statuses: [],
@@ -65,7 +67,8 @@ export const defaultState = {
       loading: false,
       followers: [],
       friends: [],
-      viewing: 'statuses'
+      viewing: 'statuses',
+      flushMarker: 0
     },
     friends: {
       statuses: [],
@@ -79,7 +82,8 @@ export const defaultState = {
       loading: false,
       followers: [],
       friends: [],
-      viewing: 'statuses'
+      viewing: 'statuses',
+      flushMarker: 0
     },
     tag: {
       statuses: [],
@@ -93,7 +97,8 @@ export const defaultState = {
       loading: false,
       followers: [],
       friends: [],
-      viewing: 'statuses'
+      viewing: 'statuses',
+      flushMarker: 0
     }
   }
 }
@@ -382,7 +387,8 @@ export const mutations = {
       loading: false,
       followers: [],
       friends: [],
-      viewing: 'statuses'
+      viewing: 'statuses',
+      flushMarker: 0
     }
 
     state.timelines[timeline] = emptyTimeline
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index a02d67d0..a4a80df0 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -38,7 +38,10 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
 }
 
 const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => {
-  fetchAndUpdate({timeline, credentials, store, showImmediately: true, userId, tag})
+  const rootState = store.rootState || store.state
+  const timelineData = rootState.statuses.timelines[camelCase(timeline)]
+  const showImmediately = timelineData.visibleStatuses.length === 0
+  fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
   const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
   return setInterval(boundFetchAndUpdate, 10000)
 }

From 1ade28429309cdd713d8ea1b393920121a0c9d36 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Thu, 23 Nov 2017 15:55:53 +0200
Subject: [PATCH 09/29] Fix content sizing to not allow empty scrolling, make
 panel-switcher not grow on mobile

---
 src/App.scss | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 9aa3ee98..4146e68b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -16,7 +16,12 @@ h4 {
 }
 
 #content {
-    padding-top: 60px;
+  box-sizing: border-box;
+  padding-top: 60px;
+  margin: auto;
+  min-height: 100vh;
+  max-width: 980px;
+  background-color: rgba(0,0,0,0.15);
 }
 
 .text-center {
@@ -157,15 +162,6 @@ main-router {
     margin: 0;
 }
 
-
-#content {
-    margin: auto;
-    min-height: 100vh;
-    max-width: 980px;
-    padding-bottom: 1em;
-    background-color: rgba(0,0,0,0.1);
-}
-
 .container > * {
     min-width: 0px;
 }
@@ -210,10 +206,11 @@ nav {
 .panel-switcher {
     display: none;
     width: 100%;
-
+    height: 46px;
     button {
         display: block;
         flex: 1;
+        max-height: 32px;
         margin: 0.5em;
         padding: 0.5em;
     }

From f02229fed266dfd2e23d0675b2cd7e7c9bd649e7 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Fri, 24 Nov 2017 23:55:46 +0200
Subject: [PATCH 10/29] Add specifity to active classes to make them override
 theme colors.

---
 src/components/favorite_button/favorite_button.vue | 2 +-
 src/components/retweet_button/retweet_button.vue   | 2 +-
 src/components/status/status.vue                   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 044e6796..dcf28e35 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -15,7 +15,7 @@
         color: orange;
       }
   }
-  .icon-star {
+  .favorite-button.icon-star {
       color: orange;
   }
 
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 3226d5c6..edbfef32 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -16,7 +16,7 @@
       color: $green;
      }
   }
-  .retweeted {
+  .icon-retweet.retweeted {
      color: $green;
   }
 </style>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 55c89e6c..d6c8cdb3 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -324,7 +324,7 @@
      color: $blue;
  }
 
- .icon-reply-active {
+ .icon-reply.icon-reply-active {
      color: $blue;
  }
 

From 326859464ca9fb2a7c9f2b4cc34f79e806776593 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Sat, 25 Nov 2017 00:09:28 +0200
Subject: [PATCH 11/29] Add the forgotten flex prop to make everything nice and
 tight again

---
 src/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.scss b/src/App.scss
index 4146e68b..95a653ce 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -22,6 +22,7 @@ h4 {
   min-height: 100vh;
   max-width: 980px;
   background-color: rgba(0,0,0,0.15);
+  align-content: flex-start;
 }
 
 .text-center {

From bcd10b34758b41cc09ec15153e9ca027fd4703f5 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Sat, 25 Nov 2017 12:57:55 +0200
Subject: [PATCH 12/29] Make star icon in notifications behave like the other
 icons..

---
 src/components/notifications/notifications.scss | 4 ++++
 src/components/notifications/notifications.vue  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index db7b0843..241f10b4 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -59,6 +59,10 @@
         color: $blue;
       }
 
+      .icon-star.lit {
+        color: orange;
+      }
+
       .status-content {
         margin: 0;
         max-height: 300px;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 64624873..176695b1 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -17,7 +17,7 @@
             <div v-if="notification.type === 'favorite'">
               <h1>
                 <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
-                <i class="fa icon-star"></i>
+                <i class="fa icon-star 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>
               <div class="notification-gradient" :style="hiderStyle"></div>

From 1f413bb816699f871747dd88100e0cbd0a4550ce Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Nov 2017 23:31:40 +0300
Subject: [PATCH 13/29] pasting images from clipboard, fuck ye

---
 src/components/post_status_form/post_status_form.js  | 8 ++++++++
 src/components/post_status_form/post_status_form.vue | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6fc84407..acc97c86 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -153,6 +153,14 @@ const PostStatusForm = {
     type (fileInfo) {
       return fileTypeService.fileType(fileInfo.mimetype)
     },
+    paste (e) {
+      if (e.clipboardData.files.length > 0) {
+        // Strangely, files property gets emptied after event propagation
+        // Trying to wrap it in array doesn't work. Plus I doubt it's possible
+        // to hold more than one file in clipboard.
+        this.dropFiles = [e.clipboardData.files[0]]
+      }
+    },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
         e.preventDefault()  // allow dropping text like before
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 19a00aeb..bb2329f3 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group base03-border" >
-        <textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
+        <textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize" @paste="paste"></textarea>
       </div>
       <div style="position:relative;" v-if="candidates">
         <div class="autocomplete-panel base05-background">

From fbee80474baf3bfc41656268e22395983811f2f7 Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Mon, 4 Dec 2017 19:08:33 +0100
Subject: [PATCH 14/29] Basic frontend changes for chat.

---
 config/index.js                        |  8 +++++++-
 package.json                           |  1 +
 src/components/nav_panel/nav_panel.vue |  5 +++++
 src/i18n/messages.js                   |  4 ++++
 src/main.js                            |  7 +++++--
 src/modules/users.js                   | 14 +++++++++++++-
 yarn.lock                              |  4 ++++
 7 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/config/index.js b/config/index.js
index 6652048c..c48d91b8 100644
--- a/config/index.js
+++ b/config/index.js
@@ -23,9 +23,15 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'https://social.heldscal.la/',
+        target: 'htts://localhost:4000/',
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
+      },
+      '/socket': {
+        target: 'htts://localhost:4000/',
+        changeOrigin: true,
+        cookieDomainRewrite: 'localhost',
+        ws: true
       }
     },
     // CSS Sourcemaps off by default because relative paths are "buggy"
diff --git a/package.json b/package.json
index e8d84274..4e98647b 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "localforage": "^1.5.0",
     "node-sass": "^3.10.1",
     "object-path": "^0.11.3",
+    "phoenix": "^1.3.0",
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
     "vue": "^2.3.4",
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index aea841e9..fa4000b0 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -7,6 +7,11 @@
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
+        <li v-if='currentUser'>
+          <router-link class="base00-background" to='/chat'>
+            {{ $t("nav.chat") }}
+          </router-link>
+        </li>
         <li v-if='currentUser'>
           <router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 9aeffdfa..ecb3557c 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -179,7 +179,11 @@ const fi = {
 }
 
 const en = {
+  chat: {
+    title: 'Chat'
+  },
   nav: {
+    chat: 'Local Chat',
     timeline: 'Timeline',
     mentions: 'Mentions',
     public_tl: 'Public Timeline',
diff --git a/src/main.js b/src/main.js
index 6c5bf83e..ca3bb955 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import UserProfile from './components/user_profile/user_profile.vue'
 import Settings from './components/settings/settings.vue'
 import Registration from './components/registration/registration.vue'
 import UserSettings from './components/user_settings/user_settings.vue'
+import Chat from './components/chat/chat.vue'
 
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
@@ -60,7 +61,8 @@ const store = new Vuex.Store({
     config: configModule
   },
   plugins: [createPersistedState(persistedStateOptions)],
-  strict: process.env.NODE_ENV !== 'production'
+  strict: false // Socket modifies itself, let's ignore this for now.
+  // strict: process.env.NODE_ENV !== 'production'
 })
 
 const i18n = new VueI18n({
@@ -90,7 +92,8 @@ window.fetch('/static/config.json')
       { name: 'mentions', path: '/:username/mentions', component: Mentions },
       { name: 'settings', path: '/settings', component: Settings },
       { name: 'registration', path: '/registration', component: Registration },
-      { name: 'user-settings', path: '/user-settings', component: UserSettings }
+      { name: 'user-settings', path: '/user-settings', component: UserSettings },
+      { name: 'chat', path: '/chat', component: Chat }
     ]
 
     const router = new VueRouter({
diff --git a/src/modules/users.js b/src/modules/users.js
index 30f8dc27..a75271a4 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,6 +1,7 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { compact, map, each, merge } from 'lodash'
 import { set } from 'vue'
+import { Socket } from 'phoenix'
 
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {
@@ -19,6 +20,9 @@ export const mergeOrAdd = (arr, obj, item) => {
 }
 
 export const mutations = {
+  setSocket (state, socket) {
+    state.socket = socket
+  },
   setMuted (state, { user: {id}, muted }) {
     const user = state.usersObject[id]
     set(user, 'muted', muted)
@@ -50,7 +54,8 @@ export const defaultState = {
   currentUser: false,
   loggingIn: false,
   users: [],
-  usersObject: {}
+  usersObject: {},
+  socket: null
 }
 
 const users = {
@@ -97,6 +102,13 @@ const users = {
                   // Set our new backend interactor
                   commit('setBackendInteractor', backendInteractorService(userCredentials))
 
+                  if (user.token) {
+                    // Set up websocket connection
+                    let socket = new Socket('/socket', {params: {token: user.token}})
+                    socket.connect()
+                    store.commit('setSocket', socket)
+                  }
+
                   // Start getting fresh tweets.
                   store.dispatch('startFetching', 'friends')
 
diff --git a/yarn.lock b/yarn.lock
index d0d2dde9..3fcd29ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4226,6 +4226,10 @@ phantomjs-prebuilt@^2.1.3, phantomjs-prebuilt@^2.1.7:
     request-progress "~2.0.1"
     which "~1.2.10"
 
+phoenix@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.3.0.tgz#1df2c27f986ee295e37c9983ec28ebac1d7f4a3e"
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"

From f4f63d32e2bc2622ebdfe7599cc8aca987ddcee4 Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Mon, 4 Dec 2017 23:15:03 +0200
Subject: [PATCH 15/29] Fix basicauth base64 encoding for unicode passwords.

---
 src/services/api/api.service.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index fa95b870..5b078bc8 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -43,6 +43,16 @@ let fetch = (url, options) => {
   return oldfetch(fullUrl, options)
 }
 
+// from https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
+let utoa = (str) => {
+  // first we use encodeURIComponent to get percent-encoded UTF-8,
+  // then we convert the percent encodings into raw bytes which
+  // can be fed into btoa.
+  return btoa(encodeURIComponent(str)
+              .replace(/%([0-9A-F]{2})/g,
+                       (match, p1) => { return String.fromCharCode('0x' + p1) }))
+}
+
 // Params
 // cropH
 // cropW
@@ -156,7 +166,7 @@ const register = (params) => {
 
 const authHeaders = (user) => {
   if (user && user.username && user.password) {
-    return { 'Authorization': `Basic ${btoa(`${user.username}:${user.password}`)}` }
+    return { 'Authorization': `Basic ${utoa(`${user.username}:${user.password}`)}` }
   } else {
     return { }
   }

From 0e51fac2b24c752513afe65736e98eb5fb5ec3af Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 11:02:41 +0100
Subject: [PATCH 16/29] Add missing component code.

---
 src/components/chat/chat.js  | 26 +++++++++++++++++++
 src/components/chat/chat.vue | 49 ++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 src/components/chat/chat.js
 create mode 100644 src/components/chat/chat.vue

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
new file mode 100644
index 00000000..3b84bd3d
--- /dev/null
+++ b/src/components/chat/chat.js
@@ -0,0 +1,26 @@
+const chat = {
+  data () {
+    return {
+      messages: [],
+      currentMessage: '',
+      socket: this.$store.state.users.socket,
+      channel: null
+    }
+  },
+  created () {
+    this.channel = this.socket.channel('chat:public')
+    this.channel.on('new_msg', (msg) => {
+      this.messages.push(msg)
+      this.messages = this.messages.slice(-19, 20)
+    })
+    this.channel.join()
+  },
+  methods: {
+    submit(message) {
+      this.channel.push('new_msg', {text: message}, 10000)
+      this.currentMessage = '';
+    }
+  }
+}
+
+export default chat;
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
new file mode 100644
index 00000000..9d3ab39c
--- /dev/null
+++ b/src/components/chat/chat.vue
@@ -0,0 +1,49 @@
+<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">
+          <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">
+        <input v-model="currentMessage" type="text" @keyup.enter="submit(currentMessage)">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./chat.js"></script>
+
+
+<style lang="scss">
+ .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;
+     input {
+         flex: auto;
+         margin: 0.5em;
+     }
+ }
+</style>

From 27be1e0fa3a9779a624012a8528801679721cb40 Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 11:47:10 +0100
Subject: [PATCH 17/29] Move chat to own module.

---
 src/components/chat/chat.js | 15 +++++----------
 src/main.js                 |  4 +++-
 src/modules/api.js          | 13 ++++++++++++-
 src/modules/chat.js         | 33 +++++++++++++++++++++++++++++++++
 src/modules/users.js        | 12 ++----------
 5 files changed, 55 insertions(+), 22 deletions(-)
 create mode 100644 src/modules/chat.js

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 3b84bd3d..fc942a30 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -1,23 +1,18 @@
 const chat = {
   data () {
     return {
-      messages: [],
       currentMessage: '',
-      socket: this.$store.state.users.socket,
       channel: null
     }
   },
-  created () {
-    this.channel = this.socket.channel('chat:public')
-    this.channel.on('new_msg', (msg) => {
-      this.messages.push(msg)
-      this.messages = this.messages.slice(-19, 20)
-    })
-    this.channel.join()
+  computed: {
+    messages () {
+      return this.$store.state.chat.messages
+    }
   },
   methods: {
     submit(message) {
-      this.channel.push('new_msg', {text: message}, 10000)
+      this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
       this.currentMessage = '';
     }
   }
diff --git a/src/main.js b/src/main.js
index ca3bb955..72b75a52 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
+import chatModule from './modules/chat.js'
 
 import VueTimeago from 'vue-timeago'
 import VueI18n from 'vue-i18n'
@@ -58,7 +59,8 @@ const store = new Vuex.Store({
     statuses: statusesModule,
     users: usersModule,
     api: apiModule,
-    config: configModule
+    config: configModule,
+    chat: chatModule
   },
   plugins: [createPersistedState(persistedStateOptions)],
   strict: false // Socket modifies itself, let's ignore this for now.
diff --git a/src/modules/api.js b/src/modules/api.js
index e61382eb..ccd6cfb7 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -1,10 +1,12 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import {isArray} from 'lodash'
+import { Socket } from 'phoenix'
 
 const api = {
   state: {
     backendInteractor: backendInteractorService(),
-    fetchers: {}
+    fetchers: {},
+    socket: null
   },
   mutations: {
     setBackendInteractor (state, backendInteractor) {
@@ -15,6 +17,9 @@ const api = {
     },
     removeFetcher (state, {timeline}) {
       delete state.fetchers[timeline]
+    },
+    setSocket (state, socket) {
+      state.socket = socket
     }
   },
   actions: {
@@ -37,6 +42,12 @@ const api = {
       const fetcher = store.state.fetchers[timeline]
       window.clearInterval(fetcher)
       store.commit('removeFetcher', {timeline})
+    },
+    initializeSocket (store, token) {
+      // Set up websocket connection
+      let socket = new Socket('/socket', {params: {token: token}})
+      socket.connect()
+      store.dispatch('initializeChat', socket)
     }
   }
 }
diff --git a/src/modules/chat.js b/src/modules/chat.js
new file mode 100644
index 00000000..b1244ebe
--- /dev/null
+++ b/src/modules/chat.js
@@ -0,0 +1,33 @@
+const chat = {
+  state: {
+    messages: [],
+    channel: null
+  },
+  mutations: {
+    setChannel (state, channel) {
+      state.channel = channel
+    },
+    addMessage (state, message) {
+      state.messages.push(message)
+      state.messages = state.messages.slice(-19, 20)
+    },
+    setMessages (state, messages) {
+      state.messages = messages.slice(-19, 20)
+    }
+  },
+  actions: {
+    initializeChat (store, socket) {
+      const channel = socket.channel('chat:public')
+      channel.on('new_msg', (msg) => {
+        store.commit('addMessage', msg)
+      })
+      channel.on('messages', ({messages}) => {
+        store.commit('setMessages', messages)
+      })
+      channel.join()
+      store.commit('setChannel', channel)
+    }
+  }
+}
+
+export default chat
diff --git a/src/modules/users.js b/src/modules/users.js
index a75271a4..8303ecc1 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,7 +1,6 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { compact, map, each, merge } from 'lodash'
 import { set } from 'vue'
-import { Socket } from 'phoenix'
 
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {
@@ -20,9 +19,6 @@ export const mergeOrAdd = (arr, obj, item) => {
 }
 
 export const mutations = {
-  setSocket (state, socket) {
-    state.socket = socket
-  },
   setMuted (state, { user: {id}, muted }) {
     const user = state.usersObject[id]
     set(user, 'muted', muted)
@@ -54,8 +50,7 @@ export const defaultState = {
   currentUser: false,
   loggingIn: false,
   users: [],
-  usersObject: {},
-  socket: null
+  usersObject: {}
 }
 
 const users = {
@@ -103,10 +98,7 @@ const users = {
                   commit('setBackendInteractor', backendInteractorService(userCredentials))
 
                   if (user.token) {
-                    // Set up websocket connection
-                    let socket = new Socket('/socket', {params: {token: user.token}})
-                    socket.connect()
-                    store.commit('setSocket', socket)
+                    store.dispatch('initializeSocket', user.token)
                   }
 
                   // Start getting fresh tweets.

From 6ad27959a696ea0e4f6fe43a98daf4b99bb973ff Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 11:49:40 +0100
Subject: [PATCH 18/29] Linting.

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

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index fc942a30..ef326d4a 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -11,11 +11,11 @@ const chat = {
     }
   },
   methods: {
-    submit(message) {
+    submit (message) {
       this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
-      this.currentMessage = '';
+      this.currentMessage = ''
     }
   }
 }
 
-export default chat;
+export default chat

From a03b92e252406a8469a9ffe871a6882b3aedb366 Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 12:09:54 +0100
Subject: [PATCH 19/29] Post on submit, not on enter.

---
 src/components/chat/chat.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 9d3ab39c..0c397472 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -18,7 +18,9 @@
         </div>
       </div>
       <div class="chat-input">
-        <input v-model="currentMessage" type="text" @keyup.enter="submit(currentMessage)">
+        <form @submit.prevent="submit(currentMessage)">
+          <input v-model="currentMessage" type="text" >
+        </form>
       </div>
     </div>
   </div>
@@ -41,9 +43,12 @@
  }
  .chat-input {
      display: flex;
-     input {
+     form {
          flex: auto;
-         margin: 0.5em;
+         input {
+             margin: 0.5em;
+             width: 100%;
+         }
      }
  }
 </style>

From 6c4e3a509a23a4f683aee02fcd0b186813ae3de0 Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Tue, 5 Dec 2017 14:20:34 +0100
Subject: [PATCH 20/29] Don't display if we don't have a chat.

---
 src/components/chat/chat.vue           | 2 +-
 src/components/nav_panel/nav_panel.js  | 3 +++
 src/components/nav_panel/nav_panel.vue | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 0c397472..488faf9a 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -7,7 +7,7 @@
     </div>
     <div class="panel-body base01-background">
       <div class="chat-window">
-        <div class="chat-message" v-for="message in messages">
+        <div class="chat-message" v-for="message in messages" :key="message.id">
           <span class="chat-avatar">
             <img :src="message.author.avatar" />
             {{message.author.username}}:
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index baeaaede..ea5d7ea4 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -2,6 +2,9 @@ const NavPanel = {
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
+    },
+    chat () {
+      return this.$store.state.chat.channel
     }
   }
 }
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index fa4000b0..ccc772a8 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -7,7 +7,7 @@
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li v-if='currentUser'>
+        <li v-if='chat && currentUser'>
           <router-link class="base00-background" to='/chat'>
             {{ $t("nav.chat") }}
           </router-link>

From 612fb183671783c3ac3eeea21428c024a47713b1 Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Thu, 7 Dec 2017 18:20:44 +0200
Subject: [PATCH 21/29] Add option for disabling chat.

---
 src/main.js        |  3 +++
 src/modules/api.js | 17 +++++++++++++----
 static/config.json |  3 ++-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/main.js b/src/main.js
index 72b75a52..a8ee5fda 100644
--- a/src/main.js
+++ b/src/main.js
@@ -82,6 +82,9 @@ window.fetch('/static/config.json')
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
     store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen })
+    if (data['chatDisabled']) {
+      store.dispatch('disableChat')
+    }
 
     const routes = [
       { name: 'root', path: '/', redirect: data['defaultPath'] || '/main/all' },
diff --git a/src/modules/api.js b/src/modules/api.js
index ccd6cfb7..c91fb97b 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -6,7 +6,8 @@ const api = {
   state: {
     backendInteractor: backendInteractorService(),
     fetchers: {},
-    socket: null
+    socket: null,
+    chatDisabled: false
   },
   mutations: {
     setBackendInteractor (state, backendInteractor) {
@@ -20,6 +21,9 @@ const api = {
     },
     setSocket (state, socket) {
       state.socket = socket
+    },
+    setChatDisabled (state, value) {
+      state.chatDisabled = value
     }
   },
   actions: {
@@ -45,9 +49,14 @@ const api = {
     },
     initializeSocket (store, token) {
       // Set up websocket connection
-      let socket = new Socket('/socket', {params: {token: token}})
-      socket.connect()
-      store.dispatch('initializeChat', socket)
+      if (!store.state.chatDisabled) {
+        let socket = new Socket('/socket', {params: {token: token}})
+        socket.connect()
+        store.dispatch('initializeChat', socket)
+      }
+    },
+    disableChat (store) {
+      store.commit('setChatDisabled', true)
     }
   }
 }
diff --git a/static/config.json b/static/config.json
index b186246b..880efca8 100644
--- a/static/config.json
+++ b/static/config.json
@@ -4,5 +4,6 @@
   "background": "/static/bg.jpg",
   "logo": "/static/logo.png",
   "registrationOpen": false,
-  "defaultPath": "/main/all"
+  "defaultPath": "/main/all",
+  "chatDisabled": false
 }

From ecb8acb155a77092b0661854b0ca4cf3c19ff56e Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Thu, 7 Dec 2017 19:03:26 +0200
Subject: [PATCH 22/29] Some css fixes.

Scale chat panel size to viewport height, fit message field to width.
---
 src/components/chat/chat.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 488faf9a..6c1e2c38 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -30,6 +30,11 @@
 
 
 <style lang="scss">
+ .chat-window {
+   max-height: 80vh;
+   overflow-y: auto;
+   overflow-x: hidden;
+ }
  .chat-message {
    padding: 0.2em 0.5em
  }
@@ -47,7 +52,7 @@
          flex: auto;
          input {
              margin: 0.5em;
-             width: 100%;
+             width: fill-available;
          }
      }
  }

From 05f053219bed449f50cf1e2f74ef15a28f0e4b06 Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Tue, 5 Dec 2017 11:03:41 +0200
Subject: [PATCH 23/29] Fixed width usercards in follow lists.

---
 src/components/user_card/user_card.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6c150a7a..dd14d1b4 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -59,9 +59,7 @@
   }
 
   .usercard {
-    width: -webkit-fill-available;
-    width: -moz-webkit-fill-available;
-    stretch: fill;
+    width: fill-available;
     margin: 0.2em 0 0.7em 0;
     border-radius: 10px;
     border-style: solid;

From 1db1529dece0d75c6ab63ed39bb101344d81e3a1 Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Thu, 7 Dec 2017 23:37:05 +0200
Subject: [PATCH 24/29] Suppress emoji fetch error on gs.

---
 src/main.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/main.js b/src/main.js
index 6c5bf83e..cee9fe9a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -121,10 +121,16 @@ window.fetch('/static/terms-of-service.html')
   })
 
 window.fetch('/api/pleroma/emoji.json')
-  .then((res) => res.json())
-  .then((values) => {
-    const emoji = Object.keys(values).map((key) => {
-      return { shortcode: key, image_url: values[key] }
-    })
-    store.dispatch('setOption', { name: 'emoji', value: emoji })
-  })
+  .then(
+    (res) => res.json()
+      .then(
+        (values) => {
+          const emoji = Object.keys(values).map((key) => {
+            return { shortcode: key, image_url: values[key] }
+          })
+          store.dispatch('setOption', { name: 'emoji', value: emoji })
+        },
+        (failure) => {}
+      ),
+    (error) => console.log(error)
+  )

From 07354cc45d0399d0465194700454b66e14ce41bb Mon Sep 17 00:00:00 2001
From: eal <eal@waifu.club>
Date: Thu, 7 Dec 2017 23:54:03 +0200
Subject: [PATCH 25/29] Don't show "read" button if there are no new
 notifications.

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

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 176695b1..b341fcef 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,7 +4,7 @@
       <div class="panel-heading base02-background base04">
         <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
         {{$t('notifications.notifications')}}
-        <button @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
+        <button v-if="unseenCount" @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
       </div>
       <div class="panel-body base03-border">
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>

From 6ce18b58bde5905a12e936a50f6b4920ba8985d0 Mon Sep 17 00:00:00 2001
From: Sebastian Huebner <sebastian@hueb-ner.de>
Date: Fri, 8 Dec 2017 17:24:06 +0100
Subject: [PATCH 26/29] update ger translation

---
 src/i18n/messages.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index ecb3557c..064224b0 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -1,5 +1,9 @@
 const de = {
+  chat: {
+      title: 'Chat'
+  }
   nav: {
+    chat: 'Lokaler Chat',
     timeline: 'Zeitleiste',
     mentions: 'Erwähnungen',
     public_tl: 'Lokale Zeitleiste',

From 15a5d9ef502cdb6effcaeedfabaa952ba70515e5 Mon Sep 17 00:00:00 2001
From: Sebastian Huebner <sebastian@hueb-ner.de>
Date: Fri, 8 Dec 2017 17:28:13 +0100
Subject: [PATCH 27/29] linting

---
 src/i18n/messages.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 064224b0..6b99a7b2 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -1,7 +1,7 @@
 const de = {
   chat: {
       title: 'Chat'
-  }
+  },
   nav: {
     chat: 'Lokaler Chat',
     timeline: 'Zeitleiste',

From 64b1b6bcb46b3313a988ccf41554706c821dc87d Mon Sep 17 00:00:00 2001
From: Sebastian Huebner <sebastian@hueb-ner.de>
Date: Fri, 8 Dec 2017 17:31:17 +0100
Subject: [PATCH 28/29] linting again

---
 src/i18n/messages.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index 6b99a7b2..4c5be151 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -1,6 +1,6 @@
 const de = {
   chat: {
-      title: 'Chat'
+    title: 'Chat'
   },
   nav: {
     chat: 'Lokaler Chat',

From f99e872c3561f8a3ae5bf96de92c783ea5959355 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Dec 2017 00:12:49 +0300
Subject: [PATCH 29/29] fix australian images

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

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 57ff2625..d6a51ffd 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -131,6 +131,7 @@
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */
                   max-height: 500px;
+                  image-orientation: from-image;
               }
           }
       }