fix issues with retweet info, adjust spacing

.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     'html'
   ],
   // add your custom rules here
-  'rules': {
+  rules: {
     // allow paren-less arrow functions
     'arrow-parens': 0,
     // allow async-await

package.json

@@ -17,6 +17,7 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-lodash": "^3.2.11",
     "chromatism": "^3.0.0",
+    "cropperjs": "^1.4.3",
     "diff": "^3.0.1",
     "karma-mocha-reporter": "^2.2.1",
     "localforage": "^1.5.0",
@@ -27,6 +28,7 @@
     "sass-loader": "^4.0.2",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
+    "vue-compose": "^0.7.1",
     "vue-i18n": "^7.3.2",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.3.4",

src/App.js

@@ -66,12 +66,16 @@ export default {
       })
     },
     logo () { return this.$store.state.instance.logo },
-    style () {
+    bgStyle () {
       return {
-        '--body-background-image': `url(${this.background})`,
         'background-image': `url(${this.background})`
       }
     },
+    bgAppStyle () {
+      return {
+        '--body-background-image': `url(${this.background})`
+      }
+    },
     sitename () { return this.$store.state.instance.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
@@ -82,7 +86,7 @@ export default {
     unseenNotificationsCount () {
       return this.unseenNotifications.length
     },
-    showFeaturesPanel () { return this.$store.state.config.showFeaturesPanel }
+    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
   },
   methods: {
     scrollToTop () {

src/App.scss

@@ -1,15 +1,21 @@
 @import './_variables.scss';
 
 #app {
-  background-size: cover;
-  background-attachment: fixed;
-  background-repeat: no-repeat;
-  background-position: 0 50px;
   min-height: 100vh;
   max-width: 100%;
   overflow: hidden;
 }
 
+.app-bg-wrapper {
+  position: fixed;
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+}
+
 i {
   user-select: none;
 }
@@ -175,8 +181,7 @@ input, textarea, .select {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-    &:disabled,
+    &:disabled {
-    {
       &,
       & + label,
       & + label::before {
@@ -643,10 +648,6 @@ nav {
     color: var(--lightText, $fallback--lightText);
   }
 
-  .text-format {
-    float: right;
-  }
-
   div {
     padding-top: 5px;
   }
@@ -719,3 +720,21 @@ nav {
     margin-right: 0.8em;
   }
 }
+
+.login-hint {
+  text-align: center;
+  
+  @media all and (min-width: 801px) {
+    display: none;
+  }
+
+  a {
+    display: inline-block;
+    padding: 1em 0px;
+    width: 100%;
+  }
+}
+
+.btn.btn-default {
+  min-height: 28px;
+}

src/App.vue

@@ -1,5 +1,6 @@
 <template>
-  <div id="app" v-bind:style="style">
+  <div id="app" v-bind:style="bgAppStyle">
+    <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
     <nav class='nav-bar container' @click="scrollToTop()" id="nav">
       <div class='logo' :style='logoBgStyle'>
         <div class='mask' :style='logoMaskStyle'></div>
@@ -37,6 +38,11 @@
         </div>
       </div>
       <div class="main">
+        <div v-if="!currentUser" class="login-hint panel panel-default">
+          <router-link :to="{ name: 'login' }" class="panel-body">
+            {{ $t("login.hint") }}
+          </router-link>
+        </div>
         <transition name="fade">
           <router-view></router-view>
         </transition>

src/boot/after_store.js

@@ -55,10 +55,10 @@ const afterStoreSetup = ({ store, i18n }) => {
           }
 
           copyInstanceOption('nsfwCensorImage')
-          copyInstanceOption('theme')
           copyInstanceOption('background')
           copyInstanceOption('hidePostStats')
           copyInstanceOption('hideUserStats')
+          copyInstanceOption('hideFilteredStatuses')
           copyInstanceOption('logo')
 
           store.dispatch('setInstanceOption', {
@@ -84,8 +84,10 @@ const afterStoreSetup = ({ store, i18n }) => {
           copyInstanceOption('loginMethod')
           copyInstanceOption('scopeCopy')
           copyInstanceOption('subjectLineBehavior')
+          copyInstanceOption('postContentType')
           copyInstanceOption('alwaysShowSubjectInput')
           copyInstanceOption('noAttachmentLinks')
+          copyInstanceOption('showFeaturesPanel')
 
           if ((config.chatDisabled)) {
             store.dispatch('disableChat')
@@ -93,6 +95,9 @@ const afterStoreSetup = ({ store, i18n }) => {
             store.dispatch('initializeSocket')
           }
 
+          return store.dispatch('setTheme', config['theme'])
+        })
+        .then(() => {
           const router = new VueRouter({
             mode: 'history',
             routes: routes(store),

src/components/about/about.js

@@ -9,7 +9,7 @@ const About = {
     TermsOfServicePanel
   },
   computed: {
-    showFeaturesPanel () { return this.$store.state.config.showFeaturesPanel }
+    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
   }
 }
 

src/components/basic_user_card/basic_user_card.js

@@ -0,0 +1,28 @@
+import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
+const BasicUserCard = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      userExpanded: false
+    }
+  },
+  components: {
+    UserCardContent,
+    UserAvatar
+  },
+  methods: {
+    toggleUserExpanded () {
+      this.userExpanded = !this.userExpanded
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    }
+  }
+}
+
+export default BasicUserCard

src/components/basic_user_card/basic_user_card.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="user-card">
+    <router-link :to="userProfileLink(user)">
+      <UserAvatar class="avatar" :compact="true" @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>
+    <div class="user-card-collapsed-content" v-else>
+      <div class="user-card-primary-area">
+        <div :title="user.name" class="user-name">
+          <span v-if="user.name_html" v-html="user.name_html"></span>
+          <span v-else>{{ user.name }}</span>
+        </div>
+        <div>
+          <router-link class='user-screen-name' :to="userProfileLink(user)">
+            @{{user.screen_name}}
+          </router-link>
+        </div>
+      </div>
+      <div class="user-card-secondary-area">
+        <slot name="secondary-area"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./basic_user_card.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.user-card {
+  display: flex;
+  flex: 1 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);
+
+  &-collapsed-content {
+    margin-left: 0.7em;
+    text-align: left;
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &-primary-area {
+    flex: 1;
+    .user-name {
+      img {
+        object-fit: contain;
+        height: 16px;
+        width: 16px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &-secondary-area {
+    flex: none;
+  }
+
+  &-expanded-content {
+    flex: 1;
+    margin: 0.2em 0 0 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

@@ -0,0 +1,37 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const BlockCard = {
+  props: ['userId'],
+  data () {
+    return {
+      progress: false
+    }
+  },
+  computed: {
+    user () {
+      return this.$store.getters.userById(this.userId)
+    },
+    blocked () {
+      return this.user.statusnet_blocking
+    }
+  },
+  components: {
+    BasicUserCard
+  },
+  methods: {
+    unblockUser () {
+      this.progress = true
+      this.$store.dispatch('unblockUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    },
+    blockUser () {
+      this.progress = true
+      this.$store.dispatch('blockUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    }
+  }
+}
+
+export default BlockCard

src/components/block_card/block_card.vue

@@ -0,0 +1,24 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="secondary-area">
+      <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
+        <template v-if="progress">
+          {{ $t('user_card.unblock_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.unblock') }}
+        </template>
+      </button>
+      <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
+        <template v-if="progress">
+          {{ $t('user_card.block_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.block') }}
+        </template>
+      </button>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./block_card.js"></script>

src/components/chat_panel/chat_panel.vue

@@ -3,8 +3,8 @@
     <div class="panel panel-default">
       <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
         <div class="title">
-          {{$t('chat.title')}}
+          <span>{{$t('chat.title')}}</span>
-          <i class="icon-cancel" style="float: right;" v-if="floating"></i>
+          <i class="icon-cancel" v-if="floating"></i>
         </div>
       </div>
       <div class="chat-window" v-chat-scroll>
@@ -98,4 +98,11 @@
     resize: none;
   }
 }
+
+.chat-panel {
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
 </style>

src/components/conversation/conversation.js

@@ -9,9 +9,9 @@ const sortById = (a, b) => {
   if (isSeqA && isSeqB) {
     return seqA < seqB ? -1 : 1
   } else if (isSeqA && !isSeqB) {
-    return 1
-  } else if (!isSeqA && isSeqB) {
     return -1
+  } else if (!isSeqA && isSeqB) {
+    return 1
   } else {
     return a.id < b.id ? -1 : 1
   }
@@ -36,6 +36,13 @@ const conversation = {
     status () {
       return this.statusoid
     },
+    statusId () {
+      if (this.statusoid.retweeted_status) {
+        return this.statusoid.retweeted_status.id
+      } else {
+        return this.statusoid.id
+      }
+    },
     conversation () {
       if (!this.status) {
         return []
@@ -79,7 +86,7 @@ const conversation = {
         const conversationId = this.status.statusnet_conversation_id
         this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
           .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
-          .then(() => this.setHighlight(this.statusoid.id))
+          .then(() => this.setHighlight(this.statusId))
       } else {
         const id = this.$route.params.id
         this.$store.state.api.backendInteractor.fetchStatus({id})
@@ -91,11 +98,7 @@ const conversation = {
       return this.replies[id] || []
     },
     focused (id) {
-      if (this.statusoid.retweeted_status) {
+      return id === this.statusId
-        return (id === this.statusoid.retweeted_status.id)
-      } else {
-        return (id === this.statusoid.id)
-      }
     },
     setHighlight (id) {
       this.highlight = id

src/components/follow_list/follow_list.js

@@ -25,6 +25,9 @@ const FollowList = {
     },
     entries () {
       return this.showFollowers ? this.user.followers : this.user.friends
+    },
+    showFollowsYou () {
+      return !this.showFollowers || (this.showFollowers && this.userId !== this.$store.state.users.currentUser.id)
     }
   },
   methods: {
@@ -54,6 +57,9 @@ const FollowList = {
       }
     }
   },
+  watch: {
+    'user': 'fetchEntries'
+  },
   components: {
     UserCard
   }

src/components/follow_list/follow_list.vue

@@ -3,7 +3,7 @@
     <user-card
       v-for="entry in entries"
       :key="entry.id" :user="entry"
-      :showFollows="true"
+      :noFollowsYou="!showFollowsYou"
     />
     <div class="text-center panel-footer">
       <a v-if="error" @click="fetchEntries" class="alert error">

src/components/image_cropper/image_cropper.js

@@ -0,0 +1,128 @@
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+
+const ImageCropper = {
+  props: {
+    trigger: {
+      type: [String, window.Element],
+      required: true
+    },
+    submitHandler: {
+      type: Function,
+      required: true
+    },
+    cropperOptions: {
+      type: Object,
+      default () {
+        return {
+          aspectRatio: 1,
+          autoCropArea: 1,
+          viewMode: 1,
+          movable: false,
+          zoomable: false,
+          guides: false
+        }
+      }
+    },
+    mimes: {
+      type: String,
+      default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
+    },
+    saveButtonLabel: {
+      type: String
+    },
+    cancelButtonLabel: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      cropper: undefined,
+      dataUrl: undefined,
+      filename: undefined,
+      submitting: false,
+      submitError: null
+    }
+  },
+  computed: {
+    saveText () {
+      return this.saveButtonLabel || this.$t('image_cropper.save')
+    },
+    cancelText () {
+      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
+    },
+    submitErrorMsg () {
+      return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
+    }
+  },
+  methods: {
+    destroy () {
+      if (this.cropper) {
+        this.cropper.destroy()
+      }
+      this.$refs.input.value = ''
+      this.dataUrl = undefined
+      this.$emit('close')
+    },
+    submit () {
+      this.submitting = true
+      this.avatarUploadError = null
+      this.submitHandler(this.cropper, this.filename)
+        .then(() => this.destroy())
+        .catch((err) => {
+          this.submitError = err
+        })
+        .finally(() => {
+          this.submitting = false
+        })
+    },
+    pickImage () {
+      this.$refs.input.click()
+    },
+    createCropper () {
+      this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
+    },
+    getTriggerDOM () {
+      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    },
+    readFile () {
+      const fileInput = this.$refs.input
+      if (fileInput.files != null && fileInput.files[0] != null) {
+        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)
+      }
+    },
+    clearError () {
+      this.submitError = null
+    }
+  },
+  mounted () {
+    // listen for click event on trigger
+    const trigger = this.getTriggerDOM()
+    if (!trigger) {
+      this.$emit('error', 'No image make trigger found.', 'user')
+    } else {
+      trigger.addEventListener('click', this.pickImage)
+    }
+    // listen for input file changes
+    const fileInput = this.$refs.input
+    fileInput.addEventListener('change', this.readFile)
+  },
+  beforeDestroy: function () {
+    // remove the event listeners
+    const trigger = this.getTriggerDOM()
+    if (trigger) {
+      trigger.removeEventListener('click', this.pickImage)
+    }
+    const fileInput = this.$refs.input
+    fileInput.removeEventListener('change', this.readFile)
+  }
+}
+
+export default ImageCropper

src/components/image_cropper/image_cropper.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="image-cropper">
+    <div v-if="dataUrl">
+      <div class="image-cropper-image-container">
+        <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
+      </div>
+      <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>
+        <i class="icon-spin4 animate-spin" v-if="submitting"></i>
+      </div>
+      <div class="alert error" v-if="submitError">
+        {{submitErrorMsg}}
+        <i class="button-icon icon-cancel" @click="clearError"></i>
+      </div>
+    </div>
+    <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
+  </div>
+</template>
+
+<script src="./image_cropper.js"></script>
+
+<style lang="scss">
+.image-cropper {
+  &-img-input {
+    display: none;
+  }
+
+  &-image-container {
+    position: relative;
+
+    img {
+      display: block;
+      max-width: 100%;
+    }
+  }
+
+  &-buttons-wrapper {
+    margin-top: 15px;
+  }
+}
+</style>

src/components/media_modal/media_modal.js

@@ -11,27 +11,62 @@ const MediaModal = {
     showing () {
       return this.$store.state.mediaViewer.activated
     },
+    media () {
+      return this.$store.state.mediaViewer.media
+    },
     currentIndex () {
       return this.$store.state.mediaViewer.currentIndex
     },
     currentMedia () {
-      return this.$store.state.mediaViewer.media[this.currentIndex]
+      return this.media[this.currentIndex]
+    },
+    canNavigate () {
+      return this.media.length > 1
     },
     type () {
       return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
     }
   },
-  created () {
-    document.addEventListener('keyup', e => {
-      if (e.keyCode === 27 && this.showing) { // escape
-        this.hide()
-      }
-    })
-  },
   methods: {
     hide () {
       this.$store.dispatch('closeMediaViewer')
+    },
+    goPrev () {
+      if (this.canNavigate) {
+        const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
+        this.$store.dispatch('setCurrent', this.media[prevIndex])
+      }
+    },
+    goNext () {
+      if (this.canNavigate) {
+        const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
+        this.$store.dispatch('setCurrent', this.media[nextIndex])
+      }
+    },
+    handleKeyupEvent (e) {
+      if (this.showing && e.keyCode === 27) { // escape
+        this.hide()
+      }
+    },
+    handleKeydownEvent (e) {
+      if (!this.showing) {
+        return
+      }
+
+      if (e.keyCode === 39) { // arrow right
+        this.goNext()
+      } else if (e.keyCode === 37) { // arrow left
+        this.goPrev()
+      }
     }
+  },
+  mounted () {
+    document.addEventListener('keyup', this.handleKeyupEvent)
+    document.addEventListener('keydown', this.handleKeydownEvent)
+  },
+  destroyed () {
+    document.removeEventListener('keyup', this.handleKeyupEvent)
+    document.removeEventListener('keydown', this.handleKeydownEvent)
   }
 }
 

src/components/media_modal/media_modal.vue

@@ -8,6 +8,22 @@
       :controls="true"
       @click.stop.native="">
     </VideoAttachment>
+    <button
+      :title="$t('media_modal.previous')"
+      class="modal-view-button-arrow modal-view-button-arrow--prev"
+      v-if="canNavigate"
+      @click.stop.prevent="goPrev"
+    >
+      <i class="icon-left-open arrow-icon" />
+    </button>
+    <button
+      :title="$t('media_modal.next')"
+      class="modal-view-button-arrow modal-view-button-arrow--next"
+      v-if="canNavigate"
+      @click.stop.prevent="goNext"
+    >
+      <i class="icon-right-open arrow-icon" />
+    </button>
   </div>
 </template>
 
@@ -19,15 +35,29 @@
 .modal-view {
   z-index: 1000;
   position: fixed;
-  width: 100vw;
-  height: 100vh;
   top: 0;
   left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.5);
-  cursor: pointer;
+
+  &:hover {
+    .modal-view-button-arrow {
+      opacity: 0.75;
+
+      &:focus,
+      &:hover {
+        outline: none;
+        box-shadow: none;
+      }
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 .modal-image {
@@ -35,4 +65,49 @@
   max-height: 90%;
   box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
 }
+
+.modal-view-button-arrow {
+  position: absolute;
+  display: block;
+  top: 50%;
+  margin-top: -50px;
+  width: 70px;
+  height: 100px;
+  border: 0;
+  padding: 0;
+  opacity: 0;
+  box-shadow: none;
+  background: none;
+  appearance: none;
+  overflow: visible;
+  cursor: pointer;
+  transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+
+  .arrow-icon {
+    position: absolute;
+    top: 35px;
+    height: 30px;
+    width: 32px;
+    font-size: 14px;
+    line-height: 30px;
+    color: #FFF;
+    text-align: center;
+    background-color: rgba(0,0,0,.3);
+  }
+
+  &--prev {
+    left: 0;
+    .arrow-icon {
+      left: 6px;
+    }
+  }
+
+  &--next {
+    right: 0;
+    .arrow-icon {
+      right: 6px;
+    }
+  }
+}
+
 </style>

src/components/mute_card/mute_card.js

@@ -0,0 +1,37 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const MuteCard = {
+  props: ['userId'],
+  data () {
+    return {
+      progress: false
+    }
+  },
+  computed: {
+    user () {
+      return this.$store.getters.userById(this.userId)
+    },
+    muted () {
+      return this.user.muted
+    }
+  },
+  components: {
+    BasicUserCard
+  },
+  methods: {
+    unmuteUser () {
+      this.progress = true
+      this.$store.dispatch('unmuteUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    },
+    muteUser () {
+      this.progress = true
+      this.$store.dispatch('muteUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    }
+  }
+}
+
+export default MuteCard

src/components/mute_card/mute_card.vue

@@ -0,0 +1,24 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="secondary-area">
+      <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
+        <template v-if="progress">
+          {{ $t('user_card.unmute_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.unmute') }}
+        </template>
+      </button>
+      <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else>
+        <template v-if="progress">
+          {{ $t('user_card.mute_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.mute') }}
+        </template>
+      </button>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./mute_card.js"></script>

src/components/nav_panel/nav_panel.vue

@@ -19,7 +19,10 @@
         </li>
         <li v-if='currentUser && currentUser.locked'>
           <router-link :to="{ name: 'friend-requests' }">
-            {{ $t("nav.friend_requests") }}
+            {{ $t("nav.friend_requests")}}
+            <span v-if='currentUser.follow_request_count > 0' class="badge follow-request-count">
+              {{currentUser.follow_request_count}}
+            </span>
           </router-link>
         </li>
         <li>
@@ -52,6 +55,12 @@
   padding: 0;
 }
 
+.follow-request-count {
+  margin: -6px 10px;
+  background-color: $fallback--bg;
+  background-color: var(--input, $fallback--faint);
+}
+
 .nav-panel li {
   border-bottom: 1px solid;
   border-color: $fallback--border;

src/components/notifications/notifications.scss

@@ -103,6 +103,7 @@
     flex: 1 1 0;
     display: flex;
     flex-wrap: nowrap;
+    justify-content: space-between;
 
     .name-and-action {
       flex: 1;
@@ -123,8 +124,8 @@
         object-fit: contain
       }
     }
+
     .timeago {
-      float: right;
       font-size: 12px;
     }
 

src/components/post_status_form/post_status_form.js

@@ -56,6 +56,10 @@ const PostStatusForm = {
           ? this.copyMessageScope
           : this.$store.state.users.currentUser.default_scope
 
+    const contentType = typeof this.$store.state.config.postContentType === 'undefined'
+      ? this.$store.state.instance.postContentType
+      : this.$store.state.config.postContentType
+
     return {
       dropFiles: [],
       submitDisabled: false,
@@ -65,10 +69,10 @@ const PostStatusForm = {
       newStatus: {
         spoilerText: this.subject || '',
         status: statusText,
-        contentType: 'text/plain',
         nsfw: false,
         files: [],
-        visibility: scope
+        visibility: scope,
+        contentType
       },
       caret: 0
     }

src/components/post_status_form/post_status_form.vue

@@ -118,6 +118,14 @@
   }
 }
 
+.post-status-form {
+  .visibility-tray {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+  }
+}
+
 .post-status-form, .login {
   .form-bottom {
     display: flex;

src/components/public_and_external_timeline/public_and_external_timeline.js

@@ -7,7 +7,7 @@ const PublicAndExternalTimeline = {
     timeline () { return this.$store.state.statuses.timelines.publicAndExternal }
   },
   created () {
-    this.$store.dispatch('startFetching', 'publicAndExternal')
+    this.$store.dispatch('startFetching', { timeline: 'publicAndExternal' })
   },
   destroyed () {
     this.$store.dispatch('stopFetching', 'publicAndExternal')

src/components/public_and_external_timeline/public_and_external_timeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <Timeline :title="$t('nav.twkn')"v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
+  <Timeline :title="$t('nav.twkn')" v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
 </template>
 
 <script src="./public_and_external_timeline.js"></script>

src/components/public_timeline/public_timeline.js

@@ -7,7 +7,7 @@ const PublicTimeline = {
     timeline () { return this.$store.state.statuses.timelines.public }
   },
   created () {
-    this.$store.dispatch('startFetching', 'public')
+    this.$store.dispatch('startFetching', { timeline: 'public' })
   },
   destroyed () {
     this.$store.dispatch('stopFetching', 'public')

src/components/settings/settings.js

@@ -27,6 +27,11 @@ const settings = {
         : user.hideUserStats,
       hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats),
 
+      hideFilteredStatusesLocal: typeof user.hideFilteredStatuses === 'undefined'
+        ? instance.hideFilteredStatuses
+        : user.hideFilteredStatuses,
+      hideFilteredStatusesDefault: this.$t('settings.values.' + instance.hideFilteredStatuses),
+
       notificationVisibilityLocal: user.notificationVisibility,
       replyVisibilityLocal: user.replyVisibility,
       loopVideoLocal: user.loopVideo,
@@ -46,6 +51,11 @@ const settings = {
         : user.subjectLineBehavior,
       subjectLineBehaviorDefault: instance.subjectLineBehavior,
 
+      postContentTypeLocal: typeof user.postContentType === 'undefined'
+        ? instance.postContentType
+        : user.postContentType,
+      postContentTypeDefault: instance.postContentType,
+
       alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'
         ? instance.alwaysShowSubjectInput
         : user.alwaysShowSubjectInput,
@@ -81,7 +91,8 @@ const settings = {
     },
     currentSaveStateNotice () {
       return this.$store.state.interface.settings.currentSaveStateNotice
-    }
+    },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }
   },
   watch: {
     hideAttachmentsLocal (value) {
@@ -96,6 +107,9 @@ const settings = {
     hideUserStatsLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideUserStats', value })
     },
+    hideFilteredStatusesLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
+    },
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
@@ -157,6 +171,9 @@ const settings = {
     subjectLineBehaviorLocal (value) {
       this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })
     },
+    postContentTypeLocal (value) {
+      this.$store.dispatch('setOption', { name: 'postContentType', value })
+    },
     stopGifs (value) {
       this.$store.dispatch('setOption', { name: 'stopGifs', value })
     },

src/components/settings/settings.vue

@@ -27,7 +27,7 @@
             <li>
               <interface-language-switcher />
             </li>
-            <li>
+            <li v-if="instanceSpecificPanelPresent">
               <input type="checkbox" id="hideISP" v-model="hideISPLocal">
               <label for="hideISP">{{$t('settings.hide_isp')}}</label>
             </li>
@@ -100,6 +100,28 @@
                 </label>
               </div>
             </li>
+            <li>
+              <div>
+                {{$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>
+                  </select>
+                  <i class="icon-down-open"/>
+                </label>
+              </div>
+            </li>
           </ul>
         </div>
 
@@ -205,7 +227,6 @@
                 </label>
               </li>
             </ul>
-            </label>
           </div>
           <div>
             {{$t('settings.replies_in_timeline')}}
@@ -232,11 +253,18 @@
           </div>
         </div>
         <div class="setting-item">
-          <p>{{$t('settings.filtering_explanation')}}</p>
+          <div>
-          <textarea id="muteWords" v-model="muteWordsString"></textarea>
+            <p>{{$t('settings.filtering_explanation')}}</p>
+            <textarea id="muteWords" v-model="muteWordsString"></textarea>
+          </div>
+          <div>
+            <input type="checkbox" id="hideFilteredStatuses" v-model="hideFilteredStatusesLocal">
+            <label for="hideFilteredStatuses">
+              {{$t('settings.hide_filtered_statuses')}} {{$t('settings.instance_default', { value: hideFilteredStatusesDefault })}}
+            </label>
+          </div>
         </div>
       </div>
-
     </tab-switcher>
 </keep-alive>
   </div>
@@ -283,20 +311,6 @@
     color: $fallback--cRed;
   }
 
-  .old-avatar {
-    width: 128px;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
-  }
-
-  .new-avatar {
-    object-fit: cover;
-    width: 128px;
-    height: 128px;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
-  }
-
   .btn {
     min-height: 28px;
     min-width: 10em;

src/components/side_drawer/side_drawer.vue

@@ -45,6 +45,10 @@
         <li v-if="currentUser && currentUser.locked" @click="toggleDrawer">
           <router-link to='/friend-requests'>
             {{ $t("nav.friend_requests") }}
+            <span v-if='currentUser.follow_request_count > 0' class="badge follow-request-count">
+              {{currentUser.follow_request_count}}
+            </span>
+
           </router-link>
         </li>
         <li @click="toggleDrawer">

src/components/status/status.js

@@ -10,8 +10,8 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import fileType from 'src/services/file_type/file_type.service'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
-import { mentionMatchesUrl } from 'src/services/mention_matcher/mention_matcher.js'
+import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
-import { filter, find } from 'lodash'
+import { filter, find, unescape } from 'lodash'
 
 const Status = {
   name: 'Status',
@@ -110,6 +110,14 @@ const Status = {
       return hits
     },
     muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
+    hideFilteredStatuses () {
+      return typeof this.$store.state.config.hideFilteredStatuses === 'undefined'
+        ? this.$store.state.instance.hideFilteredStatuses
+        : this.$store.state.config.hideFilteredStatuses
+    },
+    hideStatus () {
+      return (this.hideReply || this.deleted) || (this.muted && this.hideFilteredStatuses)
+    },
     isFocused () {
       // retweet or root of an expanded conversation
       if (this.focused) {
@@ -201,14 +209,15 @@ const Status = {
     },
     replySubject () {
       if (!this.status.summary) return ''
+      const decodedSummary = unescape(this.status.summary)
       const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
             ? this.$store.state.instance.subjectLineBehavior
             : this.$store.state.config.subjectLineBehavior
-      const startsWithRe = this.status.summary.match(/^re[: ]/i)
+      const startsWithRe = decodedSummary.match(/^re[: ]/i)
       if (behavior !== 'noop' && startsWithRe || behavior === 'masto') {
-        return this.status.summary
+        return decodedSummary
       } else if (behavior === 'email') {
-        return 're: '.concat(this.status.summary)
+        return 're: '.concat(decodedSummary)
       } else if (behavior === 'noop') {
         return ''
       }
@@ -273,7 +282,7 @@ const Status = {
       }
       if (target.tagName === 'A') {
         if (target.className.match(/mention/)) {
-          const href = target.getAttribute('href')
+          const href = target.href
           const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
           if (attn) {
             event.stopPropagation()
@@ -283,6 +292,15 @@ const Status = {
             return
           }
         }
+        if (target.className.match(/hashtag/)) {
+          // Extract tag name from link url
+          const tag = extractTagFromUrl(target.href)
+          if (tag) {
+            const link = this.generateTagLink(tag)
+            this.$router.push(link)
+            return
+          }
+        }
         window.open(target.href, '_blank')
       }
     },
@@ -341,6 +359,9 @@ const Status = {
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
+    generateTagLink (tag) {
+      return `/tag/${tag}`
+    },
     setMedia () {
       const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
       return () => this.$store.dispatch('setMedia', attachments)

src/components/status/status.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el" v-if="!hideReply && !deleted" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <div class="media status container muted">
         <small>
@@ -13,12 +13,11 @@
     </template>
     <template v-else>
       <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
-        <UserAvatar v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
+        <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">
-            <router-link :to="retweeterProfileLink">
+            <router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/>
-              {{retweeterHtml || retweeter}}
+            <router-link v-else :to="retweeterProfileLink">{{retweeter}}</router-link>
-            </router-link>
           </span>
           <i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
           {{$t('timeline.repeated')}}
@@ -78,7 +77,7 @@
               </router-link>
             </div>
             <h4 class="replies" v-if="inConversation && !noReplyLinks">
-              <small v-if="replies.length">Replies:</small>
+              <small class="faint" v-if="replies.length">Replies:</small>
               <small class="reply-link" v-for="reply in replies">
                 <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}&nbsp;</a>
               </small>
@@ -325,11 +324,11 @@
     }
     .reply-to {
       display: flex;
-      text-overflow: ellpisis;
     }
     .reply-to-text {
       overflow: hidden;
       text-overflow: ellipsis;
+      margin: 0 0.4em 0 0.2em;
     }
     .replies {
       line-height: 18px;
@@ -410,9 +409,11 @@
     }
 
     p {
-      margin: 0;
+      margin: 0 0 1em 0;
-      margin-top: 0.2em;
+    }
-      margin-bottom: 0.5em;
+
+    p:last-child {
+      margin: 0 0 0 0;
     }
 
     h1 {
@@ -437,7 +438,7 @@
   }
 
   .retweet-info {
-    padding: 0.4em 0.6em 0 0.6em;
+    padding: 0.4em 0.75em;
     margin: 0;
 
     .avatar.still-image {
@@ -456,6 +457,19 @@
       align-content: center;
       flex-wrap: wrap;
 
+      .user-name {
+        font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        img {
+          width: 14px;
+          height: 14px;
+          vertical-align: middle;
+          object-fit: contain
+        }
+      }
+
       i {
         padding: 0 0.2em;
       }
@@ -495,10 +509,9 @@
 .status-actions {
   width: 100%;
   display: flex;
-  margin-top: 0.5em;
+  margin-top: 0.75em;
 
   div, favorite-button {
-    // padding-top: 0.25em;
     max-width: 4em;
     flex: 1;
   }
@@ -526,9 +539,8 @@
 .status {
   display: flex;
   padding: 0.75em;
-  // padding: 0.6em;
   &.is-retweet {
-    padding-top: 0.1em;
+    padding-top: 0;
   }
 }
 
@@ -563,7 +575,7 @@ a.unmute {
 
 .timeline > {
   .status-el:last-child {
-    border-bottom-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;;
+    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
     border-bottom: none;
   }

src/components/tab_switcher/tab_switcher.js

@@ -37,7 +37,7 @@ export default Vue.component('tab-switcher', {
 
             return (
               <div class={ classesWrapper.join(' ')}>
-                <button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+                <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
               </div>
             )
           })

src/components/tag_timeline/tag_timeline.js

@@ -3,7 +3,7 @@ import Timeline from '../timeline/timeline.vue'
 const TagTimeline = {
   created () {
     this.$store.commit('clearTimeline', { timeline: 'tag' })
-    this.$store.dispatch('startFetching', { 'tag': this.tag })
+    this.$store.dispatch('startFetching', { timeline: 'tag', tag: this.tag })
   },
   components: {
     Timeline
@@ -15,7 +15,7 @@ const TagTimeline = {
   watch: {
     tag () {
       this.$store.commit('clearTimeline', { timeline: 'tag' })
-      this.$store.dispatch('startFetching', { 'tag': this.tag })
+      this.$store.dispatch('startFetching', { timeline: 'tag', tag: this.tag })
     }
   },
   destroyed () {

src/components/timeline/timeline.js

@@ -11,7 +11,8 @@ const Timeline = {
     'title',
     'userId',
     'tag',
-    'embedded'
+    'embedded',
+    'count'
   ],
   data () {
     return {
@@ -53,6 +54,8 @@ const Timeline = {
 
     window.addEventListener('scroll', this.scrollLoad)
 
+    if (this.timelineName === 'friends' && !credentials) { return false }
+
     timelineFetcher.fetchAndUpdate({
       store,
       credentials,

src/components/timeline/timeline.vue

@@ -20,7 +20,10 @@
       </div>
     </div>
     <div :class="classes.footer">
-      <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+      <div v-if="count===0" class="new-status-notification text-center panel-footer faint">
+        {{$t('timeline.no_statuses')}}
+      </div>
+      <div v-else-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
         {{$t('timeline.no_more_statuses')}}
       </div>
       <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>

src/components/user_card/user_card.js

@@ -1,16 +1,20 @@
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 
 const UserCard = {
   props: [
     'user',
-    'showFollows',
+    'noFollowsYou',
     'showApproval'
   ],
   data () {
     return {
-      userExpanded: false
+      userExpanded: false,
+      followRequestInProgress: false,
+      followRequestSent: false,
+      updated: false
     }
   },
   components: {
@@ -18,7 +22,11 @@ const UserCard = {
     UserAvatar
   },
   computed: {
-    currentUser () { return this.$store.state.users.currentUser }
+    currentUser () { return this.$store.state.users.currentUser },
+    following () { return this.updated ? this.updated.following : this.user.following },
+    showFollow () {
+      return !this.showApproval && (!this.following || this.updated && !this.updated.following)
+    }
   },
   methods: {
     toggleUserExpanded () {
@@ -34,6 +42,21 @@ const UserCard = {
     },
     userProfileLink (user) {
       return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    },
+    followUser () {
+      this.followRequestInProgress = true
+      requestFollow(this.user, this.$store).then(({ sent, updated }) => {
+        this.followRequestInProgress = false
+        this.followRequestSent = sent
+        this.updated = updated
+      })
+    },
+    unfollowUser () {
+      this.followRequestInProgress = true
+      requestUnfollow(this.user, this.$store).then(({ updated }) => {
+        this.followRequestInProgress = false
+        this.updated = updated
+      })
     }
   }
 }

src/components/user_card/user_card.vue

@@ -1,32 +1,57 @@
 <template>
   <div class="card">
     <router-link :to="userProfileLink(user)">
-      <UserAvatar class="avatar" :compact="true" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
+      <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
-    <div class="usercard" v-if="userExpanded">
+    <div class="user-card-main-content">
-      <user-card-content :user="user" :switcher="false"></user-card-content>
+      <div class="usercard" v-if="userExpanded">
-    </div>
+        <user-card-content :user="user" :switcher="false"></user-card-content>
-    <div class="name-and-screen-name" v-else>
+      </div>
-      <div :title="user.name" v-if="user.name_html" class="user-name">
+      <div class="name-and-screen-name" v-if="!userExpanded">
-        <span v-html="user.name_html"></span>
+        <div :title="user.name" class="user-name">
-        <span class="follows-you" v-if="!userExpanded && showFollows && user.follows_you">
+          <span v-if="user.name_html" v-html="user.name_html"></span>
+          <span v-else>{{ user.name }}</span>
+        </div>
+        <div class="user-link-action">
+          <router-link class='user-screen-name' :to="userProfileLink(user)">
+            @{{user.screen_name}}
+          </router-link>
+        </div>
+      </div>
+      <div class="follow-box" v-if="!userExpanded">
+        <span class="faint" v-if="!noFollowsYou && user.follows_you">
           {{ currentUser.id == user.id ? $t('user_card.its_you') : $t('user_card.follows_you') }}
         </span>
+        <button
+          v-if="showFollow"
+          class="btn btn-default"
+          @click="followUser"
+          :disabled="followRequestInProgress"
+          :title="followRequestSent ? $t('user_card.follow_again') : ''"
+        >
+          <template v-if="followRequestInProgress">
+            {{ $t('user_card.follow_progress') }}
+          </template>
+          <template v-else-if="followRequestSent">
+            {{ $t('user_card.follow_sent') }}
+          </template>
+          <template v-else>
+            {{ $t('user_card.follow') }}
+          </template>
+        </button>
+        <button v-if="following" class="btn btn-default pressed" @click="unfollowUser" :disabled="followRequestInProgress">
+          <template v-if="followRequestInProgress">
+            {{ $t('user_card.follow_progress') }}
+          </template>
+          <template v-else>
+            {{ $t('user_card.follow_unfollow') }}
+          </template>
+        </button>
       </div>
-      <div :title="user.name" v-else class="user-name">
+      <div class="approval" v-if="showApproval">
-        {{ user.name }}
+        <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
-        <span class="follows-you" v-if="!userExpanded && showFollows && user.follows_you">
+        <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
-          {{ currentUser.id == user.id ? $t('user_card.its_you') : $t('user_card.follows_you') }}
-        </span>
       </div>
-
-      <router-link class='user-screen-name' :to="userProfileLink(user)">
-        @{{user.screen_name}}
-      </router-link>
-    </div>
-    <div class="approval" v-if="showApproval">
-      <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
-      <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
     </div>
   </div>
 </template>
@@ -36,11 +61,18 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.name-and-screen-name {
+.user-card-main-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100%;
   margin-left: 0.7em;
-  margin-top:0.0em;
+  min-width: 0;
+}
+
+.name-and-screen-name {
   text-align: left;
   width: 100%;
+
   .user-name {
     img {
       object-fit: contain;
@@ -49,12 +81,14 @@
       vertical-align: middle;
     }
   }
+
+  .user-link-action {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
 }
 
-.follows-you {
-  margin-left: 2em;
-  float: right;
-}
 
 .card {
   display: flex;
@@ -66,16 +100,31 @@
   border-bottom: 1px solid;
   margin: 0;
   border-bottom-color: $fallback--border;
-	border-bottom-color: var(--border, $fallback--border);
+  border-bottom-color: var(--border, $fallback--border);
 
   .avatar {
     padding: 0;
   }
+
+  .follow-box {
+    text-align: center;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    line-height: 1.5em;
+
+    .btn {
+      margin-top: 0.5em;
+      margin-left: auto;
+      width: 10em;
+    }
+  }
 }
 
 .usercard {
   width: fill-available;
-  margin: 0.2em 0 0 0.7em;
   border-radius: $fallback--panelRadius;
   border-radius: var(--panelRadius, $fallback--panelRadius);
   border-style: solid;
@@ -96,9 +145,15 @@
 }
 
 .approval {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   button {
-    width: 100%;
+    margin-top: 0.5em;
-    margin-bottom: 0.5em;
+    margin-right: 0.5em;
+    flex: 1 1;
+    max-width: 12em;
+    min-width: 8em;
   }
 }
 </style>

src/components/user_card_content/user_card_content.js

@@ -1,5 +1,6 @@
 import UserAvatar from '../user_avatar/user_avatar.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 {
@@ -79,6 +80,12 @@ export default {
       set (color) {
         this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
       }
+    },
+    visibleRole () {
+      const validRole = (this.user.role === 'admin' || this.user.role === 'moderator')
+      const showRole = this.isOtherUser || this.user.show_role
+
+      return validRole && showRole && this.user.role
     }
   },
   components: {
@@ -86,69 +93,17 @@ export default {
   },
   methods: {
     followUser () {
-      const store = this.$store
       this.followRequestInProgress = true
-      store.state.api.backendInteractor.followUser(this.user.id)
+      requestFollow(this.user, this.$store).then(({sent}) => {
-        .then((followedUser) => store.commit('addNewUsers', [followedUser]))
+        this.followRequestInProgress = false
-        .then(() => {
+        this.followRequestSent = sent
-          // For locked users we just mark it that we sent the follow request
+      })
-          if (this.user.locked) {
-            this.followRequestInProgress = false
-            this.followRequestSent = true
-            return
-          }
-
-          if (this.user.following) {
-            // If we get result immediately, just stop.
-            this.followRequestInProgress = false
-            return
-          }
-
-          // But usually we don't get result immediately, so we ask server
-          // for updated user profile to confirm if we are following them
-          // Sometimes it takes several tries. Sometimes we end up not following
-          // user anyway, probably because they locked themselves and we
-          // don't know that yet.
-          // Recursive Promise, it will call itself up to 3 times.
-          const fetchUser = (attempt) => new Promise((resolve, reject) => {
-            setTimeout(() => {
-              store.state.api.backendInteractor.fetchUser({ id: this.user.id })
-                .then((user) => store.commit('addNewUsers', [user]))
-                .then(() => resolve([this.user.following, attempt]))
-                .catch((e) => reject(e))
-            }, 500)
-          }).then(([following, attempt]) => {
-            if (!following && attempt <= 3) {
-              // If we BE reports that we still not following that user - retry,
-              // increment attempts by one
-              return fetchUser(++attempt)
-            } else {
-              // If we run out of attempts, just return whatever status is.
-              return following
-            }
-          })
-
-          return fetchUser(1)
-            .then((following) => {
-              if (following) {
-                // We confirmed and everything its good.
-                this.followRequestInProgress = false
-              } else {
-                // If after all the tries, just treat it as if user is locked
-                this.followRequestInProgress = false
-                this.followRequestSent = true
-              }
-            })
-        })
     },
     unfollowUser () {
-      const store = this.$store
       this.followRequestInProgress = true
-      store.state.api.backendInteractor.unfollowUser(this.user.id)
+      requestUnfollow(this.user, this.$store).then(() => {
-        .then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
+        this.followRequestInProgress = false
-        .then(() => {
+      })
-          this.followRequestInProgress = false
-        })
     },
     blockUser () {
       const store = this.$store

src/components/user_card_content/user_card_content.vue

@@ -13,13 +13,15 @@
             <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser">
               <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
             </router-link>
-            <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser">
+            <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local">
               <i class="icon-link-ext usersettings"></i>
             </a>
           </div>
 
           <router-link class='user-screen-name' :to="userProfileLink(user)">
-            <span class="handle">@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
+            <span class="handle">@{{user.screen_name}}
+              <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
+            </span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
             <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
         </div>
@@ -247,6 +249,15 @@
       text-overflow: ellipsis;
       overflow: hidden;
     }
+
+    // TODO use proper colors
+    .staff {
+      text-transform: capitalize;
+      color: $fallback--text;
+      color: var(--btnText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btn, $fallback--fg);
+    }
   }
 
   .user-meta {
@@ -375,6 +386,4 @@
   }
 }
 
-.floater {
-}
 </style>

src/components/user_profile/user_profile.js

@@ -8,15 +8,15 @@ const UserProfile = {
     this.$store.commit('clearTimeline', { timeline: 'user' })
     this.$store.commit('clearTimeline', { timeline: 'favorites' })
     this.$store.commit('clearTimeline', { timeline: 'media' })
-    this.$store.dispatch('startFetching', ['user', this.fetchBy])
+    this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy })
-    this.$store.dispatch('startFetching', ['media', this.fetchBy])
+    this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy })
     this.startFetchFavorites()
     if (!this.user.id) {
       this.$store.dispatch('fetchUser', this.fetchBy)
     }
   },
   destroyed () {
-    this.cleanUp(this.userId)
+    this.cleanUp()
   },
   computed: {
     timeline () {
@@ -58,17 +58,23 @@ const UserProfile = {
     },
     isExternal () {
       return this.$route.name === 'external-user-profile'
+    },
+    followsTabVisible () {
+      return this.isUs || !this.user.hide_follows
+    },
+    followersTabVisible () {
+      return this.isUs || !this.user.hide_followers
     }
   },
   methods: {
     startFetchFavorites () {
       if (this.isUs) {
-        this.$store.dispatch('startFetching', ['favorites', this.fetchBy])
+        this.$store.dispatch('startFetching', { timeline: 'favorites', userId: this.fetchBy })
       }
     },
     startUp () {
-      this.$store.dispatch('startFetching', ['user', this.fetchBy])
+      this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy })
-      this.$store.dispatch('startFetching', ['media', this.fetchBy])
+      this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy })
 
       this.startFetchFavorites()
     },

src/components/user_profile/user_profile.vue

@@ -9,19 +9,21 @@
     <tab-switcher :renderOnlyFocused="true">
       <Timeline
         :label="$t('user_card.statuses')"
+        :disabled="!user.statuses_count"
+        :count="user.statuses_count"
         :embedded="true"
         :title="$t('user_profile.timeline_title')"
         :timeline="timeline"
         :timeline-name="'user'"
         :user-id="fetchBy"
       />
-      <div :label="$t('user_card.followees')">
+      <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
         <FollowList v-if="user.friends_count > 0" :userId="userId" :showFollowers="false" />
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
         </div>
       </div>
-      <div :label="$t('user_card.followers')">
+      <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
         <FollowList v-if="user.followers_count > 0" :userId="userId" :showFollowers="true" />
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
@@ -29,6 +31,7 @@
       </div>
       <Timeline
         :label="$t('user_card.media')"
+        :disabled="!media.visibleStatuses.length"
         :embedded="true" :title="$t('user_card.media')"
         timeline-name="media"
         :timeline="media"
@@ -37,6 +40,7 @@
       <Timeline
         v-if="isUs"
         :label="$t('user_card.favorites')"
+        :disabled="!favorites.visibleStatuses.length"
         :embedded="true"
         :title="$t('user_card.favorites')"
         timeline-name="favorites"

src/components/user_search/user_search.js

@@ -10,7 +10,8 @@ const userSearch = {
   data () {
     return {
       username: '',
-      users: []
+      users: [],
+      loading: false
     }
   },
   mounted () {
@@ -30,8 +31,10 @@ const userSearch = {
         this.users = []
         return
       }
+      this.loading = true
       userSearchApi.search({query, store: this.$store})
         .then((res) => {
+          this.loading = false
           this.users = res
         })
     }

src/components/user_search/user_search.vue

@@ -9,7 +9,10 @@
         <i class="icon-search"/>
       </button>
     </div>
-    <div class="panel-body">
+    <div v-if="loading" class="text-center loading-icon">
+      <i class="icon-spin3 animate-spin"/>
+    </div>
+    <div v-else class="panel-body">
       <user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
     </div>
   </div>
@@ -27,4 +30,8 @@
     margin-left: 0.5em;
   }
 }
+
+.loading-icon {
+  padding: 1em;
+}
 </style>

src/components/user_settings/user_settings.js

@@ -1,8 +1,33 @@
-import { unescape } from 'lodash'
+import { compose } from 'vue-compose'
+import unescape from 'lodash/unescape'
+import get from 'lodash/get'
 
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
+import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.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 withSubscription from '../../hocs/with_subscription/with_subscription'
+import withList from '../../hocs/with_list/with_list'
+
+const BlockList = compose(
+  withSubscription({
+    fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+    select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+    childPropName: 'entries'
+  }),
+  withList({ getEntryProps: userId => ({ userId }) })
+)(BlockCard)
+
+const MuteList = compose(
+  withSubscription({
+    fetch: (props, $store) => $store.dispatch('fetchMutes'),
+    select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+    childPropName: 'entries'
+  }),
+  withList({ getEntryProps: userId => ({ userId }) })
+)(MuteCard)
 
 const UserSettings = {
   data () {
@@ -14,18 +39,18 @@ const UserSettings = {
       newDefaultScope: this.$store.state.users.currentUser.default_scope,
       hideFollows: this.$store.state.users.currentUser.hide_follows,
       hideFollowers: this.$store.state.users.currentUser.hide_followers,
+      showRole: this.$store.state.users.currentUser.show_role,
+      role: this.$store.state.users.currentUser.role,
       followList: null,
       followImportError: false,
       followsImported: false,
       enableFollowsExport: true,
-      avatarUploading: false,
+      pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
       followListUploading: false,
-      avatarPreview: null,
       bannerPreview: null,
       backgroundPreview: null,
-      avatarUploadError: null,
       bannerUploadError: null,
       backgroundUploadError: null,
       deletingAccount: false,
@@ -39,7 +64,10 @@ const UserSettings = {
   },
   components: {
     StyleSwitcher,
-    TabSwitcher
+    TabSwitcher,
+    ImageCropper,
+    BlockList,
+    MuteList
   },
   computed: {
     user () {
@@ -58,6 +86,9 @@ const UserSettings = {
         private: { selected: this.newDefaultScope === 'private' },
         direct: { selected: this.newDefaultScope === 'direct' }
       }
+    },
+    currentSaveStateNotice () {
+      return this.$store.state.interface.settings.currentSaveStateNotice
     }
   },
   methods: {
@@ -71,6 +102,8 @@ const UserSettings = {
       const no_rich_text = this.newNoRichText
       const hide_follows = this.hideFollows
       const hide_followers = this.hideFollowers
+      const show_role = this.showRole
+
       /* eslint-enable camelcase */
       this.$store.state.api.backendInteractor
         .updateProfile({
@@ -83,7 +116,8 @@ const UserSettings = {
             default_scope,
             no_rich_text,
             hide_follows,
-            hide_followers
+            hide_followers,
+            show_role
             /* eslint-enable camelcase */
           }}).then((user) => {
             if (!user.error) {
@@ -112,35 +146,15 @@ const UserSettings = {
       }
       reader.readAsDataURL(file)
     },
-    submitAvatar () {
+    submitAvatar (cropper) {
-      if (!this.avatarPreview) { return }
+      const img = cropper.getCroppedCanvas().toDataURL('image/jpeg')
-
+      return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
-      let img = this.avatarPreview
-      // eslint-disable-next-line no-undef
-      let imginfo = new Image()
-      let cropX, cropY, cropW, cropH
-      imginfo.src = img
-      if (imginfo.height > imginfo.width) {
-        cropX = 0
-        cropW = imginfo.width
-        cropY = Math.floor((imginfo.height - imginfo.width) / 2)
-        cropH = imginfo.width
-      } else {
-        cropY = 0
-        cropH = imginfo.height
-        cropX = Math.floor((imginfo.width - imginfo.height) / 2)
-        cropW = imginfo.height
-      }
-      this.avatarUploading = true
-      this.$store.state.api.backendInteractor.updateAvatar({params: {img, cropX, cropY, cropW, cropH}}).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
-          this.avatarPreview = null
         } else {
-          this.avatarUploadError = this.$t('upload.error.base') + user.error
+          throw new Error(this.$t('upload.error.base') + user.error)
         }
-        this.avatarUploading = false
       })
     },
     clearUploadError (slot) {
@@ -238,7 +252,9 @@ const UserSettings = {
     exportFollows () {
       this.enableFollowsExport = false
       this.$store.state.api.backendInteractor
-        .fetchFriends({id: this.$store.state.users.currentUser.id})
+        .exportFriends({
+          id: this.$store.state.users.currentUser.id
+        })
         .then((friendList) => {
           this.exportPeople(friendList, 'friends.csv')
           setTimeout(() => { this.enableFollowsExport = true }, 2000)

src/components/user_settings/user_settings.vue

@@ -1,7 +1,20 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{$t('settings.user_settings')}}
+      <div class="title">
+        {{$t('settings.user_settings')}}
+      </div>
+      <transition name="fade">
+        <template v-if="currentSaveStateNotice">
+          <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+            {{ $t('settings.saving_err') }}
+          </div>
+
+          <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
+            {{ $t('settings.saving_ok') }}
+          </div>
+        </template>
+      </transition>
     </div>
     <div class="panel-body profile-edit">
       <tab-switcher>
@@ -37,25 +50,21 @@
               <input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
               <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
             </p>
+            <p>
+              <input type="checkbox" v-model="showRole" id="account-show-role">
+              <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
+              <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
+            </p>
             <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
           </div>
           <div class="setting-item">
             <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="old-avatar"></img>
+            <img :src="user.profile_image_url_original" class="current-avatar"></img>
             <p>{{$t('settings.set_new_avatar')}}</p>
-            <img class="new-avatar" v-bind:src="avatarPreview" v-if="avatarPreview">
+            <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
-            </img>
+            <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
-            <div>
-              <input type="file" @change="uploadFile('avatar', $event)" ></input>
-            </div>
-            <i class="icon-spin4 animate-spin" v-if="avatarUploading"></i>
-            <button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button>
-            <div class='alert error' v-if="avatarUploadError">
-              Error: {{ avatarUploadError }}
-              <i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
-            </div>
           </div>
           <div class="setting-item">
             <h2>{{$t('settings.profile_banner')}}</h2>
@@ -153,6 +162,12 @@
             <h2>{{$t('settings.follow_export_processing')}}</h2>
           </div>
         </div>
+
+        <div :label="$t('settings.blocks_tab')">
+          <block-list :refresh="true">
+            <template slot="empty">{{$t('settings.no_blocks')}}</template>
+          </block-list>
+        </div>
       </tab-switcher>
     </div>
   </div>
@@ -162,6 +177,8 @@
 </script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .profile-edit {
   .bio {
     margin: 0;
@@ -173,7 +190,7 @@
   }
 
   .banner {
-    max-width: 400px;
+    max-width: 100%;
   }
 
   .uploading {
@@ -184,5 +201,17 @@
   .name-changer {
     width: 100%;
   }
+
+  .bg {
+    max-width: 100%;
+  }
+
+  .current-avatar {
+    display: block;
+    width: 150px;
+    height: 150px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+  }
 }
 </style>

src/hocs/with_list/with_list.js

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import map from 'lodash/map'
+import isEmpty from 'lodash/isEmpty'
+import './with_list.scss'
+
+const defaultEntryPropsGetter = entry => ({ entry })
+const defaultKeyGetter = entry => entry.id
+
+const withList = ({
+  getEntryProps = defaultEntryPropsGetter,  // function to accept entry and index values and return props to be passed into the item component
+  getKey = defaultKeyGetter                 // funciton to accept entry and index values and return key prop value
+}) => (ItemComponent) => (
+  Vue.component('withList', {
+    props: [
+      'entries',                            // array of entry
+      'entryProps',                         // additional props to be passed into each entry
+      'entryListeners'                      // additional event listeners to be passed into each entry
+    ],
+    render (createElement) {
+      return (
+        <div class="with-list">
+          {map(this.entries, (entry, index) => {
+            const props = {
+              key: getKey(entry, index),
+              props: {
+                ...this.$props.entryProps,
+                ...getEntryProps(entry, index)
+              },
+              on: this.$props.entryListeners
+            }
+            return <ItemComponent {...props} />
+          })}
+          {isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>}
+        </div>
+      )
+    }
+  })
+)
+
+export default withList

src/hocs/with_list/with_list.scss

@@ -0,0 +1,6 @@
+.with-list {
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}

src/hocs/with_load_more/with_load_more.js

@@ -0,0 +1,91 @@
+import Vue from 'vue'
+import filter from 'lodash/filter'
+import isEmpty from 'lodash/isEmpty'
+import './with_load_more.scss'
+
+const withLoadMore = ({
+  fetch,                      // function to fetch entries and return a promise
+  select,                     // function to select data from store
+  childPropName = 'entries'   // name of the prop to be passed into the wrapped component
+}) => (WrappedComponent) => {
+  const originalProps = WrappedComponent.props || []
+  const props = filter(originalProps, v => v !== 'entries')
+
+  return Vue.component('withLoadMore', {
+    render (createElement) {
+      const props = {
+        props: {
+          ...this.$props,
+          [childPropName]: this.entries
+        },
+        on: this.$listeners,
+        scopedSlots: this.$scopedSlots
+      }
+      const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
+      return (
+        <div class="with-load-more">
+          <WrappedComponent {...props}>
+            {children}
+          </WrappedComponent>
+          <div class="with-load-more-footer">
+            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
+            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
+          </div>
+        </div>
+      )
+    },
+    props,
+    data () {
+      return {
+        loading: false,
+        bottomedOut: false,
+        error: false
+      }
+    },
+    computed: {
+      entries () {
+        return select(this.$props, this.$store) || []
+      }
+    },
+    created () {
+      window.addEventListener('scroll', this.scrollLoad)
+      if (this.entries.length === 0) {
+        this.fetchEntries()
+      }
+    },
+    destroyed () {
+      window.removeEventListener('scroll', this.scrollLoad)
+    },
+    methods: {
+      fetchEntries () {
+        if (!this.loading) {
+          this.loading = true
+          this.error = false
+          fetch(this.$props, this.$store)
+            .then((newEntries) => {
+              this.loading = false
+              this.bottomedOut = isEmpty(newEntries)
+            })
+            .catch(() => {
+              this.loading = false
+              this.error = true
+            })
+        }
+      },
+      scrollLoad (e) {
+        const bodyBRect = document.body.getBoundingClientRect()
+        const height = Math.max(bodyBRect.height, -(bodyBRect.y))
+        if (this.loading === false &&
+          this.bottomedOut === false &&
+          this.$el.offsetHeight > 0 &&
+          (window.innerHeight + window.pageYOffset) >= (height - 750)
+        ) {
+          this.fetchEntries()
+        }
+      }
+    }
+  })
+}
+
+export default withLoadMore

src/hocs/with_load_more/with_load_more.scss

@@ -0,0 +1,10 @@
+.with-load-more {
+  &-footer {
+    padding: 10px;
+    text-align: center;
+
+    .error {
+      font-size: 14px;
+    }
+  }
+}

src/hocs/with_subscription/with_subscription.js

@@ -0,0 +1,84 @@
+import Vue from 'vue'
+import reject from 'lodash/reject'
+import isEmpty from 'lodash/isEmpty'
+import omit from 'lodash/omit'
+import './with_subscription.scss'
+
+const withSubscription = ({
+  fetch,                      // function to fetch entries and return a promise
+  select,                     // function to select data from store
+  childPropName = 'content'   // name of the prop to be passed into the wrapped component
+}) => (WrappedComponent) => {
+  const originalProps = WrappedComponent.props || []
+  const props = reject(originalProps, v => v === 'content')
+
+  return Vue.component('withSubscription', {
+    props: [
+      ...props,
+      'refresh'               // boolean saying to force-fetch data whenever created
+    ],
+    render (createElement) {
+      if (!this.error && !this.loading) {
+        const props = {
+          props: {
+            ...omit(this.$props, 'refresh'),
+            [childPropName]: this.fetchedData
+          },
+          on: this.$listeners,
+          scopedSlots: this.$scopedSlots
+        }
+        const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
+        return (
+          <div class="with-subscription">
+            <WrappedComponent {...props}>
+              {children}
+            </WrappedComponent>
+          </div>
+        )
+      } else {
+        return (
+          <div class="with-subscription-loading">
+            {this.error
+              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
+              : <i class="icon-spin3 animate-spin"/>
+            }
+          </div>
+        )
+      }
+    },
+    data () {
+      return {
+        loading: false,
+        error: false
+      }
+    },
+    computed: {
+      fetchedData () {
+        return select(this.$props, this.$store)
+      }
+    },
+    created () {
+      if (this.refresh || isEmpty(this.fetchedData)) {
+        this.fetchData()
+      }
+    },
+    methods: {
+      fetchData () {
+        if (!this.loading) {
+          this.loading = true
+          this.error = false
+          fetch(this.$props, this.$store)
+            .then(() => {
+              this.loading = false
+            })
+            .catch(() => {
+              this.error = true
+              this.loading = false
+            })
+        }
+      }
+    }
+  })
+}
+
+export default withSubscription

src/hocs/with_subscription/with_subscription.scss

@@ -0,0 +1,10 @@
+.with-subscription {
+  &-loading {
+    padding: 10px;
+    text-align: center;
+
+    .error {
+      font-size: 14px;
+    }
+  }
+}

src/i18n/de.json

@@ -132,6 +132,7 @@
     "preload_images": "Bilder vorausladen",
     "hide_post_stats": "Beitragsstatistiken verbergen (z.B. die Anzahl der Favoriten)",
     "hide_user_stats": "Benutzerstatistiken verbergen (z.B. die Anzahl der Follower)",
+    "hide_filtered_statuses": "Gefilterte Beiträge verbergen",
     "import_followers_from_a_csv_file": "Importiere Follower, denen du folgen möchtest, aus einer CSV-Datei",
     "import_theme": "Farbschema laden",
     "inputRadius": "Eingabefelder",

src/i18n/en.json

@@ -21,6 +21,11 @@
     "more": "More",
     "generic_error": "An error occured"
   },
+  "image_cropper": {
+    "crop_picture": "Crop picture",
+    "save": "Save",
+    "cancel": "Cancel"
+  },
   "login": {
     "login": "Log in",
     "description": "Log in with OAuth",
@@ -28,7 +33,12 @@
     "password": "Password",
     "placeholder": "e.g. lain",
     "register": "Register",
-    "username": "Username"
+    "username": "Username",
+    "hint": "Log in to join the discussion"
+  },
+  "media_modal": {
+    "previous": "Previous",
+    "next": "Next"
   },
   "nav": {
     "about": "About",
@@ -100,6 +110,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
+    "blocks_tab": "Blocks",
     "btnRadius": "Buttons",
     "cBlue": "Blue (Reply, follow)",
     "cGreen": "Green (Retweet)",
@@ -139,6 +150,7 @@
     "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
     "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
+    "hide_filtered_statuses": "Hide filtered statuses",
     "import_followers_from_a_csv_file": "Import follows from a csv file",
     "import_theme": "Load preset",
     "inputRadius": "Input fields",
@@ -153,6 +165,7 @@
     "lock_account_description": "Restrict your account to approved followers only",
     "loop_video": "Loop videos",
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
+    "mutes_tab": "Mutes",
     "play_videos_in_modal": "Play videos directly in the media viewer",
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",
@@ -164,8 +177,12 @@
     "notification_visibility_mentions": "Mentions",
     "notification_visibility_repeats": "Repeats",
     "no_rich_text_description": "Strip rich text formatting from all posts",
+    "no_blocks": "No blocks",
+    "no_mutes": "No mutes",
     "hide_follows_description": "Don't show who I'm following",
     "hide_followers_description": "Don't show who's following me",
+    "show_admin_badge": "Show Admin badge in my profile",
+    "show_moderator_badge": "Show Moderator badge in my profile",
     "nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
     "panelRadius": "Panels",
     "pause_on_unfocused": "Pause streaming when tab is not focused",
@@ -192,6 +209,8 @@
     "subject_line_email": "Like email: \"re: subject\"",
     "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",
@@ -200,6 +219,7 @@
     "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.",
     "tooltipRadius": "Tooltips/alerts",
+    "upload_a_photo": "Upload a photo",
     "user_settings": "User Settings",
     "values": {
       "false": "no",
@@ -326,7 +346,8 @@
     "repeated": "repeated",
     "show_new": "Show new",
     "up_to_date": "Up-to-date",
-    "no_more_statuses": "No more statuses"
+    "no_more_statuses": "No more statuses",
+    "no_statuses": "No statuses"
   },
   "user_card": {
     "approve": "Approve",
@@ -338,7 +359,7 @@
     "follow_sent": "Request sent!",
     "follow_progress": "Requesting…",
     "follow_again": "Send request again?",
-    "follow_unfollow": "Stop following",
+    "follow_unfollow": "Unfollow",
     "followees": "Following",
     "followers": "Followers",
     "following": "Following!",
@@ -349,7 +370,13 @@
     "muted": "Muted",
     "per_day": "per day",
     "remote_follow": "Remote follow",
-    "statuses": "Statuses"
+    "statuses": "Statuses",
+    "unblock": "Unblock",
+    "unblock_progress": "Unblocking...",
+    "block_progress": "Blocking...",
+    "unmute": "Unmute",
+    "unmute_progress": "Unmuting...",
+    "mute_progress": "Muting..."
   },
   "user_profile": {
     "timeline_title": "User Timeline"

src/i18n/es.json

@@ -28,7 +28,8 @@
     "password": "Contraseña",
     "placeholder": "p.ej. lain",
     "register": "Registrar",
-    "username": "Usuario"
+    "username": "Usuario",
+    "hint": "Inicia sesión para unirte a la discusión"
   },
   "nav": {
     "about": "Sobre",
@@ -55,7 +56,7 @@
     "no_more_notifications": "No hay más notificaciones"
   },
   "post_status": {
-    "new_status": "Post new status",
+    "new_status": "Publicar un nuevo estado",
     "account_not_locked_warning": "Tu cuenta no está {0}. Cualquiera puede seguirte y leer las entradas para Solo-Seguidores.",
     "account_not_locked_warning_link": "bloqueada",
     "attachments_sensitive": "Contenido sensible",
@@ -139,7 +140,8 @@
     "use_one_click_nsfw": "Abrir los adjuntos NSFW con un solo click.",
     "hide_post_stats": "Ocultar las estadísticas de las entradas (p.ej. el número de favoritos)",
     "hide_user_stats": "Ocultar las estadísticas del usuario (p.ej. el número de seguidores)",
-    "import_followers_from_a_csv_file": "Importar personas que tú sigues apartir de un archivo csv",
+    "hide_filtered_statuses": "Ocultar estados filtrados",
+    "import_followers_from_a_csv_file": "Importar personas que tú sigues a partir de un archivo csv",
     "import_theme": "Importar tema",
     "inputRadius": "Campos de entrada",
     "checkboxRadius": "Casillas de verificación",
@@ -164,7 +166,10 @@
     "notification_visibility_mentions": "Menciones",
     "notification_visibility_repeats": "Repeticiones (Repeats)",
     "no_rich_text_description": "Eliminar el formato de texto enriquecido de todas las entradas",
-    "hide_network_description": "No mostrar a quién sigo, ni quién me sigue",
+    "hide_follows_description": "No mostrar a quién sigo",
+    "hide_followers_description": "No mostrar quién me sigue",
+    "show_admin_badge": "Mostrar la placa de administrador en mi perfil",
+    "show_moderator_badge": "Mostrar la placa de moderador en mi perfil",
     "nsfw_clickthrough": "Activar el clic para ocultar los adjuntos NSFW",
     "panelRadius": "Paneles",
     "pause_on_unfocused": "Parar la transmisión cuando no estés en foco.",
@@ -191,6 +196,8 @@
     "subject_line_email": "Tipo email: \"re: tema\"",
     "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/ja.json

@@ -17,7 +17,9 @@
   },
   "general": {
     "apply": "てきよう",
-    "submit": "そうしん"
+    "submit": "そうしん",
+    "more": "つづき",
+    "generic_error": "エラーになりました"
   },
   "login": {
     "login": "ログイン",
@@ -26,7 +28,8 @@
     "password": "パスワード",
     "placeholder": "れい: lain",
     "register": "はじめる",
-    "username": "ユーザーめい"
+    "username": "ユーザーめい",
+    "hint": "はなしあいにくわわるには、ログインしてください"
   },
   "nav": {
     "about": "これはなに？",
@@ -49,7 +52,8 @@
     "load_older": "ふるいつうちをみる",
     "notifications": "つうち",
     "read": "よんだ！",
-    "repeated_you": "あなたのステータスがリピートされました"
+    "repeated_you": "あなたのステータスがリピートされました",
+    "no_more_notifications": "つうちはありません"
   },
   "post_status": {
     "new_status": "とうこうする",
@@ -117,6 +121,7 @@
     "delete_account_description": "あなたのアカウントとメッセージが、きえます。",
     "delete_account_error": "アカウントをけすことが、できなかったかもしれません。インスタンスのかんりしゃに、れんらくしてください。",
     "delete_account_instructions": "ほんとうにアカウントをけしてもいいなら、パスワードをかいてください。",
+    "avatar_size_instruction": "アバターのおおきさは、150×150ピクセルか、それよりもおおきくするといいです。",
     "export_theme": "セーブ",
     "filtering": "フィルタリング",
     "filtering_explanation": "これらのことばをふくむすべてのものがミュートされます。1ぎょうに1つのことばをかいてください。",
@@ -132,8 +137,10 @@
     "hide_attachments_in_tl": "タイムラインのファイルをかくす",
     "hide_isp": "インスタンススペシフィックパネルをかくす",
     "preload_images": "がぞうをさきよみする",
+    "use_one_click_nsfw": "NSFWなファイルを1クリックでひらく",
     "hide_post_stats": "とうこうのとうけいをかくす (れい: おきにいりのかず)",
     "hide_user_stats": "ユーザーのとうけいをかくす (れい: フォロワーのかず)",
+    "hide_filtered_statuses": "フィルターされたとうこうをかくす",
     "import_followers_from_a_csv_file": "CSVファイルからフォローをインポートする",
     "import_theme": "ロード",
     "inputRadius": "インプットフィールド",
@@ -148,6 +155,8 @@
     "lock_account_description": "あなたがみとめたひとだけ、あなたのアカウントをフォローできる",
     "loop_video": "ビデオをくりかえす",
     "loop_video_silent_only": "おとのないビデオだけくりかえす",
+    "play_videos_in_modal": "ビデオをメディアビューアーでみる",
+    "use_contain_fit": "がぞうのサムネイルを、きりぬかない",
     "name": "なまえ",
     "name_bio": "なまえとプロフィール",
     "new_password": "あたらしいパスワード",
@@ -157,8 +166,10 @@
     "notification_visibility_mentions": "メンション",
     "notification_visibility_repeats": "リピート",
     "no_rich_text_description": "リッチテキストをつかわない",
-    "hide_follows_description": "フォローしている人を表示しない",
+    "hide_follows_description": "フォローしているひとをみせない",
-    "hide_followers_description": "フォローしている人を表示しない",
+    "hide_followers_description": "フォロワーをみせない",
+    "show_admin_badge": "アドミンのしるしをみる",
+    "show_moderator_badge": "モデレーターのしるしをみる",
     "nsfw_clickthrough": "NSFWなファイルをかくす",
     "panelRadius": "パネル",
     "pause_on_unfocused": "タブにフォーカスがないときストリーミングをとめる",
@@ -185,6 +196,8 @@
     "subject_line_email": "メールふう: \"re: サブジェクト\"",
     "subject_line_mastodon": "マストドンふう: そのままコピー",
     "subject_line_noop": "コピーしない",
+    "post_status_content_type": "とうこうのコンテントタイプ",
+    "status_content_type_plain": "プレーンテキスト",
     "stop_gifs": "カーソルをかさねたとき、GIFをうごかす",
     "streaming": "うえまでスクロールしたとき、じどうてきにストリーミングする",
     "text": "もじ",
@@ -318,13 +331,15 @@
     "no_retweet_hint": "とうこうを「フォロワーのみ」または「ダイレクト」にすると、リピートできなくなります",
     "repeated": "リピート",
     "show_new": "よみこみ",
-    "up_to_date": "さいしん"
+    "up_to_date": "さいしん",
+    "no_more_statuses": "これでおわりです"
   },
   "user_card": {
     "approve": "うけいれ",
     "block": "ブロック",
     "blocked": "ブロックしています！",
     "deny": "おことわり",
+    "favorites": "おきにいり",
     "follow": "フォロー",
     "follow_sent": "リクエストを、おくりました！",
     "follow_progress": "リクエストしています…",
@@ -335,6 +350,7 @@
     "following": "フォローしています！",
     "follows_you": "フォローされました！",
     "its_you": "これはあなたです！",
+    "media": "メディア",
     "mute": "ミュート",
     "muted": "ミュートしています！",
     "per_day": "/日",

src/i18n/ru.json

@@ -129,6 +129,8 @@
     "no_rich_text_description": "Убрать форматирование из всех постов",
     "hide_follows_description": "Не показывать кого я читаю",
     "hide_followers_description": "Не показывать кто читает меня",
+    "show_admin_badge": "Показывать значок администратора в моем профиле",
+    "show_moderator_badge": "Показывать значок модератора в моем профиле",
     "nsfw_clickthrough": "Включить скрытие NSFW вложений",
     "panelRadius": "Панели",
     "pause_on_unfocused": "Приостановить загрузку когда вкладка не в фокусе",

src/lib/persisted_state.js

@@ -48,7 +48,7 @@ export default function createPersistedState ({
   return getState(key, storage).then((savedState) => {
     return store => {
       try {
-        if (typeof savedState === 'object') {
+        if (savedState !== null && typeof savedState === 'object') {
           // build user cache
           const usersState = savedState.users || {}
           usersState.usersObject = {}
@@ -84,12 +84,12 @@ export default function createPersistedState ({
             setState(key, reducer(state, paths), storage)
               .then(success => {
                 if (typeof success !== 'undefined') {
-                  if (mutation.type === 'setOption') {
+                  if (mutation.type === 'setOption' || mutation.type === 'setCurrentUser') {
                     store.dispatch('settingsSaved', { success })
                   }
                 }
               }, error => {
-                if (mutation.type === 'setOption') {
+                if (mutation.type === 'setOption' || mutation.type === 'setCurrentUser') {
                   store.dispatch('settingsSaved', { error })
                 }
               })

src/modules/api.js

@@ -1,5 +1,4 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import {isArray} from 'lodash'
 import { Socket } from 'phoenix'
 
 const api = {
@@ -34,20 +33,12 @@ const api = {
     }
   },
   actions: {
-    startFetching (store, timeline) {
+    startFetching (store, {timeline = 'friends', tag = false, userId = false}) {
-      let userId = false
-
-      // This is for user timelines
-      if (isArray(timeline)) {
-        userId = timeline[1]
-        timeline = timeline[0]
-      }
-
       // Don't start fetching if we already are.
-      if (!store.state.fetchers[timeline]) {
+      if (store.state.fetchers[timeline]) return
-        const fetcher = store.state.backendInteractor.startFetching({timeline, store, userId})
+
-        store.commit('addFetcher', {timeline, fetcher})
+      const fetcher = store.state.backendInteractor.startFetching({ timeline, store, userId, tag })
-      }
+      store.commit('addFetcher', { timeline, fetcher })
     },
     stopFetching (store, timeline) {
       const fetcher = store.state.fetchers[timeline]

src/modules/config.js

@@ -31,7 +31,7 @@ const defaultState = {
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
   alwaysShowSubjectInput: undefined, // instance default
-  showFeaturesPanel: true
+  postContentType: undefined // instance default
 }
 
 const config = {

src/modules/instance.js

@@ -21,13 +21,16 @@ const defaultState = {
   collapseMessageWithSubject: false,
   hidePostStats: false,
   hideUserStats: false,
+  hideFilteredStatuses: false,
   disableChat: false,
   scopeCopy: true,
   subjectLineBehavior: 'email',
+  postContentType: 'text/plain',
   loginMethod: 'password',
   nsfwCensorImage: undefined,
   vapidPublicKey: undefined,
   noAttachmentLinks: false,
+  showFeaturesPanel: true,
 
   // Nasty stuff
   pleromaBackend: true,
@@ -63,9 +66,11 @@ const instance = {
         case 'name':
           dispatch('setPageTitle')
           break
-        case 'theme':
-          setPreset(value, commit)
       }
+    },
+    setTheme ({ commit }, themeName) {
+      commit('setInstanceOption', { name: 'theme', value: themeName })
+      return setPreset(themeName, commit)
     }
   }
 }

src/modules/statuses.js

@@ -296,7 +296,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
           notifObj.image = action.attachments[0].url
         }
 
-        if (notification.fresh && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.ntype)) {
+        if (!notification.seen && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.type)) {
           let notification = new window.Notification(title, notifObj)
           // Chrome is known for not closing notifications automatically
           // according to MDN, anyway.

src/modules/users.js

@@ -85,6 +85,12 @@ export const mutations = {
   addNewUsers (state, users) {
     each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
   },
+  saveBlocks (state, blockIds) {
+    state.currentUser.blockIds = blockIds
+  },
+  saveMutes (state, muteIds) {
+    state.currentUser.muteIds = muteIds
+  },
   setUserForStatus (state, status) {
     status.user = state.usersObject[status.user.id]
   },
@@ -137,6 +143,38 @@ const users = {
       store.rootState.api.backendInteractor.fetchUser({ id })
         .then((user) => store.commit('addNewUsers', [user]))
     },
+    fetchBlocks (store) {
+      return store.rootState.api.backendInteractor.fetchBlocks()
+        .then((blocks) => {
+          store.commit('saveBlocks', map(blocks, 'id'))
+          store.commit('addNewUsers', blocks)
+          return blocks
+        })
+    },
+    blockUser (store, id) {
+      return store.rootState.api.backendInteractor.blockUser(id)
+        .then((user) => store.commit('addNewUsers', [user]))
+    },
+    unblockUser (store, id) {
+      return store.rootState.api.backendInteractor.unblockUser(id)
+        .then((user) => store.commit('addNewUsers', [user]))
+    },
+    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'))
+        })
+    },
+    muteUser (store, id) {
+      return store.state.api.backendInteractor.setUserMute({ id, muted: true })
+        .then((user) => store.commit('addNewUsers', [user]))
+    },
+    unmuteUser (store, id) {
+      return store.state.api.backendInteractor.setUserMute({ id, muted: false })
+        .then((user) => store.commit('addNewUsers', [user]))
+    },
     addFriends ({ rootState, commit }, fetchBy) {
       return new Promise((resolve, reject) => {
         const user = rootState.users.usersObject[fetchBy]
@@ -231,8 +269,14 @@ const users = {
         store.commit('setToken', result.access_token)
         store.dispatch('loginUser', result.access_token)
       } else {
-        let data = await response.json()
+        const data = await response.json()
-        let errors = humanizeErrors(JSON.parse(data.error))
+        let errors = JSON.parse(data.error)
+        // replace ap_id with username
+        if (errors.ap_id) {
+          errors.username = errors.ap_id
+          delete errors.ap_id
+        }
+        errors = humanizeErrors(errors)
         store.commit('signUpFailure', errors)
         throw Error(errors)
       }
@@ -257,6 +301,8 @@ const users = {
               const user = data
               // user.credentials = userCredentials
               user.credentials = accessToken
+              user.blockIds = []
+              user.muteIds = []
               commit('setCurrentUser', user)
               commit('addNewUsers', [user])
 
@@ -271,13 +317,10 @@ const users = {
               }
 
               // Start getting fresh posts.
-              store.dispatch('startFetching', 'friends')
+              store.dispatch('startFetching', { timeline: 'friends' })
 
-              // Get user mutes and follower info
+              // Get user mutes
-              store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => {
+              store.dispatch('fetchMutes')
-                each(mutedUsers, (user) => { user.muted = true })
-                store.commit('addNewUsers', mutedUsers)
-              })
 
               // Fetch our friends
               store.rootState.api.backendInteractor.fetchFriends({ id: user.id })

src/services/api/api.service.js

@@ -18,6 +18,7 @@ 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'
@@ -130,7 +131,7 @@ const updateBanner = ({credentials, params}) => {
 // description
 const updateProfile = ({credentials, params}) => {
   // Always include these fields, because they might be empty or false
-  const fields = ['description', 'locked', 'no_rich_text', 'hide_follows', 'hide_followers']
+  const fields = ['description', 'locked', 'no_rich_text', 'hide_follows', 'hide_followers', 'show_role']
   let url = PROFILE_UPDATE_URL
 
   const form = new FormData()
@@ -257,6 +258,13 @@ const fetchFriends = ({id, page, credentials}) => {
     .then((data) => data.map(parseUser))
 }
 
+const exportFriends = ({id, credentials}) => {
+  let url = `${FRIENDS_URL}?user_id=${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) {
@@ -512,6 +520,17 @@ const fetchMutes = ({credentials}) => {
   }).then((data) => data.json())
 }
 
+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 suggestions = ({credentials}) => {
   return fetch(SUGGESTIONS_URL, {
     headers: authHeaders(credentials)
@@ -536,6 +555,7 @@ const apiService = {
   fetchConversation,
   fetchStatus,
   fetchFriends,
+  exportFriends,
   fetchFollowers,
   followUser,
   unfollowUser,
@@ -552,6 +572,7 @@ const apiService = {
   fetchAllFollowing,
   setUserMute,
   fetchMutes,
+  fetchBlocks,
   register,
   getCaptcha,
   updateAvatar,

src/services/backend_interactor_service/backend_interactor_service.js

@@ -14,6 +14,10 @@ const backendInteractorService = (credentials) => {
     return apiService.fetchFriends({id, page, credentials})
   }
 
+  const exportFriends = ({id}) => {
+    return apiService.exportFriends({id, credentials})
+  }
+
   const fetchFollowers = ({id, page}) => {
     return apiService.fetchFollowers({id, page, credentials})
   }
@@ -59,6 +63,7 @@ const backendInteractorService = (credentials) => {
   }
 
   const fetchMutes = () => apiService.fetchMutes({credentials})
+  const fetchBlocks = (params) => apiService.fetchBlocks({credentials, ...params})
   const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
 
   const getCaptcha = () => apiService.getCaptcha()
@@ -78,6 +83,7 @@ const backendInteractorService = (credentials) => {
     fetchStatus,
     fetchConversation,
     fetchFriends,
+    exportFriends,
     fetchFollowers,
     followUser,
     unfollowUser,
@@ -89,6 +95,7 @@ const backendInteractorService = (credentials) => {
     startFetching,
     setUserMute,
     fetchMutes,
+    fetchBlocks,
     register,
     getCaptcha,
     updateAvatar,

src/services/entity_normalizer/entity_normalizer.service.js

@@ -90,6 +90,8 @@ export const parseUser = (data) => {
     output.statusnet_blocking = data.statusnet_blocking
 
     output.is_local = data.is_local
+    output.role = data.role
+    output.show_role = data.show_role
 
     output.follows_you = data.follows_you
 
@@ -115,6 +117,9 @@ export const parseUser = (data) => {
   output.statuses_count = data.statuses_count
   output.friends = []
   output.followers = []
+  if (data.pleroma) {
+    output.follow_request_count = data.pleroma.follow_request_count
+  }
 
   return output
 }

src/services/follow_manipulate/follow_manipulate.js

@@ -0,0 +1,74 @@
+const fetchUser = (attempt, user, store) => new Promise((resolve, reject) => {
+  setTimeout(() => {
+    store.state.api.backendInteractor.fetchUser({ id: user.id })
+      .then((user) => store.commit('addNewUsers', [user]))
+      .then(() => resolve([user.following, attempt]))
+      .catch((e) => reject(e))
+  }, 500)
+}).then(([following, attempt]) => {
+  if (!following && attempt <= 3) {
+    // If we BE reports that we still not following that user - retry,
+    // increment attempts by one
+    return fetchUser(++attempt, user, store)
+  } else {
+    // If we run out of attempts, just return whatever status is.
+    return following
+  }
+})
+
+export const requestFollow = (user, store) => new Promise((resolve, reject) => {
+  store.state.api.backendInteractor.followUser(user.id)
+    .then((updated) => {
+      store.commit('addNewUsers', [updated])
+
+      // For locked users we just mark it that we sent the follow request
+      if (updated.locked) {
+        resolve({
+          sent: true,
+          updated
+        })
+      }
+
+      if (updated.following) {
+        // If we get result immediately, just stop.
+        resolve({
+          sent: false,
+          updated
+        })
+      }
+
+      // But usually we don't get result immediately, so we ask server
+      // for updated user profile to confirm if we are following them
+      // Sometimes it takes several tries. Sometimes we end up not following
+      // user anyway, probably because they locked themselves and we
+      // don't know that yet.
+      // Recursive Promise, it will call itself up to 3 times.
+
+      return fetchUser(1, user, store)
+        .then((following) => {
+          if (following) {
+            // We confirmed and everything's good.
+            resolve({
+              sent: false,
+              updated
+            })
+          } else {
+            // If after all the tries, just treat it as if user is locked
+            resolve({
+              sent: false,
+              updated
+            })
+          }
+        })
+    })
+})
+
+export const requestUnfollow = (user, store) => new Promise((resolve, reject) => {
+  store.state.api.backendInteractor.unfollowUser(user.id)
+    .then((updated) => {
+      store.commit('addNewUsers', [updated])
+      resolve({
+        updated
+      })
+    })
+})

src/services/matcher/matcher.service.js

@@ -0,0 +1,23 @@
+export const mentionMatchesUrl = (attention, url) => {
+  if (url === attention.statusnet_profile_url) {
+    return true
+  }
+  const [namepart, instancepart] = attention.screen_name.split('@')
+  const matchstring = new RegExp('://' + instancepart + '/.*' + namepart + '$', 'g')
+
+  return !!url.match(matchstring)
+}
+
+/**
+ * Extract tag name from pleroma or mastodon url.
+ * i.e https://bikeshed.party/tag/photo or https://quey.org/tags/sky
+ * @param {string} url
+ */
+export const extractTagFromUrl = (url) => {
+  const regex = /tag[s]*\/(\w+)$/g
+  const result = regex.exec(url)
+  if (!result) {
+    return false
+  }
+  return result[1]
+}

src/services/mention_matcher/mention_matcher.js

@@ -1,9 +0,0 @@
-
-export const mentionMatchesUrl = (attention, url) => {
-  if (url === attention.statusnet_profile_url) {
-    return true
-  }
-  const [namepart, instancepart] = attention.screen_name.split('@')
-  const matchstring = new RegExp('://' + instancepart + '/.*' + namepart + '$', 'g')
-  return !!url.match(matchstring)
-}

src/services/style_setter/style_setter.js

@@ -480,7 +480,7 @@ const getThemes = () => {
 }
 
 const setPreset = (val, commit) => {
-  getThemes().then((themes) => {
+  return getThemes().then((themes) => {
     const theme = themes[val] ? themes[val] : themes['pleroma-dark']
     const isV1 = Array.isArray(theme)
     const data = isV1 ? {} : theme.theme

static/config.json

@@ -13,11 +13,13 @@
   "collapseMessageWithSubject": false,
   "scopeCopy": true,
   "subjectLineBehavior": "email",
+  "postContentType": "text/plain",
   "alwaysShowSubjectInput": true,
   "hidePostStats": false,
   "hideUserStats": false,
   "loginMethod": "password",
   "webPushNotifications": false,
   "noAttachmentLinks": false,
-  "nsfwCensorImage": ""
+  "nsfwCensorImage": "",
+  "showFeaturesPanel": true
 }

test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js

@@ -241,7 +241,7 @@ describe('API Entities normalizer', () => {
         notice: makeMockStatusQvitter({ id: 444 }),
         from_profile: makeMockUserQvitter({ id: 'spurdo' })
       })
-      expect(parseNotification(notif)).to.have.property('id', '123')
+      expect(parseNotification(notif)).to.have.property('id', 123)
       expect(parseNotification(notif)).to.have.property('seen', false)
       expect(parseNotification(notif)).to.have.deep.property('status.id', '444')
       expect(parseNotification(notif)).to.have.deep.property('action.id', '444')
@@ -259,7 +259,7 @@ describe('API Entities normalizer', () => {
         is_seen: 1,
         from_profile: makeMockUserQvitter({ id: 'spurdo' })
       })
-      expect(parseNotification(notif)).to.have.property('id', '123')
+      expect(parseNotification(notif)).to.have.property('id', 123)
       expect(parseNotification(notif)).to.have.property('type', 'like')
       expect(parseNotification(notif)).to.have.property('seen', true)
       expect(parseNotification(notif)).to.have.deep.property('status.id', '4412')

test/unit/specs/services/matcher/matcher.spec.js

@@ -1,4 +1,4 @@
-import * as MentionMatcher from 'src/services/mention_matcher/mention_matcher.js'
+import * as MatcherService from 'src/services/matcher/matcher.service.js'
 
 const localAttn = () => ({
   id: 123,
@@ -16,48 +16,67 @@ const externalAttn = () => ({
   statusnet_profile_url: 'https://instance.com/users/person'
 })
 
-describe('MentionMatcher', () => {
+describe('MatcherService', () => {
-  describe.only('mentionMatchesUrl', () => {
+  describe('mentionMatchesUrl', () => {
     it('should match local mention', () => {
       const attention = localAttn()
       const url = 'https://instance.com/users/person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(true)
     })
 
     it('should not match a local mention with same name but different instance', () => {
       const attention = localAttn()
       const url = 'https://website.com/users/person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(false)
     })
 
     it('should match external pleroma mention', () => {
       const attention = externalAttn()
       const url = 'https://instance.com/users/person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(true)
     })
 
     it('should not match external pleroma mention with same name but different instance', () => {
       const attention = externalAttn()
       const url = 'https://website.com/users/person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(false)
     })
 
     it('should match external mastodon mention', () => {
       const attention = externalAttn()
       const url = 'https://instance.com/@person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(true)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(true)
     })
 
     it('should not match external mastodon mention with same name but different instance', () => {
       const attention = externalAttn()
       const url = 'https://website.com/@person'
 
-      expect(MentionMatcher.mentionMatchesUrl(attention, url)).to.eql(false)
+      expect(MatcherService.mentionMatchesUrl(attention, url)).to.eql(false)
+    })
+  })
+  describe('extractTagFromUrl', () => {
+    it('should return tag name from valid pleroma url', () => {
+      const url = 'https://website.com/tag/photo'
+
+      expect(MatcherService.extractTagFromUrl(url)).to.eql('photo')
+    })
+
+    it('should return tag name from valid mastodon url', () => {
+      const url = 'https://website.com/tags/sky'
+
+      expect(MatcherService.extractTagFromUrl(url)).to.eql('sky')
+    })
+
+    it('should not return string but false if invalid url', () => {
+      const url = 'https://website.com/users/sky'
+
+      expect(MatcherService.extractTagFromUrl(url)).to.eql(false)
     })
   })
 })