Merge remote-tracking branch 'upstream/develop' into minimal-scopes-mode

* upstream/develop: (173 commits)
  Fix: Change condition
  fix typo
  update store according to retweeted status
  #433 - update sort by for conversation
  display replies_count right after reply icon
  expose replies_count from mastodon api
  Apparently, MastoAPI gives status in ancestors if you try opening a repeat...
  make side drawer use gesture service and fix its animations
  review/remove error hiding
  errata
  review
  #433 - sort conversation for retweets and clean up
  Revert "Merge branch 'revert-987b5162' into 'develop'"
  Revert "Merge branch 'mastoapi/friends-tl' into 'develop'"
  Add await to login action'
  Remove console log
  Fix warnings in user profile routing
  Add tests for gesture service, fix bug with perpendicular directions
  #255 - clean up autocomplete form
  #255 - clean up user settings page with self-closing html tags
  ...

src/App.js

@@ -8,6 +8,7 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan
 import ChatPanel from './components/chat_panel/chat_panel.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
+import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue'
 import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils'
 
 export default {
@@ -22,7 +23,8 @@ export default {
     WhoToFollowPanel,
     ChatPanel,
     MediaModal,
-    SideDrawer
+    SideDrawer,
+    MobilePostStatusModal
   },
   data: () => ({
     mobileActivePanel: 'timeline',

src/App.scss

@@ -154,7 +154,7 @@ input, textarea, .select {
     background: transparent;
     border: none;
     color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--inputText, --text, $fallback--text);
     margin: 0;
     padding: 0 2em 0 .2em;
     font-family: sans-serif;
@@ -671,6 +671,31 @@ nav {
   border-radius: var(--inputRadius, $fallback--inputRadius);
 }
 
+@keyframes modal-background-fadein {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.modal-view {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  animation-duration: 0.2s;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation-name: modal-background-fadein;
+}
+
 .button-icon {
   font-size: 1.2em;
 }
@@ -742,3 +767,54 @@ nav {
 .btn.btn-default {
   min-height: 28px;
 }
+
+.autocomplete {
+  &-panel {
+    position: relative;
+
+    &-body {
+      margin: 0 0.5em 0 0.5em;
+      border-radius: $fallback--tooltipRadius;
+      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      position: absolute;
+      z-index: 1;
+      box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+      // this doesn't match original but i don't care, making it uniform.
+      box-shadow: var(--popupShadow);
+      min-width: 75%;
+      background: $fallback--bg;
+      background: var(--bg, $fallback--bg);
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+
+  &-item {
+    cursor: pointer;
+    padding: 0.2em 0.4em 0.2em 0.4em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+    display: flex;
+
+    img {
+      width: 24px;
+      height: 24px;
+      object-fit: contain;
+    }
+
+    span {
+      line-height: 24px;
+      margin: 0 0.1em 0 0.2em;
+    }
+
+    small {
+      margin-left: .5em;
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
+    }
+
+    &.highlighted {
+      background-color: $fallback--fg;
+      background-color: var(--lightBg, $fallback--fg);
+    }
+  }
+}

src/App.vue

@@ -50,6 +50,7 @@
       <media-modal></media-modal>
     </div>
     <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
+    <MobilePostStatusModal />
   </div>
 </template>
 

src/boot/after_store.js

@@ -4,10 +4,11 @@ import routes from './routes'
 
 import App from '../App.vue'
 
-const afterStoreSetup = ({ store, i18n }) => {
-  window.fetch('/api/statusnet/config.json')
-    .then((res) => res.json())
-    .then((data) => {
+const getStatusnetConfig = async ({ store }) => {
+  try {
+    const res = await window.fetch('/api/statusnet/config.json')
+    if (res.ok) {
+      const data = await res.json()
       const { name, closed: registrationClosed, textlimit, uploadlimit, server, vapidPublicKey } = data.site
 
       store.dispatch('setInstanceOption', { name: 'name', value: name })
@@ -28,16 +29,32 @@ const afterStoreSetup = ({ store, i18n }) => {
         store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
       }
 
-      var apiConfig = data.site.pleromafe
+      return data.site.pleromafe
+    } else {
+      throw (res)
+    }
+  } catch (error) {
+    console.error('Could not load statusnet config, potentially fatal')
+    console.error(error)
+  }
+}
 
-      window.fetch('/static/config.json')
-        .then((res) => res.json())
-        .catch((err) => {
+const getStaticConfig = async () => {
+  try {
+    const res = await window.fetch('/static/config.json')
+    if (res.ok) {
+      return res.json()
+    } else {
+      throw (res)
+    }
+  } catch (error) {
     console.warn('Failed to load static/config.json, continuing without it.')
-          console.warn(err)
+    console.warn(error)
     return {}
-        })
-        .then((staticConfig) => {
+  }
+}
+
+const setSettings = async ({ apiConfig, staticConfig, store }) => {
   const overrides = window.___pleromafe_dev_overrides || {}
   const env = window.___pleromafe_mode.NODE_ENV
 
@@ -51,7 +68,7 @@ const afterStoreSetup = ({ store, i18n }) => {
   }
 
   const copyInstanceOption = (name) => {
-            store.dispatch('setInstanceOption', {name, value: config[name]})
+    store.dispatch('setInstanceOption', { name, value: config[name] })
   }
 
   copyInstanceOption('nsfwCensorImage')
@@ -80,6 +97,7 @@ const afterStoreSetup = ({ store, i18n }) => {
   copyInstanceOption('showInstanceSpecificPanel')
   copyInstanceOption('minimalScopesMode')
   copyInstanceOption('formattingOptionsEnabled')
+  copyInstanceOption('hideMutedPosts')
   copyInstanceOption('collapseMessageWithSubject')
   copyInstanceOption('loginMethod')
   copyInstanceOption('scopeCopy')
@@ -96,8 +114,136 @@ const afterStoreSetup = ({ store, i18n }) => {
   }
 
   return store.dispatch('setTheme', config['theme'])
+}
+
+const getTOS = async ({ store }) => {
+  try {
+    const res = await window.fetch('/static/terms-of-service.html')
+    if (res.ok) {
+      const html = await res.text()
+      store.dispatch('setInstanceOption', { name: 'tos', value: html })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    console.warn("Can't load TOS")
+    console.warn(e)
+  }
+}
+
+const getInstancePanel = async ({ store }) => {
+  try {
+    const res = await window.fetch('/instance/panel.html')
+    if (res.ok) {
+      const html = await res.text()
+      store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    console.warn("Can't load instance panel")
+    console.warn(e)
+  }
+}
+
+const getStaticEmoji = async ({ store }) => {
+  try {
+    const res = await window.fetch('/static/emoji.json')
+    if (res.ok) {
+      const values = await res.json()
+      const emoji = Object.keys(values).map((key) => {
+        return { shortcode: key, image_url: false, 'utf': values[key] }
       })
-        .then(() => {
+      store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    console.warn("Can't load static emoji")
+    console.warn(e)
+  }
+}
+
+// This is also used to indicate if we have a 'pleroma backend' or not.
+// Somewhat weird, should probably be somewhere else.
+const getCustomEmoji = async ({ store }) => {
+  try {
+    const res = await window.fetch('/api/pleroma/emoji.json')
+    if (res.ok) {
+      const values = await res.json()
+      const emoji = Object.keys(values).map((key) => {
+        return { shortcode: key, image_url: values[key] }
+      })
+      store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
+      store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false })
+    console.warn("Can't load custom emojis, maybe not a Pleroma instance?")
+    console.warn(e)
+  }
+}
+
+const getNodeInfo = async ({ store }) => {
+  try {
+    const res = await window.fetch('/nodeinfo/2.0.json')
+    if (res.ok) {
+      const data = await res.json()
+      const metadata = data.metadata
+
+      const features = metadata.features
+      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
+      store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
+      store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
+
+      store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
+      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })
+
+      const suggestions = metadata.suggestions
+      store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
+      store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
+
+      const software = data.software
+      store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
+
+      const frontendVersion = window.___pleromafe_commit_hash
+      store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    console.warn('Could not load nodeinfo')
+    console.warn(e)
+  }
+}
+
+const afterStoreSetup = async ({ store, i18n }) => {
+  if (store.state.config.customTheme) {
+    // This is a hack to deal with async loading of config.json and themes
+    // See: style_setter.js, setPreset()
+    window.themeLoaded = true
+    store.dispatch('setOption', {
+      name: 'customTheme',
+      value: store.state.config.customTheme
+    })
+  }
+
+  const apiConfig = await getStatusnetConfig({ store })
+  const staticConfig = await getStaticConfig()
+  await setSettings({ store, apiConfig, staticConfig })
+  await getTOS({ store })
+  await getInstancePanel({ store })
+  await getStaticEmoji({ store })
+  await getCustomEmoji({ store })
+  await getNodeInfo({ store })
+
+  // Now we have the server settings and can try logging in
+  if (store.state.oauth.token) {
+    await store.dispatch('loginUser', store.state.oauth.token)
+  }
+
   const router = new VueRouter({
     mode: 'history',
     routes: routes(store),
@@ -110,71 +256,13 @@ const afterStoreSetup = ({ store, i18n }) => {
   })
 
   /* eslint-disable no-new */
-          new Vue({
+  return new Vue({
     router,
     store,
     i18n,
     el: '#app',
     render: h => h(App)
   })
-        })
-    })
-
-  window.fetch('/static/terms-of-service.html')
-    .then((res) => res.text())
-    .then((html) => {
-      store.dispatch('setInstanceOption', { name: 'tos', value: 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('setInstanceOption', { name: 'customEmoji', value: emoji })
-            store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
-          },
-          (failure) => {
-            store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false })
-          }
-        ),
-      (error) => console.log(error)
-    )
-
-  window.fetch('/static/emoji.json')
-    .then((res) => res.json())
-    .then((values) => {
-      const emoji = Object.keys(values).map((key) => {
-        return { shortcode: key, image_url: false, 'utf': values[key] }
-      })
-      store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
-    })
-
-  window.fetch('/instance/panel.html')
-    .then((res) => res.text())
-    .then((html) => {
-      store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
-    })
-
-  window.fetch('/nodeinfo/2.0.json')
-    .then((res) => res.json())
-    .then((data) => {
-      const metadata = data.metadata
-
-      const features = metadata.features
-      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
-      store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
-      store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
-
-      store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
-
-      const suggestions = metadata.suggestions
-      store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
-      store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
-    })
 }
 
 export default afterStoreSetup

src/boot/routes.js

@@ -13,7 +13,6 @@ import FollowRequests from 'components/follow_requests/follow_requests.vue'
 import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
 import UserSearch from 'components/user_search/user_search.vue'
 import Notifications from 'components/notifications/notifications.vue'
-import UserPanel from 'components/user_panel/user_panel.vue'
 import LoginForm from 'components/login_form/login_form.vue'
 import ChatPanel from 'components/chat_panel/chat_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
@@ -43,7 +42,6 @@ export default (store) => {
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
     { name: 'user-settings', path: '/user-settings', component: UserSettings },
     { name: 'notifications', path: '/:username/notifications', component: Notifications },
-    { name: 'new-status', path: '/:username/new-status', component: UserPanel },
     { name: 'login', path: '/login', component: LoginForm },
     { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
     { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },

src/components/attachment/attachment.vue

@@ -160,6 +160,7 @@
 
   .hider {
     position: absolute;
+    right: 0;
     white-space: nowrap;
     margin: 10px;
     padding: 5px;

src/components/basic_user_card/basic_user_card.js

@@ -1,4 +1,4 @@
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -12,7 +12,7 @@ const BasicUserCard = {
     }
   },
   components: {
-    UserCardContent,
+    UserCard,
     UserAvatar
   },
   methods: {

src/components/basic_user_card/basic_user_card.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="user-card">
+  <div class="basic-user-card">
     <router-link :to="userProfileLink(user)">
       <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
-    <div class="user-card-expanded-content" v-if="userExpanded">
-      <user-card-content :user="user" :switcher="false"></user-card-content>
+    <div class="basic-user-card-expanded-content" v-if="userExpanded">
+      <UserCard :user="user" :rounded="true" :bordered="true"/>
     </div>
-    <div class="user-card-collapsed-content" v-else>
-      <div :title="user.name" class="user-card-user-name">
-        <span v-if="user.name_html" v-html="user.name_html"></span>
-        <span v-else>{{ user.name }}</span>
+    <div class="basic-user-card-collapsed-content" v-else>
+      <div :title="user.name" class="basic-user-card-user-name">
+        <span v-if="user.name_html" class="basic-user-card-user-name-value" v-html="user.name_html"></span>
+        <span v-else class="basic-user-card-user-name-value">{{ user.name }}</span>
       </div>
       <div>
-        <router-link class="user-card-screen-name" :to="userProfileLink(user)">
+        <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
           @{{user.screen_name}}
         </router-link>
       </div>
@@ -26,15 +26,15 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.user-card {
+.basic-user-card {
   display: flex;
   flex: 1 0;
+  margin: 0;
   padding-top: 0.6em;
   padding-right: 1em;
   padding-bottom: 0.6em;
   padding-left: 1em;
   border-bottom: 1px solid;
-  margin: 0;
   border-bottom-color: $fallback--border;
   border-bottom-color: var(--border, $fallback--border);
 
@@ -52,28 +52,19 @@
       width: 16px;
       vertical-align: middle;
     }
+
+    &-value {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   &-expanded-content {
     flex: 1;
     margin-left: 0.7em;
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-    border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-width: 1px;
-    overflow: hidden;
-
-    .panel-heading {
-      background: transparent;
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    p {
-      margin-bottom: 0;
-    }
   }
 }
 </style>

src/components/block_card/block_card.js

@@ -9,7 +9,7 @@ const BlockCard = {
   },
   computed: {
     user () {
-      return this.$store.getters.userById(this.userId)
+      return this.$store.getters.findUser(this.userId)
     },
     blocked () {
       return this.user.statusnet_blocking

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

@@ -1,5 +1,4 @@
 import Conversation from '../conversation/conversation.vue'
-import { find } from 'lodash'
 
 const conversationPage = {
   components: {
@@ -8,8 +7,8 @@ const conversationPage = {
   computed: {
     statusoid () {
       const id = this.$route.params.id
-      const statuses = this.$store.state.statuses.allStatuses
-      const status = find(statuses, {id})
+      const statuses = this.$store.state.statuses.allStatusesObject
+      const status = statuses[id]
 
       return status
     }

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

@@ -1,5 +1,9 @@
 <template>
-  <conversation :collapsable="false" :statusoid="statusoid"></conversation>
+  <conversation
+    :collapsable="false"
+    isPage="true"
+    :statusoid="statusoid"
+  ></conversation>
 </template>
 
 <script src="./conversation-page.js"></script>

src/components/conversation/conversation.js

@@ -1,9 +1,12 @@
-import { reduce, filter } from 'lodash'
+import { reduce, filter, findIndex } from 'lodash'
+import { set } from 'vue'
 import Status from '../status/status.vue'
 
 const sortById = (a, b) => {
-  const seqA = Number(a.id)
-  const seqB = Number(b.id)
+  const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
+  const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
+  const seqA = Number(idA)
+  const seqB = Number(idB)
   const isSeqA = !Number.isNaN(seqA)
   const isSeqB = !Number.isNaN(seqB)
   if (isSeqA && isSeqB) {
@@ -13,29 +16,53 @@ const sortById = (a, b) => {
   } else if (!isSeqA && isSeqB) {
     return 1
   } else {
-    return a.id < b.id ? -1 : 1
+    return idA < idB ? -1 : 1
   }
 }
 
-const sortAndFilterConversation = (conversation) => {
+const sortAndFilterConversation = (conversation, statusoid) => {
+  if (statusoid.type === 'retweet') {
+    conversation = filter(
+      conversation,
+      (status) => (status.type === 'retweet' || status.id !== statusoid.retweeted_status.id)
+    )
+  } else {
     conversation = filter(conversation, (status) => status.type !== 'retweet')
+  }
   return conversation.filter(_ => _).sort(sortById)
 }
 
 const conversation = {
   data () {
     return {
-      highlight: null
+      highlight: null,
+      expanded: false,
+      converationStatusIds: []
     }
   },
   props: [
     'statusoid',
-    'collapsable'
+    'collapsable',
+    'isPage'
   ],
+  created () {
+    if (this.isPage) {
+      this.fetchConversation()
+    }
+  },
   computed: {
     status () {
       return this.statusoid
     },
+    idsToShow () {
+      if (this.converationStatusIds.length > 0) {
+        return this.converationStatusIds
+      } else if (this.statusId) {
+        return [this.statusId]
+      } else {
+        return []
+      }
+    },
     statusId () {
       if (this.statusoid.retweeted_status) {
         return this.statusoid.retweeted_status.id
@@ -48,10 +75,22 @@ const conversation = {
         return []
       }
 
-      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)
+      if (!this.isExpanded) {
+        return [this.status]
+      }
+
+      const statusesObject = this.$store.state.statuses.allStatusesObject
+      const conversation = this.idsToShow.reduce((acc, id) => {
+        acc.push(statusesObject[id])
+        return acc
+      }, [])
+
+      const statusIndex = findIndex(conversation, { id: this.statusId })
+      if (statusIndex !== -1) {
+        conversation[statusIndex] = this.status
+      }
+
+      return sortAndFilterConversation(conversation, this.status)
     },
     replies () {
       let i = 1
@@ -69,23 +108,34 @@ const conversation = {
         i++
         return result
       }, {})
+    },
+    isExpanded () {
+      return this.expanded || this.isPage
     }
   },
   components: {
     Status
   },
-  created () {
-    this.fetchConversation()
-  },
   watch: {
-    '$route': 'fetchConversation'
+    '$route': 'fetchConversation',
+    expanded (value) {
+      if (value) {
+        this.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 }))
+        this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
+          .then(({ancestors, descendants}) => {
+            this.$store.dispatch('addNewStatuses', { statuses: ancestors })
+            this.$store.dispatch('addNewStatuses', { statuses: descendants })
+            set(this, 'converationStatusIds', [].concat(
+              ancestors.map(_ => _.id).filter(_ => _ !== this.statusId),
+              this.statusId,
+              descendants.map(_ => _.id).filter(_ => _ !== this.statusId)))
+          })
           .then(() => this.setHighlight(this.statusId))
       } else {
         const id = this.$route.params.id
@@ -98,10 +148,19 @@ const conversation = {
       return this.replies[id] || []
     },
     focused (id) {
-      return id === this.statusId
+      return (this.isExpanded) && id === this.status.id
     },
     setHighlight (id) {
       this.highlight = id
+    },
+    getHighlight () {
+      return this.isExpanded ? this.highlight : null
+    },
+    toggleExpanded () {
+      this.expanded = !this.expanded
+      if (!this.expanded) {
+        this.setHighlight(null)
+      }
     }
   }
 }

src/components/conversation/conversation.vue

@@ -1,26 +1,42 @@
 <template>
-  <div class="timeline panel panel-default">
-    <div class="panel-heading conversation-heading">
+  <div class="timeline panel-default" :class="[isExpanded ? 'panel' : 'panel-disabled']">
+    <div v-if="isExpanded" class="panel-heading conversation-heading">
       <span class="title"> {{ $t('timeline.conversation') }} </span>
       <span v-if="collapsable">
-        <a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a>
+        <a href="#" @click.prevent="toggleExpanded">{{ $t('timeline.collapse') }}</a>
       </span>
     </div>
-    <div class="panel-body">
-      <div class="timeline">
     <status
       v-for="status in conversation"
-          @goto="setHighlight" :key="status.id"
-          :inlineExpanded="collapsable" :statusoid="status"
-          :expandable='false' :focused="focused(status.id)"
-          :inConversation='true'
-          :highlight="highlight"
+      @goto="setHighlight"
+      @toggleExpanded="toggleExpanded"
+      :key="status.id"
+      :inlineExpanded="collapsable"
+      :statusoid="status"
+      :expandable='!expanded'
+      :focused="focused(status.id)"
+      :inConversation="isExpanded"
+      :highlight="getHighlight()"
       :replies="getReplies(status.id)"
-          class="status-fadein">
-        </status>
-      </div>
-    </div>
+      class="status-fadein panel-body"
+    />
   </div>
 </template>
 
 <script src="./conversation.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.timeline {
+  .panel-disabled {
+    .status-el {
+      border-left: none;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+      border-color: var(--border, $fallback--border);
+      border-radius: 0;
+    }
+  }
+}
+</style>

src/components/emoji-input/emoji-input.js

@@ -0,0 +1,107 @@
+import Completion from '../../services/completion/completion.js'
+import { take, filter, map } from 'lodash'
+
+const EmojiInput = {
+  props: [
+    'value',
+    'placeholder',
+    'type',
+    'classname'
+  ],
+  data () {
+    return {
+      highlighted: 0,
+      caret: 0
+    }
+  },
+  computed: {
+    suggestions () {
+      const firstchar = this.textAtCaret.charAt(0)
+      if (firstchar === ':') {
+        if (this.textAtCaret === ':') { return }
+        const matchedEmoji = filter(this.emoji.concat(this.customEmoji), (emoji) => emoji.shortcode.startsWith(this.textAtCaret.slice(1)))
+        if (matchedEmoji.length <= 0) {
+          return false
+        }
+        return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
+          shortcode: `:${shortcode}:`,
+          utf: utf || '',
+          // eslint-disable-next-line camelcase
+          img: utf ? '' : this.$store.state.instance.server + image_url,
+          highlighted: index === this.highlighted
+        }))
+      } else {
+        return false
+      }
+    },
+    textAtCaret () {
+      return (this.wordAtCaret || {}).word || ''
+    },
+    wordAtCaret () {
+      const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
+      return word
+    },
+    emoji () {
+      return this.$store.state.instance.emoji || []
+    },
+    customEmoji () {
+      return this.$store.state.instance.customEmoji || []
+    }
+  },
+  methods: {
+    replace (replacement) {
+      const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
+      this.$emit('input', newValue)
+      this.caret = 0
+    },
+    replaceEmoji (e) {
+      const len = this.suggestions.length || 0
+      if (this.textAtCaret === ':' || e.ctrlKey) { return }
+      if (len > 0) {
+        e.preventDefault()
+        const emoji = this.suggestions[this.highlighted]
+        const replacement = emoji.utf || (emoji.shortcode + ' ')
+        const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
+        this.$emit('input', newValue)
+        this.caret = 0
+        this.highlighted = 0
+      }
+    },
+    cycleBackward (e) {
+      const len = this.suggestions.length || 0
+      if (len > 0) {
+        e.preventDefault()
+        this.highlighted -= 1
+        if (this.highlighted < 0) {
+          this.highlighted = this.suggestions.length - 1
+        }
+      } else {
+        this.highlighted = 0
+      }
+    },
+    cycleForward (e) {
+      const len = this.suggestions.length || 0
+      if (len > 0) {
+        if (e.shiftKey) { return }
+        e.preventDefault()
+        this.highlighted += 1
+        if (this.highlighted >= len) {
+          this.highlighted = 0
+        }
+      } else {
+        this.highlighted = 0
+      }
+    },
+    onKeydown (e) {
+      e.stopPropagation()
+    },
+    onInput (e) {
+      this.$emit('input', e.target.value)
+    },
+    setCaret ({target: {selectionStart}}) {
+      this.caret = selectionStart
+    }
+  }
+}
+
+export default EmojiInput

src/components/emoji-input/emoji-input.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="emoji-input">
+    <input
+      v-if="type !== 'textarea'"
+      :class="classname"
+      :type="type"
+      :value="value"
+      :placeholder="placeholder"
+      @input="onInput"
+      @click="setCaret"
+      @keyup="setCaret"
+      @keydown="onKeydown"
+      @keydown.down="cycleForward"
+      @keydown.up="cycleBackward"
+      @keydown.shift.tab="cycleBackward"
+      @keydown.tab="cycleForward"
+      @keydown.enter="replaceEmoji"
+    />
+    <textarea
+      v-else
+      :class="classname"
+      :value="value"
+      :placeholder="placeholder"
+      @input="onInput"
+      @click="setCaret"
+      @keyup="setCaret"
+      @keydown="onKeydown"
+      @keydown.down="cycleForward"
+      @keydown.up="cycleBackward"
+      @keydown.shift.tab="cycleBackward"
+      @keydown.tab="cycleForward"
+      @keydown.enter="replaceEmoji"
+    ></textarea>
+    <div class="autocomplete-panel" v-if="suggestions">
+      <div class="autocomplete-panel-body">
+        <div
+          v-for="(emoji, index) in suggestions"
+          :key="index"
+          @click="replace(emoji.utf || (emoji.shortcode + ' '))"
+          class="autocomplete-item"
+          :class="{ highlighted: emoji.highlighted }"
+        >
+          <span v-if="emoji.img">
+            <img :src="emoji.img" />
+          </span>
+          <span v-else>{{emoji.utf}}</span>
+          <span>{{emoji.shortcode}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji-input.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.emoji-input {
+  .form-control {
+    width: 100%;
+  }
+}
+</style>

src/components/follow_card/follow_card.js

@@ -1,4 +1,5 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 
 const FollowCard = {
@@ -14,13 +15,17 @@ const FollowCard = {
     }
   },
   components: {
-    BasicUserCard
+    BasicUserCard,
+    RemoteFollow
   },
   computed: {
     isMe () { return this.$store.state.users.currentUser.id === this.user.id },
     following () { return this.updated ? this.updated.following : this.user.following },
     showFollow () {
       return !this.following || this.updated && !this.updated.following
+    },
+    loggedIn () {
+      return this.$store.state.users.currentUser
     }
   },
   methods: {

src/components/follow_card/follow_card.vue

@@ -4,9 +4,12 @@
       <span class="faint" v-if="!noFollowsYou && user.follows_you">
         {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
       </span>
+      <div class="follow-card-follow-button" v-if="showFollow && !loggedIn">
+        <RemoteFollow :user="user" />
+      </div>
       <button
-        v-if="showFollow"
-        class="btn btn-default"
+        v-if="showFollow && loggedIn"
+        class="btn btn-default follow-card-follow-button"
         @click="followUser"
         :disabled="inProgress"
         :title="requestSent ? $t('user_card.follow_again') : ''"
@@ -21,7 +24,7 @@
           {{ $t('user_card.follow') }}
         </template>
       </button>
-      <button v-if="following" class="btn btn-default pressed" @click="unfollowUser" :disabled="inProgress">
+      <button v-if="following" class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
         <template v-if="inProgress">
           {{ $t('user_card.follow_progress') }}
         </template>
@@ -36,15 +39,17 @@
 <script src="./follow_card.js"></script>
 
 <style lang="scss">
-.follow-card-content-container {
+.follow-card {
+  &-content-container {
     flex-shrink: 0;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     flex-wrap: wrap;
     line-height: 1.5em;
+  }
 
-  .btn {
+  &-follow-button {
     margin-top: 0.5em;
     margin-left: auto;
     width: 10em;

src/components/gallery/gallery.vue

@@ -27,7 +27,6 @@
   align-content: stretch;
   flex-grow: 1;
   margin-top: 0.5em;
-  margin-bottom: 0.25em;
 
   .attachments, .attachment {
     margin: 0 0.5em 0 0;

src/components/image_cropper/image_cropper.js

@@ -31,6 +31,9 @@ const ImageCropper = {
     saveButtonLabel: {
       type: String
     },
+    saveWithoutCroppingButtonlabel: {
+      type: String
+    },
     cancelButtonLabel: {
       type: String
     }
@@ -48,6 +51,9 @@ const ImageCropper = {
     saveText () {
       return this.saveButtonLabel || this.$t('image_cropper.save')
     },
+    saveWithoutCroppingText () {
+      return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
+    },
     cancelText () {
       return this.cancelButtonLabel || this.$t('image_cropper.cancel')
     },
@@ -67,7 +73,19 @@ const ImageCropper = {
     submit () {
       this.submitting = true
       this.avatarUploadError = null
-      this.submitHandler(this.cropper, this.filename)
+      this.submitHandler(this.cropper, this.file)
+        .then(() => this.destroy())
+        .catch((err) => {
+          this.submitError = err
+        })
+        .finally(() => {
+          this.submitting = false
+        })
+    },
+    submitWithoutCropping () {
+      this.submitting = true
+      this.avatarUploadError = null
+      this.submitHandler(false, this.dataUrl)
         .then(() => this.destroy())
         .catch((err) => {
           this.submitError = err
@@ -88,14 +106,14 @@ const ImageCropper = {
     readFile () {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
+        this.file = fileInput.files[0]
         let reader = new window.FileReader()
         reader.onload = (e) => {
           this.dataUrl = e.target.result
           this.$emit('open')
         }
-        reader.readAsDataURL(fileInput.files[0])
-        this.filename = fileInput.files[0].name || 'unknown'
-        this.$emit('changed', fileInput.files[0], reader)
+        reader.readAsDataURL(this.file)
+        this.$emit('changed', this.file, reader)
       }
     },
     clearError () {

src/components/image_cropper/image_cropper.vue

@@ -7,6 +7,7 @@
       <div class="image-cropper-buttons-wrapper">
         <button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button>
         <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
+        <button class="btn" type="button" :disabled="submitting" @click="submitWithoutCropping" v-text="saveWithoutCroppingText"></button>
         <i class="icon-spin4 animate-spin" v-if="submitting"></i>
       </div>
       <div class="alert error" v-if="submitError">
@@ -36,7 +37,11 @@
   }
 
   &-buttons-wrapper {
-    margin-top: 15px;
+    margin-top: 10px;
+
+    button {
+      margin-top: 5px;
+    }
   }
 }
 </style>

src/components/link-preview/link-preview.vue

@@ -23,6 +23,7 @@
   flex-direction: row;
   cursor: pointer;
   overflow: hidden;
+  margin-top: 0.5em;
 
   .card-image {
     flex-shrink: 0;

src/components/media_modal/media_modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="modal-view" v-if="showing" @click.prevent="hide">
+  <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
     <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
     <VideoAttachment
       class="modal-image"
@@ -32,18 +32,7 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.modal-view {
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
-
+.media-modal-view {
   &:hover {
     .modal-view-button-arrow {
       opacity: 0.75;

src/components/media_upload/media_upload.js

@@ -20,7 +20,7 @@ const mediaUpload = {
         return
       }
       const formData = new FormData()
-      formData.append('media', file)
+      formData.append('file', file)
 
       self.$emit('uploading')
       self.uploading = true

src/components/mobile_post_status_modal/mobile_post_status_modal.js

@@ -0,0 +1,91 @@
+import PostStatusForm from '../post_status_form/post_status_form.vue'
+import { throttle } from 'lodash'
+
+const MobilePostStatusModal = {
+  components: {
+    PostStatusForm
+  },
+  data () {
+    return {
+      hidden: false,
+      postFormOpen: false,
+      scrollingDown: false,
+      inputActive: false,
+      oldScrollPos: 0,
+      amountScrolled: 0
+    }
+  },
+  created () {
+    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleOSK)
+  },
+  destroyed () {
+    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleOSK)
+  },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    isHidden () {
+      return this.hidden || this.inputActive
+    }
+  },
+  methods: {
+    openPostForm () {
+      this.postFormOpen = true
+      this.hidden = true
+
+      const el = this.$el.querySelector('textarea')
+      this.$nextTick(function () {
+        el.focus()
+      })
+    },
+    closePostForm () {
+      this.postFormOpen = false
+      this.hidden = false
+    },
+    handleOSK () {
+      // This is a big hack: we're guessing from changed window sizes if the
+      // on-screen keyboard is active or not. This is only really important
+      // for phones in portrait mode and it's more important to show the button
+      // in normal scenarios on all phones, than it is to hide it when the
+      // keyboard is active.
+      // Guesswork based on https://www.mydevice.io/#compare-devices
+
+      // for example, iphone 4 and android phones from the same time period
+      const smallPhone = window.innerWidth < 350
+      const smallPhoneKbOpen = smallPhone && window.innerHeight < 345
+
+      const biggerPhone = !smallPhone && window.innerWidth < 450
+      const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
+      if (smallPhoneKbOpen || biggerPhoneKbOpen) {
+        this.inputActive = true
+      } else {
+        this.inputActive = false
+      }
+    },
+    handleScroll: throttle(function () {
+      const scrollAmount = window.scrollY - this.oldScrollPos
+      const scrollingDown = scrollAmount > 0
+
+      if (scrollingDown !== this.scrollingDown) {
+        this.amountScrolled = 0
+        this.scrollingDown = scrollingDown
+        if (!scrollingDown) {
+          this.hidden = false
+        }
+      } else if (scrollingDown) {
+        this.amountScrolled += scrollAmount
+        if (this.amountScrolled > 100 && !this.hidden) {
+          this.hidden = true
+        }
+      }
+
+      this.oldScrollPos = window.scrollY
+      this.scrollingDown = scrollingDown
+    }, 100)
+  }
+}
+
+export default MobilePostStatusModal

src/components/mobile_post_status_modal/mobile_post_status_modal.vue

@@ -0,0 +1,76 @@
+<template>
+<div v-if="currentUser">
+  <div
+    class="post-form-modal-view modal-view"
+    v-show="postFormOpen"
+    @click="closePostForm"
+  >
+    <div class="post-form-modal-panel panel" @click.stop="">
+      <div class="panel-heading">{{$t('post_status.new_status')}}</div>
+      <PostStatusForm class="panel-body" @posted="closePostForm"/>
+    </div>
+  </div>
+  <button
+    class="new-status-button"
+    :class="{ 'hidden': isHidden }"
+    @click="openPostForm"
+  >
+    <i class="icon-edit" />
+  </button>
+</div>
+</template>
+
+<script src="./mobile_post_status_modal.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.post-form-modal-view {
+  max-height: 100%;
+  display: block;
+}
+
+.post-form-modal-panel {
+  flex-shrink: 0;
+  margin: 25% 0 4em 0;
+  width: 100%;
+}
+
+.new-status-button {
+  width: 5em;
+  height: 5em;
+  border-radius: 100%;
+  position: fixed;
+  bottom: 1.5em;
+  right: 1.5em;
+  // TODO: this needs its own color, it has to stand out enough and link color
+  // is not very optimal for this particular use.
+  background-color: $fallback--fg;
+  background-color: var(--btn, $fallback--fg);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+
+  transition: 0.35s transform;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+
+  &.hidden {
+    transform: translateY(150%);
+  }
+
+  i {
+    font-size: 1.5em;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+
+@media all and (min-width: 801px) {
+  .new-status-button {
+    display: none;
+  }
+}
+
+</style>

src/components/mute_card/mute_card.js

@@ -9,7 +9,7 @@ const MuteCard = {
   },
   computed: {
     user () {
-      return this.$store.getters.userById(this.userId)
+      return this.$store.getters.findUser(this.userId)
     },
     muted () {
       return this.user.muted

src/components/mute_card/mute_card.vue

@@ -1,6 +1,6 @@
 <template>
   <basic-user-card :user="user">
-    <template slot="secondary-area">
+    <div class="mute-card-content-container">
       <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
         <template v-if="progress">
           {{ $t('user_card.unmute_progress') }}
@@ -17,8 +17,18 @@
           {{ $t('user_card.mute') }}
         </template>
       </button>
-    </template>
+    </div>
   </basic-user-card>
 </template>
 
 <script src="./mute_card.js"></script>
+
+<style lang="scss">
+.mute-card-content-container {
+  margin-top: 0.5em;
+  text-align: right;
+  button {
+    width: 10em;
+  }
+}
+</style>

src/components/notification/notification.js

@@ -1,6 +1,6 @@
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -13,7 +13,7 @@ const Notification = {
   },
   props: [ 'notification' ],
   components: {
-    Status, UserAvatar, UserCardContent
+    Status, UserAvatar, UserCard
   },
   methods: {
     toggleUserExpanded () {

src/components/notification/notification.vue

@@ -5,9 +5,7 @@
       <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <div class="usercard notification-usercard" v-if="userExpanded">
-        <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
-      </div>
+      <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/>
       <span class="notification-details">
         <div class="name-and-action">
           <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
@@ -25,7 +23,11 @@
             <small>{{$t('notifications.followed_you')}}</small>
           </span>
         </div>
-        <small class="timeago"><router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
+        <div class="timeago">
+          <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link">
+            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+          </router-link>
+        </div>
       </span>
       <div class="follow-text" v-if="notification.type === 'follow'">
         <router-link :to="userProfileLink(notification.action.user)">

src/components/notifications/notifications.js

@@ -11,7 +11,8 @@ const Notifications = {
     const store = this.$store
     const credentials = store.state.users.currentUser.credentials
 
-    notificationsFetcher.startFetching({ store, credentials })
+    const fetcherId = notificationsFetcher.startFetching({ store, credentials })
+    this.$store.commit('setNotificationFetcher', { fetcherId })
   },
   data () {
     return {

src/components/notifications/notifications.scss

@@ -45,10 +45,6 @@
     }
   }
 
-  .notification-usercard {
-    margin: 0;
-  }
-
   .non-mention {
     display: flex;
     flex: 1;
@@ -126,7 +122,7 @@
     }
 
     .timeago {
-      font-size: 12px;
+      margin-right: .2em;
     }
 
     .icon-retweet.lit {

src/components/post_status_form/post_status_form.js

@@ -1,6 +1,7 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
+import EmojiInput from '../emoji-input/emoji-input.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
 import { take, filter, reject, map, uniqBy } from 'lodash'
@@ -30,7 +31,8 @@ const PostStatusForm = {
   ],
   components: {
     MediaUpload,
-    ScopeSelector
+    ScopeSelector,
+    EmojiInput
   },
   mounted () {
     this.resize(this.$refs.textarea)
@@ -174,6 +176,9 @@ const PostStatusForm = {
     },
     formattingOptionsEnabled () {
       return this.$store.state.instance.formattingOptionsEnabled
+    },
+    postFormats () {
+      return this.$store.state.instance.postFormats || []
     }
   },
   methods: {
@@ -222,6 +227,9 @@ const PostStatusForm = {
         this.highlighted = 0
       }
     },
+    onKeydown (e) {
+      e.stopPropagation()
+    },
     setCaret ({target: {selectionStart}}) {
       this.caret = selectionStart
     },
@@ -293,6 +301,8 @@ const PostStatusForm = {
     },
     paste (e) {
       if (e.clipboardData.files.length > 0) {
+        // prevent pasting of file as text
+        e.preventDefault()
         // 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.

src/components/post_status_form/post_status_form.vue

@@ -10,16 +10,18 @@
         <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
       </i18n>
       <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
-      <input
+      <EmojiInput
         v-if="newStatus.spoilerText || alwaysShowSubject"
         type="text"
         :placeholder="$t('post_status.content_warning')"
         v-model="newStatus.spoilerText"
-        class="form-cw">
+        classname="form-control"
+      />
       <textarea
         ref="textarea"
         @click="setCaret"
         @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
+        @keydown="onKeydown"
         @keydown.down="cycleForward"
         @keydown.up="cycleBackward"
         @keydown.shift.tab="cycleBackward"
@@ -30,15 +32,17 @@
         @drop="fileDrop"
         @dragover.prevent="fileDrag"
         @input="resize"
-        @paste="paste">
+        @paste="paste"
+        :disabled="posting"
+      >
       </textarea>
       <div class="visibility-tray">
         <span class="text-format" v-if="formattingOptionsEnabled">
           <label for="post-content-type" class="select">
             <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
-              <option value="text/plain">{{$t('post_status.content_type.plain_text')}}</option>
-              <option value="text/html">HTML</option>
-              <option value="text/markdown">Markdown</option>
+              <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+                {{$t(`post_status.content_type["${postFormat}"]`)}}
+              </option>
             </select>
             <i class="icon-down-open"></i>
           </label>
@@ -52,17 +56,21 @@
           :onScopeChange="changeVis"/>
       </div>
     </div>
-    <div style="position:relative;" v-if="candidates">
-        <div class="autocomplete-panel">
-          <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">
-            <div class="autocomplete" :class="{ highlighted: candidate.highlighted }">
-              <span v-if="candidate.img"><img :src="candidate.img"></img></span>
+    <div class="autocomplete-panel" v-if="candidates">
+        <div class="autocomplete-panel-body">
+          <div
+            v-for="(candidate, index) in candidates"
+            :key="index"
+            @click="replace(candidate.utf || (candidate.screen_name + ' '))"
+            class="autocomplete-item"
+            :class="{ highlighted: candidate.highlighted }"
+          >
+            <span v-if="candidate.img"><img :src="candidate.img" /></span>
             <span v-else>{{candidate.utf}}</span>
             <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
           </div>
         </div>
       </div>
-      </div>
       <div class='form-bottom'>
         <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
 
@@ -81,10 +89,10 @@
         <div class="media-upload-wrapper" v-for="file in newStatus.files">
           <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
           <div class="media-upload-container attachment">
-            <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>
-            <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
-            <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
+            <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
+            <video v-if="type(file) === 'video'" :src="file.url" controls></video>
+            <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
+            <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
           </div>
         </div>
       </div>
@@ -258,52 +266,5 @@
     cursor: pointer;
     z-index: 4;
   }
-
-  .autocomplete-panel {
-    margin: 0 0.5em 0 0.5em;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    position: absolute;
-    z-index: 1;
-    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-    // this doesn't match original but i don't care, making it uniform.
-    box-shadow: var(--popupShadow);
-    min-width: 75%;
-    background: $fallback--bg;
-    background: var(--bg, $fallback--bg);
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-  }
-
-  .autocomplete {
-    cursor: pointer;
-    padding: 0.2em 0.4em 0.2em 0.4em;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-    display: flex;
-
-    img {
-      width: 24px;
-      height: 24px;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
-      object-fit: contain;
-    }
-
-    span {
-      line-height: 24px;
-      margin: 0 0.1em 0 0.2em;
-    }
-
-    small {
-      margin-left: .5em;
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
-    }
-
-    &.highlighted {
-      background-color: $fallback--fg;
-      background-color: var(--lightBg, $fallback--fg);
-    }
-  }
 }
 </style>

src/components/registration/registration.js

@@ -35,6 +35,9 @@ const registration = {
   },
   computed: {
     token () { return this.$route.params.token },
+    bioPlaceholder () {
+      return this.$t('registration.bio_placeholder').replace(/\s*\n\s*/g, ' \n')
+    },
     ...mapState({
       registrationOpen: (state) => state.instance.registrationOpen,
       signedIn: (state) => !!state.users.currentUser,

src/components/registration/registration.vue

@@ -45,7 +45,7 @@
 
             <div class='form-group'>
               <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label>
-              <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="$t('registration.bio_placeholder')"></textarea>
+              <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="bioPlaceholder"></textarea>
             </div>
 
             <div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">

src/components/remote_follow/remote_follow.js

@@ -0,0 +1,10 @@
+export default {
+  props: [ 'user' ],
+  computed: {
+    subscribeUrl () {
+      // eslint-disable-next-line no-undef
+      const serverUrl = new URL(this.user.statusnet_profile_url)
+      return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
+    }
+  }
+}

src/components/remote_follow/remote_follow.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="remote-follow">
+    <form method="POST" :action='subscribeUrl'>
+      <input type="hidden" name="nickname" :value="user.screen_name">
+      <input type="hidden" name="profile" value="">
+      <button click="submit" class="remote-button">
+        {{ $t('user_card.remote_follow') }}
+      </button>
+    </form>
+  </div>
+</template>
+
+<script src="./remote_follow.js"></script>
+
+<style lang="scss">
+.remote-follow {
+  max-width: 220px;
+
+  .remote-button {
+    width: 100%;
+    min-height: 28px;
+  }
+}
+</style>

src/components/settings/settings.js

@@ -1,8 +1,13 @@
 /* eslint-env browser */
+import { filter, trim } from 'lodash'
+
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
-import { filter, trim } from 'lodash'
+import { extractCommit } from '../../services/version/version.service'
+
+const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
+const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
 
 const settings = {
   data () {
@@ -42,6 +47,11 @@ const settings = {
       pauseOnUnfocusedLocal: user.pauseOnUnfocused,
       hoverPreviewLocal: user.hoverPreview,
 
+      hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined'
+        ? instance.hideMutedPosts
+        : user.hideMutedPosts,
+      hideMutedPostsDefault: this.$t('settings.values.' + instance.hideMutedPosts),
+
       collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'
         ? instance.collapseMessageWithSubject
         : user.collapseMessageWithSubject,
@@ -83,7 +93,10 @@ const settings = {
         // Future spec, still not supported in Nightly 63 as of 08/2018
         Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
       playVideosInModal: user.playVideosInModal,
-      useContainFit: user.useContainFit
+      useContainFit: user.useContainFit,
+
+      backendVersion: instance.backendVersion,
+      frontendVersion: instance.frontendVersion
     }
   },
   components: {
@@ -98,7 +111,16 @@ const settings = {
     currentSaveStateNotice () {
       return this.$store.state.interface.settings.currentSaveStateNotice
     },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }
+    postFormats () {
+      return this.$store.state.instance.postFormats || []
+    },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    frontendVersionLink () {
+      return pleromaFeCommitUrl + this.frontendVersion
+    },
+    backendVersionLink () {
+      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
+    }
   },
   watch: {
     hideAttachmentsLocal (value) {
@@ -165,6 +187,9 @@ const settings = {
       value = filter(value.split('\n'), (word) => trim(word).length > 0)
       this.$store.dispatch('setOption', { name: 'muteWords', value })
     },
+    hideMutedPostsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hideMutedPosts', value })
+    },
     collapseMessageWithSubjectLocal (value) {
       this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
     },

src/components/settings/settings.vue

@@ -36,6 +36,10 @@
         <div class="setting-item">
           <h2>{{$t('nav.timeline')}}</h2>
           <ul class="setting-list">
+            <li>
+              <input type="checkbox" id="hideMutedPosts" v-model="hideMutedPostsLocal">
+              <label for="hideMutedPosts">{{$t('settings.hide_muted_posts')}} {{$t('settings.instance_default', { value: hideMutedPostsDefault })}}</label>
+            </li>
             <li>
               <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
               <label for="collapseMessageWithSubject">
@@ -105,17 +109,9 @@
                 {{$t('settings.post_status_content_type')}}
                 <label for="postContentType" class="select">
                   <select id="postContentType" v-model="postContentTypeLocal">
-                    <option value="text/plain">
-                      {{$t('settings.status_content_type_plain')}}
-                      {{postContentTypeDefault == 'text/plain' ? $t('settings.instance_default_simple') : ''}}
-                    </option>
-                    <option value="text/html">
-                      HTML
-                      {{postContentTypeDefault == 'text/html' ? $t('settings.instance_default_simple') : ''}}
-                    </option>
-                    <option value="text/markdown">
-                      Markdown
-                      {{postContentTypeDefault == 'text/markdown' ? $t('settings.instance_default_simple') : ''}}
+                    <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+                      {{$t(`post_status.content_type["${postFormat}"]`)}}
+                      {{postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : ''}}
                     </option>
                   </select>
                   <i class="icon-down-open"/>
@@ -275,6 +271,28 @@
           </div>
         </div>
       </div>
+      <div :label="$t('settings.version.title')" >
+        <div class="setting-item">
+          <ul class="setting-list">
+            <li>
+              <p>{{$t('settings.version.backend_version')}}</p>
+              <ul class="option-list">
+                <li>
+                  <a :href="backendVersionLink" target="_blank">{{backendVersion}}</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <p>{{$t('settings.version.frontend_version')}}</p>
+              <ul class="option-list">
+                <li>
+                  <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
     </tab-switcher>
 </keep-alive>
   </div>

src/components/side_drawer/side_drawer.js

@@ -1,18 +1,17 @@
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
-
-// TODO: separate touch gesture stuff into their own utils if more components want them
-const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
-
-const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])
+import GestureService from '../../services/gesture_service/gesture_service'
 
 const SideDrawer = {
   props: [ 'logout' ],
   data: () => ({
     closed: true,
-    touchCoord: [0, 0]
+    closeGesture: undefined
   }),
-  components: { UserCardContent },
+  created () {
+    this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)
+  },
+  components: { UserCard },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
@@ -46,13 +45,10 @@ const SideDrawer = {
       this.toggleDrawer()
     },
     touchStart (e) {
-      this.touchCoord = touchEventCoord(e)
+      GestureService.beginSwipe(e, this.closeGesture)
     },
     touchMove (e) {
-      const delta = deltaCoord(this.touchCoord, touchEventCoord(e))
-      if (delta[0] < -30 && Math.abs(delta[1]) < Math.abs(delta[0]) && !this.closed) {
-        this.toggleDrawer()
-      }
+      GestureService.updateSwipe(e, this.closeGesture)
     }
   }
 }

src/components/side_drawer/side_drawer.vue

@@ -2,25 +2,21 @@
   <div class="side-drawer-container"
     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
   >
+    <div class="side-drawer-darken" :class="{ 'side-drawer-darken-closed': closed}" />
     <div class="side-drawer"
       :class="{'side-drawer-closed': closed}"
       @touchstart="touchStart"
       @touchmove="touchMove"
     >
       <div class="side-drawer-heading" @click="toggleDrawer">
-        <user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser"/>
+        <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
         <div class="side-drawer-logo-wrapper" v-else>
           <img :src="logo"/>
           <span>{{sitename}}</span>
         </div>
       </div>
       <ul>
-        <li v-if="currentUser" @click="toggleDrawer">
-          <router-link :to="{ name: 'new-status', params: { username: currentUser.screen_name } }">
-            {{ $t("post_status.new_status") }}
-          </router-link>
-        </li>
-        <li v-else @click="toggleDrawer">
+        <li v-if="!currentUser" @click="toggleDrawer">
           <router-link :to="{ name: 'login' }">
             {{ $t("login.login") }}
           </router-link>
@@ -116,17 +112,33 @@
   height: 100%;
   display: flex;
   align-items: stretch;
+  transition-duration: 0s;
+  transition-property: transform;
 }
 
 .side-drawer-container-open {
-  transition-delay: 0.0s;
-  transition-property: left;
+  transform: translate(0%);
 }
 
 .side-drawer-container-closed {
-  left: -100%;
-  transition-delay: 0.5s;
-  transition-property: left;
+  transition-delay: 0.35s;
+  transform: translate(-100%);
+}
+
+.side-drawer-darken {
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
+  transition: 0.35s;
+  transition-property: background-color;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.side-drawer-darken-closed {
+  background-color: rgba(0, 0, 0, 0);
 }
 
 .side-drawer-click-outside {
@@ -135,8 +147,9 @@
 
 .side-drawer {
   overflow-x: hidden;
-  transition: 0.35s;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  transition: 0.35s;
+  transition-property: transform;
   margin: 0 0 0 -100px;
   padding: 0 0 1em 100px;
   width: 80%;
@@ -181,15 +194,6 @@
   display: flex;
   padding: 0;
   margin: 0;
-
-  .profile-panel-background {
-    border-radius: 0;
-    .panel-heading {
-      background: transparent;
-      flex-direction: column;
-      align-items: stretch;
-    }
-  }
 }
 
 .side-drawer ul {

src/components/status/status.js

@@ -3,7 +3,7 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
@@ -145,11 +145,11 @@ const Status = {
       return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
     },
     replyToName () {
-      const user = this.$store.state.users.usersObject[this.status.in_reply_to_user_id]
-      if (user) {
-        return user.screen_name
-      } else {
+      if (this.status.in_reply_to_screen_name) {
         return this.status.in_reply_to_screen_name
+      } else {
+        const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
+        return user && user.screen_name
       }
     },
     hideReply () {
@@ -259,7 +259,7 @@ const Status = {
     RetweetButton,
     DeleteButton,
     PostStatusForm,
-    UserCardContent,
+    UserCard,
     UserAvatar,
     Gallery,
     LinkPreview
@@ -310,7 +310,6 @@ const Status = {
       this.replying = !this.replying
     },
     gotoOriginal (id) {
-      // only handled by conversation, not status_or_conversation
       if (this.inConversation) {
         this.$emit('goto', id)
       }

src/components/status/status.vue

@@ -12,7 +12,7 @@
       </div>
     </template>
     <template v-else>
-      <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
+      <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
         <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
           <span class="user-name">
@@ -24,16 +24,14 @@
         </div>
       </div>
 
-      <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
+      <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" :style="[ userStyle ]" class="media status">
         <div v-if="!noHeading" class="media-left">
           <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
             <UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/>
           </router-link>
         </div>
         <div class="status-body">
-          <div class="usercard" v-if="userExpanded">
-            <user-card-content :user="status.user" :switcher="false"></user-card-content>
-          </div>
+          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
           <div v-if="!noHeading" class="media-heading">
             <div class="heading-name-row">
               <div class="name-and-account-name">
@@ -77,13 +75,13 @@
                 <router-link :to="replyProfileLink">
                   {{replyToName}}
                 </router-link>
-                <span class="faint replies-separator" v-if="replies.length">
+                <span class="faint replies-separator" v-if="replies && replies.length">
                   -
                 </span>
               </div>
               <div class="replies" v-if="inConversation && !isPreview">
-                <span class="faint" v-if="replies.length">{{$t('status.replies_list')}}</span>
-                <span class="reply-link faint" v-for="reply in replies">
+                <span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span>
+                <span class="reply-link faint" v-if="replies" v-for="reply in replies">
                   <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
                 </span>
               </div>
@@ -137,9 +135,8 @@
 
           <div v-if="!noHeading && !isPreview" class='status-actions media-body'>
             <div v-if="loggedIn">
-              <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
-                <i class="button-icon icon-reply" :class="{'icon-reply-active': replying}"></i>
-              </a>
+              <i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'icon-reply-active': replying}"></i>
+              <span v-if="status.replies_count > 0">{{status.replies_count}}</span>
             </div>
             <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
             <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
@@ -248,8 +245,7 @@ $status-margin: 0.75em;
     padding: 0;
   }
 
-  .usercard {
-    margin: 0;
+  .status-usercard {
     margin-bottom: $status-margin;
   }
 
@@ -422,6 +418,11 @@ $status-margin: 0.75em;
       max-height: 400px;
       vertical-align: middle;
       object-fit: contain;
+
+      &.emoji {
+        width: 32px;
+        height: 32px;
+      }
     }
 
     blockquote {
@@ -549,6 +550,7 @@ $status-margin: 0.75em;
 .icon-reply:hover {
   color: $fallback--cBlue;
   color: var(--cBlue, $fallback--cBlue);
+  cursor: pointer;
 }
 
 .icon-reply.icon-reply-active {

src/components/status_or_conversation/status_or_conversation.js

@@ -1,22 +0,0 @@
-import Status from '../status/status.vue'
-import Conversation from '../conversation/conversation.vue'
-
-const statusOrConversation = {
-  props: ['statusoid'],
-  data () {
-    return {
-      expanded: false
-    }
-  },
-  components: {
-    Status,
-    Conversation
-  },
-  methods: {
-    toggleExpanded () {
-      this.expanded = !this.expanded
-    }
-  }
-}
-
-export default statusOrConversation

src/components/status_or_conversation/status_or_conversation.vue

@@ -1,14 +0,0 @@
-<template>
-  <div>
-    <conversation v-if="expanded" @toggleExpanded="toggleExpanded" :collapsable="true" :statusoid="statusoid"></conversation>
-    <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :inConversation="false" :focused="false" :statusoid="statusoid"></status>
-  </div>
-</template>
-
-<script src="./status_or_conversation.js"></script>
-
-<style lang="scss">
- .spacer {
-   height: 1em
- }
-</style>

src/components/timeline/timeline.js

@@ -1,6 +1,6 @@
 import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
-import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue'
+import Conversation from '../conversation/conversation.vue'
 import { throttle } from 'lodash'
 
 const Timeline = {
@@ -43,7 +43,7 @@ const Timeline = {
   },
   components: {
     Status,
-    StatusOrConversation
+    Conversation
   },
   created () {
     const store = this.$store
@@ -132,7 +132,9 @@ const Timeline = {
       }
       if (count > 0) {
         // only 'stream' them when you're scrolled to the top
-        if (window.pageYOffset < 15 &&
+        const doc = document.documentElement
+        const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
+        if (top < 15 &&
             !this.paused &&
             !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
            ) {

src/components/timeline/timeline.vue

@@ -16,7 +16,13 @@
     </div>
     <div :class="classes.body">
       <div class="timeline">
-        <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
+        <conversation 
+          v-for="status in timeline.visibleStatuses"
+          class="status-fadein"
+          :key="status.id"
+          :statusoid="status"
+          :collapsable="true"
+        />
       </div>
     </div>
     <div :class="classes.footer">

src/components/user_avatar/user_avatar.js

@@ -23,6 +23,11 @@ const UserAvatar = {
     imageLoadError () {
       this.showPlaceholder = true
     }
+  },
+  watch: {
+    src () {
+      this.showPlaceholder = false
+    }
   }
 }
 

src/components/user_card/user_card.js

@@ -1,10 +1,11 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 export default {
-  props: [ 'user', 'switcher', 'selected', 'hideBio' ],
+  props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ],
   data () {
     return {
       followRequestInProgress: false,
@@ -15,8 +16,18 @@ export default {
       betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
+  created () {
+    this.$store.dispatch('fetchUserRelationship', this.user.id)
+  },
   computed: {
-    headingStyle () {
+    classes () {
+      return [{
+        'user-card-rounded-t': this.rounded === 'top',  // set border-top-left-radius and border-top-right-radius
+        'user-card-rounded': this.rounded === true,     // set border-radius for all sides
+        'user-card-bordered': this.bordered === true    // set border for all sides
+      }]
+    },
+    style () {
       const color = this.$store.state.config.customTheme.colors
             ? this.$store.state.config.customTheme.colors.bg  // v2
             : this.$store.state.config.colors.bg // v1
@@ -89,36 +100,37 @@ export default {
     }
   },
   components: {
-    UserAvatar
+    UserAvatar,
+    RemoteFollow
   },
   methods: {
     followUser () {
+      const store = this.$store
       this.followRequestInProgress = true
-      requestFollow(this.user, this.$store).then(({sent}) => {
+      requestFollow(this.user, store).then(({sent}) => {
         this.followRequestInProgress = false
         this.followRequestSent = sent
       })
     },
     unfollowUser () {
+      const store = this.$store
       this.followRequestInProgress = true
-      requestUnfollow(this.user, this.$store).then(() => {
+      requestUnfollow(this.user, store).then(() => {
         this.followRequestInProgress = false
+        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
       })
     },
     blockUser () {
-      const store = this.$store
-      store.state.api.backendInteractor.blockUser(this.user.id)
-        .then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
+      this.$store.dispatch('blockUser', this.user.id)
     },
     unblockUser () {
-      const store = this.$store
-      store.state.api.backendInteractor.unblockUser(this.user.id)
-        .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
+      this.$store.dispatch('unblockUser', this.user.id)
     },
-    toggleMute () {
-      const store = this.$store
-      store.commit('setMuted', {user: this.user, muted: !this.user.muted})
-      store.state.api.backendInteractor.setUserMute(this.user)
+    muteUser () {
+      this.$store.dispatch('muteUser', this.user.id)
+    },
+    unmuteUser () {
+      this.$store.dispatch('unmuteUser', this.user.id)
     },
     setProfileView (v) {
       if (this.switcher) {

src/components/user_card/user_card.vue

@@ -1,6 +1,6 @@
 <template>
-<div id="heading" class="profile-panel-background" :style="headingStyle">
-  <div class="panel-heading text-center">
+<div class="user-card" :class="classes" :style="style">
+  <div class="panel-heading">
     <div class='user-info'>
       <div class='container'>
         <router-link :to="userProfileLink(user)">
@@ -11,7 +11,7 @@
             <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
             <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
             <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser">
-              <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
+              <i class="button-icon icon-pencil usersettings" :title="$t('tool_tip.user_settings')"></i>
             </router-link>
             <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local">
               <i class="icon-link-ext usersettings"></i>
@@ -74,24 +74,18 @@
         </div>
         <div class='mute' v-if='isOtherUser && loggedIn'>
           <span v-if='user.muted'>
-            <button @click="toggleMute" class="pressed">
+            <button @click="unmuteUser" class="pressed">
               {{ $t('user_card.muted') }}
             </button>
           </span>
           <span v-if='!user.muted'>
-            <button @click="toggleMute">
+            <button @click="muteUser">
               {{ $t('user_card.mute') }}
             </button>
           </span>
         </div>
-        <div class="remote-follow" v-if='!loggedIn && user.is_local'>
-          <form method="POST" :action='subscribeUrl'>
-            <input type="hidden" name="nickname" :value="user.screen_name">
-            <input type="hidden" name="profile" value="">
-            <button click="submit" class="remote-button">
-              {{ $t('user_card.remote_follow') }}
-            </button>
-          </form>
+        <div v-if='!loggedIn && user.is_local'>
+          <RemoteFollow :user="user" />
         </div>
         <div class='block' v-if='isOtherUser && loggedIn'>
           <span v-if='user.statusnet_blocking'>
@@ -108,7 +102,7 @@
       </div>
     </div>
   </div>
-  <div class="panel-body profile-panel-body" v-if="!hideBio">
+  <div class="panel-body" v-if="!hideBio">
     <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
       <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
         <h5>{{ $t('user_card.statuses') }}</h5>
@@ -123,40 +117,75 @@
         <span>{{user.followers_count}}</span>
       </div>
     </div>
-    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
-    <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
+    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
   </div>
 </div>
 </template>
 
-<script src="./user_card_content.js"></script>
+<script src="./user_card.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
 
-.profile-panel-background {
+.user-card {
   background-size: cover;
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
   overflow: hidden;
 
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-
   .panel-heading {
     padding: .5em 0;
     text-align: center;
     box-shadow: none;
+    background: transparent;
+    flex-direction: column;
+    align-items: stretch;
   }
-}
 
-.profile-panel-body {
+  .panel-body {
     word-wrap: break-word;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
+  }
 
-  .profile-bio {
+  p {
+    margin-bottom: 0;
+  }
+
+  &-bio {
     text-align: center;
+
+    img {
+      object-fit: contain;
+      vertical-align: middle;
+      max-width: 100%;
+      max-height: 400px;
+
+      .emoji {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+
+  // Modifiers
+
+  &-rounded-t {
+    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: $fallback--panelRadius;
+    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-rounded {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-bordered {
+    border-width: 1px;
+    border-style: solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
   }
 }
 
@@ -340,11 +369,6 @@
       min-height: 28px;
     }
 
-    .remote-follow {
-      max-width: 220px;
-      min-height: 28px;
-    }
-
     .follow {
       max-width: 220px;
       min-height: 28px;
@@ -393,25 +417,4 @@
     text-decoration: none;
   }
 }
-
-.usercard {
-  width: fill-available;
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-  border-style: solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-width: 1px;
-  overflow: hidden;
-
-  .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-}
 </style>

src/components/user_panel/user_panel.js

@@ -1,6 +1,6 @@
 import LoginForm from '../login_form/login_form.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 
 const UserPanel = {
   computed: {
@@ -9,7 +9,7 @@ const UserPanel = {
   components: {
     LoginForm,
     PostStatusForm,
-    UserCardContent
+    UserCard
   }
 }
 

src/components/user_panel/user_panel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-panel">
     <div v-if='user' class="panel panel-default" style="overflow: visible;">
-      <user-card-content :user="user" :switcher="false" :hideBio="true"></user-card-content>
+      <UserCard :user="user" :hideBio="true" rounded="top"/>
       <div class="panel-footer">
         <post-status-form v-if='user'></post-status-form>
       </div>
@@ -11,13 +11,3 @@
 </template>
 
 <script src="./user_panel.js"></script>
-
-<style lang="scss">
-.user-panel {
-  .profile-panel-background .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-</style>

src/components/user_profile/user_profile.js

@@ -1,6 +1,6 @@
 import { compose } from 'vue-compose'
 import get from 'lodash/get'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
@@ -9,7 +9,7 @@ import withList from '../../hocs/with_list/with_list'
 const FollowerList = compose(
   withLoadMore({
     fetch: (props, $store) => $store.dispatch('addFollowers', props.userId),
-    select: (props, $store) => get($store.getters.userById(props.userId), 'followers', []),
+    select: (props, $store) => get($store.getters.findUser(props.userId), 'followers', []),
     destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
     childPropName: 'entries',
     additionalPropNames: ['userId']
@@ -20,7 +20,7 @@ const FollowerList = compose(
 const FriendList = compose(
   withLoadMore({
     fetch: (props, $store) => $store.dispatch('addFriends', props.userId),
-    select: (props, $store) => get($store.getters.userById(props.userId), 'friends', []),
+    select: (props, $store) => get($store.getters.findUser(props.userId), 'friends', []),
     destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
     childPropName: 'entries',
     additionalPropNames: ['userId']
@@ -31,28 +31,16 @@ const FriendList = compose(
 const UserProfile = {
   data () {
     return {
-      error: false
+      error: false,
+      fetchedUserId: null
     }
   },
   created () {
-    this.$store.commit('clearTimeline', { timeline: 'user' })
-    this.$store.commit('clearTimeline', { timeline: 'favorites' })
-    this.$store.commit('clearTimeline', { timeline: 'media' })
-    this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy })
-    this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy })
-    this.startFetchFavorites()
     if (!this.user.id) {
-      this.$store.dispatch('fetchUser', this.fetchBy)
-        .catch((reason) => {
-          const errorMessage = get(reason, 'error.error')
-          if (errorMessage === 'No user with such user_id') { // Known error
-            this.error = this.$t('user_profile.profile_does_not_exist')
-          } else if (errorMessage) {
-            this.error = errorMessage
+      this.fetchUserId()
+        .then(() => this.startUp())
     } else {
-            this.error = this.$t('user_profile.profile_loading_error')
-          }
-        })
+      this.startUp()
     }
   },
   destroyed () {
@@ -69,7 +57,7 @@ const UserProfile = {
       return this.$store.state.statuses.timelines.media
     },
     userId () {
-      return this.$route.params.id || this.user.id
+      return this.$route.params.id || this.user.id || this.fetchedUserId
     },
     userName () {
       return this.$route.params.name || this.user.screen_name
@@ -79,10 +67,9 @@ const UserProfile = {
         this.userId === this.$store.state.users.currentUser.id
     },
     userInStore () {
-      if (this.isExternal) {
-        return this.$store.getters.userById(this.userId)
-      }
-      return this.$store.getters.userByName(this.userName)
+      const routeParams = this.$route.params
+      // This needs fetchedUserId so that computed will be refreshed when user is fetched
+      return this.$store.getters.findUser(this.fetchedUserId || routeParams.name || routeParams.id)
     },
     user () {
       if (this.timeline.statuses[0]) {
@@ -93,9 +80,6 @@ const UserProfile = {
       }
       return {}
     },
-    fetchBy () {
-      return this.isExternal ? this.userId : this.userName
-    },
     isExternal () {
       return this.$route.name === 'external-user-profile'
     },
@@ -109,14 +93,38 @@ const UserProfile = {
   methods: {
     startFetchFavorites () {
       if (this.isUs) {
-        this.$store.dispatch('startFetching', { timeline: 'favorites', userId: this.fetchBy })
+        this.$store.dispatch('startFetching', { timeline: 'favorites', userId: this.userId })
       }
     },
+    fetchUserId () {
+      let fetchPromise
+      if (this.userId && !this.$route.params.name) {
+        fetchPromise = this.$store.dispatch('fetchUser', this.userId)
+      } else {
+        fetchPromise = this.$store.dispatch('fetchUser', this.userName)
+          .then(({ id }) => {
+            this.fetchedUserId = id
+          })
+      }
+      return fetchPromise
+        .catch((reason) => {
+          const errorMessage = get(reason, 'error.error')
+          if (errorMessage === 'No user with such user_id') { // Known error
+            this.error = this.$t('user_profile.profile_does_not_exist')
+          } else if (errorMessage) {
+            this.error = errorMessage
+          } else {
+            this.error = this.$t('user_profile.profile_loading_error')
+          }
+        })
+        .then(() => this.startUp())
+    },
     startUp () {
-      this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy })
-      this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy })
-
+      if (this.userId) {
+        this.$store.dispatch('startFetching', { timeline: 'user', userId: this.userId })
+        this.$store.dispatch('startFetching', { timeline: 'media', userId: this.userId })
         this.startFetchFavorites()
+      }
     },
     cleanUp () {
       this.$store.dispatch('stopFetching', 'user')
@@ -128,23 +136,26 @@ const UserProfile = {
     }
   },
   watch: {
-    userName () {
-      if (this.isExternal) {
-        return
-      }
+    // userId can be undefined if we don't know it yet
+    userId (newVal) {
+      if (newVal) {
         this.cleanUp()
         this.startUp()
+      }
     },
-    userId () {
-      if (!this.isExternal) {
-        return
-      }
+    userName () {
+      if (this.$route.params.name) {
+        this.fetchUserId()
         this.cleanUp()
         this.startUp()
       }
     },
+    $route () {
+      this.$refs.tabSwitcher.activateTab(0)()
+    }
+  },
   components: {
-    UserCardContent,
+    UserCard,
     Timeline,
     FollowerList,
     FriendList

src/components/user_profile/user_profile.vue

@@ -1,12 +1,8 @@
 <template>
 <div>
   <div v-if="user.id" class="user-profile panel panel-default">
-    <user-card-content
-      :user="user"
-      :switcher="true"
-      :selected="timeline.viewing"
-    />
-    <tab-switcher :renderOnlyFocused="true">
+    <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
+    <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
       <Timeline
         :label="$t('user_card.statuses')"
         :disabled="!user.statuses_count"
@@ -15,7 +11,7 @@
         :title="$t('user_profile.timeline_title')"
         :timeline="timeline"
         :timeline-name="'user'"
-        :user-id="fetchBy"
+        :user-id="userId"
       />
       <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
         <FriendList :userId="userId" />
@@ -29,7 +25,7 @@
         :embedded="true" :title="$t('user_card.media')"
         timeline-name="media"
         :timeline="media"
-        :user-id="fetchBy"
+        :user-id="userId"
       />
       <Timeline
         v-if="isUs"
@@ -64,11 +60,6 @@
   flex: 2;
   flex-basis: 500px;
 
-  .profile-panel-background .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-  }
   .userlist-placeholder {
     display: flex;
     justify-content: center;

src/components/user_settings/user_settings.js

@@ -8,6 +8,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
+import EmojiInput from '../emoji-input/emoji-input.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 
@@ -71,7 +72,8 @@ const UserSettings = {
     TabSwitcher,
     ImageCropper,
     BlockList,
-    MuteList
+    MuteList,
+    EmojiInput
   },
   computed: {
     user () {
@@ -159,8 +161,14 @@ const UserSettings = {
       }
       reader.readAsDataURL(file)
     },
-    submitAvatar (cropper) {
-      const img = cropper.getCroppedCanvas().toDataURL('image/jpeg')
+    submitAvatar (cropper, file) {
+      let img
+      if (cropper) {
+        img = cropper.getCroppedCanvas().toDataURL(file.type)
+      } else {
+        img = file
+      }
+
       return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])

src/components/user_settings/user_settings.vue

@@ -22,9 +22,18 @@
           <div class="setting-item" >
             <h2>{{$t('settings.name_bio')}}</h2>
             <p>{{$t('settings.name')}}</p>
-            <input class='name-changer' id='username' v-model="newName"></input>
+            <EmojiInput 
+              type="text"
+              v-model="newName"
+              id="username"
+              classname="name-changer"
+            />
             <p>{{$t('settings.bio')}}</p>
-            <textarea class="bio" v-model="newBio"></textarea>
+            <EmojiInput
+              type="textarea"
+              v-model="newBio"
+              classname="bio"
+            />
             <p>
               <input type="checkbox" v-model="newLocked" id="account-locked">
               <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
@@ -61,7 +70,7 @@
             <h2>{{$t('settings.avatar')}}</h2>
             <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
             <p>{{$t('settings.current_avatar')}}</p>
-            <img :src="user.profile_image_url_original" class="current-avatar"></img>
+            <img :src="user.profile_image_url_original" class="current-avatar" />
             <p>{{$t('settings.set_new_avatar')}}</p>
             <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
             <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
@@ -69,12 +78,11 @@
           <div class="setting-item">
             <h2>{{$t('settings.profile_banner')}}</h2>
             <p>{{$t('settings.current_profile_banner')}}</p>
-            <img :src="user.cover_photo" class="banner"></img>
+            <img :src="user.cover_photo" class="banner" />
             <p>{{$t('settings.set_new_profile_banner')}}</p>
-            <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview">
-            </img>
+            <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" />
             <div>
-              <input type="file" @change="uploadFile('banner', $event)" ></input>
+              <input type="file" @change="uploadFile('banner', $event)" />
             </div>
             <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
             <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
@@ -86,10 +94,9 @@
           <div class="setting-item">
             <h2>{{$t('settings.profile_background')}}</h2>
             <p>{{$t('settings.set_new_profile_background')}}</p>
-            <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview">
-            </img>
+            <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" />
             <div>
-              <input type="file" @change="uploadFile('background', $event)" ></input>
+              <input type="file" @change="uploadFile('background', $event)" />
             </div>
             <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
             <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
@@ -165,7 +172,7 @@
             <h2>{{$t('settings.follow_import')}}</h2>
             <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
             <form>
-              <input type="file" ref="followlist" v-on:change="followListChange"></input>
+              <input type="file" ref="followlist" v-on:change="followListChange" />
             </form>
             <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
             <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button>
@@ -192,6 +199,12 @@
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </block-list>
         </div>
+
+        <div :label="$t('settings.mutes_tab')">
+          <mute-list :refresh="true">
+            <template slot="empty">{{$t('settings.no_mutes')}}</template>
+          </mute-list>
+        </div>
       </tab-switcher>
     </div>
   </div>

src/i18n/ar.json

@@ -49,7 +49,7 @@
         "account_not_locked_warning_link": "مقفل",
         "attachments_sensitive": "اعتبر المرفقات كلها كمحتوى حساس",
         "content_type": {
-            "plain_text": "نص صافٍ"
+            "text/plain": "نص صافٍ"
         },
         "content_warning": "الموضوع (اختياري)",
         "default": "وصلت للتوّ إلى لوس أنجلس.",

src/i18n/ca.json

@@ -49,7 +49,7 @@
     "account_not_locked_warning_link": "bloquejat",
     "attachments_sensitive": "Marca l'adjunt com a delicat",
     "content_type": {
-      "plain_text": "Text pla"
+      "text/plain": "Text pla"
     },
     "content_warning": "Assumpte (opcional)",
     "default": "Em sento…",

src/i18n/cs.json

@@ -0,0 +1,428 @@
+{
+  "chat": {
+    "title": "Chat"
+  },
+  "features_panel": {
+    "chat": "Chat",
+    "gopher": "Gopher",
+    "media_proxy": "Mediální proxy",
+    "scope_options": "Možnosti rozsahů",
+    "text_limit": "Textový limit",
+    "title": "Vlastnosti",
+    "who_to_follow": "Koho sledovat"
+  },
+  "finder": {
+    "error_fetching_user": "Chyba při načítání uživatele",
+    "find_user": "Najít uživatele"
+  },
+  "general": {
+    "apply": "Použít",
+    "submit": "Odeslat",
+    "more": "Více",
+    "generic_error": "Vyskytla se chyba",
+    "optional": "volitelné"
+  },
+  "image_cropper": {
+    "crop_picture": "Oříznout obrázek",
+    "save": "Uložit",
+    "cancel": "Zrušit"
+  },
+  "login": {
+    "login": "Přihlásit",
+    "description": "Přihlásit pomocí OAuth",
+    "logout": "Odhlásit",
+    "password": "Heslo",
+    "placeholder": "např. lain",
+    "register": "Registrovat",
+    "username": "Uživatelské jméno",
+    "hint": "Chcete-li se přidat do diskuze, přihlaste se"
+  },
+  "media_modal": {
+    "previous": "Předchozí",
+    "next": "Další"
+  },
+  "nav": {
+    "about": "O instanci",
+    "back": "Zpět",
+    "chat": "Místní chat",
+    "friend_requests": "Požadavky o sledování",
+    "mentions": "Zmínky",
+    "dms": "Přímé zprávy",
+    "public_tl": "Veřejná časová osa",
+    "timeline": "Časová osa",
+    "twkn": "Celá známá síť",
+    "user_search": "Hledání uživatelů",
+    "who_to_follow": "Koho sledovat",
+    "preferences": "Předvolby"
+  },
+  "notifications": {
+    "broken_favorite": "Neznámý příspěvek, hledám jej…",
+    "favorited_you": "si oblíbil/a váš příspěvek",
+    "followed_you": "vás nyní sleduje",
+    "load_older": "Načíst starší oznámení",
+    "notifications": "Oznámení",
+    "read": "Číst!",
+    "repeated_you": "zopakoval/a váš příspěvek",
+    "no_more_notifications": "Žádná další oznámení"
+  },
+  "post_status": {
+    "new_status": "Napsat nový příspěvek",
+    "account_not_locked_warning": "Váš účet není {0}. Kdokoliv vás může sledovat a vidět vaše příspěvky pouze pro sledující.",
+    "account_not_locked_warning_link": "uzamčen",
+    "attachments_sensitive": "Označovat přílohy jako citlivé",
+    "content_type": {
+      "text/plain": "Prostý text",
+      "text/html": "HTML",
+      "text/markdown": "Markdown"
+    },
+    "content_warning": "Předmět (volitelný)",
+    "default": "Právě jsem přistál v L.A.",
+    "direct_warning": "Tento příspěvek uvidí pouze všichni zmínění uživatelé.",
+    "posting": "Přispívání",
+    "scope": {
+      "direct": "Přímý - Poslat pouze zmíněným uživatelům",
+      "private": "Pouze pro sledující - Poslat pouze sledujícím",
+      "public": "Veřejný - Poslat na veřejné časové osy",
+      "unlisted": "Neuvedený - Neposlat na veřejné časové osy"
+    }
+  },
+  "registration": {
+    "bio": "O vás",
+    "email": "E-mail",
+    "fullname": "Zobrazované jméno",
+    "password_confirm": "Potvrzení hesla",
+    "registration": "Registrace",
+    "token": "Token pozvánky",
+    "captcha": "CAPTCHA",
+    "new_captcha": "Kliknutím na obrázek získáte novou CAPTCHA",
+    "username_placeholder": "např. lain",
+    "fullname_placeholder": "např. Lain Iwakura",
+    "bio_placeholder": "např.\nNazdar, jsem Lain\nJsem anime dívka žijící v příměstském Japonsku. Možná mě znáte z Wired.",
+    "validations": {
+      "username_required": "nemůže být prázdné",
+      "fullname_required": "nemůže být prázdné",
+      "email_required": "nemůže být prázdný",
+      "password_required": "nemůže být prázdné",
+      "password_confirmation_required": "nemůže být prázdné",
+      "password_confirmation_match": "musí být stejné jako heslo"
+    }
+  },
+  "settings": {
+    "app_name": "Název aplikace",
+    "attachmentRadius": "Přílohy",
+    "attachments": "Přílohy",
+    "autoload": "Povolit automatické načítání při rolování dolů",
+    "avatar": "Avatar",
+    "avatarAltRadius": "Avatary (oznámení)",
+    "avatarRadius": "Avatary",
+    "background": "Pozadí",
+    "bio": "O vás",
+    "blocks_tab": "Blokování",
+    "btnRadius": "Tlačítka",
+    "cBlue": "Modrá (Odpovědět, sledovat)",
+    "cGreen": "Zelená (Zopakovat)",
+    "cOrange": "Oranžová (Oblíbit)",
+    "cRed": "Červená (Zrušit)",
+    "change_password": "Změnit heslo",
+    "change_password_error": "Při změně vašeho hesla se vyskytla chyba.",
+    "changed_password": "Heslo bylo úspěšně změněno!",
+    "collapse_subject": "Zabalit příspěvky s předměty",
+    "composing": "Komponování",
+    "confirm_new_password": "Potvrďte nové heslo",
+    "current_avatar": "Váš současný avatar",
+    "current_password": "Současné heslo",
+    "current_profile_banner": "Váš současný profilový banner",
+    "data_import_export_tab": "Import/export dat",
+    "default_vis": "Výchozí rozsah viditelnosti",
+    "delete_account": "Smazat účet",
+    "delete_account_description": "Trvale smaže váš účet a všechny vaše příspěvky.",
+    "delete_account_error": "Při mazání vašeho účtu nastala chyba. Pokud tato chyba bude trvat, kontaktujte prosím admministrátora vaší instance.",
+    "delete_account_instructions": "Pro potvrzení smazání účtu napište své heslo do pole níže.",
+    "avatar_size_instruction": "Doporučená minimální velikost pro avatarové obrázky je 150x150 pixelů.",
+    "export_theme": "Uložit přednastavení",
+    "filtering": "Filtrování",
+    "filtering_explanation": "Všechny příspěvky obsahující tato slova budou skryty. Napište jedno slovo na každý řádek",
+    "follow_export": "Export sledovaných",
+    "follow_export_button": "Exportovat vaše sledované do souboru CSV",
+    "follow_export_processing": "Zpracovávám, brzy si budete moci stáhnout váš soubor",
+    "follow_import": "Import sledovaných",
+    "follow_import_error": "Chyba při importování sledovaných",
+    "follows_imported": "Sledovaní importováni! Jejich zpracování bude chvilku trvat.",
+    "foreground": "Popředí",
+    "general": "Obecné",
+    "hide_attachments_in_convo": "Skrývat přílohy v konverzacích",
+    "hide_attachments_in_tl": "Skrývat přílohy v časové ose",
+    "max_thumbnails": "Maximální počet miniatur na příspěvek",
+    "hide_isp": "Skrýt panel specifický pro instanci",
+    "preload_images": "Přednačítat obrázky",
+    "use_one_click_nsfw": "Otevírat citlivé přílohy pouze jedním kliknutím",
+    "hide_post_stats": "Skrývat statistiky příspěvků (např. počet oblíbení)",
+    "hide_user_stats": "Skrývat statistiky uživatelů (např. počet sledujících)",
+    "hide_filtered_statuses": "Skrývat filtrované příspěvky",
+    "import_followers_from_a_csv_file": "Importovat sledované ze souboru CSV",
+    "import_theme": "Načíst přednastavení",
+    "inputRadius": "Vstupní pole",
+    "checkboxRadius": "Zaškrtávací pole",
+    "instance_default": "(výchozí: {value})",
+    "instance_default_simple": "(výchozí)",
+    "interface": "Rozhraní",
+    "interfaceLanguage": "Jazyk rozhraní",
+    "invalid_theme_imported": "Zvolený soubor není podporovaný motiv Pleroma. Nebyly provedeny žádné změny s vaším motivem.",
+    "limited_availability": "Nedostupné ve vašem prohlížeči",
+    "links": "Odkazy",
+    "lock_account_description": "Omezit váš účet pouze na schválené sledující",
+    "loop_video": "Opakovat videa",
+    "loop_video_silent_only": "Opakovat pouze videa beze zvuku (t.j. „GIFy“ na Mastodonu)",
+    "mutes_tab": "Ignorování",
+    "play_videos_in_modal": "Přehrávat videa přímo v prohlížeči médií",
+    "use_contain_fit": "Neořezávat přílohu v miniaturách",
+    "name": "Jméno",
+    "name_bio": "Jméno a popis",
+    "new_password": "Nové heslo",
+    "notification_visibility": "Typy oznámení k zobrazení",
+    "notification_visibility_follows": "Sledující",
+    "notification_visibility_likes": "Oblíbení",
+    "notification_visibility_mentions": "Zmínky",
+    "notification_visibility_repeats": "Zopakování",
+    "no_rich_text_description": "Odstranit ze všech příspěvků formátování textu",
+    "no_blocks": "Žádná blokování",
+    "no_mutes": "Žádná ignorování",
+    "hide_follows_description": "Nezobrazovat, koho sleduji",
+    "hide_followers_description": "Nezobrazovat, kdo mě sleduje",
+    "show_admin_badge": "Zobrazovat v mém profilu odznak administrátora",
+    "show_moderator_badge": "Zobrazovat v mém profilu odznak moderátora",
+    "nsfw_clickthrough": "Povolit prokliknutelné skrývání citlivých příloh",
+    "oauth_tokens": "Tokeny OAuth",
+    "token": "Token",
+    "refresh_token": "Obnovit token",
+    "valid_until": "Platný do",
+    "revoke_token": "Odvolat",
+    "panelRadius": "Panely",
+    "pause_on_unfocused": "Pozastavit streamování, pokud není záložka prohlížeče v soustředění",
+    "presets": "Přednastavení",
+    "profile_background": "Profilové pozadí",
+    "profile_banner": "Profilový banner",
+    "profile_tab": "Profil",
+    "radii_help": "Nastavit zakulacení rohů rozhraní (v pixelech)",
+    "replies_in_timeline": "Odpovědi v časové ose",
+    "reply_link_preview": "Povolit náhledy odkazu pro odpověď při přejetí myši",
+    "reply_visibility_all": "Zobrazit všechny odpovědi",
+    "reply_visibility_following": "Zobrazit pouze odpovědi směřované na mě nebo uživatele, které sleduji",
+    "reply_visibility_self": "Zobrazit pouze odpovědi směřované na mě",
+    "saving_err": "Chyba při ukládání nastavení",
+    "saving_ok": "Nastavení uložena",
+    "security_tab": "Bezpečnost",
+    "scope_copy": "Kopírovat rozsah při odpovídání (přímé zprávy jsou vždy kopírovány)",
+    "set_new_avatar": "Nastavit nový avatar",
+    "set_new_profile_background": "Nastavit nové profilové pozadí",
+    "set_new_profile_banner": "Nastavit nový profilový banner",
+    "settings": "Nastavení",
+    "subject_input_always_show": "Vždy zobrazit pole pro předmět",
+    "subject_line_behavior": "Kopírovat předmět při odpovídání",
+    "subject_line_email": "Jako u e-mailu: „re: předmět“",
+    "subject_line_mastodon": "Jako u Mastodonu: zkopírovat tak, jak je",
+    "subject_line_noop": "Nekopírovat",
+    "post_status_content_type": "Publikovat typ obsahu příspěvku",
+    "stop_gifs": "Přehrávat GIFy při přejetí myši",
+    "streaming": "Povolit automatické streamování nových příspěvků při rolování nahoru",
+    "text": "Text",
+    "theme": "Motiv",
+    "theme_help": "Použijte hexadecimální barevné kódy (#rrggbb) pro přizpůsobení vašeho barevného motivu.",
+    "theme_help_v2_1": "Zaškrtnutím pole můžete také přepsat barvy a průhlednost některých komponentů, pro smazání všech přednastavení použijte tlačítko „Smazat vše“.",
+    "theme_help_v2_2": "Ikony pod některými položkami jsou indikátory kontrastu pozadí/textu, pro detailní informace nad nimi přejeďte myší. Prosím berte na vědomí, že při používání kontrastu průhlednosti ukazují indikátory nejhorší možný případ.",
+    "tooltipRadius": "Popisky/upozornění",
+    "upload_a_photo": "Nahrát fotku",
+    "user_settings": "Uživatelská nastavení",
+    "values": {
+      "false": "ne",
+      "true": "ano"
+    },
+    "notifications": "Oznámení",
+    "enable_web_push_notifications": "Povolit webová push oznámení",
+    "style": {
+      "switcher": {
+        "keep_color": "Ponechat barvy",
+        "keep_shadows": "Ponechat stíny",
+        "keep_opacity": "Ponechat průhlednost",
+        "keep_roundness": "Ponechat kulatost",
+        "keep_fonts": "Keep fonts",
+        "save_load_hint": "Možnosti „Ponechat“ dočasně ponechávají aktuálně nastavené možností při volení či nahrávání motivů, také tyto možnosti ukládají při exportování motivu. Pokud není žádné pole zaškrtnuto, uloží export motivu všechno.",
+        "reset": "Resetovat",
+        "clear_all": "Vymazat vše",
+        "clear_opacity": "Vymazat průhlednost"
+      },
+      "common": {
+        "color": "Barva",
+        "opacity": "Průhlednost",
+        "contrast": {
+          "hint": "Poměr kontrastu je {ratio}, {level} {context}",
+          "level": {
+            "aa": "splňuje směrnici úrovně AA  (minimální)",
+            "aaa": "splňuje směrnici úrovně AAA (doporučováno)",
+            "bad": "nesplňuje žádné směrnice přístupnosti"
+          },
+          "context": {
+            "18pt": "pro velký (18+ bodů) text",
+            "text": "pro text"
+          }
+        }
+      },
+      "common_colors": {
+        "_tab_label": "Obvyklé",
+        "main": "Obvyklé barvy",
+        "foreground_hint": "Pro detailnější kontrolu viz záložka „Pokročilé“",
+        "rgbo": "Ikony, odstíny, odznaky"
+      },
+      "advanced_colors": {
+        "_tab_label": "Pokročilé",
+        "alert": "Pozadí upozornění",
+        "alert_error": "Chyba",
+        "badge": "Pozadí odznaků",
+        "badge_notification": "Oznámení",
+        "panel_header": "Záhlaví panelu",
+        "top_bar": "Vrchní pruh",
+        "borders": "Okraje",
+        "buttons": "Tlačítka",
+        "inputs": "Vstupní pole",
+        "faint_text": "Vybledlý text"
+      },
+      "radii": {
+        "_tab_label": "Kulatost"
+      },
+      "shadows": {
+        "_tab_label": "Stín a osvětlení",
+        "component": "Komponent",
+        "override": "Přepsat",
+        "shadow_id": "Stín #{value}",
+        "blur": "Rozmazání",
+        "spread": "Rozsah",
+        "inset": "Vsazení",
+        "hint": "Pro stíny můžete také použít --variable jako hodnotu barvy pro použití proměnných CSS3. Prosím berte na vědomí, že nastavení průhlednosti v tomto případě nebude fungovat.",
+        "filter_hint": {
+          "always_drop_shadow": "Varování, tento stín vždy používá {0}, když to prohlížeč podporuje.",
+          "drop_shadow_syntax": "{0} nepodporuje parametr {1} a klíčové slovo {2}.",
+          "avatar_inset": "Prosím berte na vědomí, že kombinování vsazených i nevsazených stínů u avatarů může u průhledných avatarů dát neočekávané výsledky.",
+          "spread_zero": "Stíny s rozsahem > 0 se zobrazí, jako kdyby byl rozsah nastaven na nulu",
+          "inset_classic": "Vsazené stíny budou používat {0}"
+        },
+        "components": {
+          "panel": "Panel",
+          "panelHeader": "Záhlaví panelu",
+          "topBar": "Vrchní pruh",
+          "avatar": "Avatar uživatele (v zobrazení profilu)",
+          "avatarStatus": "Avatar uživatele (v zobrazení příspěvku)",
+          "popup": "Vyskakovací okna a popisky",
+          "button": "Tlačítko",
+          "buttonHover": "Tlačítko (přejetí myši)",
+          "buttonPressed": "Tlačítko (stisknuto)",
+          "buttonPressedHover": "Button (stisknuto+přejetí myši)",
+          "input": "Vstupní pole"
+        }
+      },
+      "fonts": {
+        "_tab_label": "Písma",
+        "help": "Zvolte písmo, které bude použito pro prvky rozhraní. U možnosti „vlastní“ musíte zadat přesný název písma tak, jak se zobrazuje v systému.",
+        "components": {
+          "interface": "Rozhraní",
+          "input": "Vstupní pole",
+          "post": "Text příspěvků",
+          "postCode": "Neproporcionální text v příspěvku (formátovaný text)"
+        },
+        "family": "Název písma",
+        "size": "Velikost (v pixelech)",
+        "weight": "Tloušťka",
+        "custom": "Vlastní"
+      },
+      "preview": {
+        "header": "Náhled",
+        "content": "Obsah",
+        "error": "Příklad chyby",
+        "button": "Tlačítko",
+        "text": "Spousta dalšího {0} a {1}",
+        "mono": "obsahu",
+        "input": "Právě jsem přistál v L.A.",
+        "faint_link": "pomocný manuál",
+        "fine_print": "Přečtěte si náš {0} a nenaučte se nic užitečného!",
+        "header_faint": "Tohle je v pohodě",
+        "checkbox": "Pročetl/a jsem podmínky používání",
+        "link": "hezký malý odkaz"
+      }
+    }
+  },
+  "timeline": {
+    "collapse": "Zabalit",
+    "conversation": "Konverzace",
+    "error_fetching": "Chyba při načítání aktualizací",
+    "load_older": "Načíst starší příspěvky",
+    "no_retweet_hint": "Příspěvek je označen jako pouze pro sledující či přímý a nemůže být zopakován",
+    "repeated": "zopakoval/a",
+    "show_new": "Zobrazit nové",
+    "up_to_date": "Aktuální",
+    "no_more_statuses": "Žádné další příspěvky",
+    "no_statuses": "Žádné příspěvky"
+  },
+  "status": {
+    "reply_to": "Odpověď uživateli",
+    "replies_list": "Odpovědi:"
+  },
+
+  "user_card": {
+    "approve": "Schválit",
+    "block": "Blokovat",
+    "blocked": "Blokován/a!",
+    "deny": "Zamítnout",
+    "favorites": "Oblíbené",
+    "follow": "Sledovat",
+    "follow_sent": "Požadavek odeslán!",
+    "follow_progress": "Odeslílám požadavek…",
+    "follow_again": "Odeslat požadavek znovu?",
+    "follow_unfollow": "Přestat sledovat",
+    "followees": "Sledovaní",
+    "followers": "Sledující",
+    "following": "Sledujete!",
+    "follows_you": "Sleduje vás!",
+    "its_you": "Jste to vy!",
+    "media": "Média",
+    "mute": "Ignorovat",
+    "muted": "Ignorován/a",
+    "per_day": "za den",
+    "remote_follow": "Vzdálené sledování",
+    "statuses": "Příspěvky",
+    "unblock": "Odblokovat",
+    "unblock_progress": "Odblokuji…",
+    "block_progress": "Blokuji…",
+    "unmute": "Přestat ignorovat",
+    "unmute_progress": "Ruším ignorování…",
+    "mute_progress": "Ignoruji…"
+  },
+  "user_profile": {
+    "timeline_title": "Uživatelská časová osa",
+    "profile_does_not_exist": "Omlouváme se, tento profil neexistuje.",
+    "profile_loading_error": "Omlouváme se, při načítání tohoto profilu se vyskytla chyba."
+  },
+  "who_to_follow": {
+    "more": "Více",
+    "who_to_follow": "Koho sledovat"
+  },
+  "tool_tip": {
+    "media_upload": "Nahrát média",
+    "repeat": "Zopakovat",
+    "reply": "Odpovědět",
+    "favorite": "Oblíbit",
+    "user_settings": "Uživatelské nastavení"
+  },
+  "upload":{
+    "error": {
+      "base": "Nahrávání selhalo.",
+      "file_too_big": "Soubor je příliš velký [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "Zkuste to znovu později"
+    },
+    "file_size_units": {
+      "B": "B",
+      "KiB": "KiB",
+      "MiB": "MiB",
+      "GiB": "GiB",
+      "TiB": "TiB"
+    }
+  }
+}

src/i18n/de.json

@@ -55,7 +55,7 @@
     "account_not_locked_warning_link": "gesperrt",
     "attachments_sensitive": "Anhänge als heikel markieren",
     "content_type": {
-      "plain_text": "Nur Text"
+      "text/plain": "Nur Text"
     },
     "content_warning": "Betreff (optional)",
     "default": "Sitze gerade im Hofbräuhaus.",

src/i18n/en.json

@@ -25,6 +25,7 @@
   "image_cropper": {
     "crop_picture": "Crop picture",
     "save": "Save",
+    "save_without_cropping": "Save without cropping",
     "cancel": "Cancel"
   },
   "login": {
@@ -71,7 +72,9 @@
     "account_not_locked_warning_link": "locked",
     "attachments_sensitive": "Mark attachments as sensitive",
     "content_type": {
-      "plain_text": "Plain text"
+      "text/plain": "Plain text",
+      "text/html": "HTML",
+      "text/markdown": "Markdown"
     },
     "content_warning": "Subject (optional)",
     "default": "Just landed in L.A.",
@@ -95,7 +98,7 @@
     "new_captcha": "Click the image to get a new captcha",
     "username_placeholder": "e.g. lain",
     "fullname_placeholder": "e.g. Lain Iwakura",
-    "bio_placeholder": "e.g.\nHi, I'm Lain\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
+    "bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
     "validations": {
       "username_required": "cannot be left blank",
       "fullname_required": "cannot be left blank",
@@ -150,6 +153,7 @@
     "general": "General",
     "hide_attachments_in_convo": "Hide attachments in conversations",
     "hide_attachments_in_tl": "Hide attachments in timeline",
+    "hide_muted_posts": "Hide posts of muted users",
     "max_thumbnails": "Maximum amount of thumbnails per post",
     "hide_isp": "Hide instance-specific panel",
     "preload_images": "Preload images",
@@ -222,7 +226,6 @@
     "subject_line_mastodon": "Like mastodon: copy as is",
     "subject_line_noop": "Do not copy",
     "post_status_content_type": "Post status content type",
-    "status_content_type_plain": "Plain text",
     "stop_gifs": "Play-on-hover GIFs",
     "streaming": "Enable automatic streaming of new posts when scrolled to the top",
     "text": "Text",
@@ -347,6 +350,11 @@
         "checkbox": "I have skimmed over terms and conditions",
         "link": "a nice lil' link"
       }
+    },
+    "version": {
+      "title": "Version",
+      "backend_version": "Backend Version",
+      "frontend_version": "Frontend Version"
     }
   },
   "timeline": {

src/i18n/eo.json

@@ -2,118 +2,420 @@
   "chat": {
     "title": "Babilejo"
   },
+  "features_panel": {
+    "chat": "Babilejo",
+    "gopher": "Gopher",
+    "media_proxy": "Aŭdvidaĵa prokurilo",
+    "scope_options": "Agordoj de amplekso",
+    "text_limit": "Teksta limo",
+    "title": "Funkcioj",
+    "who_to_follow": "Kiun aboni"
+  },
   "finder": {
     "error_fetching_user": "Eraro alportante uzanton",
     "find_user": "Trovi uzanton"
   },
   "general": {
     "apply": "Apliki",
-    "submit": "Sendi"
+    "submit": "Sendi",
+    "more": "Pli",
+    "generic_error": "Eraro okazis",
+    "optional": "Malnepra"
+  },
+  "image_cropper": {
+    "crop_picture": "Tondi bildon",
+    "save": "Konservi",
+    "cancel": "Nuligi"
   },
   "login": {
-    "login": "Ensaluti",
-    "logout": "Elsaluti",
+    "login": "Saluti",
+    "description": "Saluti per OAuth",
+    "logout": "Adiaŭi",
     "password": "Pasvorto",
     "placeholder": "ekz. lain",
     "register": "Registriĝi",
-    "username": "Salutnomo"
+    "username": "Salutnomo",
+    "hint": "Salutu por partopreni la diskutadon"
+  },
+  "media_modal": {
+    "previous": "Antaŭa",
+    "next": "Sekva"
   },
   "nav": {
+    "about": "Pri",
+    "back": "Reen",
     "chat": "Loka babilejo",
+    "friend_requests": "Abonaj petoj",
     "mentions": "Mencioj",
+    "dms": "Rektaj mesaĝoj",
     "public_tl": "Publika tempolinio",
     "timeline": "Tempolinio",
-    "twkn": "La tuta konata reto"
+    "twkn": "La tuta konata reto",
+    "user_search": "Serĉi uzantojn",
+    "who_to_follow": "Kiun aboni",
+    "preferences": "Agordoj"
   },
   "notifications": {
+    "broken_favorite": "Nekonata stato, serĉante ĝin…",
     "favorited_you": "ŝatis vian staton",
     "followed_you": "ekabonis vin",
+    "load_older": "Enlegi pli malnovajn sciigojn",
     "notifications": "Sciigoj",
     "read": "Legite!",
-    "repeated_you": "ripetis vian staton"
+    "repeated_you": "ripetis vian staton",
+    "no_more_notifications": "Neniuj pliaj sciigoj"
   },
   "post_status": {
+    "new_status": "Afiŝi novan staton",
+    "account_not_locked_warning": "Via konto ne estas {0}. Iu ajn povas vin aboni por vidi viajn afiŝoj nur por abonantoj.",
+    "account_not_locked_warning_link": "ŝlosita",
+    "attachments_sensitive": "Marki kunsendaĵojn kiel konsternajn",
+    "content_type": {
+      "text/plain": "Plata teksto"
+    },
+    "content_warning": "Temo (malnepra)",
     "default": "Ĵus alvenis al la Universala Kongreso!",
-    "posting": "Afiŝante"
+    "direct_warning": "Ĉi tiu afiŝo estos videbla nur por ĉiuj menciitaj uzantoj.",
+    "posting": "Afiŝante",
+    "scope": {
+      "direct": "Rekta – Afiŝi nur al menciitaj uzantoj",
+      "private": "Nur abonantoj – Afiŝi nur al abonantoj",
+      "public": "Publika – Afiŝi al publikaj tempolinioj",
+      "unlisted": "Nelistigita – Ne afiŝi al publikaj tempolinioj"
+    }
   },
   "registration": {
     "bio": "Priskribo",
     "email": "Retpoŝtadreso",
     "fullname": "Vidiga nomo",
     "password_confirm": "Konfirmo de pasvorto",
-    "registration": "Registriĝo"
+    "registration": "Registriĝo",
+    "token": "Invita ĵetono",
+    "captcha": "TESTO DE HOMECO",
+    "new_captcha": "Alklaku la bildon por akiri novan teston",
+    "username_placeholder": "ekz. lain",
+    "fullname_placeholder": "ekz. Lain Iwakura",
+    "bio_placeholder": "ekz.\nSaluton, mi estas Lain\nMi estas animea knabino vivante en Japanujo. Eble vi konas min de la retejo « Wired ».",
+    "validations": {
+      "username_required": "ne povas resti malplena",
+      "fullname_required": "ne povas resti malplena",
+      "email_required": "ne povas resti malplena",
+      "password_required": "ne povas resti malplena",
+      "password_confirmation_required": "ne povas resti malplena",
+      "password_confirmation_match": "samu la pasvorton"
+    }
   },
   "settings": {
+    "app_name": "Nomo de aplikaĵo",
     "attachmentRadius": "Kunsendaĵoj",
     "attachments": "Kunsendaĵoj",
-    "autoload": "Ŝalti memfaran ŝarĝadon ĉe subo de paĝo",
+    "autoload": "Ŝalti memfaran enlegadon ĉe subo de paĝo",
     "avatar": "Profilbildo",
     "avatarAltRadius": "Profilbildoj (sciigoj)",
     "avatarRadius": "Profilbildoj",
     "background": "Fono",
     "bio": "Priskribo",
+    "blocks_tab": "Baroj",
     "btnRadius": "Butonoj",
     "cBlue": "Blua (Respondo, abono)",
     "cGreen": "Verda (Kunhavigo)",
     "cOrange": "Oranĝa (Ŝato)",
     "cRed": "Ruĝa (Nuligo)",
+    "change_password": "Ŝanĝi pasvorton",
+    "change_password_error": "Okazis eraro dum ŝanĝo de via pasvorto.",
+    "changed_password": "Pasvorto sukcese ŝanĝiĝis!",
+    "collapse_subject": "Maletendi afiŝojn kun temoj",
+    "composing": "Verkante",
+    "confirm_new_password": "Konfirmu novan pasvorton",
     "current_avatar": "Via nuna profilbildo",
+    "current_password": "Nuna pasvorto",
     "current_profile_banner": "Via nuna profila rubando",
+    "data_import_export_tab": "Enporto / Elporto de datenoj",
+    "default_vis": "Implicita videbleca amplekso",
+    "delete_account": "Forigi konton",
+    "delete_account_description": "Por ĉiam forigi vian konton kaj ĉiujn viajn mesaĝojn",
+    "delete_account_error": "Okazis eraro dum forigo de via kanto. Se tio daŭre okazados, bonvolu kontakti la administranton de via nodo.",
+    "delete_account_instructions": "Entajpu sube vian pasvorton por konfirmi forigon de konto.",
+    "avatar_size_instruction": "La rekomendata malpleja grando de profilbildoj estas 150×150 bilderoj.",
+    "export_theme": "Konservi antaŭagordon",
     "filtering": "Filtrado",
-    "filtering_explanation": "Ĉiuj statoj kun tiuj ĉi vortoj silentiĝos, po unu linie",
+    "filtering_explanation": "Ĉiuj statoj kun tiuj ĉi vortoj silentiĝos, po unu linio",
+    "follow_export": "Abona elporto",
+    "follow_export_button": "Elporti viajn abonojn al CSV-dosiero",
+    "follow_export_processing": "Traktante; baldaŭ vi ricevos peton elŝuti la dosieron",
     "follow_import": "Abona enporto",
     "follow_import_error": "Eraro enportante abonojn",
     "follows_imported": "Abonoj enportiĝis! Traktado daŭros iom.",
     "foreground": "Malfono",
+    "general": "Ĝenerala",
     "hide_attachments_in_convo": "Kaŝi kunsendaĵojn en interparoloj",
     "hide_attachments_in_tl": "Kaŝi kunsendaĵojn en tempolinio",
+    "max_thumbnails": "Plej multa nombro da bildetoj po afiŝo",
+    "hide_isp": "Kaŝi nodo-propran breton",
+    "preload_images": "Antaŭ-enlegi bildojn",
+    "use_one_click_nsfw": "Malfermi konsternajn kunsendaĵojn per nur unu klako",
+    "hide_post_stats": "Kaŝi statistikon de afiŝoj (ekz. nombron da ŝatoj)",
+    "hide_user_stats": "Kaŝi statistikon de uzantoj (ekz. nombron da abonantoj)",
+    "hide_filtered_statuses": "Kaŝi filtritajn statojn",
     "import_followers_from_a_csv_file": "Enporti abonojn el CSV-dosiero",
+    "import_theme": "Enlegi antaŭagordojn",
+    "inputRadius": "Enigaj kampoj",
+    "checkboxRadius": "Markbutonoj",
+    "instance_default": "(implicita: {value})",
+    "instance_default_simple": "(implicita)",
+    "interface": "Fasado",
+    "interfaceLanguage": "Lingvo de fasado",
+    "invalid_theme_imported": "La elektita dosiero ne estas subtenata haŭto de Pleromo. Neniuj ŝanĝoj al via haŭto okazis.",
+    "limited_availability": "Nehavebla en via foliumilo",
     "links": "Ligiloj",
+    "lock_account_description": "Limigi vian konton al nur abonantoj aprobitaj",
+    "loop_video": "Ripetadi filmojn",
+    "loop_video_silent_only": "Ripetadi nur filmojn sen sono (ekz. la \"GIF-ojn\" de Mastodon)",
+    "mutes_tab": "Silentigoj",
+    "play_videos_in_modal": "Ludi filmojn rekte en la aŭdvidaĵa spektilo",
+    "use_contain_fit": "Ne tondi la kunsendaĵon en bildetoj",
     "name": "Nomo",
     "name_bio": "Nomo kaj priskribo",
+    "new_password": "Nova pasvorto",
+    "notification_visibility": "Montrotaj specoj de sciigoj",
+    "notification_visibility_follows": "Abonoj",
+    "notification_visibility_likes": "Ŝatoj",
+    "notification_visibility_mentions": "Mencioj",
+    "notification_visibility_repeats": "Ripetoj",
+    "no_rich_text_description": "Forigi riĉtekstajn formojn de ĉiuj afiŝoj",
+    "no_blocks": "Neniuj baroj",
+    "no_mutes": "Neniuj silentigoj",
+    "hide_follows_description": "Ne montri kiun mi sekvas",
+    "hide_followers_description": "Ne montri kiu min sekvas",
+    "show_admin_badge": "Montri la insignon de administranto en mia profilo",
+    "show_moderator_badge": "Montri la insignon de kontrolanto en mia profilo",
     "nsfw_clickthrough": "Ŝalti traklakan kaŝon de konsternaj kunsendaĵoj",
-    "panelRadius": "Paneloj",
+    "oauth_tokens": "Ĵetonoj de OAuth",
+    "token": "Ĵetono",
+    "refresh_token": "Ĵetono de novigo",
+    "valid_until": "Valida ĝis",
+    "revoke_token": "Senvalidigi",
+    "panelRadius": "Bretoj",
+    "pause_on_unfocused": "Paŭzigi elsendfluon kiam langeto ne estas fokusata",
     "presets": "Antaŭagordoj",
     "profile_background": "Profila fono",
     "profile_banner": "Profila rubando",
-    "radii_help": "Agordi fasadan rondigon de randoj (rastrumere)",
-    "reply_link_preview": "Ŝalti respond-ligilan antaŭvidon dum ŝvebo",
+    "profile_tab": "Profilo",
+    "radii_help": "Agordi fasadan rondigon de randoj (bildere)",
+    "replies_in_timeline": "Respondoj en tempolinio",
+    "reply_link_preview": "Ŝalti respond-ligilan antaŭvidon dum musa ŝvebo",
+    "reply_visibility_all": "Montri ĉiujn respondojn",
+    "reply_visibility_following": "Montri nur respondojn por mi aŭ miaj abonatoj",
+    "reply_visibility_self": "Montri nur respondojn por mi",
+    "saving_err": "Eraro dum konservo de agordoj",
+    "saving_ok": "Agordoj konserviĝis",
+    "security_tab": "Sekureco",
+    "scope_copy": "Kopii amplekson por respondo (rektaj mesaĝoj ĉiam kopiiĝas)",
     "set_new_avatar": "Agordi novan profilbildon",
     "set_new_profile_background": "Agordi novan profilan fonon",
     "set_new_profile_banner": "Agordi novan profilan rubandon",
     "settings": "Agordoj",
-    "stop_gifs": "Movi GIF-bildojn dum ŝvebo",
+    "subject_input_always_show": "Ĉiam montri teman kampon",
+    "subject_line_behavior": "Kopii temon por respondo",
+    "subject_line_email": "Kiel retpoŝto: \"re: temo\"",
+    "subject_line_mastodon": "Kiel Mastodon: kopii senŝanĝe",
+    "subject_line_noop": "Ne kopii",
+    "post_status_content_type": "Afiŝi specon de la enhavo de la stato",
+    "stop_gifs": "Movi GIF-bildojn dum musa ŝvebo",
     "streaming": "Ŝalti memfaran fluigon de novaj afiŝoj ĉe la supro de la paĝo",
     "text": "Teksto",
-    "theme": "Etoso",
-    "theme_help": "Uzu deksesumajn kolorkodojn (#rrvvbb) por adapti vian koloran etoson.",
+    "theme": "Haŭto",
+    "theme_help": "Uzu deksesumajn kolorkodojn (#rrvvbb) por adapti vian koloran haŭton.",
+    "theme_help_v2_1": "Vi ankaŭ povas superagordi la kolorojn kaj travideblecon de kelkaj eroj per marko de la markbutono; uzu la butonon \"Vakigi ĉion\" por forigi ĉîujn superagordojn.",
+    "theme_help_v2_2": "Bildsimboloj sub kelkaj eroj estas indikiloj de kontrasto inter fono kaj teksto; muse ŝvebu por detalaj informoj. Bonvolu memori, ke la indikilo montras la plej malbonan okazeblon dum sia uzo.",
     "tooltipRadius": "Ŝpruchelpiloj/avertoj",
-    "user_settings": "Uzantaj agordoj"
+    "upload_a_photo": "Alŝuti foton",
+    "user_settings": "Agordoj de uzanto",
+    "values": {
+      "false": "ne",
+      "true": "jes"
+    },
+    "notifications": "Sciigoj",
+    "enable_web_push_notifications": "Ŝalti retajn puŝajn sciigojn",
+    "style": {
+      "switcher": {
+        "keep_color": "Konservi kolorojn",
+        "keep_shadows": "Konservi ombrojn",
+        "keep_opacity": "Konservi maltravideblecon",
+        "keep_roundness": "Konservi rondecon",
+        "keep_fonts": "Konservi tiparojn",
+        "save_load_hint": "Elektebloj de \"konservi\" konservas la nuntempajn agordojn dum elektado aŭ enlegado de haŭtoj. Ĝi ankaŭ konservas tiujn agordojn dum elportado de haŭto. Kun ĉiuj markbutonoj nemarkitaj, elporto de la haŭto ĉion konservos.",
+        "reset": "Restarigi",
+        "clear_all": "Vakigi ĉion",
+        "clear_opacity": "Vakigi maltravideblecon"
+      },
+      "common": {
+        "color": "Koloro",
+        "opacity": "Maltravidebleco",
+        "contrast": {
+          "hint": "Proporcio de kontrasto estas {ratio}, ĝi {level} {context}",
+          "level": {
+            "aa": "plenumas la gvidilon je nivelo AA (malpleja)",
+            "aaa": "plenumas la gvidilon je nivela AAA (rekomendita)",
+            "bad": "plenumas neniujn faciluzajn gvidilojn"
+          },
+          "context": {
+            "18pt": "por granda (18pt+) teksto",
+            "text": "por teksto"
+          }
+        }
+      },
+      "common_colors": {
+        "_tab_label": "Komunaj",
+        "main": "Komunaj koloroj",
+        "foreground_hint": "Vidu langeton \"Specialaj\" por pli detalaj agordoj",
+        "rgbo": "Bildsimboloj, emfazoj, insignoj"
+      },
+      "advanced_colors": {
+        "_tab_label": "Specialaj",
+        "alert": "Averta fono",
+        "alert_error": "Eraro",
+        "badge": "Insigna fono",
+        "badge_notification": "Sciigo",
+        "panel_header": "Kapo de breto",
+        "top_bar": "Supra breto",
+        "borders": "Limoj",
+        "buttons": "Butonoj",
+        "inputs": "Enigaj kampoj",
+        "faint_text": "Malvigla teksto"
+      },
+      "radii": {
+        "_tab_label": "Rondeco"
+      },
+      "shadows": {
+        "_tab_label": "Ombro kaj lumo",
+        "component": "Ero",
+        "override": "Transpasi",
+        "shadow_id": "Ombro #{value}",
+        "blur": "Malklarigo",
+        "spread": "Vastigo",
+        "inset": "Internigo",
+        "hint": "Por ombroj vi ankaŭ povas uzi --variable kiel koloran valoron, por uzi variantojn de CSS3. Bonvolu rimarki, ke tiuokaze agordoj de maltravidebleco ne funkcios.",
+        "filter_hint": {
+          "always_drop_shadow": "Averto: ĉi tiu ombro ĉiam uzas {0} kiam la foliumilo ĝin subtenas.",
+          "drop_shadow_syntax": "{0} ne subtenas parametron {1} kaj ŝlosilvorton {2}.",
+          "avatar_inset": "Bonvolu rimarki, ke agordi ambaŭ internajn kaj eksterajn ombrojn por profilbildoj povas redoni neatenditajn rezultojn ĉe profilbildoj travideblaj.",
+          "spread_zero": "Ombroj kun vastigo > 0 aperos kvazaŭ ĝi estus fakte nulo",
+          "inset_classic": "Internaj ombroj uzos {0}"
+        },
+        "components": {
+          "panel": "Breto",
+          "panelHeader": "Kapo de breto",
+          "topBar": "Supra breto",
+          "avatar": "Profilbildo de uzanto (en profila vido)",
+          "avatarStatus": "Profilbildo de uzanto (en afiŝa vido)",
+          "popup": "Ŝprucaĵoj",
+          "button": "Butono",
+          "buttonHover": "Butono (je ŝvebo)",
+          "buttonPressed": "Butono (premita)",
+          "buttonPressedHover": "Butono (premita je ŝvebo)",
+          "input": "Eniga kampo"
+        }
+      },
+      "fonts": {
+        "_tab_label": "Tiparoj",
+        "help": "Elektu tiparon uzotan por eroj de la fasado. Por \"propra\" vi devas enigi la precizan nomon de tiparo tiel, kiel ĝi aperas en la sistemo",
+        "components": {
+          "interface": "Fasado",
+          "input": "Enigaj kampoj",
+          "post": "Teksto de afiŝo",
+          "postCode": "Egallarĝa teksto en afiŝo (riĉteksto)"
+        },
+        "family": "Nomo de tiparo",
+        "size": "Grando (en bilderoj)",
+        "weight": "Pezo (graseco)",
+        "custom": "Propra"
+      },
+      "preview": {
+        "header": "Antaŭrigardo",
+        "content": "Enhavo",
+        "error": "Ekzempla eraro",
+        "button": "Butono",
+        "text": "Kelko da pliaj {0} kaj {1}",
+        "mono": "enhavo",
+        "input": "Ĵus alvenis al la Universala Kongreso!",
+        "faint_link": "helpan manlibron",
+        "fine_print": "Legu nian {0} por nenion utilan ekscii!",
+        "header_faint": "Tio estas en ordo",
+        "checkbox": "Mi legetis la kondiĉojn de uzado",
+        "link": "bela eta ligil’"
+      }
+    }
   },
   "timeline": {
     "collapse": "Maletendi",
     "conversation": "Interparolo",
     "error_fetching": "Eraro dum ĝisdatigo",
     "load_older": "Montri pli malnovajn statojn",
-    "repeated": "ripetata",
+    "no_retweet_hint": "Afiŝo estas markita kiel rekta aŭ nur por abonantoj, kaj ne eblas ĝin ripeti",
+    "repeated": "ripetita",
     "show_new": "Montri novajn",
-    "up_to_date": "Ĝisdata"
+    "up_to_date": "Ĝisdata",
+    "no_more_statuses": "Neniuj pliaj statoj",
+    "no_statuses": "Neniuj statoj"
   },
   "user_card": {
+    "approve": "Aprobi",
     "block": "Bari",
     "blocked": "Barita!",
+    "deny": "Rifuzi",
+    "favorites": "Ŝatataj",
     "follow": "Aboni",
+    "follow_sent": "Peto sendiĝis!",
+    "follow_progress": "Petanta…",
+    "follow_again": "Ĉu sendi peton denove?",
+    "follow_unfollow": "Malaboni",
     "followees": "Abonatoj",
     "followers": "Abonantoj",
     "following": "Abonanta!",
     "follows_you": "Abonas vin!",
+    "its_you": "Tio estas vi!",
+    "media": "Aŭdvidaĵoj",
     "mute": "Silentigi",
     "muted": "Silentigitaj",
     "per_day": "tage",
     "remote_follow": "Fore aboni",
-    "statuses": "Statoj"
+    "statuses": "Statoj",
+    "unblock": "Malbari",
+    "unblock_progress": "Malbaranta…",
+    "block_progress": "Baranta…",
+    "unmute": "Malsilentigi",
+    "unmute_progress": "Malsilentiganta…",
+    "mute_progress": "Silentiganta…"
   },
   "user_profile": {
-    "timeline_title": "Uzanta tempolinio"
+    "timeline_title": "Uzanta tempolinio",
+    "profile_does_not_exist": "Pardonu, ĉi tiu profilo ne ekzistas.",
+    "profile_loading_error": "Pardonu, eraro okazis dum enlegado de ĉi tiu profilo."
+  },
+  "who_to_follow": {
+    "more": "Pli",
+    "who_to_follow": "Kiun aboni"
+  },
+  "tool_tip": {
+    "media_upload": "Alŝuti aŭdvidaĵon",
+    "repeat": "Ripeti",
+    "reply": "Respondi",
+    "favorite": "Ŝati",
+    "user_settings": "Agordoj de uzanto"
+  },
+  "upload":{
+    "error": {
+      "base": "Alŝuto malsukcesis.",
+      "file_too_big": "Dosiero estas tro granda [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "Reprovu pli poste"
+    },
+    "file_size_units": {
+      "B": "B",
+      "KiB": "KiB",
+      "MiB": "MiB",
+      "GiB": "GiB",
+      "TiB": "TiB"
+    }
   }
 }

src/i18n/es.json

@@ -61,7 +61,7 @@
     "account_not_locked_warning_link": "bloqueada",
     "attachments_sensitive": "Contenido sensible",
     "content_type": {
-      "plain_text": "Texto Plano"
+      "text/plain": "Texto Plano"
     },
     "content_warning": "Tema (opcional)",
     "default": "Acabo de aterrizar en L.A.",
@@ -202,7 +202,6 @@
     "subject_line_mastodon": "Tipo mastodon: copiar como es",
     "subject_line_noop": "No copiar",
     "post_status_content_type": "Formato de publicación",
-    "status_content_type_plain": "Texto plano",
     "stop_gifs": "Iniciar GIFs al pasar el ratón",
     "streaming": "Habilite la transmisión automática de nuevas publicaciones cuando se desplaza hacia la parte superior",
     "text": "Texto",

src/i18n/fi.json

@@ -60,7 +60,7 @@
     "account_not_locked_warning_link": "lukittu",
     "attachments_sensitive": "Merkkaa liitteet arkaluonteisiksi",
     "content_type": {
-      "plain_text": "Tavallinen teksti"
+      "text/plain": "Tavallinen teksti"
     },
     "content_warning": "Aihe (valinnainen)",
     "default": "Tulin juuri saunasta.",

src/i18n/fr.json

@@ -51,7 +51,7 @@
     "account_not_locked_warning_link": "verrouillé",
     "attachments_sensitive": "Marquer le média comme sensible",
     "content_type": {
-      "plain_text": "Texte brut"
+      "text/plain": "Texte brut"
     },
     "content_warning": "Sujet (optionnel)",
     "default": "Écrivez ici votre prochain statut.",

src/i18n/ga.json

@@ -49,7 +49,7 @@
     "account_not_locked_warning_link": "faoi glas",
     "attachments_sensitive": "Marcáil ceangaltán mar íogair",
     "content_type": {
-      "plain_text": "Gnáth-théacs"
+      "text/plain": "Gnáth-théacs"
     },
     "content_warning": "Teideal (roghnach)",
     "default": "Lá iontach anseo i nGaillimh",

src/i18n/he.json

@@ -49,7 +49,7 @@
     "account_not_locked_warning_link": "נעול",
     "attachments_sensitive": "סמן מסמכים מצורפים כלא בטוחים לצפייה",
     "content_type": {
-      "plain_text": "טקסט פשוט"
+      "text/plain": "טקסט פשוט"
     },
     "content_warning": "נושא (נתון לבחירה)",
     "default": "הרגע נחת ב-ל.א.",

src/i18n/it.json

@@ -175,7 +175,7 @@
     "account_not_locked_warning_link": "bloccato",
     "attachments_sensitive": "Segna allegati come sensibili",
     "content_type": {
-      "plain_text": "Testo normale"
+      "text/plain": "Testo normale"
     },
     "content_warning": "Oggetto (facoltativo)",
     "default": "Appena atterrato in L.A.",

src/i18n/ja.json

@@ -61,7 +61,7 @@
     "account_not_locked_warning_link": "ロックされたアカウント",
     "attachments_sensitive": "ファイルをNSFWにする",
     "content_type": {
-      "plain_text": "プレーンテキスト"
+      "text/plain": "プレーンテキスト"
     },
     "content_warning": "せつめい (かかなくてもよい)",
     "default": "はねだくうこうに、つきました。",
@@ -202,7 +202,6 @@
     "subject_line_mastodon": "マストドンふう: そのままコピー",
     "subject_line_noop": "コピーしない",
     "post_status_content_type": "とうこうのコンテントタイプ",
-    "status_content_type_plain": "プレーンテキスト",
     "stop_gifs": "カーソルをかさねたとき、GIFをうごかす",
     "streaming": "うえまでスクロールしたとき、じどうてきにストリーミングする",
     "text": "もじ",

src/i18n/ko.json

@@ -56,7 +56,7 @@
     "account_not_locked_warning_link": "잠김",
     "attachments_sensitive": "첨부물을 민감함으로 설정",
     "content_type": {
-      "plain_text": "평문"
+      "text/plain": "평문"
     },
     "content_warning": "주제 (필수 아님)",
     "default": "LA에 도착!",

src/i18n/messages.js

@@ -10,6 +10,7 @@
 const messages = {
   ar: require('./ar.json'),
   ca: require('./ca.json'),
+  cs: require('./cs.json'),
   de: require('./de.json'),
   en: require('./en.json'),
   eo: require('./eo.json'),

src/i18n/nb.json

@@ -49,7 +49,7 @@
     "account_not_locked_warning_link": "låst",
     "attachments_sensitive": "Merk vedlegg som sensitive",
     "content_type": {
-      "plain_text": "Klar tekst"
+      "text/plain": "Klar tekst"
     },
     "content_warning": "Tema (valgfritt)",
     "default": "Landet akkurat i L.A.",

src/i18n/nl.json

@@ -57,7 +57,7 @@
     "account_not_locked_warning_link": "gesloten",
     "attachments_sensitive": "Markeer bijlage als gevoelig",
     "content_type": {
-      "plain_text": "Gewone tekst"
+      "text/plain": "Gewone tekst"
     },
     "content_warning": "Onderwerp (optioneel)",
     "default": "Tijd voor een pauze!",

src/i18n/oc.json

@@ -1,51 +1,84 @@
 {
   "chat": {
     "title": "Messatjariá"
+  },
+    "features_panel": {
+      "chat": "Chat",
+      "gopher": "Gopher",
+      "media_proxy": "Servidor mandatari mèdia",
+      "scope_options": "Nivèls de confidencialitat",
+      "text_limit": "Limita de tèxte",
+      "title": "Foncionalitats",
+      "who_to_follow": "Qual seguir"
   },
   "finder": {
-    "error_fetching_user": "Error pendent la recèrca d’un utilizaire",
+    "error_fetching_user": "Error pendent la cèrca d’un utilizaire",
     "find_user": "Cercar un utilizaire"
   },
   "general": {
     "apply": "Aplicar",
-    "submit": "Mandar"
+    "submit": "Mandar",
+    "more": "Mai",
+    "generic_error": "Una error s’es producha",
+    "optional": "opcional"
+  },
+  "image_cropper": {
+     "crop_picture": "Talhar l’imatge",
+     "save": "Salvar",
+     "cancel": "Anullar"
   },
   "login": {
     "login": "Connexion",
+    "description": "Connexion via OAuth",
     "logout": "Desconnexion",
     "password": "Senhal",
     "placeholder": "e.g. lain",
     "register": "Se marcar",
-    "username": "Nom d’utilizaire"
+    "username": "Nom d’utilizaire",
+    "hint": "Connectatz-vos per participar a la discutida"
+  },
+  "media_modal": {
+    "previous": "Precedent",
+    "next": "Seguent"
   },
   "nav": {
+    "about": "A prepaus",
+    "back": "Tornar",
     "chat": "Chat local",
+    "friend_requests": "Demandas de seguiment",
     "mentions": "Notificacions",
+    "dms": "Messatges privats",
     "public_tl": "Estatuts locals",
     "timeline": "Flux d’actualitat",
     "twkn": "Lo malhum conegut",
-    "friend_requests": "Demandas d'abonament"
+    "user_search": "Cèrca d’utilizaires",
+    "who_to_follow": "Qual seguir",
+    "preferences": "Preferéncias"
   },
   "notifications": {
+    "broken_favorite": "Estatut desconegut, sèm a lo cercar...",
     "favorited_you": "a aimat vòstre estatut",
     "followed_you": "vos a seguit",
+    "load_older": "Cargar las notificacions mai ancianas",
     "notifications": "Notficacions",
-    "read": "Legit !",
+    "read": "Legit !",
     "repeated_you": "a repetit vòstre estatut",
-    "broken_favorite": "Estatut desconegut, sèm a lo cercar...",
-    "load_older": "Cargar las notificaciones mai ancianas"
+    "no_more_notifications": "Pas mai de notificacions"
   },
   "post_status": {
-    "content_warning": "Avís de contengut (opcional)",
-    "default": "Escrivètz aquí vòstre estatut.",
-    "posting": "Mandadís",
-    "account_not_locked_warning": "Vòstre compte es pas {0}. Qual que siá pòt vos seguir per veire vòstras publicacions destinadas pas qu'a vòstres seguidors.",
+    "new_status": "Publicar d’estatuts novèls",
+    "account_not_locked_warning": "Vòstre compte es pas {0}. Qual que siá pòt vos seguir per veire vòstras publicacions destinadas pas qu’a vòstres seguidors.",
     "account_not_locked_warning_link": "clavat",
     "attachments_sensitive": "Marcar las pèças juntas coma sensiblas",
     "content_type": {
-      "plain_text": "Tèxte brut"
+      "text/plain": "Tèxte brut",
+      "text/html": "HTML",
+      "text/markdown": "Markdown"
     },
+    "content_warning": "Avís de contengut (opcional)",
+    "default": "Escrivètz aquí vòstre estatut.",
     "direct_warning": "Aquesta publicacion serà pas que visibla pels utilizaires mencionats.",
+    "posting": "Mandadís",
     "scope": {
       "direct": "Dirècte - Publicar pels utilizaires mencionats solament",
       "private": "Seguidors solament - Publicar pels sols seguidors",
@@ -59,9 +92,23 @@
     "fullname": "Nom complèt",
     "password_confirm": "Confirmar lo senhal",
     "registration": "Inscripcion",
-    "token": "Geton de convidat"
+    "token": "Geton de convidat",
+    "captcha": "CAPTCHA",
+    "new_captcha": "Clicatz l’imatge per obténer una nòva captcha",
+    "username_placeholder": "e.g. lain",
+    "fullname_placeholder": "e.g. Lain Iwakura",
+    "bio_placeholder": "e.g.\nHi, Soi lo Lain\nSoi afocada d’animes e vivi al Japan. Benlèu que me coneissètz de the Wired.",
+    "validations": {
+      "username_required": "pòt pas èsser void",
+      "fullname_required": "pòt pas èsser void",
+      "email_required": "pòt pas èsser void",
+      "password_required": "pòt pas èsser void",
+      "password_confirmation_required": "pòt pas èsser void",
+      "password_confirmation_match": "deu èsser lo meteis senhal"
+    }
   },
   "settings": {
+    "app_name": "Nom de l’aplicacion",
     "attachmentRadius": "Pèças juntas",
     "attachments": "Pèças juntas",
     "autoload": "Activar lo cargament automatic un còp arribat al cap de la pagina",
@@ -70,23 +117,30 @@
     "avatarRadius": "Avatars",
     "background": "Rèire plan",
     "bio": "Biografia",
+    "blocks_tab": "Blocatges",
     "btnRadius": "Botons",
     "cBlue": "Blau (Respondre, seguir)",
-    "cGreen": "Verd (Repartajar)",
+    "cGreen": "Verd (Repertir)",
     "cOrange": "Irange (Aimar)",
     "cRed": "Roge (Anullar)",
     "change_password": "Cambiar lo senhal",
     "change_password_error": "Una error s’es producha en cambiant lo senhal.",
-    "changed_password": "Senhal corrèctament cambiat !",
+    "changed_password": "Senhal corrèctament cambiat !",
+    "collapse_subject": "Replegar las publicacions amb de subjèctes",
+    "composing": "Escritura",
     "confirm_new_password": "Confirmatz lo nòu senhal",
     "current_avatar": "Vòstre avatar actual",
     "current_password": "Senhal actual",
     "current_profile_banner": "Bandièra actuala del perfil",
+    "data_import_export_tab": "Importar / Exportar las donadas",
+    "default_vis": "Nivèl de visibilitat per defaut",
     "delete_account": "Suprimir lo compte",
     "delete_account_description": "Suprimir vòstre compte e los messatges per sempre.",
-    "delete_account_error": "Una error s’es producha en suprimir lo compte. S’aquò ten d’arribar mercés de contactar vòstre administrador d’instància.",
+    "delete_account_error": "Una error s’es producha en suprimir lo compte. S’aquò ten d’arribar mercés de contactar vòstre administrator d’instància.",
     "delete_account_instructions": "Picatz vòstre senhal dins lo camp tèxte çai-jos per confirmar la supression del compte.",
-    "filtering": "Filtre",
+    "avatar_size_instruction": "La talha minimum recomandada pels imatges d’avatar es 150x150 pixèls.",
+    "export_theme": "Enregistrar la preconfiguracion",
+    "filtering": "Filtratge",
     "filtering_explanation": "Totes los estatuts amb aqueles mots seràn en silenci, un mot per linha",
     "follow_export": "Exportar los abonaments",
     "follow_export_button": "Exportar vòstres abonaments dins un fichièr csv",
@@ -95,66 +149,204 @@
     "follow_import_error": "Error en important los seguidors",
     "follows_imported": "Seguidors importats. Lo tractament pòt trigar una estona.",
     "foreground": "Endavant",
+    "general": "General",
     "hide_attachments_in_convo": "Rescondre las pèças juntas dins las conversacions",
     "hide_attachments_in_tl": "Rescondre las pèças juntas",
-    "import_followers_from_a_csv_file": "Importar los seguidors d’un fichièr csv",
-    "inputRadius": "Camps tèxte",
-    "links": "Ligams",
-    "name": "Nom",
-    "name_bio": "Nom & Bio",
-    "new_password": "Nòu senhal",
-    "nsfw_clickthrough": "Activar lo clic per mostrar los imatges marcats coma pels adults o sensibles",
-    "panelRadius": "Panèls",
-    "presets": "Pre-enregistrats",
-    "profile_background": "Imatge de fons",
-    "profile_banner": "Bandièra del perfil",
-    "radii_help": "Configurar los caires arredondits de l’interfàcia (en pixèls)",
-    "reply_link_preview": "Activar l’apercebut en passar la mirga",
-    "set_new_avatar": "Cambiar l’avatar",
-    "set_new_profile_background": "Cambiar l’imatge de fons",
-    "set_new_profile_banner": "Cambiar de bandièra",
-    "settings": "Paramètres",
-    "stop_gifs": "Lançar los GIFs al subrevòl",
-    "streaming": "Activar lo cargament automatic dels novèls estatus en anar amont",
-    "text": "Tèxte",
-    "theme": "Tèma",
-    "theme_help": "Emplegatz los còdis de color hex (#rrggbb) per personalizar vòstre tèma de color.",
-    "tooltipRadius": "Astúcias/Alèrta",
-    "user_settings": "Paramètres utilizaire",
-    "collapse_subject": "Replegar las publicacions amb de subjèctes",
-    "data_import_export_tab": "Importar / Exportar las donadas",
-    "default_vis": "Nivèl de visibilitat per defaut",
-    "export_theme": "Enregistrar la preconfiguracion",
-    "general": "General",
-    "hide_post_stats": "Amagar los estatistics de publicacion (ex. lo ombre de favorits)",
+    "max_thumbnails": "Nombre maximum de vinhetas per publicacion",
+    "hide_isp": "Amagar lo panèl especial instància",
+    "preload_images": "Precargar los imatges",
+    "use_one_click_nsfw": "Dobrir las pèças juntas NSFW amb un clic",
+    "hide_post_stats": "Amagar las estatisticas de publicacion (ex. lo nombre de favorits)",
     "hide_user_stats": "Amagar las estatisticas de l’utilizaire (ex. lo nombre de seguidors)",
+    "hide_filtered_statuses": "Amagar los estatuts filtrats",
+    "import_followers_from_a_csv_file": "Importar los seguidors d’un fichièr csv",
     "import_theme": "Cargar un tèma",
-    "instance_default": "(defaut : {value})",
+    "inputRadius": "Camps tèxte",
+    "checkboxRadius": "Casas de marcar",
+    "instance_default": "(defaut : {value})",
+    "instance_default_simple": "(defaut)",
+    "interface": "Interfàcia",
     "interfaceLanguage": "Lenga de l’interfàcia",
     "invalid_theme_imported": "Lo fichièr seleccionat es pas un tèma Pleroma valid. Cap de cambiament es estat fach a vòstre tèma.",
     "limited_availability": "Pas disponible per vòstre navigador",
+    "links": "Ligams",
     "lock_account_description": "Limitar vòstre compte als seguidors acceptats solament",
     "loop_video": "Bocla vidèo",
-    "loop_video_silent_only": "Legir en bocla solament las vidèos sens son (coma los « Gifs » de Mastodon)",
-    "notification_visibility": "Tipes de notificacion de mostrar",
+    "loop_video_silent_only": "Legir en bocla solament las vidèos sens son (coma los « Gifs » de Mastodon)",
+    "mutes_tab": "Agamats",
+    "play_videos_in_modal": "Legir las vidèos dirèctament dins la visualizaira mèdia",
+    "use_contain_fit": "Talhar pas las pèças juntas per las vinhetas",
+    "name": "Nom",
+    "name_bio": "Nom & Bio",
+    "new_password": "Nòu senhal",
     "notification_visibility_follows": "Abonaments",
-    "notification_visibility_likes": "Aiman",
+    "notification_visibility_likes": "Aimar",
     "notification_visibility_mentions": "Mencions",
     "notification_visibility_repeats": "Repeticions",
+    "notification_visibility": "Tipes de notificacion de mostrar",
     "no_rich_text_description": "Netejar lo format tèxte de totas las publicacions",
-    "oauth_tokens": "Llistats OAuth",
+    "no_blocks": "Cap de blocatge",
+    "no_mutes": "Cap d’amagat",
+    "hide_follows_description": "Mostrar pas qual seguissi",
+    "hide_followers_description": "Mostrar pas qual me seguisson",
+    "show_admin_badge": "Mostrar lo badge Admin badge al perfil meu",
+    "show_moderator_badge": "Mostrar lo badge Moderator al perfil meu",
+    "nsfw_clickthrough": "Activar lo clic per mostrar los imatges marcats coma pels adults o sensibles",
+    "oauth_tokens": "Listats OAuth",
+    "token": "Geton",
+    "refresh_token": "Actualizar lo geton",
+    "valid_until": "Valid fins a",
+    "revoke_token": "Revocar",
+    "panelRadius": "Panèls",
     "pause_on_unfocused": "Pausar la difusion quand l’onglet es pas seleccionat",
+    "presets": "Pre-enregistrats",
+    "profile_background": "Imatge de fons",
+    "profile_banner": "Bandièra del perfil",
     "profile_tab": "Perfil",
+    "radii_help": "Configurar los caires arredondits de l’interfàcia (en pixèls)",
     "replies_in_timeline": "Responsas del flux",
+    "reply_link_preview": "Activar l’apercebut en passar la mirga",
     "reply_visibility_all": "Mostrar totas las responsas",
     "reply_visibility_following": "Mostrar pas que las responsas que me son destinada a ieu o un utilizaire que seguissi",
     "reply_visibility_self": "Mostrar pas que las responsas que me son destinadas",
     "saving_err": "Error en enregistrant los paramètres",
     "saving_ok": "Paramètres enregistrats",
+    "scope_copy": "Copiar lo nivèl de confidencialitat per las responsas (Totjorn aissí pels Messatges Dirèctes)",
     "security_tab": "Seguretat",
+    "set_new_avatar": "Definir un nòu avatar",
+    "set_new_profile_background": "Definir un nòu fons de perfil",
+    "set_new_profile_banner": "Definir una nòva bandièra de perfil",
+    "settings": "Paramètres",
+    "subject_input_always_show": "Totjorn mostrar lo camp de subjècte",
+    "subject_line_behavior": "Copiar lo subjècte per las responsas",
+    "subject_line_email": "Coma los corrièls : \"re: subjècte\"",
+    "subject_line_mastodon": "Coma mastodon : copiar tal coma es",
+    "subject_line_noop": "Copiar pas",
+"post_status_content_type": "Publicar lo tipe de contengut dels estatuts",
+    "stop_gifs": "Lançar los GIFs al subrevòl",
+    "streaming": "Activar lo cargament automatic dels novèls estatus en anar amont",
+    "text": "Tèxte",
+    "theme": "Tèma",
+    "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
+    "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
+    "theme_help": "Emplegatz los còdis de color hex (#rrggbb) per personalizar vòstre tèma de color.",
+    "tooltipRadius": "Astúcias/alèrtas",
+    "upload_a_photo": "Enviar una fotografia",
+    "user_settings": "Paramètres utilizaire",
     "values": {
       "false": "non",
       "true": "òc"
+    },
+ "notifications": "Notificacions",
+    "enable_web_push_notifications": "Activar las notificacions web push",
+    "style": {
+      "switcher": {
+        "keep_color": "Gardar las colors",
+        "keep_shadows": "Gardar las ombras",
+        "keep_opacity": "Gardar l’opacitat",
+        "keep_roundness": "Gardar la redondetat",
+        "keep_fonts": "Gardar las polissas",
+        "save_load_hint": "Las opcions « Gardar » permeton de servar las opcions configuradas actualament quand seleccionatz o cargatz un tèma, permeton tanben d’enregistrar aquelas opcions quand exportatz un tèma. Quand totas las casas son pas marcadas, l’exportacion de tèma o enregistrarà tot.",
+        "reset": "Restablir",
+        "clear_all": "O escafar tot",
+        "clear_opacity": "Escafar l’opacitat"
+      },
+      "common": {
+        "color": "Color",
+        "opacity": "Opacitat",
+        "contrast": {
+          "hint": "Lo coeficient de contraste es de {ratio}. Dòna {level} {context}",
+          "level": {
+            "aa": "un nivèl AA minimum recomandat",
+            "aaa": "un nivèl AAA recomandat",
+            "bad": "pas un nivèl d’accessibilitat recomandat"
+          },
+          "context": {
+            "18pt": "pel tèxte grand (18pt+)",
+            "text": "pel tèxte"
+          }
+        }
+      },
+      "common_colors": {
+        "_tab_label": "Comun",
+        "main": "Colors comunas",
+        "foreground_hint": "Vejatz « Avançat » per mai de paramètres detalhats",
+        "rgbo": "Icònas, accents, badges"
+      },
+      "advanced_colors": {
+        "_tab_label": "Avançat",
+        "alert": "Rèire plan d’alèrtas",
+        "alert_error": "Error",
+        "badge": "Rèire plan dels badges",
+        "badge_notification": "Notificacion",
+        "panel_header": "Bandièra del tablèu de bòrd",
+        "top_bar": "Barra amont",
+        "borders": "Caires",
+        "buttons": "Botons",
+        "inputs": "Camps tèxte",
+        "faint_text": "Tèxte descolorit"
+      },
+      "radii": {
+        "_tab_label": "Redondetat"
+      },
+      "shadows": {
+        "_tab_label": "Ombra e luminositat",
+        "component": "Compausant",
+        "override": "Subrecargar",
+        "shadow_id": "Ombra #{value}",
+        "blur": "Fosc",
+        "spread": "Espandiment",
+        "inset": "Incrustacion",
+        "hint": "Per las ombras podètz tanben utilizar --variable coma valor de color per emplegar una variable CSS3. Notatz que lo paramètre d’opacitat foncionarà pas dins aquel cas.",
+        "filter_hint": {
+          "always_drop_shadow": "Avertiment, aquel ombra utiliza totjorn {0} quand lo navigator es compatible.",
+          "drop_shadow_syntax": "{0} es pas compatible amb lo paramètre {1} e lo mot clau {2}.",
+          "avatar_inset": "Notatz que combinar d’ombras incrustadas e pas incrustadas pòt donar de resultats inesperats amb los avatars transparents.",
+          "spread_zero": "L’ombra amb un espandiment de > 0 apareisserà coma reglat a zèro",
+          "inset_classic": "L’ombra d’incrustacion utilizarà {0}"
+        },
+        "components": {
+          "panel": "Tablèu",
+          "panelHeader": "Bandièra del tablèu",
+          "topBar": "Barra amont",
+          "avatar": "Utilizar l’avatar (vista perfil)",
+          "avatarStatus": "Avatar de l’utilizaire (afichatge publicacion)",
+          "popup": "Fenèstras sorgissentas e astúcias",
+          "button": "Boton",
+          "buttonHover": "Boton (en passar la mirga)",
+          "buttonPressed": "Boton (en quichar)",
+          "buttonPressedHover": "Boton (en quichar e passar)",
+          "input": "Camp tèxte"
+        }
+      },
+      "fonts": {
+        "_tab_label": "Polissas",
+        "help": "Selecionatz la polissa d’utilizar pels elements de l’UI. Per « Personalizada » vos cal picar lo nom exacte tal coma apareis sul sistèma.",
+        "components": {
+          "interface": "Interfàcia",
+          "input": "Camps tèxte",
+          "post": "Tèxte de publicacion",
+          "postCode": "Tèxte Monospaced dins las publicacion (tèxte formatat)"
+        },
+        "family": "Nom de la polissa",
+        "size": "Talha (en px)",
+        "weight": "Largor (gras)",
+        "custom": "Personalizada"
+      },
+      "preview": {
+        "header": "Apercebut",
+        "content": "Contengut",
+        "error": "Error d’exemple",
+        "button": "Boton",
+        "text": "A tròç de mai de {0} e {1}",
+        "mono": "contengut",
+        "input": "arribada al país.",
+        "faint_link": "manual d’ajuda",
+        "fine_print": "Legissètz nòstre {0} per legir pas res d’util !",
+        "header_faint": "Va plan",
+        "checkbox": "Ai legit los tèrmes e condicions d’utilizacion",
+        "link": "un pichon ligam simpatic"
+      }
     }
   },
   "timeline": {
@@ -162,41 +354,74 @@
     "conversation": "Conversacion",
     "error_fetching": "Error en cercant de mesas a jorn",
     "load_older": "Ne veire mai",
+	"no_retweet_hint": "Las publicacions marcadas pels seguidors solament o dirèctas se pòdon pas repetir",
     "repeated": "repetit",
     "show_new": "Ne veire mai",
     "up_to_date": "A jorn",
-    "no_retweet_hint": "La publicacion marcada coma pels seguidors solament o dirècte pòt pas èsser repetida"
+    "no_more_statuses": "Pas mai d’estatuts",
+    "no_statuses": "Cap d’estatuts"
+  },
+  "status": {
+    "reply_to": "Respond a",
+    "replies_list": "Responsas :"
   },
   "user_card": {
+    "approve": "Validar",
     "block": "Blocar",
-    "blocked": "Blocat !",
+    "blocked": "Blocat !",
+    "deny": "Refusar",
+    "favorites": "Favorits",
     "follow": "Seguir",
+    "follow_sent": "Demanda enviada !",
+    "follow_progress": "Demanda…",
+    "follow_again": "Tornar enviar la demanda ?",
+    "follow_unfollow": "Quitar de seguir",
     "followees": "Abonaments",
     "followers": "Seguidors",
-    "following": "Seguit !",
-    "follows_you": "Vos sèc !",
+    "following": "Seguit !",
+    "follows_you": "Vos sèc !",
+    "its_you": "Sètz vos !",
+    "media": "Mèdia",
     "mute": "Amagar",
     "muted": "Amagat",
     "per_day": "per jorn",
     "remote_follow": "Seguir a distància",
     "statuses": "Estatuts",
-    "approve": "Validar",
-    "deny": "Refusar"
+    "unblock": "Desblocar",
+    "unblock_progress": "Desblocatge...",
+    "block_progress": "Blocatge...",
+    "unmute": "Tornar mostrar",
+    "unmute_progress": "Afichatge...",
+    "mute_progress": "A amagar..."
   },
   "user_profile": {
-    "timeline_title": "Flux utilizaire"
-  },
-  "features_panel": {
-    "chat": "Discutida",
-    "gopher": "Gopher",
-    "media_proxy": "Servidor mandatari dels mèdias",
-    "scope_options": "Opcions d'encastres",
-    "text_limit": "Limit de tèxte",
-    "title": "Foncionalitats",
-    "who_to_follow": "Qui seguir"
+    "timeline_title": "Flux utilizaire",
+    "profile_does_not_exist": "Aqueste perfil existís pas.",
+    "profile_loading_error": "Una error s’es producha en cargant aqueste perfil."
   },
   "who_to_follow": {
     "more": "Mai",
-    "who_to_follow": "Qui seguir"
+    "who_to_follow": "Qual seguir"
+  },
+  "tool_tip": {
+    "media_upload": "Enviar un mèdia",
+    "repeat": "Repetir",
+    "reply": "Respondre",
+    "favorite": "aimar",
+    "user_settings": "Paramètres utilizaire"
+  },
+  "upload":{
+    "error": {
+      "base": "Mandadís fracassat.",
+      "file_too_big": "Fichièr tròp grand [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "Tornatz ensajar mai tard"
+    },
+    "file_size_units": {
+      "B": "o",
+      "KiB": "Kio",
+      "MiB": "Mio",
+      "GiB": "Gio",
+      "TiB": "Tio"
+    }
   }
 }

src/i18n/pt.json

@@ -2,116 +2,424 @@
   "chat": {
     "title": "Chat"
   },
+  "features_panel": {
+    "chat": "Chat",
+    "gopher": "Gopher",
+    "media_proxy": "Proxy de mídia",
+    "scope_options": "Opções de privacidade",
+    "text_limit": "Limite de caracteres",
+    "title": "Funções",
+    "who_to_follow": "Quem seguir"
+  },
   "finder": {
-    "error_fetching_user": "Erro procurando usuário",
+    "error_fetching_user": "Erro ao procurar usuário",
     "find_user": "Buscar usuário"
   },
   "general": {
     "apply": "Aplicar",
-    "submit": "Enviar"
+    "submit": "Enviar",
+    "more": "Mais",
+    "generic_error": "Houve um erro",
+    "optional": "opcional"
+  },
+  "image_cropper": {
+    "crop_picture": "Cortar imagem",
+    "save": "Salvar",
+    "cancel": "Cancelar"
   },
   "login": {
     "login": "Entrar",
+    "description": "Entrar com OAuth",
     "logout": "Sair",
     "password": "Senha",
     "placeholder": "p.e. lain",
     "register": "Registrar",
-    "username": "Usuário"
+    "username": "Usuário",
+    "hint": "Entre para participar da discussão"
+  },
+  "media_modal": {
+    "previous": "Anterior",
+    "next": "Próximo"
   },
   "nav": {
+    "about": "Sobre",
+    "back": "Voltar",
     "chat": "Chat local",
+    "friend_requests": "Solicitações de seguidores",
     "mentions": "Menções",
+    "dms": "Mensagens diretas",
     "public_tl": "Linha do tempo pública",
     "timeline": "Linha do tempo",
-    "twkn": "Toda a rede conhecida"
+    "twkn": "Toda a rede conhecida",
+    "user_search": "Buscar usuários",
+    "who_to_follow": "Quem seguir",
+    "preferences": "Preferências"
   },
   "notifications": {
+    "broken_favorite": "Status desconhecido, buscando...",
     "favorited_you": "favoritou sua postagem",
     "followed_you": "seguiu você",
+    "load_older": "Carregar notificações antigas",
     "notifications": "Notificações",
     "read": "Lido!",
-    "repeated_you": "repetiu sua postagem"
+    "repeated_you": "repetiu sua postagem",
+    "no_more_notifications": "Mais nenhuma notificação"
   },
   "post_status": {
+    "new_status": "Postar novo status",
+    "account_not_locked_warning": "Sua conta não é {0}. Qualquer pessoa pode te seguir e ver seus posts privados (só para seguidores).",
+    "account_not_locked_warning_link": "restrita",
+    "attachments_sensitive": "Marcar anexos como sensíveis",
+    "content_type": {
+      "text/plain": "Texto puro"
+    },
+    "content_warning": "Assunto (opcional)",
     "default": "Acabei de chegar no Rio!",
-    "posting": "Publicando"
+    "direct_warning": "Este post será visível apenas para os usuários mencionados.",
+    "posting": "Publicando",
+    "scope": {
+      "direct": "Direto - Enviar somente aos usuários mencionados",
+      "private": "Apenas para seguidores - Enviar apenas para seguidores",
+      "public": "Público - Enviar a linhas do tempo públicas",
+      "unlisted": "Não listado - Não enviar a linhas do tempo públicas"
+    }
   },
   "registration": {
     "bio": "Biografia",
     "email": "Correio eletrônico",
     "fullname": "Nome para exibição",
     "password_confirm": "Confirmação de senha",
-    "registration": "Registro"
+    "registration": "Registro",
+    "token": "Código do convite",
+    "captcha": "CAPTCHA",
+    "new_captcha": "Clique na imagem para carregar um novo captcha",
+    "username_placeholder": "p. ex. lain",
+    "fullname_placeholder": "p. ex. Lain Iwakura",
+    "bio_placeholder": "e.g.\nOi, sou Lain\nSou uma garota que vive no subúrbio do Japão. Você deve me conhecer da Rede.",
+    "validations": {
+      "username_required": "não pode ser deixado em branco",
+      "fullname_required": "não pode ser deixado em branco",
+      "email_required": "não pode ser deixado em branco",
+      "password_required": "não pode ser deixado em branco",
+      "password_confirmation_required": "não pode ser deixado em branco",
+      "password_confirmation_match": "deve ser idêntica à senha"
+    }
   },
   "settings": {
+    "app_name": "Nome do aplicativo",
     "attachmentRadius": "Anexos",
     "attachments": "Anexos",
     "autoload": "Habilitar carregamento automático quando a rolagem chegar ao fim.",
     "avatar": "Avatar",
     "avatarAltRadius": "Avatares (Notificações)",
     "avatarRadius": "Avatares",
-    "background": "Plano de Fundo",
+    "background": "Pano de Fundo",
     "bio": "Biografia",
+    "blocks_tab": "Bloqueios",
     "btnRadius": "Botões",
     "cBlue": "Azul (Responder, seguir)",
     "cGreen": "Verde (Repetir)",
     "cOrange": "Laranja (Favoritar)",
     "cRed": "Vermelho (Cancelar)",
+    "change_password": "Mudar senha",
+    "change_password_error": "Houve um erro ao modificar sua senha.",
+    "changed_password": "Senha modificada com sucesso!",
+    "collapse_subject": "Esconder posts com assunto",
+    "composing": "Escrita",
+    "confirm_new_password": "Confirmar nova senha",
     "current_avatar": "Seu avatar atual",
+    "current_password": "Sua senha atual",
     "current_profile_banner": "Sua capa de perfil atual",
+    "data_import_export_tab": "Importação/exportação de dados",
+    "default_vis": "Opção de privacidade padrão",
+    "delete_account": "Deletar conta",
+    "delete_account_description": "Deletar sua conta e mensagens permanentemente.",
+    "delete_account_error": "Houve um problema ao deletar sua conta. Se ele persistir, por favor entre em contato com o/a administrador/a da instância.",
+    "delete_account_instructions": "Digite sua senha no campo abaixo para confirmar a exclusão da conta.",
+    "avatar_size_instruction": "O tamanho mínimo recomendado para imagens de avatar é 150x150 pixels.",
+    "export_theme": "Salvar predefinições",
     "filtering": "Filtragem",
-    "filtering_explanation": "Todas as postagens contendo estas palavras serão silenciadas, uma por linha.",
-    "follow_import": "Importar seguidas",
+    "filtering_explanation": "Todas as postagens contendo estas palavras serão silenciadas; uma palavra por linha.",
+    "follow_export": "Exportar quem você segue",
+    "follow_export_button": "Exportar quem você segue para um arquivo CSV",
+    "follow_export_processing": "Processando. Em breve você receberá a solicitação de download do arquivo",
+    "follow_import": "Importar quem você segue",
     "follow_import_error": "Erro ao importar seguidores",
     "follows_imported": "Seguidores importados! O processamento pode demorar um pouco.",
     "foreground": "Primeiro Plano",
+    "general": "Geral",
     "hide_attachments_in_convo": "Ocultar anexos em conversas",
     "hide_attachments_in_tl": "Ocultar anexos na linha do tempo.",
+    "max_thumbnails": "Número máximo de miniaturas por post",
+    "hide_isp": "Esconder painel específico da instância",
+    "preload_images": "Pré-carregar imagens",
+    "use_one_click_nsfw": "Abrir anexos sensíveis com um clique",
+    "hide_post_stats": "Esconder estatísticas de posts (p. ex. número de favoritos)",
+    "hide_user_stats": "Esconder estatísticas do usuário (p. ex. número de seguidores)",
+    "hide_filtered_statuses": "Esconder posts filtrados",
     "import_followers_from_a_csv_file": "Importe seguidores a partir de um arquivo CSV",
+    "import_theme": "Carregar pré-definição",
+    "inputRadius": "Campos de entrada",
+    "checkboxRadius": "Checkboxes",
+    "instance_default": "(padrão: {value})",
+    "instance_default_simple": "(padrão)",
+    "interface": "Interface",
+    "interfaceLanguage": "Idioma da interface",
+    "invalid_theme_imported": "O arquivo selecionado não é um tema compatível com o Pleroma. Nenhuma mudança no tema foi feita.",
+    "limited_availability": "Indisponível para seu navegador",
     "links": "Links",
+    "lock_account_description": "Restringir sua conta a seguidores aprovados",
+    "loop_video": "Repetir vídeos",
+    "loop_video_silent_only": "Repetir apenas vídeos sem som (como os \"gifs\" do Mastodon)",
+    "mutes_tab": "Silenciados",
+    "play_videos_in_modal": "Tocar vídeos diretamente no visualizador de mídia",
+    "use_contain_fit": "Não cortar o anexo na miniatura",
     "name": "Nome",
     "name_bio": "Nome & Biografia",
-    "nsfw_clickthrough": "Habilitar clique para ocultar anexos NSFW",
+    "new_password": "Nova senha",
+    "notification_visibility": "Tipos de notificação para mostrar",
+    "notification_visibility_follows": "Seguidas",
+    "notification_visibility_likes": "Favoritos",
+    "notification_visibility_mentions": "Menções",
+    "notification_visibility_repeats": "Repetições",
+    "no_rich_text_description": "Remover formatação de todos os posts",
+    "no_blocks": "Sem bloqueios",
+    "no_mutes": "Sem silenciados",
+    "hide_follows_description": "Não mostrar quem estou seguindo",
+    "hide_followers_description": "Não mostrar quem me segue",
+    "show_admin_badge": "Mostrar título de Administrador em meu perfil",
+    "show_moderator_badge": "Mostrar título de Moderador em meu perfil",
+    "nsfw_clickthrough": "Habilitar clique para ocultar anexos sensíveis",
+    "oauth_tokens": "Token OAuth",
+    "token": "Token",
+    "refresh_token": "Atualizar Token",
+    "valid_until": "Válido até",
+    "revoke_token": "Revogar",
     "panelRadius": "Paineis",
+    "pause_on_unfocused": "Parar transmissão quando a aba não estiver em primeiro plano",
     "presets": "Predefinições",
-    "profile_background": "Plano de fundo de perfil",
+    "profile_background": "Pano de fundo de perfil",
     "profile_banner": "Capa de perfil",
-    "radii_help": "Arredondar arestas da interface (em píxeis)",
-    "reply_link_preview": "Habilitar a pré-visualização de link de respostas ao passar o mouse.",
+    "profile_tab": "Perfil",
+    "radii_help": "Arredondar arestas da interface (em pixel)",
+    "replies_in_timeline": "Respostas na linha do tempo",
+    "reply_link_preview": "Habilitar a pré-visualização de de respostas ao passar o mouse.",
+    "reply_visibility_all": "Mostrar todas as respostas",
+    "reply_visibility_following": "Só mostrar respostas direcionadas a mim ou a usuários que sigo",
+    "reply_visibility_self": "Só mostrar respostas direcionadas a mim",
+    "saving_err": "Erro ao salvar configurações",
+    "saving_ok": "Configurações salvas",
+    "security_tab": "Segurança",
+    "scope_copy": "Copiar opções de privacidade ao responder (Mensagens diretas sempre copiam)",
     "set_new_avatar": "Alterar avatar",
-    "set_new_profile_background": "Alterar o plano de fundo de perfil",
+    "set_new_profile_background": "Alterar o pano de fundo de perfil",
     "set_new_profile_banner": "Alterar capa de perfil",
     "settings": "Configurações",
-    "stop_gifs": "Reproduzir GIFs ao passar o cursor em cima",
-    "streaming": "Habilitar o fluxo automático de postagens quando ao topo da página",
+    "subject_input_always_show": "Sempre mostrar campo de assunto",
+    "subject_line_behavior": "Copiar assunto ao responder",
+    "subject_line_email": "Como em email: \"re: assunto\"",
+    "subject_line_mastodon": "Como o Mastodon: copiar como está",
+    "subject_line_noop": "Não copiar",
+    "post_status_content_type": "Tipo de conteúdo do status",
+    "stop_gifs": "Reproduzir GIFs ao passar o cursor",
+    "streaming": "Habilitar o fluxo automático de postagens no topo da página",
     "text": "Texto",
     "theme": "Tema",
     "theme_help": "Use cores em código hexadecimal (#rrggbb) para personalizar seu esquema de cores.",
-    "tooltipRadius": "Dicass/alertas",
-    "user_settings": "Configurações de Usuário"
+    "theme_help_v2_1": "Você também pode sobrescrever as cores e opacidade de alguns componentes ao modificar o checkbox, use \"Limpar todos\" para limpar todas as modificações.",
+    "theme_help_v2_2": "Alguns ícones sob registros são indicadores de fundo/contraste de textos, passe por cima para informações detalhadas.  Tenha ciência de que os indicadores de contraste não funcionam muito bem com transparência.",
+    "tooltipRadius": "Dicas/alertas",
+    "upload_a_photo": "Enviar uma foto",
+    "user_settings": "Configurações de Usuário",
+    "values": {
+      "false": "não",
+      "true": "sim"
+    },
+    "notifications": "Notificações",
+    "enable_web_push_notifications": "Habilitar notificações web push",
+    "style": {
+      "switcher": {
+        "keep_color": "Manter cores",
+        "keep_shadows": "Manter sombras",
+        "keep_opacity": "Manter opacidade",
+        "keep_roundness": "Manter arredondado",
+        "keep_fonts": "Manter fontes",
+        "save_load_hint": "Manter as opções preserva as opções atuais ao selecionar ou carregar temas; também salva as opções ao exportar um tempo. Quanto todos os campos estiverem desmarcados, tudo será salvo ao exportar o tema.",
+        "reset": "Restaurar o padrão",
+        "clear_all": "Limpar tudo",
+        "clear_opacity": "Limpar opacidade"
+      },
+      "common": {
+        "color": "Cor",
+        "opacity": "Opacidade",
+        "contrast": {
+          "hint": "A taxa de contraste é {ratio}, {level} {context}",
+          "level": {
+            "aa": "padrão Nível AA (mínimo)",
+            "aaa": "padrão Nível AAA (recomendado)",
+            "bad": "nenhum padrão de acessibilidade"
+          },
+          "context": {
+            "18pt": "para textos longos (18pt+)",
+            "text": "para texto"
+          }
+        }
+      },
+      "common_colors": {
+        "_tab_label": "Comum",
+        "main": "Cores Comuns",
+        "foreground_hint": "Configurações mais detalhadas na aba\"Avançado\"",
+        "rgbo": "Ícones, acentuação, distintivos"
+      },
+      "advanced_colors": {
+        "_tab_label": "Avançado",
+        "alert": "Fundo de alerta",
+        "alert_error": "Erro",
+        "badge": "Fundo do distintivo",
+        "badge_notification": "Notificação",
+        "panel_header": "Topo do painel",
+        "top_bar": "Barra do topo",
+        "borders": "Bordas",
+        "buttons": "Botões",
+        "inputs": "Caixas de entrada",
+        "faint_text": "Texto esmaecido"
+      },
+      "radii": {
+        "_tab_label": "Arredondado"
+      },
+      "shadows": {
+        "_tab_label": "Luz e sombra",
+        "component": "Componente",
+        "override": "Sobrescrever",
+        "shadow_id": "Sombra #{value}",
+        "blur": "Borrado",
+        "spread": "Difusão",
+        "inset": "Inserção",
+        "hint": "Para as sombras você também pode usar --variável como valor de cor para utilizar variáveis do CSS3. Tenha em mente que configurar a opacidade não será possível neste caso.",
+        "filter_hint": {
+          "always_drop_shadow": "Atenção, esta sombra sempre utiliza {0} quando compatível com o navegador.",
+          "drop_shadow_syntax": "{0} não é compatível com o parâmetro {1} e a palavra-chave {2}.",
+          "avatar_inset": "Tenha em mente que combinar as sombras de inserção e a não-inserção em avatares pode causar resultados inesperados em avatares transparentes.",
+          "spread_zero": "Sombras com uma difusão > 0 aparecerão como se fossem definidas como 0.",
+          "inset_classic": "Sombras de inserção utilizarão {0}"
+        },
+        "components": {
+          "panel": "Painel",
+          "panelHeader": "Topo do painel",
+          "topBar": "Barra do topo",
+          "avatar": "Avatar do usuário (na visualização do perfil)",
+          "avatarStatus": "Avatar do usuário (na exibição de posts)",
+          "popup": "Dicas e notificações",
+          "button": "Botão",
+          "buttonHover": "Botão (em cima)",
+          "buttonPressed": "Botão (pressionado)",
+          "buttonPressedHover": "Botão (pressionado+em cima)",
+          "input": "Campo de entrada"
+        }
+      },
+      "fonts": {
+        "_tab_label": "Fontes",
+        "help": "Selecione as fontes dos elementos da interface. Para fonte \"personalizada\" você deve inserir o mesmo nome da fonte no sistema.",
+        "components": {
+          "interface": "Interface",
+          "input": "Campo de entrada",
+          "post": "Postar texto",
+          "postCode": "Texto monoespaçado em post (formatação rica)"
+        },
+        "family": "Nome da fonte",
+        "size": "Tamanho (em px)",
+        "weight": "Peso",
+        "custom": "Personalizada"
+      },
+      "preview": {
+        "header": "Pré-visualizar",
+        "content": "Conteúdo",
+        "error": "Erro de exemplo",
+        "button": "Botão",
+        "text": "Vários {0} e {1}",
+        "mono": "conteúdo",
+        "input": "Acabei de chegar no Rio!",
+        "faint_link": "manual útil",
+        "fine_print": "Leia nosso {0} para não aprender nada!",
+        "header_faint": "Está ok!",
+        "checkbox": "Li os termos e condições",
+        "link": "um belo link"
+      }
+    }
   },
   "timeline": {
+    "collapse": "Esconder",
     "conversation": "Conversa",
-    "error_fetching": "Erro buscando atualizações",
+    "error_fetching": "Erro ao buscar atualizações",
     "load_older": "Carregar postagens antigas",
+    "no_retweet_hint": "Posts apenas para seguidores ou diretos não podem ser repetidos",
+    "repeated": "Repetido",
     "show_new": "Mostrar novas",
-    "up_to_date": "Atualizado"
+    "up_to_date": "Atualizado",
+    "no_more_statuses": "Sem mais posts",
+    "no_statuses": "Sem posts"
+  },
+  "status": {
+    "reply_to": "Responder a",
+    "replies_list": "Respostas:"
   },
   "user_card": {
+    "approve": "Aprovar",
     "block": "Bloquear",
     "blocked": "Bloqueado!",
+    "deny": "Negar",
+    "favorites": "Favoritos",
     "follow": "Seguir",
+    "follow_sent": "Pedido enviado!",
+    "follow_progress": "Enviando…",
+    "follow_again": "Enviar solicitação novamente?",
+    "follow_unfollow": "Deixar de seguir",
     "followees": "Seguindo",
     "followers": "Seguidores",
     "following": "Seguindo!",
     "follows_you": "Segue você!",
+    "its_you": "É você!",
+    "media": "Mídia",
     "mute": "Silenciar",
     "muted": "Silenciado",
     "per_day": "por dia",
-    "remote_follow": "Seguidor Remoto",
-    "statuses": "Postagens"
+    "remote_follow": "Seguir remotamente",
+    "statuses": "Postagens",
+    "unblock": "Desbloquear",
+    "unblock_progress": "Desbloqueando...",
+    "block_progress": "Bloqueando...",
+    "unmute": "Retirar silêncio",
+    "unmute_progress": "Retirando silêncio...",
+    "mute_progress": "Silenciando..."
   },
   "user_profile": {
-    "timeline_title": "Linha do tempo do usuário"
+    "timeline_title": "Linha do tempo do usuário",
+    "profile_does_not_exist": "Desculpe, este perfil não existe.",
+    "profile_loading_error": "Desculpe, houve um erro ao carregar este perfil."
+  },
+  "who_to_follow": {
+    "more": "Mais",
+    "who_to_follow": "Quem seguir"
+  },
+  "tool_tip": {
+    "media_upload": "Envio de mídia",
+    "repeat": "Repetir",
+    "reply": "Responder",
+    "favorite": "Favoritar",
+    "user_settings": "Configurações do usuário"
+  },
+  "upload":{
+    "error": {
+      "base": "Falha no envio.",
+      "file_too_big": "Arquivo grande demais [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "Tente novamente mais tarde"
+    },
+    "file_size_units": {
+      "B": "B",
+      "KiB": "KiB",
+      "MiB": "MiB",
+      "GiB": "GiB",
+      "TiB": "TiB"
+    }
   }
 }

src/i18n/zh.json

@@ -49,7 +49,7 @@
     "account_not_locked_warning_link": "上锁",
     "attachments_sensitive": "标记附件为敏感内容",
     "content_type": {
-      "plain_text": "纯文本"
+      "text/plain": "纯文本"
     },
     "content_warning": "主题（可选）",
     "default": "刚刚抵达上海",

src/lib/persisted_state.js

@@ -60,18 +60,6 @@ export default function createPersistedState ({
             merge({}, store.state, savedState)
           )
         }
-        if (store.state.config.customTheme) {
-          // This is a hack to deal with async loading of config.json and themes
-          // See: style_setter.js, setPreset()
-          window.themeLoaded = true
-          store.dispatch('setOption', {
-            name: 'customTheme',
-            value: store.state.config.customTheme
-          })
-        }
-        if (store.state.oauth.token) {
-          store.dispatch('loginUser', store.state.oauth.token)
-        }
         loaded = true
       } catch (e) {
         console.log("Couldn't load state")

src/main.js

@@ -30,8 +30,9 @@ const currentLocale = (window.navigator.language || 'en').split('-')[0]
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueTimeago, {
-  locale: currentLocale === 'ja' ? 'ja' : 'en',
+  locale: currentLocale === 'cs' ? 'cs' : currentLocale === 'ja' ? 'ja' : 'en',
   locales: {
+    'cs': require('../static/timeago-cs.json'),
     'en': require('../static/timeago-en.json'),
     'ja': require('../static/timeago-ja.json')
   }
@@ -52,9 +53,10 @@ const persistedStateOptions = {
     'users.lastLoginName',
     'oauth'
   ]
-}
+};
 
-createPersistedState(persistedStateOptions).then((persistedState) => {
+(async () => {
+  const persistedState = await createPersistedState(persistedStateOptions)
   const store = new Vuex.Store({
     modules: {
       interface: interfaceModule,
@@ -74,7 +76,7 @@ createPersistedState(persistedStateOptions).then((persistedState) => {
   })
 
   afterStoreSetup({ store, i18n })
-})
+})()
 
 // These are inlined by webpack's DefinePlugin
 /* eslint-disable */

src/modules/chat.js

@@ -1,12 +1,16 @@
 const chat = {
   state: {
     messages: [],
-    channel: {state: ''}
+    channel: {state: ''},
+    socket: null
   },
   mutations: {
     setChannel (state, channel) {
       state.channel = channel
     },
+    setSocket (state, socket) {
+      state.socket = socket
+    },
     addMessage (state, message) {
       state.messages.push(message)
       state.messages = state.messages.slice(-19, 20)
@@ -16,8 +20,12 @@ const chat = {
     }
   },
   actions: {
+    disconnectFromChat (store) {
+      store.state.socket.disconnect()
+    },
     initializeChat (store, socket) {
       const channel = socket.channel('chat:public')
+      store.commit('setSocket', socket)
       channel.on('new_msg', (msg) => {
         store.commit('addMessage', msg)
       })

src/modules/config.js

@@ -5,6 +5,7 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
 const defaultState = {
   colors: {},
+  hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
   hideAttachments: false,
   hideAttachmentsInConv: false,

src/modules/instance.js

@@ -17,6 +17,7 @@ const defaultState = {
   showInstanceSpecificPanel: false,
   formattingOptionsEnabled: false,
   alwaysShowSubjectInput: true,
+  hideMutedPosts: false,
   collapseMessageWithSubject: false,
   hidePostStats: false,
   hideUserStats: false,
@@ -37,6 +38,7 @@ const defaultState = {
   emoji: [],
   customEmoji: [],
   restrictedNicknames: [],
+  postFormats: [],
 
   // Feature-set, apparently, not everything here is reported...
   mediaProxyAvailable: false,
@@ -47,7 +49,11 @@ const defaultState = {
 
   // Html stuff
   instanceSpecificPanelContent: '',
-  tos: ''
+  tos: '',
+
+  // Version Information
+  backendVersion: '',
+  frontendVersion: ''
 }
 
 const instance = {

src/modules/statuses.js

@@ -1,4 +1,5 @@
-import { remove, slice, each, find, maxBy, minBy, merge, last, isArray } from 'lodash'
+import { remove, slice, each, find, maxBy, minBy, merge, first, last, isArray, omitBy } from 'lodash'
+import { set } from 'vue'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
 
@@ -10,6 +11,7 @@ const emptyTl = (userId = 0) => ({
   visibleStatusesObject: {},
   newStatusCount: 0,
   maxId: 0,
+  minId: 0,
   minVisibleId: 0,
   loading: false,
   followers: [],
@@ -18,7 +20,7 @@ const emptyTl = (userId = 0) => ({
   flushMarker: 0
 })
 
-export const defaultState = {
+export const defaultState = () => ({
   allStatuses: [],
   allStatusesObject: {},
   maxId: 0,
@@ -29,7 +31,8 @@ export const defaultState = {
     data: [],
     idStore: {},
     loading: false,
-    error: false
+    error: false,
+    fetcherId: null
   },
   favorites: new Set(),
   error: false,
@@ -44,7 +47,7 @@ export const defaultState = {
     tag: emptyTl(),
     dms: emptyTl()
   }
-}
+})
 
 export const prepareStatus = (status) => {
   // Set deleted flag
@@ -70,7 +73,9 @@ const mergeOrAdd = (arr, obj, item) => {
 
   if (oldItem) {
     // We already have this, so only merge the new info.
-    merge(oldItem, item)
+    // We ignore null values to avoid overwriting existing properties with missing data
+    // we also skip 'user' because that is handled by users module
+    merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user'))
     // Reactivity fix.
     oldItem.attachments.splice(oldItem.attachments.length)
     return {item: oldItem, new: false}
@@ -78,7 +83,7 @@ const mergeOrAdd = (arr, obj, item) => {
     // This is a new item, prepare it
     prepareStatus(item)
     arr.push(item)
-    obj[item.id] = item
+    set(obj, item.id, item)
     return {item, new: true}
   }
 }
@@ -117,11 +122,16 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   const timelineObject = state.timelines[timeline]
 
   const maxNew = statuses.length > 0 ? maxBy(statuses, 'id').id : 0
-  const older = timeline && maxNew < timelineObject.maxId
+  const minNew = statuses.length > 0 ? minBy(statuses, 'id').id : 0
+  const newer = timeline && maxNew > timelineObject.maxId && statuses.length > 0
+  const older = timeline && (minNew < timelineObject.minId || timelineObject.minId === 0) && statuses.length > 0
 
-  if (timeline && !noIdUpdate && statuses.length > 0 && !older) {
+  if (!noIdUpdate && newer) {
     timelineObject.maxId = maxNew
   }
+  if (!noIdUpdate && older) {
+    timelineObject.minId = minNew
+  }
 
   // This makes sure that user timeline won't get data meant for other
   // user. I.e. opening different user profiles makes request which could
@@ -258,9 +268,6 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   // Keep the visible statuses sorted
   if (timeline) {
     sortTimeline(timelineObject)
-    if ((older || timelineObject.minVisibleId <= 0) && statuses.length > 0) {
-      timelineObject.minVisibleId = minBy(statuses, 'id').id
-    }
   }
 }
 
@@ -309,18 +316,39 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
   })
 }
 
+const removeStatus = (state, { timeline, userId }) => {
+  const timelineObject = state.timelines[timeline]
+  if (userId) {
+    remove(timelineObject.statuses, { user: { id: userId } })
+    remove(timelineObject.visibleStatuses, { user: { id: userId } })
+    timelineObject.minVisibleId = timelineObject.visibleStatuses.length > 0 ? last(timelineObject.visibleStatuses).id : 0
+    timelineObject.maxId = timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
+  }
+}
+
 export const mutations = {
   addNewStatuses,
   addNewNotifications,
+  removeStatus,
   showNewStatuses (state, { timeline }) {
     const oldTimeline = (state.timelines[timeline])
 
     oldTimeline.newStatusCount = 0
     oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
     oldTimeline.minVisibleId = last(oldTimeline.visibleStatuses).id
+    oldTimeline.minId = oldTimeline.minVisibleId
     oldTimeline.visibleStatusesObject = {}
     each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status })
   },
+  setNotificationFetcher (state, { fetcherId }) {
+    state.notifications.fetcherId = fetcherId
+  },
+  resetStatuses (state) {
+    const emptyState = defaultState()
+    Object.entries(emptyState).forEach(([key, value]) => {
+      state[key] = value
+    })
+  },
   clearTimeline (state, { timeline }) {
     state.timelines[timeline] = emptyTl(state.timelines[timeline].userId)
   },
@@ -335,6 +363,15 @@ export const mutations = {
   },
   setRetweeted (state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
+
+    if (newStatus.repeated !== value) {
+      if (value) {
+        newStatus.repeat_num++
+      } else {
+        newStatus.repeat_num--
+      }
+    }
+
     newStatus.repeated = value
   },
   setDeleted (state, { status }) {
@@ -371,7 +408,7 @@ export const mutations = {
 }
 
 const statuses = {
-  state: defaultState,
+  state: defaultState(),
   actions: {
     addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) {
       commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId })
@@ -391,6 +428,12 @@ const statuses = {
     setNotificationsSilence ({ rootState, commit }, { value }) {
       commit('setNotificationsSilence', { value })
     },
+    stopFetchingNotifications ({ rootState, commit }) {
+      if (rootState.statuses.notifications.fetcherId) {
+        window.clearInterval(rootState.statuses.notifications.fetcherId)
+      }
+      commit('setNotificationFetcher', { fetcherId: null })
+    },
     deleteStatus ({ rootState, commit }, status) {
       commit('setDeleted', { status })
       apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
@@ -399,13 +442,6 @@ const statuses = {
       // Optimistic favoriting...
       commit('setFavorited', { status, value: true })
       apiService.favorite({ id: status.id, credentials: rootState.users.currentUser.credentials })
-        .then(response => {
-          if (response.ok) {
-            return response.json()
-          } else {
-            return {}
-          }
-        })
         .then(status => {
           commit('setFavoritedConfirm', { status })
         })
@@ -414,13 +450,6 @@ const statuses = {
       // Optimistic favoriting...
       commit('setFavorited', { status, value: false })
       apiService.unfavorite({ id: status.id, credentials: rootState.users.currentUser.credentials })
-        .then(response => {
-          if (response.ok) {
-            return response.json()
-          } else {
-            return {}
-          }
-        })
         .then(status => {
           commit('setFavoritedConfirm', { status })
         })

src/modules/users.js

@@ -1,5 +1,5 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { compact, map, each, merge, find } from 'lodash'
+import { compact, map, each, merge, find, last } from 'lodash'
 import { set } from 'vue'
 import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
 import oauthApi from '../services/new_api/oauth'
@@ -16,9 +16,9 @@ export const mergeOrAdd = (arr, obj, item) => {
   } else {
     // This is a new item, prepare it
     arr.push(item)
-    obj[item.id] = item
+    set(obj, item.id, item)
     if (item.screen_name && !item.screen_name.includes('@')) {
-      obj[item.screen_name] = item
+      set(obj, item.screen_name.toLowerCase(), item)
     }
     return { item, new: true }
   }
@@ -52,23 +52,23 @@ export const mutations = {
     state.loggingIn = false
   },
   // TODO Clean after ourselves?
-  addFriends (state, { id, friends, page }) {
+  addFriends (state, { id, friends }) {
     const user = state.usersObject[id]
     each(friends, friend => {
       if (!find(user.friends, { id: friend.id })) {
         user.friends.push(friend)
       }
     })
-    user.friendsPage = page + 1
+    user.lastFriendId = last(friends).id
   },
-  addFollowers (state, { id, followers, page }) {
+  addFollowers (state, { id, followers }) {
     const user = state.usersObject[id]
     each(followers, follower => {
       if (!find(user.followers, { id: follower.id })) {
         user.followers.push(follower)
       }
     })
-    user.followersPage = page + 1
+    user.lastFollowerId = last(followers).id
   },
   // Because frontend doesn't have a reason to keep these stuff in memory
   // outside of viewing someones user profile.
@@ -78,7 +78,7 @@ export const mutations = {
       return
     }
     user.friends = []
-    user.friendsPage = 0
+    user.lastFriendId = null
   },
   clearFollowers (state, userId) {
     const user = state.usersObject[userId]
@@ -86,15 +86,36 @@ export const mutations = {
       return
     }
     user.followers = []
-    user.followersPage = 0
+    user.lastFollowerId = null
   },
   addNewUsers (state, users) {
     each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
   },
-  saveBlocks (state, blockIds) {
+  updateUserRelationship (state, relationships) {
+    relationships.forEach((relationship) => {
+      const user = state.usersObject[relationship.id]
+      if (user) {
+        user.follows_you = relationship.followed_by
+        user.following = relationship.following
+        user.muted = relationship.muting
+        user.statusnet_blocking = relationship.blocking
+      }
+    })
+  },
+  updateBlocks (state, blockedUsers) {
+    // Reset statusnet_blocking of all fetched users
+    each(state.users, (user) => { user.statusnet_blocking = false })
+    each(blockedUsers, (user) => mergeOrAdd(state.users, state.usersObject, user))
+  },
+  saveBlockIds (state, blockIds) {
     state.currentUser.blockIds = blockIds
   },
-  saveMutes (state, muteIds) {
+  updateMutes (state, mutedUsers) {
+    // Reset muted of all fetched users
+    each(state.users, (user) => { user.muted = false })
+    each(mutedUsers, (user) => mergeOrAdd(state.users, state.usersObject, user))
+  },
+  saveMuteIds (state, muteIds) {
     state.currentUser.muteIds = muteIds
   },
   setUserForStatus (state, status) {
@@ -122,12 +143,14 @@ export const mutations = {
 }
 
 export const getters = {
-  userById: state => id =>
-    state.users.find(user => user.id === id),
-  userByName: state => name =>
-    state.users.find(user => user.screen_name &&
-      (user.screen_name.toLowerCase() === name.toLowerCase())
-    )
+  findUser: state => query => {
+    const result = state.usersObject[query]
+    // In case it's a screen_name, we can try searching case-insensitive
+    if (!result && typeof query === 'string') {
+      return state.usersObject[query.toLowerCase()]
+    }
+    return result
+  }
 }
 
 export const defaultState = {
@@ -147,47 +170,59 @@ const users = {
   actions: {
     fetchUser (store, id) {
       return store.rootState.api.backendInteractor.fetchUser({ id })
-        .then((user) => store.commit('addNewUsers', [user]))
+        .then((user) => {
+          store.commit('addNewUsers', [user])
+          return user
+        })
+    },
+    fetchUserRelationship (store, id) {
+      return store.rootState.api.backendInteractor.fetchUserRelationship({ id })
+        .then((relationships) => store.commit('updateUserRelationship', relationships))
     },
     fetchBlocks (store) {
       return store.rootState.api.backendInteractor.fetchBlocks()
         .then((blocks) => {
-          store.commit('saveBlocks', map(blocks, 'id'))
-          store.commit('addNewUsers', blocks)
+          store.commit('saveBlockIds', map(blocks, 'id'))
+          store.commit('updateBlocks', blocks)
           return blocks
         })
     },
-    blockUser (store, id) {
-      return store.rootState.api.backendInteractor.blockUser(id)
-        .then((user) => store.commit('addNewUsers', [user]))
+    blockUser (store, userId) {
+      return store.rootState.api.backendInteractor.blockUser(userId)
+        .then((relationship) => {
+          store.commit('updateUserRelationship', [relationship])
+          store.commit('removeStatus', { timeline: 'friends', userId })
+          store.commit('removeStatus', { timeline: 'public', userId })
+          store.commit('removeStatus', { timeline: 'publicAndExternal', userId })
+        })
     },
     unblockUser (store, id) {
       return store.rootState.api.backendInteractor.unblockUser(id)
-        .then((user) => store.commit('addNewUsers', [user]))
+        .then((relationship) => store.commit('updateUserRelationship', [relationship]))
     },
     fetchMutes (store) {
       return store.rootState.api.backendInteractor.fetchMutes()
-        .then((mutedUsers) => {
-          each(mutedUsers, (user) => { user.muted = true })
-          store.commit('addNewUsers', mutedUsers)
-          store.commit('saveMutes', map(mutedUsers, 'id'))
+        .then((mutes) => {
+          store.commit('updateMutes', mutes)
+          store.commit('saveMuteIds', map(mutes, 'id'))
+          return mutes
         })
     },
     muteUser (store, id) {
-      return store.state.api.backendInteractor.setUserMute({ id, muted: true })
-        .then((user) => store.commit('addNewUsers', [user]))
+      return store.rootState.api.backendInteractor.muteUser(id)
+        .then((relationship) => store.commit('updateUserRelationship', [relationship]))
     },
     unmuteUser (store, id) {
-      return store.state.api.backendInteractor.setUserMute({ id, muted: false })
-        .then((user) => store.commit('addNewUsers', [user]))
+      return store.rootState.api.backendInteractor.unmuteUser(id)
+        .then((relationship) => store.commit('updateUserRelationship', [relationship]))
     },
     addFriends ({ rootState, commit }, fetchBy) {
       return new Promise((resolve, reject) => {
         const user = rootState.users.usersObject[fetchBy]
-        const page = user.friendsPage || 1
-        rootState.api.backendInteractor.fetchFriends({ id: user.id, page })
+        const maxId = user.lastFriendId
+        rootState.api.backendInteractor.fetchFriends({ id: user.id, maxId })
           .then((friends) => {
-            commit('addFriends', { id: user.id, friends, page })
+            commit('addFriends', { id: user.id, friends })
             resolve(friends)
           }).catch(() => {
             reject()
@@ -196,10 +231,10 @@ const users = {
     },
     addFollowers ({ rootState, commit }, fetchBy) {
       const user = rootState.users.usersObject[fetchBy]
-      const page = user.followersPage || 1
-      return rootState.api.backendInteractor.fetchFollowers({ id: user.id, page })
+      const maxId = user.lastFollowerId
+      return rootState.api.backendInteractor.fetchFollowers({ id: user.id, maxId })
         .then((followers) => {
-          commit('addFollowers', { id: user.id, followers, page })
+          commit('addFollowers', { id: user.id, followers })
           return followers
         })
     },
@@ -292,9 +327,12 @@ const users = {
 
     logout (store) {
       store.commit('clearCurrentUser')
+      store.dispatch('disconnectFromChat')
       store.commit('setToken', false)
       store.dispatch('stopFetching', 'friends')
       store.commit('setBackendInteractor', backendInteractorService())
+      store.dispatch('stopFetchingNotifications')
+      store.commit('resetStatuses')
     },
     loginUser (store, accessToken) {
       return new Promise((resolve, reject) => {
@@ -319,6 +357,9 @@ const users = {
 
               if (user.token) {
                 store.dispatch('setWsToken', user.token)
+
+                // Initialize the chat socket.
+                store.dispatch('initializeSocket')
               }
 
               // Start getting fresh posts.

src/services/api/api.service.js

@@ -1,39 +1,15 @@
 /* eslint-env browser */
 const LOGIN_URL = '/api/account/verify_credentials.json'
-const FRIENDS_TIMELINE_URL = '/api/statuses/friends_timeline.json'
 const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing'
-const PUBLIC_TIMELINE_URL = '/api/statuses/public_timeline.json'
-const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_timeline.json'
-const TAG_TIMELINE_URL = '/api/statusnet/tags/timeline'
-const FAVORITE_URL = '/api/favorites/create'
-const UNFAVORITE_URL = '/api/favorites/destroy'
-const RETWEET_URL = '/api/statuses/retweet'
-const UNRETWEET_URL = '/api/statuses/unretweet'
-const STATUS_UPDATE_URL = '/api/statuses/update.json'
-const STATUS_DELETE_URL = '/api/statuses/destroy'
-const STATUS_URL = '/api/statuses/show'
-const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
-const CONVERSATION_URL = '/api/statusnet/conversation'
 const MENTIONS_URL = '/api/statuses/mentions.json'
-const DM_TIMELINE_URL = '/api/statuses/dm_timeline.json'
-const FOLLOWERS_URL = '/api/statuses/followers.json'
-const FRIENDS_URL = '/api/statuses/friends.json'
-const BLOCKS_URL = '/api/statuses/blocks.json'
-const FOLLOWING_URL = '/api/friendships/create.json'
-const UNFOLLOWING_URL = '/api/friendships/destroy.json'
-const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
 const REGISTRATION_URL = '/api/account/register.json'
 const AVATAR_UPDATE_URL = '/api/qvitter/update_avatar.json'
 const BG_UPDATE_URL = '/api/qvitter/update_background_image.json'
 const BANNER_UPDATE_URL = '/api/account/update_profile_banner.json'
 const PROFILE_UPDATE_URL = '/api/account/update_profile.json'
 const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
-const QVITTER_USER_TIMELINE_URL = '/api/qvitter/statuses/user_timeline.json'
 const QVITTER_USER_NOTIFICATIONS_URL = '/api/qvitter/statuses/notifications.json'
 const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
-const BLOCKING_URL = '/api/blocks/create.json'
-const UNBLOCKING_URL = '/api/blocks/destroy.json'
-const USER_URL = '/api/users/show.json'
 const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
 const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
 const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
@@ -43,9 +19,35 @@ const DENY_USER_URL = '/api/pleroma/friendships/deny'
 const SUGGESTIONS_URL = '/api/v1/suggestions'
 
 const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
+const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
+const MASTODON_UNFAVORITE_URL = id => `/api/v1/statuses/${id}/unfavourite`
+const MASTODON_RETWEET_URL = id => `/api/v1/statuses/${id}/reblog`
+const MASTODON_UNRETWEET_URL = id => `/api/v1/statuses/${id}/unreblog`
+const MASTODON_DELETE_URL = id => `/api/v1/statuses/${id}`
+const MASTODON_FOLLOW_URL = id => `/api/v1/accounts/${id}/follow`
+const MASTODON_UNFOLLOW_URL = id => `/api/v1/accounts/${id}/unfollow`
+const MASTODON_FOLLOWING_URL = id => `/api/v1/accounts/${id}/following`
+const MASTODON_FOLLOWERS_URL = id => `/api/v1/accounts/${id}/followers`
+const MASTODON_DIRECT_MESSAGES_TIMELINE_URL = '/api/v1/timelines/direct'
+const MASTODON_PUBLIC_TIMELINE = '/api/v1/timelines/public'
+const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
+const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
+const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
+const MASTODON_USER_URL = '/api/v1/accounts'
+const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
+const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
+const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
+const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/'
+const MASTODON_USER_MUTES_URL = '/api/v1/mutes/'
+const MASTODON_BLOCK_USER_URL = id => `/api/v1/accounts/${id}/block`
+const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock`
+const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
+const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
+const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
+const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
 
 import { each, map } from 'lodash'
-import { parseStatus, parseUser, parseNotification } from '../entity_normalizer/entity_normalizer.service.js'
+import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
 import 'whatwg-fetch'
 import { StatusCodeError } from '../errors/errors'
 
@@ -59,6 +61,19 @@ let fetch = (url, options) => {
   return oldfetch(fullUrl, options)
 }
 
+const promisedRequest = (url, options) => {
+  return fetch(url, options)
+    .then((response) => {
+      return new Promise((resolve, reject) => response.json()
+        .then((json) => {
+          if (!response.ok) {
+            return reject(new StatusCodeError(response.status, json, { url, options }, response))
+          }
+          return resolve(json)
+        }))
+    })
+}
+
 // Params
 // cropH
 // cropW
@@ -195,7 +210,7 @@ const externalProfile = ({profileUrl, credentials}) => {
 }
 
 const followUser = ({id, credentials}) => {
-  let url = `${FOLLOWING_URL}?user_id=${id}`
+  let url = MASTODON_FOLLOW_URL(id)
   return fetch(url, {
     headers: authHeaders(credentials),
     method: 'POST'
@@ -203,7 +218,7 @@ const followUser = ({id, credentials}) => {
 }
 
 const unfollowUser = ({id, credentials}) => {
-  let url = `${UNFOLLOWING_URL}?user_id=${id}`
+  let url = MASTODON_UNFOLLOW_URL(id)
   return fetch(url, {
     headers: authHeaders(credentials),
     method: 'POST'
@@ -211,16 +226,14 @@ const unfollowUser = ({id, credentials}) => {
 }
 
 const blockUser = ({id, credentials}) => {
-  let url = `${BLOCKING_URL}?user_id=${id}`
-  return fetch(url, {
+  return fetch(MASTODON_BLOCK_USER_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   }).then((data) => data.json())
 }
 
 const unblockUser = ({id, credentials}) => {
-  let url = `${UNBLOCKING_URL}?user_id=${id}`
-  return fetch(url, {
+  return fetch(MASTODON_UNBLOCK_USER_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   }).then((data) => data.json())
@@ -243,7 +256,13 @@ const denyUser = ({id, credentials}) => {
 }
 
 const fetchUser = ({id, credentials}) => {
-  let url = `${USER_URL}?user_id=${id}`
+  let url = `${MASTODON_USER_URL}/${id}`
+  return promisedRequest(url, { headers: authHeaders(credentials) })
+    .then((data) => parseUser(data))
+}
+
+const fetchUserRelationship = ({id, credentials}) => {
+  let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
   return fetch(url, { headers: authHeaders(credentials) })
     .then((response) => {
       return new Promise((resolve, reject) => response.json()
@@ -254,31 +273,38 @@ const fetchUser = ({id, credentials}) => {
           return resolve(json)
         }))
     })
-    .then((data) => parseUser(data))
 }
 
-const fetchFriends = ({id, page, credentials}) => {
-  let url = `${FRIENDS_URL}?user_id=${id}`
-  if (page) {
-    url = url + `&page=${page}`
-  }
+const fetchFriends = ({id, maxId, sinceId, limit = 20, credentials}) => {
+  let url = MASTODON_FOLLOWING_URL(id)
+  const args = [
+    maxId && `max_id=${maxId}`,
+    sinceId && `since_id=${sinceId}`,
+    limit && `limit=${limit}`
+  ].filter(_ => _).join('&')
+
+  url = url + (args ? '?' + args : '')
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(parseUser))
 }
 
 const exportFriends = ({id, credentials}) => {
-  let url = `${FRIENDS_URL}?user_id=${id}&all=true`
+  let url = MASTODON_FOLLOWING_URL(id) + `?all=true`
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(parseUser))
 }
 
-const fetchFollowers = ({id, page, credentials}) => {
-  let url = `${FOLLOWERS_URL}?user_id=${id}`
-  if (page) {
-    url = url + `&page=${page}`
-  }
+const fetchFollowers = ({id, maxId, sinceId, limit = 20, credentials}) => {
+  let url = MASTODON_FOLLOWERS_URL(id)
+  const args = [
+    maxId && `max_id=${maxId}`,
+    sinceId && `since_id=${sinceId}`,
+    limit && `limit=${limit}`
+  ].filter(_ => _).join('&')
+
+  url += args ? '?' + args : ''
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(parseUser))
@@ -298,8 +324,8 @@ const fetchFollowRequests = ({credentials}) => {
 }
 
 const fetchConversation = ({id, credentials}) => {
-  let url = `${CONVERSATION_URL}/${id}.json?count=100`
-  return fetch(url, { headers: authHeaders(credentials) })
+  let urlContext = MASTODON_STATUS_CONTEXT_URL(id)
+  return fetch(urlContext, { headers: authHeaders(credentials) })
     .then((data) => {
       if (data.ok) {
         return data
@@ -307,11 +333,14 @@ const fetchConversation = ({id, credentials}) => {
       throw new Error('Error fetching timeline', data)
     })
     .then((data) => data.json())
-    .then((data) => data.map(parseStatus))
+    .then(({ancestors, descendants}) => ({
+      ancestors: ancestors.map(parseStatus),
+      descendants: descendants.map(parseStatus)
+    }))
 }
 
 const fetchStatus = ({id, credentials}) => {
-  let url = `${STATUS_URL}/${id}.json`
+  let url = MASTODON_STATUS_URL(id)
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => {
       if (data.ok) {
@@ -323,57 +352,49 @@ const fetchStatus = ({id, credentials}) => {
     .then((data) => parseStatus(data))
 }
 
-const setUserMute = ({id, credentials, muted = true}) => {
-  const form = new FormData()
-
-  const muteInteger = muted ? 1 : 0
-
-  form.append('namespace', 'qvitter')
-  form.append('data', muteInteger)
-  form.append('topic', `mute:${id}`)
-
-  return fetch(QVITTER_USER_PREF_URL, {
-    method: 'POST',
-    headers: authHeaders(credentials),
-    body: form
-  })
-}
-
-const fetchTimeline = ({timeline, credentials, since = false, until = false, userId = false, tag = false}) => {
+const fetchTimeline = ({timeline, credentials, since = false, until = false, userId = false, tag = false, withMuted = false}) => {
   const timelineUrls = {
-    public: PUBLIC_TIMELINE_URL,
-    friends: FRIENDS_TIMELINE_URL,
+    public: MASTODON_PUBLIC_TIMELINE,
+    friends: MASTODON_USER_HOME_TIMELINE_URL,
     mentions: MENTIONS_URL,
-    dms: DM_TIMELINE_URL,
+    dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
     notifications: QVITTER_USER_NOTIFICATIONS_URL,
-    'publicAndExternal': PUBLIC_AND_EXTERNAL_TIMELINE_URL,
-    user: QVITTER_USER_TIMELINE_URL,
-    media: QVITTER_USER_TIMELINE_URL,
+    'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
+    user: MASTODON_USER_TIMELINE_URL,
+    media: MASTODON_USER_TIMELINE_URL,
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
-    tag: TAG_TIMELINE_URL
+    tag: MASTODON_TAG_TIMELINE_URL
   }
   const isNotifications = timeline === 'notifications'
   const params = []
 
   let url = timelineUrls[timeline]
 
+  if (timeline === 'user' || timeline === 'media') {
+    url = url(userId)
+  }
+
   if (since) {
     params.push(['since_id', since])
   }
   if (until) {
     params.push(['max_id', until])
   }
-  if (userId) {
-    params.push(['user_id', userId])
-  }
   if (tag) {
-    url += `/${tag}.json`
+    url = url(tag)
   }
   if (timeline === 'media') {
     params.push(['only_media', 1])
   }
+  if (timeline === 'public') {
+    params.push(['local', true])
+  }
+  if (timeline === 'public' || timeline === 'publicAndExternal') {
+    params.push(['only_media', false])
+  }
 
   params.push(['count', 20])
+  params.push(['with_muted', withMuted])
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
@@ -407,50 +428,82 @@ const verifyCredentials = (user) => {
 }
 
 const favorite = ({ id, credentials }) => {
-  return fetch(`${FAVORITE_URL}/${id}.json`, {
+  return fetch(MASTODON_FAVORITE_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   })
+    .then(response => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        throw new Error('Error favoriting post')
+      }
+    })
+    .then((data) => parseStatus(data))
 }
 
 const unfavorite = ({ id, credentials }) => {
-  return fetch(`${UNFAVORITE_URL}/${id}.json`, {
+  return fetch(MASTODON_UNFAVORITE_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   })
+    .then(response => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        throw new Error('Error removing favorite')
+      }
+    })
+    .then((data) => parseStatus(data))
 }
 
 const retweet = ({ id, credentials }) => {
-  return fetch(`${RETWEET_URL}/${id}.json`, {
+  return fetch(MASTODON_RETWEET_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   })
+    .then(response => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        throw new Error('Error repeating post')
+      }
+    })
+    .then((data) => parseStatus(data))
 }
 
 const unretweet = ({ id, credentials }) => {
-  return fetch(`${UNRETWEET_URL}/${id}.json`, {
+  return fetch(MASTODON_UNRETWEET_URL(id), {
     headers: authHeaders(credentials),
     method: 'POST'
   })
+    .then(response => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        throw new Error('Error removing repeat')
+      }
+    })
+    .then((data) => parseStatus(data))
 }
 
-const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks}) => {
-  const idsText = mediaIds.join(',')
+const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds = [], inReplyToStatusId, contentType}) => {
   const form = new FormData()
 
   form.append('status', status)
   form.append('source', 'Pleroma FE')
-  if (noAttachmentLinks) form.append('no_attachment_links', noAttachmentLinks)
   if (spoilerText) form.append('spoiler_text', spoilerText)
   if (visibility) form.append('visibility', visibility)
   if (sensitive) form.append('sensitive', sensitive)
   if (contentType) form.append('content_type', contentType)
-  form.append('media_ids', idsText)
+  mediaIds.forEach(val => {
+    form.append('media_ids[]', val)
+  })
   if (inReplyToStatusId) {
-    form.append('in_reply_to_status_id', inReplyToStatusId)
+    form.append('in_reply_to_id', inReplyToStatusId)
   }
 
-  return fetch(STATUS_UPDATE_URL, {
+  return fetch(MASTODON_POST_STATUS_URL, {
     body: form,
     method: 'POST',
     headers: authHeaders(credentials)
@@ -468,20 +521,20 @@ const postStatus = ({credentials, status, spoilerText, visibility, sensitive, me
 }
 
 const deleteStatus = ({ id, credentials }) => {
-  return fetch(`${STATUS_DELETE_URL}/${id}.json`, {
+  return fetch(MASTODON_DELETE_URL(id), {
     headers: authHeaders(credentials),
-    method: 'POST'
+    method: 'DELETE'
   })
 }
 
 const uploadMedia = ({formData, credentials}) => {
-  return fetch(MEDIA_UPLOAD_URL, {
+  return fetch(MASTODON_MEDIA_UPLOAD_URL, {
     body: formData,
     method: 'POST',
     headers: authHeaders(credentials)
   })
-    .then((response) => response.text())
-    .then((text) => (new DOMParser()).parseFromString(text, 'application/xml'))
+    .then((data) => data.json())
+    .then((data) => parseAttachment(data))
 }
 
 const followImport = ({params, credentials}) => {
@@ -522,30 +575,40 @@ const changePassword = ({credentials, password, newPassword, newPasswordConfirma
 }
 
 const fetchMutes = ({credentials}) => {
-  const url = '/api/qvitter/mutes.json'
-
-  return fetch(url, {
-    headers: authHeaders(credentials)
-  }).then((data) => data.json())
+  return promisedRequest(MASTODON_USER_MUTES_URL, { headers: authHeaders(credentials) })
+    .then((users) => users.map(parseUser))
 }
 
-const fetchBlocks = ({page, credentials}) => {
-  return fetch(BLOCKS_URL, {
-    headers: authHeaders(credentials)
-  }).then((data) => {
-    if (data.ok) {
-      return data.json()
-    }
-    throw new Error('Error fetching blocks', data)
+const muteUser = ({id, credentials}) => {
+  return promisedRequest(MASTODON_MUTE_USER_URL(id), {
+    headers: authHeaders(credentials),
+    method: 'POST'
   })
 }
 
+const unmuteUser = ({id, credentials}) => {
+  return promisedRequest(MASTODON_UNMUTE_USER_URL(id), {
+    headers: authHeaders(credentials),
+    method: 'POST'
+  })
+}
+
+const fetchBlocks = ({credentials}) => {
+  return promisedRequest(MASTODON_USER_BLOCKS_URL, { headers: authHeaders(credentials) })
+    .then((users) => users.map(parseUser))
+}
+
 const fetchOAuthTokens = ({credentials}) => {
   const url = '/api/oauth_tokens.json'
 
   return fetch(url, {
     headers: authHeaders(credentials)
-  }).then((data) => data.json())
+  }).then((data) => {
+    if (data.ok) {
+      return data.json()
+    }
+    throw new Error('Error fetching auth tokens', data)
+  })
 }
 
 const revokeOAuthToken = ({id, credentials}) => {
@@ -588,6 +651,7 @@ const apiService = {
   blockUser,
   unblockUser,
   fetchUser,
+  fetchUserRelationship,
   favorite,
   unfavorite,
   retweet,
@@ -596,8 +660,9 @@ const apiService = {
   deleteStatus,
   uploadMedia,
   fetchAllFollowing,
-  setUserMute,
   fetchMutes,
+  muteUser,
+  unmuteUser,
   fetchBlocks,
   fetchOAuthTokens,
   revokeOAuthToken,

src/services/backend_interactor_service/backend_interactor_service.js

@@ -10,16 +10,16 @@ const backendInteractorService = (credentials) => {
     return apiService.fetchConversation({id, credentials})
   }
 
-  const fetchFriends = ({id, page}) => {
-    return apiService.fetchFriends({id, page, credentials})
+  const fetchFriends = ({id, maxId, sinceId, limit}) => {
+    return apiService.fetchFriends({id, maxId, sinceId, limit, credentials})
   }
 
   const exportFriends = ({id}) => {
     return apiService.exportFriends({id, credentials})
   }
 
-  const fetchFollowers = ({id, page}) => {
-    return apiService.fetchFollowers({id, page, credentials})
+  const fetchFollowers = ({id, maxId, sinceId, limit}) => {
+    return apiService.fetchFollowers({id, maxId, sinceId, limit, credentials})
   }
 
   const fetchAllFollowing = ({username}) => {
@@ -30,6 +30,10 @@ const backendInteractorService = (credentials) => {
     return apiService.fetchUser({id, credentials})
   }
 
+  const fetchUserRelationship = ({id}) => {
+    return apiService.fetchUserRelationship({id, credentials})
+  }
+
   const followUser = (id) => {
     return apiService.followUser({credentials, id})
   }
@@ -58,12 +62,10 @@ const backendInteractorService = (credentials) => {
     return timelineFetcherService.startFetching({timeline, store, credentials, userId, tag})
   }
 
-  const setUserMute = ({id, muted = true}) => {
-    return apiService.setUserMute({id, muted, credentials})
-  }
-
   const fetchMutes = () => apiService.fetchMutes({credentials})
-  const fetchBlocks = (params) => apiService.fetchBlocks({credentials, ...params})
+  const muteUser = (id) => apiService.muteUser({credentials, id})
+  const unmuteUser = (id) => apiService.unmuteUser({credentials, id})
+  const fetchBlocks = () => apiService.fetchBlocks({credentials})
   const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
   const fetchOAuthTokens = () => apiService.fetchOAuthTokens({credentials})
   const revokeOAuthToken = (id) => apiService.revokeOAuthToken({id, credentials})
@@ -92,11 +94,13 @@ const backendInteractorService = (credentials) => {
     blockUser,
     unblockUser,
     fetchUser,
+    fetchUserRelationship,
     fetchAllFollowing,
     verifyCredentials: apiService.verifyCredentials,
     startFetching,
-    setUserMute,
     fetchMutes,
+    muteUser,
+    unmuteUser,
     fetchBlocks,
     fetchOAuthTokens,
     revokeOAuthToken,

src/services/entity_normalizer/entity_normalizer.service.js

@@ -39,11 +39,11 @@ export const parseUser = (data) => {
       return output
     }
 
-    output.name = null // missing
-    output.name_html = data.display_name
+    // output.name = ??? missing
+    output.name_html = addEmojis(data.display_name, data.emojis)
 
-    output.description = null // missing
-    output.description_html = data.note
+    // output.description = ??? missing
+    output.description_html = addEmojis(data.note, data.emojis)
 
     // Utilize avatar_static for gif avatars?
     output.profile_image_url = data.avatar
@@ -59,10 +59,14 @@ export const parseUser = (data) => {
     output.statusnet_profile_url = data.url
 
     if (data.pleroma) {
-      const pleroma = data.pleroma
-      output.follows_you = pleroma.follows_you
-      output.statusnet_blocking = pleroma.statusnet_blocking
-      output.muted = pleroma.muted
+      const relationship = data.pleroma.relationship
+
+      if (relationship) {
+        output.follows_you = relationship.followed_by
+        output.following = relationship.following
+        output.statusnet_blocking = relationship.blocking
+        output.muted = relationship.muting
+      }
     }
 
     // Missing, trying to recover
@@ -83,7 +87,7 @@ export const parseUser = (data) => {
 
     output.friends_count = data.friends_count
 
-    output.bot = null // missing
+    // output.bot = ??? missing
 
     output.statusnet_profile_url = data.statusnet_profile_url
 
@@ -124,17 +128,18 @@ export const parseUser = (data) => {
   return output
 }
 
-const parseAttachment = (data) => {
+export const parseAttachment = (data) => {
   const output = {}
   const masto = !data.hasOwnProperty('oembed')
 
   if (masto) {
     // Not exactly same...
-    output.mimetype = data.type
+    output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type
     output.meta = data.meta // not present in BE yet
+    output.id = data.id
   } else {
     output.mimetype = data.mimetype
-    output.meta = null // missing
+    // output.meta = ??? missing
   }
 
   output.url = data.url
@@ -142,6 +147,14 @@ const parseAttachment = (data) => {
 
   return output
 }
+export const addEmojis = (string, emojis) => {
+  return emojis.reduce((acc, emoji) => {
+    return acc.replace(
+      new RegExp(`:${emoji.shortcode}:`, 'g'),
+      `<img src='${emoji.url}' alt='${emoji.shortcode}' class='emoji' />`
+    )
+  }, string)
+}
 
 export const parseStatus = (data) => {
   const output = {}
@@ -157,16 +170,17 @@ export const parseStatus = (data) => {
     output.type = data.reblog ? 'retweet' : 'status'
     output.nsfw = data.sensitive
 
-    output.statusnet_html = data.content
+    output.statusnet_html = addEmojis(data.content, data.emojis)
 
     // Not exactly the same but works?
     output.text = data.content
 
     output.in_reply_to_status_id = data.in_reply_to_id
     output.in_reply_to_user_id = data.in_reply_to_account_id
+    output.replies_count = data.replies_count
 
     // Missing!! fix in UI?
-    output.in_reply_to_screen_name = null
+    // output.in_reply_to_screen_name = ???
 
     // Not exactly the same but works
     output.statusnet_conversation_id = data.id
@@ -176,11 +190,10 @@ export const parseStatus = (data) => {
     }
 
     output.summary = data.spoiler_text
-    output.summary_html = data.spoiler_text
+    output.summary_html = addEmojis(data.spoiler_text, data.emojis)
     output.external_url = data.url
 
-    // FIXME missing!!
-    output.is_local = false
+    // output.is_local = ??? missing
   } else {
     output.favorited = data.favorited
     output.fave_num = data.fave_num
@@ -259,7 +272,7 @@ export const parseNotification = (data) => {
 
   if (masto) {
     output.type = mastoDict[data.type] || data.type
-    output.seen = null // missing
+    // output.seen = ??? missing
     output.status = parseStatus(data.status)
     output.action = output.status // not sure
     output.from_profile = parseUser(data.account)
@@ -282,5 +295,5 @@ export const parseNotification = (data) => {
 
 const isNsfw = (status) => {
   const nsfwRegex = /#nsfw/i
-  return (status.tags || []).includes('nsfw') || !!status.text.match(nsfwRegex)
+  return (status.tags || []).includes('nsfw') || !!(status.text || '').match(nsfwRegex)
 }

src/services/follow_manipulate/follow_manipulate.js

@@ -19,7 +19,7 @@ const fetchUser = (attempt, user, store) => new Promise((resolve, reject) => {
 export const requestFollow = (user, store) => new Promise((resolve, reject) => {
   store.state.api.backendInteractor.followUser(user.id)
     .then((updated) => {
-      store.commit('addNewUsers', [updated])
+      store.commit('updateUserRelationship', [updated])
 
       // For locked users we just mark it that we sent the follow request
       if (updated.locked) {
@@ -66,7 +66,7 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => {
 export const requestUnfollow = (user, store) => new Promise((resolve, reject) => {
   store.state.api.backendInteractor.unfollowUser(user.id)
     .then((updated) => {
-      store.commit('addNewUsers', [updated])
+      store.commit('updateUserRelationship', [updated])
       resolve({
         updated
       })

src/services/gesture_service/gesture_service.js

@@ -0,0 +1,74 @@
+
+const DIRECTION_LEFT = [-1, 0]
+const DIRECTION_RIGHT = [1, 0]
+const DIRECTION_UP = [0, -1]
+const DIRECTION_DOWN = [0, 1]
+
+const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
+
+const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])
+
+const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1])
+
+const perpendicular = v => [v[1], -v[0]]
+
+const dotProduct = (v1, v2) => v1[0] * v2[0] + v1[1] * v2[1]
+
+const project = (v1, v2) => {
+  const scalar = (dotProduct(v1, v2) / dotProduct(v2, v2))
+  return [scalar * v2[0], scalar * v2[1]]
+}
+
+// direction: either use the constants above or an arbitrary 2d vector.
+// threshold: how many Px to move from touch origin before checking if the
+//    callback should be called.
+// divergentTolerance: a scalar for much of divergent direction we tolerate when
+//    above threshold. for example, with 1.0 we only call the callback if
+//    divergent component of delta is < 1.0 * direction component of delta.
+const swipeGesture = (direction, onSwipe, threshold = 30, perpendicularTolerance = 1.0) => {
+  return {
+    direction,
+    onSwipe,
+    threshold,
+    perpendicularTolerance,
+    _startPos: [0, 0],
+    _swiping: false
+  }
+}
+
+const beginSwipe = (event, gesture) => {
+  gesture._startPos = touchEventCoord(event)
+  gesture._swiping = true
+}
+
+const updateSwipe = (event, gesture) => {
+  if (!gesture._swiping) return
+  // movement too small
+  const delta = deltaCoord(gesture._startPos, touchEventCoord(event))
+  if (vectorLength(delta) < gesture.threshold) return
+  // movement is opposite from direction
+  if (dotProduct(delta, gesture.direction) < 0) return
+  // movement perpendicular to direction is too much
+  const towardsDir = project(delta, gesture.direction)
+  const perpendicularDir = perpendicular(gesture.direction)
+  const towardsPerpendicular = project(delta, perpendicularDir)
+  if (
+    vectorLength(towardsDir) * gesture.perpendicularTolerance <
+    vectorLength(towardsPerpendicular)
+  ) return
+
+  gesture.onSwipe()
+  gesture._swiping = false
+}
+
+const GestureService = {
+  DIRECTION_LEFT,
+  DIRECTION_RIGHT,
+  DIRECTION_UP,
+  DIRECTION_DOWN,
+  swipeGesture,
+  beginSwipe,
+  updateSwipe
+}
+
+export default GestureService

src/services/new_api/user_search.js

@@ -1,13 +1,16 @@
 import utils from './utils.js'
+import { parseUser } from '../entity_normalizer/entity_normalizer.service.js'
 
 const search = ({query, store}) => {
   return utils.request({
     store,
-    url: '/api/pleroma/search_user',
+    url: '/api/v1/accounts/search',
     params: {
-      query
+      q: query
     }
-  }).then((data) => data.json())
+  })
+  .then((data) => data.json())
+  .then((data) => data.map(parseUser))
 }
 const UserSearch = {
   search

src/services/status_poster/status_poster.service.js

@@ -4,7 +4,7 @@ import apiService from '../api/api.service.js'
 const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
   const mediaIds = map(media, 'id')
 
-  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks: store.state.instance.noAttachmentLinks})
+  return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType})
     .then((data) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {
@@ -26,25 +26,7 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, media =
 const uploadMedia = ({ store, formData }) => {
   const credentials = store.state.users.currentUser.credentials
 
-  return apiService.uploadMedia({ credentials, formData }).then((xml) => {
-    // Firefox and Chrome treat method differently...
-    let link = xml.getElementsByTagName('link')
-
-    if (link.length === 0) {
-      link = xml.getElementsByTagName('atom:link')
-    }
-
-    link = link[0]
-
-    const mediaData = {
-      id: xml.getElementsByTagName('media_id')[0].textContent,
-      url: xml.getElementsByTagName('media_url')[0].textContent,
-      image: link.getAttribute('href'),
-      mimetype: link.getAttribute('type')
-    }
-
-    return mediaData
-  })
+  return apiService.uploadMedia({ credentials, formData })
 }
 
 const statusPosterService = {

src/services/timeline_fetcher/timeline_fetcher.service.js

@@ -19,15 +19,19 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
   const args = { timeline, credentials }
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
+  const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined'
+    ? rootState.instance.hideMutedPosts
+    : rootState.config.hideMutedPosts
 
   if (older) {
-    args['until'] = until || timelineData.minVisibleId
+    args['until'] = until || timelineData.minId
   } else {
     args['since'] = timelineData.maxId
   }
 
   args['userId'] = userId
   args['tag'] = tag
+  args['withMuted'] = !hideMutedPosts
 
   const numStatusesBeforeFetch = timelineData.statuses.length
 

src/services/user_profile_link_generator/user_profile_link_generator.js

@@ -1,7 +1,7 @@
 import { includes } from 'lodash'
 
 const generateProfileLink = (id, screenName, restrictedNicknames) => {
-  const complicated = (isExternal(screenName) || includes(restrictedNicknames, screenName))
+  const complicated = !screenName || (isExternal(screenName) || includes(restrictedNicknames, screenName))
   return {
     name: (complicated ? 'external-user-profile' : 'user-profile'),
     params: (complicated ? { id } : { name: screenName })

src/services/version/version.service.js

@@ -0,0 +1,6 @@
+
+export const extractCommit = versionString => {
+  const regex = /-g(\w+)$/i
+  const matches = versionString.match(regex)
+  return matches ? matches[1] : ''
+}

static/font/config.json

@@ -233,6 +233,12 @@
       "css": "play-circled",
       "code": 61764,
       "src": "fontawesome"
+    },
+    {
+      "uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6",
+      "css": "pencil",
+      "code": 59416,
+      "src": "fontawesome"
     }
   ]
 }

static/font/css/fontello-codes.css

@@ -23,6 +23,7 @@
 .icon-plus:before { content: '\e815'; } /* '' */
 .icon-adjust:before { content: '\e816'; } /* '' */
 .icon-edit:before { content: '\e817'; } /* '' */
+.icon-pencil:before { content: '\e818'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */

static/font/css/fontello-ie7-codes.css

@@ -23,6 +23,7 @@
 .icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-edit { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-pencil { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }