Merge branch 'snoot' of ssh://vvn.space:2222/vivlim/pleroma-fe into snoot

Set max-width of textarea in settings page

Closes #500

See merge request pleroma/pleroma-fe!761

.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

.gitignore

@@ -6,3 +6,4 @@ test/unit/coverage
 test/e2e/reports
 selenium-debug.log
 .idea/
+config/local.json

BREAKING_CHANGES.md

@@ -0,0 +1,10 @@
+# v1.0
+## Removed features/radically changed behavior
+### minimalScopesMode
+As of !633, `scopeOptions` is no longer available and instead is changed for `minimalScopesMode` (default: `false`)
+
+Reasoning is that scopeOptions option originally existed mostly as a backwards-compatibility with GNU Social which only had `public` scope available and using scope selector would''t work. Since at some point we dropped GNU Social support, this option was mostly a nuisance (being default `false`'), however some people think scopes are an annoyance to a certain degree and want as less of that feature as possible.
+
+Solution - to only show minimal set among: *Direct*, *User default* and *Scope of post replying to*. This also makes it impossible to reply to a DM with a non-DM post from UI.
+
+*This setting is admin-default, user-configurable. Admin can choose different default for their instance but user can override it.*

README.md

@@ -6,11 +6,12 @@
 
 # For Translators
 
-To translate Pleroma, add your language to [src/i18n/messages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/messages.js). Pleroma will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
+To translate Pleroma-FE, add your language to [src/i18n/messages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/messages.js). Pleroma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
 
 # FOR ADMINS
 
-You don't need to build Pleroma yourself. Check out https://git.pleroma.social/pleroma/pleroma-fe/wikis/dual-boot-with-qvitter to see how to run Pleroma and Qvitter at the same time.
+You don't need to build Pleroma-FE yourself. Those using the Pleroma backend will be able to use it out of the box.
+For the GNU social backend, check out https://git.pleroma.social/pleroma/pleroma-fe/wikis/dual-boot-with-qvitter to see how to run Pleroma-FE and Qvitter at the same time.
 
 ## Build Setup
 
@@ -29,9 +30,18 @@ npm run build
 npm run unit
 ```
 
+# For Contributors:
+
+You can create file `/config/local.json` (see [example](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/config/local.example.json)) to enable some convenience dev options:
+
+* `target`: makes local dev server redirect to some existing instance's BE instead of local BE, useful for testing things in near-production environment and searching for real-life use-cases.
+* `staticConfigPreference`: makes FE's `/static/config.json` take preference of BE-served `/api/statusnet/config.json`. Only works in dev mode.
+
+FE Build process also leaves current commit hash in global variable `___pleromafe_commit_hash` so that you can easily see which pleroma-fe commit instance is running, also helps pinpointing which commit was used when FE was bundled into BE.
+
 # Configuration
 
-Edit config.json for configuration. scopeOptionsEnabled gives you input fields for CWs and the scope settings.
+Edit config.json for configuration.
 
 ## Options
 

build/webpack.base.conf.js

@@ -2,6 +2,7 @@ var path = require('path')
 var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
+var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -91,5 +92,11 @@ module.exports = {
         browsers: ['last 2 versions']
       })
     ]
-  }
+  },
+  plugins: [
+    new ServiceWorkerWebpackPlugin({
+      entry: path.join(__dirname, '..', 'src/sw.js'),
+      filename: 'sw-pleroma.js'
+    })
+  ]
 }

build/webpack.dev.conf.js

@@ -18,7 +18,9 @@ module.exports = merge(baseWebpackConfig, {
   devtool: '#eval-source-map',
   plugins: [
     new webpack.DefinePlugin({
-      'process.env': config.dev.env
+      'process.env': config.dev.env,
+      'COMMIT_HASH': JSON.stringify('DEV'),
+      'DEV_OVERRIDES': JSON.stringify(config.dev.settings)
     }),
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
     new webpack.optimize.OccurenceOrderPlugin(),

build/webpack.prod.conf.js

@@ -7,8 +7,13 @@ var baseWebpackConfig = require('./webpack.base.conf')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var env = process.env.NODE_ENV === 'testing'
-  ? require('../config/test.env')
-  : config.build.env
+    ? require('../config/test.env')
+    : config.build.env
+
+let commitHash = require('child_process')
+    .execSync('git rev-parse --short HEAD')
+    .toString();
+console.log(commitHash)
 
 var webpackConfig = merge(baseWebpackConfig, {
   module: {
@@ -29,7 +34,9 @@ var webpackConfig = merge(baseWebpackConfig, {
   plugins: [
     // http://vuejs.github.io/vue-loader/workflow/production.html
     new webpack.DefinePlugin({
-      'process.env': env
+      'process.env': env,
+      'COMMIT_HASH': JSON.stringify(commitHash),
+      'DEV_OVERRIDES': JSON.stringify(undefined)
     }),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
@@ -51,7 +58,8 @@ var webpackConfig = merge(baseWebpackConfig, {
       minify: {
         removeComments: true,
         collapseWhitespace: true,
-        removeAttributeQuotes: true
+        removeAttributeQuotes: true,
+        ignoreCustomComments: [/server-generated-meta/]
         // more options:
         // https://github.com/kangax/html-minifier#options-quick-reference
       },

config/index.js

@@ -1,5 +1,15 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
+const path = require('path')
+let settings = {}
+try {
+  settings = require('./local.json')
+  console.log('Using local dev server settings (/config/local.json):')
+  console.log(JSON.stringify(settings, null, 2))
+} catch (e) {
+  console.log('Local dev server settings not found (/config/local.json)')
+}
+
+const target = settings.target || 'http://localhost:4000/'
 
 module.exports = {
   build: {
@@ -19,21 +29,22 @@ module.exports = {
   dev: {
     env: require('./dev.env'),
     port: 8080,
+    settings,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
       '/api': {
-        target: 'http://localhost:4000/',
+        target,
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
       },
       '/nodeinfo': {
-        target: 'http://localhost:4000/',
+        target,
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
       },
       '/socket': {
-        target: 'http://localhost:4000/',
+        target,
         changeOrigin: true,
         cookieDomainRewrite: 'localhost',
         ws: true

config/local.example.json

@@ -0,0 +1,4 @@
+{
+  "target": "https://pleroma.soykaf.com/",
+  "staticConfigPreference": false
+}

index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Pleroma</title>
+    <!--server-generated-meta-->
     <link rel="icon" type="image/png" href="/favicon.png">
     <link rel="stylesheet" href="/static/font/css/fontello.css">
     <link rel="stylesheet" href="/static/font/css/animation.css">

package.json

@@ -17,17 +17,21 @@
     "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",
     "node-sass": "^3.10.1",
     "object-path": "^0.11.3",
     "phoenix": "^1.3.0",
+    "popper.js": "^1.14.7",
     "sanitize-html": "^1.13.0",
     "sass-loader": "^4.0.2",
+    "v-click-outside": "^2.1.1",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
+    "vue-popperjs": "^2.0.3",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.3.4",
     "vue-timeago": "^3.1.2",
@@ -36,6 +40,8 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "@babel/polyfill": "^7.0.0",
+    "@vue/test-utils": "^1.0.0-beta.26",
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.0.0",
     "babel-eslint": "^7.0.0",
@@ -90,6 +96,7 @@
     "raw-loader": "^0.5.1",
     "selenium-server": "2.53.1",
     "semver": "^5.3.0",
+    "serviceworker-webpack-plugin": "0.2.3",
     "shelljs": "^0.7.4",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",

src/App.js

@@ -6,6 +6,11 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
+import MediaModal from './components/media_modal/media_modal.vue'
+import SideDrawer from './components/side_drawer/side_drawer.vue'
+import MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue'
+import MobileNav from './components/mobile_nav/mobile_nav.vue'
+import { windowWidth } from './services/window_utils/window_utils'
 
 export default {
   name: 'app',
@@ -17,10 +22,15 @@ export default {
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
-    ChatPanel
+    ChatPanel,
+    MediaModal,
+    SideDrawer,
+    MobilePostStatusModal,
+    MobileNav
   },
   data: () => ({
     mobileActivePanel: 'timeline',
+    finderHidden: true,
     supportsMask: window.CSS && window.CSS.supports && (
       window.CSS.supports('mask-size', 'contain') ||
         window.CSS.supports('-webkit-mask-size', 'contain') ||
@@ -32,6 +42,10 @@ export default {
   created () {
     // Load the locale from the storage
     this.$i18n.locale = this.$store.state.config.interfaceLanguage
+    window.addEventListener('resize', this.updateMobileState)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.updateMobileState)
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
@@ -53,33 +67,47 @@ export default {
     },
     logoBgStyle () {
       return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`
+        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        opacity: this.finderHidden ? 1 : 0
       }, this.enableMask ? {} : {
         'background-color': this.enableMask ? '' : 'transparent'
       })
     },
     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 },
-    showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel }
+    showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel },
+    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    isMobileLayout () { return this.$store.state.interface.mobileLayout }
   },
   methods: {
-    activatePanel (panelName) {
-      this.mobileActivePanel = panelName
-    },
     scrollToTop () {
       window.scrollTo(0, 0)
     },
     logout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+    },
+    onFinderToggled (hidden) {
+      this.finderHidden = hidden
+    },
+    updateMobileState () {
+      const mobileLayout = windowWidth() <= 800
+      const changed = mobileLayout !== this.isMobileLayout
+      if (changed) {
+        this.$store.dispatch('setMobileLayout', mobileLayout)
+      }
     }
   }
 }

src/App.scss

@@ -6,6 +6,16 @@
   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;
 }
@@ -91,6 +101,14 @@ button {
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg)
   }
+
+  &.danger {
+    // TODO: add better color variable
+    color: $fallback--text;
+    color: var(--alertErrorPanelText, $fallback--text);
+    background-color: $fallback--alertError;
+    background-color: var(--alertError, $fallback--alertError);
+  }
 }
 
 label.select {
@@ -144,7 +162,7 @@ input, textarea, .select {
     background: transparent;
     border: none;
     color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--inputText, --text, $fallback--text);
     margin: 0;
     padding: 0 2em 0 .2em;
     font-family: sans-serif;
@@ -171,8 +189,7 @@ input, textarea, .select {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-    &:disabled,
-    {
+    &:disabled {
       &,
       & + label,
       & + label::before {
@@ -224,31 +241,29 @@ i[class*=icon-] {
   padding: 0 10px 0 10px;
 }
 
-.gaps {
-  margin: -1em 0 0 -1em;
-}
-
 .item {
   flex: 1;
   line-height: 50px;
   height: 50px;
   overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
 
   .nav-icon {
-    font-size: 1.1em;
     margin-left: 0.4em;
   }
-}
 
-.gaps > .item {
-  padding: 1em 0 0 1em;
+  &.right {
+    justify-content: flex-end;
+  }
 }
 
 .auto-size {
   flex: 1
 }
 
-nav {
+.nav-bar {
+  padding: 0;
   width: 100%;
   align-items: center;
   position: fixed;
@@ -266,6 +281,9 @@ nav {
     justify-content: center;
     flex: 0 0 auto;
     z-index: -1;
+    transition: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
 
     .mask {
       mask-repeat: no-repeat;
@@ -289,12 +307,13 @@ nav {
   }
 
   .inner-nav {
-    padding-left: 20px;
-    padding-right: 20px;
+    margin: auto;
+    box-sizing: border-box;
+    padding-left: 10px;
+    padding-right: 10px;
     display: flex;
     align-items: center;
     flex-basis: 970px;
-    margin: auto;
     height: 50px;
 
     a, a i {
@@ -419,6 +438,12 @@ main-router {
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
 
+
+  .faint {
+    color: $fallback--faint;
+    color: var(--panelFaint, $fallback--faint);
+  }
+
   a {
     color: $fallback--link;
     color: var(--panelLink, $fallback--link)
@@ -448,6 +473,23 @@ nav {
   color: var(--faint, $fallback--faint);
   box-shadow: 0px 0px 4px rgba(0,0,0,.6);
   box-shadow: var(--topBarShadow);
+
+  .back-button {
+    display: block;
+    max-width: 99px;
+    transition-property: opacity, max-width;
+    transition-duration: 300ms;
+    transition-timing-function: ease-out;
+
+    i {
+      margin: 0 1em;
+    }
+
+    &.hidden {
+      opacity: 0;
+      max-width: 5px;
+    }
+  }
 }
 
 .fade-enter-active, .fade-leave-active {
@@ -458,7 +500,7 @@ nav {
 }
 
 .main {
-  flex-basis: 60%;
+  flex-basis: 50%;
   flex-grow: 1;
   flex-shrink: 1;
 }
@@ -478,23 +520,17 @@ nav {
   display: none;
 }
 
-.panel-switcher {
-  display: none;
-  width: 100%;
-  height: 46px;
-  button {
-    display: block;
-    flex: 1;
-    max-height: 32px;
-    margin: 0.5em;
-    padding: 0.5em;
-  }
-}
-
-@media all and (min-width: 960px) {
+@media all and (min-width: 800px) {
   body {
     overflow-y: scroll;
   }
+
+  nav {
+    .back-button {
+      display: none;
+    }
+  }
+
   .sidebar-bounds {
     overflow: hidden;
     max-height: 100vh;
@@ -569,27 +605,23 @@ nav {
   color: var(--faint, $fallback--faint);
 }
 
-@media all and (max-width: 959px) {
-  .mobile-hidden {
-    display: none;
-  }
+.faint-link {
+  color: $fallback--faint;
+  color: var(--faint, $fallback--faint);
 
-  .panel-switcher {
-    display: flex;
+  &:hover {
+    text-decoration: underline;
   }
+}
 
-  .container {
-    padding: 0 0 0 0;
-  }
-
-  .panel {
-    margin: 0.5em 0 0.5em 0;
+@media all and (min-width: 800px) {
+  .logo {
+    opacity: 1 !important;
   }
 }
 
 .item.right {
   text-align: right;
-  padding-right: 20px;
 }
 
 .visibility-tray {
@@ -602,10 +634,6 @@ nav {
     color: var(--lightText, $fallback--lightText);
   }
 
-  .text-format {
-    float: right;
-  }
-
   div {
     padding-top: 5px;
   }
@@ -618,3 +646,151 @@ nav {
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
 }
+
+@keyframes modal-background-fadein {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+.modal-view {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  animation-duration: 0.2s;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation-name: modal-background-fadein;
+}
+
+.button-icon {
+  font-size: 1.2em;
+}
+
+@keyframes shakeError {
+  0% {
+    transform: translateX(0);
+  }
+  15% {
+    transform: translateX(0.375rem);
+  }
+  30% {
+    transform: translateX(-0.375rem);
+  }
+  45% {
+    transform: translateX(0.375rem);
+  }
+  60% {
+    transform: translateX(-0.375rem);
+  }
+  75% {
+    transform: translateX(0.375rem);
+  }
+  90% {
+    transform: translateX(-0.375rem);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@media all and (max-width: 800px) {
+  .mobile-hidden {
+    display: none;
+  }
+
+  .panel-switcher {
+    display: flex;
+  }
+
+  .container {
+    padding: 0;
+  }
+
+  .panel {
+    margin: 0.5em 0 0.5em 0;
+  }
+
+  .menu-button {
+    display: block;
+    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;
+}
+
+.autocomplete {
+  &-panel {
+    position: relative;
+
+    &-body {
+      margin: 0 0.5em 0 0.5em;
+      border-radius: $fallback--tooltipRadius;
+      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      position: absolute;
+      z-index: 1;
+      box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+      // this doesn't match original but i don't care, making it uniform.
+      box-shadow: var(--popupShadow);
+      min-width: 75%;
+      background: $fallback--bg;
+      background: var(--bg, $fallback--bg);
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+
+  &-item {
+    cursor: pointer;
+    padding: 0.2em 0.4em 0.2em 0.4em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+    display: flex;
+
+    img {
+      width: 24px;
+      height: 24px;
+      object-fit: contain;
+    }
+
+    span {
+      line-height: 24px;
+      margin: 0 0.1em 0 0.2em;
+    }
+
+    small {
+      margin-left: .5em;
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
+    }
+
+    &.highlighted {
+      background-color: $fallback--fg;
+      background-color: var(--lightBg, $fallback--fg);
+    }
+  }
+}

src/App.vue

@@ -1,47 +1,51 @@
 <template>
-  <div id="app" v-bind:style="style">
-    <nav class='container' @click="scrollToTop()" id="nav">
+  <div id="app" v-bind:style="bgAppStyle">
+    <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
+    <MobileNav v-if="isMobileLayout" />
+    <nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">
       <div class='logo' :style='logoBgStyle'>
         <div class='mask' :style='logoMaskStyle'></div>
         <img :src='logo' :style='logoStyle'>
       </div>
       <div class='inner-nav'>
         <div class='item'>
-          <router-link :to="{ name: 'root'}">{{sitename}}</router-link>
+          <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
         </div>
         <div class='item right'>
-          <user-finder class="nav-icon"></user-finder>
-          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
-          <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
+          <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder>
+          <router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
+          <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
         </div>
       </div>
     </nav>
-    <div class="container" id="content">
-      <div class="panel-switcher">
-        <button @click="activatePanel('sidebar')">Sidebar</button>
-        <button @click="activatePanel('timeline')">Timeline</button>
-      </div>
-      <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
+    <div v-if="" class="container" id="content">
+      <div class="sidebar-flexer mobile-hidden" v-if="!isMobileLayout">
         <div class="sidebar-bounds">
           <div class="sidebar-scroller">
             <div class="sidebar">
-              <user-panel :activatePanel="activatePanel"></user-panel>
-              <nav-panel :activatePanel="activatePanel"></nav-panel>
+              <user-panel></user-panel>
+              <nav-panel></nav-panel>
               <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
-              <features-panel v-if="!currentUser"></features-panel>
+              <features-panel v-if="!currentUser && showFeaturesPanel"></features-panel>
               <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
               <notifications v-if="currentUser"></notifications>
             </div>
           </div>
         </div>
       </div>
-      <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }">
+      <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>
       </div>
+      <media-modal></media-modal>
     </div>
-    <chat-panel v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
+    <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
   </div>
 </template>
 

src/boot/after_store.js

@@ -1,175 +1,198 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-
+import routes from './routes'
 import App from '../App.vue'
-import PublicTimeline from '../components/public_timeline/public_timeline.vue'
-import PublicAndExternalTimeline from '../components/public_and_external_timeline/public_and_external_timeline.vue'
-import FriendsTimeline from '../components/friends_timeline/friends_timeline.vue'
-import TagTimeline from '../components/tag_timeline/tag_timeline.vue'
-import ConversationPage from '../components/conversation-page/conversation-page.vue'
-import Mentions from '../components/mentions/mentions.vue'
-import DMs from '../components/dm_timeline/dm_timeline.vue'
-import UserProfile from '../components/user_profile/user_profile.vue'
-import Settings from '../components/settings/settings.vue'
-import Registration from '../components/registration/registration.vue'
-import UserSettings from '../components/user_settings/user_settings.vue'
-import FollowRequests from '../components/follow_requests/follow_requests.vue'
-import OAuthCallback from '../components/oauth_callback/oauth_callback.vue'
-import UserSearch from '../components/user_search/user_search.vue'
+import { windowWidth } from '../services/window_utils/window_utils'
 
-const afterStoreSetup = ({store, i18n}) => {
-  window.fetch('/api/statusnet/config.json')
-    .then((res) => res.json())
-    .then((data) => {
-      const {name, closed: registrationClosed, textlimit, server} = data.site
+const getStatusnetConfig = async ({ store }) => {
+  try {
+    const res = await window.fetch('/api/statusnet/config.json')
+    if (res.ok) {
+      const data = await res.json()
+      const { name, closed: registrationClosed, textlimit, uploadlimit, server, vapidPublicKey, safeDMMentionsEnabled } = data.site
 
       store.dispatch('setInstanceOption', { name: 'name', value: name })
       store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
       store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
       store.dispatch('setInstanceOption', { name: 'server', value: server })
+      store.dispatch('setInstanceOption', { name: 'safeDM', value: safeDMMentionsEnabled !== '0' })
 
-      var apiConfig = data.site.pleromafe
+      // TODO: default values for this stuff, added if to not make it break on
+      // my dev config out of the box.
+      if (uploadlimit) {
+        store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
+        store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
+        store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
+        store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
+      }
 
-      window.fetch('/static/config.json')
-        .then((res) => res.json())
-        .catch((err) => {
-          console.warn('Failed to load static/config.json, continuing without it.')
-          console.warn(err)
-          return {}
-        })
-        .then((staticConfig) => {
-          // This takes static config and overrides properties that are present in apiConfig
-          var config = Object.assign({}, staticConfig, apiConfig)
+      if (vapidPublicKey) {
+        store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
+      }
 
-          var theme = (config.theme)
-          var background = (config.background)
-          var hidePostStats = (config.hidePostStats)
-          var hideUserStats = (config.hideUserStats)
-          var logo = (config.logo)
-          var logoMask = (typeof config.logoMask === 'undefined' ? true : config.logoMask)
-          var logoMargin = (typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin)
-          var redirectRootNoLogin = (config.redirectRootNoLogin)
-          var redirectRootLogin = (config.redirectRootLogin)
-          var chatDisabled = (config.chatDisabled)
-          var showInstanceSpecificPanel = (config.showInstanceSpecificPanel)
-          var scopeOptionsEnabled = (config.scopeOptionsEnabled)
-          var formattingOptionsEnabled = (config.formattingOptionsEnabled)
-          var collapseMessageWithSubject = (config.collapseMessageWithSubject)
-          var loginMethod = (config.loginMethod)
-          var scopeCopy = (config.scopeCopy)
-          var subjectLineBehavior = (config.subjectLineBehavior)
-          var alwaysShowSubjectInput = (config.alwaysShowSubjectInput)
+      return data.site.pleromafe
+    } else {
+      throw (res)
+    }
+  } catch (error) {
+    console.error('Could not load statusnet config, potentially fatal')
+    console.error(error)
+  }
+}
 
-          store.dispatch('setInstanceOption', { name: 'theme', value: theme })
-          store.dispatch('setInstanceOption', { name: 'background', value: background })
-          store.dispatch('setInstanceOption', { name: 'hidePostStats', value: hidePostStats })
-          store.dispatch('setInstanceOption', { name: 'hideUserStats', value: hideUserStats })
-          store.dispatch('setInstanceOption', { name: 'logo', value: logo })
-          store.dispatch('setInstanceOption', { name: 'logoMask', value: logoMask })
-          store.dispatch('setInstanceOption', { name: 'logoMargin', value: logoMargin })
-          store.dispatch('setInstanceOption', { name: 'redirectRootNoLogin', value: redirectRootNoLogin })
-          store.dispatch('setInstanceOption', { name: 'redirectRootLogin', value: redirectRootLogin })
-          store.dispatch('setInstanceOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
-          store.dispatch('setInstanceOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
-          store.dispatch('setInstanceOption', { name: 'formattingOptionsEnabled', value: formattingOptionsEnabled })
-          store.dispatch('setInstanceOption', { name: 'collapseMessageWithSubject', value: collapseMessageWithSubject })
-          store.dispatch('setInstanceOption', { name: 'loginMethod', value: loginMethod })
-          store.dispatch('setInstanceOption', { name: 'scopeCopy', value: scopeCopy })
-          store.dispatch('setInstanceOption', { name: 'subjectLineBehavior', value: subjectLineBehavior })
-          store.dispatch('setInstanceOption', { name: 'alwaysShowSubjectInput', value: alwaysShowSubjectInput })
-          if (chatDisabled) {
-            store.dispatch('disableChat')
-          }
+const getStaticConfig = async () => {
+  try {
+    const res = await window.fetch('/static/config.json')
+    if (res.ok) {
+      return res.json()
+    } else {
+      throw (res)
+    }
+  } catch (error) {
+    console.warn('Failed to load static/config.json, continuing without it.')
+    console.warn(error)
+    return {}
+  }
+}
 
-          const routes = [
-            { name: 'root',
-              path: '/',
-              redirect: to => {
-                return (store.state.users.currentUser
-                        ? store.state.instance.redirectRootLogin
-                        : store.state.instance.redirectRootNoLogin) || '/main/all'
-              }},
-            { path: '/main/all', component: PublicAndExternalTimeline },
-            { path: '/main/public', component: PublicTimeline },
-            { path: '/main/friends', component: FriendsTimeline },
-            { path: '/tag/:tag', component: TagTimeline },
-            { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
-            { name: 'user-profile', path: '/users/:id', component: UserProfile },
-            { name: 'mentions', path: '/:username/mentions', component: Mentions },
-            { name: 'dms', path: '/:username/dms', component: DMs },
-            { name: 'settings', path: '/settings', component: Settings },
-            { name: 'registration', path: '/registration', component: Registration },
-            { name: 'registration', path: '/registration/:token', component: Registration },
-            { name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
-            { name: 'user-settings', path: '/user-settings', component: UserSettings },
-            { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
-            { name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }
-          ]
+const setSettings = async ({ apiConfig, staticConfig, store }) => {
+  const overrides = window.___pleromafe_dev_overrides || {}
+  const env = window.___pleromafe_mode.NODE_ENV
 
-          const router = new VueRouter({
-            mode: 'history',
-            routes,
-            scrollBehavior: (to, from, savedPosition) => {
-              if (to.matched.some(m => m.meta.dontScroll)) {
-                return false
-              }
-              return savedPosition || { x: 0, y: 0 }
-            }
-          })
+  // This takes static config and overrides properties that are present in apiConfig
+  let config = {}
+  if (overrides.staticConfigPreference && env === 'development') {
+    console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG')
+    config = Object.assign({}, apiConfig, staticConfig)
+  } else {
+    config = Object.assign({}, staticConfig, apiConfig)
+  }
 
-          /* eslint-disable no-new */
-          new Vue({
-            router,
-            store,
-            i18n,
-            el: '#app',
-            render: h => h(App)
-          })
-        })
-    })
+  const copyInstanceOption = (name) => {
+    store.dispatch('setInstanceOption', { name, value: config[name] })
+  }
 
-  window.fetch('/static/terms-of-service.html')
-    .then((res) => res.text())
-    .then((html) => {
+  copyInstanceOption('nsfwCensorImage')
+  copyInstanceOption('background')
+  copyInstanceOption('hidePostStats')
+  copyInstanceOption('hideUserStats')
+  copyInstanceOption('hideFilteredStatuses')
+  copyInstanceOption('logo')
+
+  store.dispatch('setInstanceOption', {
+    name: 'logoMask',
+    value: typeof config.logoMask === 'undefined'
+      ? true
+      : config.logoMask
+  })
+
+  store.dispatch('setInstanceOption', {
+    name: 'logoMargin',
+    value: typeof config.logoMargin === 'undefined'
+      ? 0
+      : config.logoMargin
+  })
+
+  copyInstanceOption('redirectRootNoLogin')
+  copyInstanceOption('redirectRootLogin')
+  copyInstanceOption('showInstanceSpecificPanel')
+  copyInstanceOption('minimalScopesMode')
+  copyInstanceOption('formattingOptionsEnabled')
+  copyInstanceOption('hideMutedPosts')
+  copyInstanceOption('collapseMessageWithSubject')
+  copyInstanceOption('loginMethod')
+  copyInstanceOption('scopeCopy')
+  copyInstanceOption('subjectLineBehavior')
+  copyInstanceOption('postContentType')
+  copyInstanceOption('alwaysShowSubjectInput')
+  copyInstanceOption('noAttachmentLinks')
+  copyInstanceOption('showFeaturesPanel')
+
+  if ((config.chatDisabled)) {
+    store.dispatch('disableChat')
+  } else {
+    store.dispatch('initializeSocket')
+  }
+
+  return store.dispatch('setTheme', config['theme'])
+}
+
+const getTOS = async ({ store }) => {
+  try {
+    const res = await window.fetch('/static/terms-of-service.html')
+    if (res.ok) {
+      const html = await res.text()
       store.dispatch('setInstanceOption', { name: 'tos', value: html })
-    })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    console.warn("Can't load TOS")
+    console.warn(e)
+  }
+}
 
-  window.fetch('/api/pleroma/emoji.json')
-    .then(
-      (res) => res.json()
-        .then(
-          (values) => {
-            const emoji = Object.keys(values).map((key) => {
-              return { shortcode: key, image_url: values[key] }
-            })
-            store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
-            store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
-          },
-          (failure) => {
-            store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false })
-          }
-        ),
-      (error) => console.log(error)
-    )
+const getInstancePanel = async ({ store }) => {
+  try {
+    const res = await window.fetch('/instance/panel.html')
+    if (res.ok) {
+      const html = await res.text()
+      store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    console.warn("Can't load instance panel")
+    console.warn(e)
+  }
+}
 
-  window.fetch('/static/emoji.json')
-    .then((res) => res.json())
-    .then((values) => {
+const getStaticEmoji = async ({ store }) => {
+  try {
+    const res = await window.fetch('/static/emoji.json')
+    if (res.ok) {
+      const values = await res.json()
       const emoji = Object.keys(values).map((key) => {
         return { shortcode: key, image_url: false, 'utf': values[key] }
       })
       store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
-    })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    console.warn("Can't load static emoji")
+    console.warn(e)
+  }
+}
 
-  window.fetch('/instance/panel.html')
-    .then((res) => res.text())
-    .then((html) => {
-      store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
-    })
+// This is also used to indicate if we have a 'pleroma backend' or not.
+// Somewhat weird, should probably be somewhere else.
+const getCustomEmoji = async ({ store }) => {
+  try {
+    const res = await window.fetch('/api/pleroma/emoji.json')
+    if (res.ok) {
+      const result = await res.json()
+      const values = Array.isArray(result) ? Object.assign({}, ...result) : result
+      const emoji = Object.keys(values).map((key) => {
+        return { shortcode: key, image_url: values[key].image_url || values[key] }
+      })
+      store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
+      store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false })
+    console.warn("Can't load custom emojis, maybe not a Pleroma instance?")
+    console.warn(e)
+  }
+}
 
-  window.fetch('/nodeinfo/2.0.json')
-    .then((res) => res.json())
-    .then((data) => {
+const getNodeInfo = async ({ store }) => {
+  try {
+    const res = await window.fetch('/nodeinfo/2.0.json')
+    if (res.ok) {
+      const data = await res.json()
       const metadata = data.metadata
 
       const features = metadata.features
@@ -177,10 +200,94 @@ const afterStoreSetup = ({store, i18n}) => {
       store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
 
+      store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
+      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })
+
       const suggestions = metadata.suggestions
       store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
       store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
+
+      const software = data.software
+      store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
+
+      const frontendVersion = window.___pleromafe_commit_hash
+      store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })
+      store.dispatch('setInstanceOption', { name: 'tagPolicyAvailable', value: metadata.federation.mrf_policies.includes('TagPolicy') })
+    } else {
+      throw (res)
+    }
+  } catch (e) {
+    console.warn('Could not load nodeinfo')
+    console.warn(e)
+  }
+}
+
+const setConfig = async ({ store }) => {
+  // apiConfig, staticConfig
+  const configInfos = await Promise.all([getStatusnetConfig({ store }), getStaticConfig()])
+  const apiConfig = configInfos[0]
+  const staticConfig = configInfos[1]
+
+  await setSettings({ store, apiConfig, staticConfig })
+}
+
+const checkOAuthToken = async ({ store }) => {
+  return new Promise(async (resolve, reject) => {
+    if (store.state.oauth.token) {
+      try {
+        await store.dispatch('loginUser', store.state.oauth.token)
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    resolve()
+  })
+}
+
+const afterStoreSetup = async ({ store, i18n }) => {
+  if (store.state.config.customTheme) {
+    // This is a hack to deal with async loading of config.json and themes
+    // See: style_setter.js, setPreset()
+    window.themeLoaded = true
+    store.dispatch('setOption', {
+      name: 'customTheme',
+      value: store.state.config.customTheme
     })
+  }
+
+  const width = windowWidth()
+  store.dispatch('setMobileLayout', width <= 800)
+
+  // Now we can try getting the server settings and logging in
+  await Promise.all([
+    checkOAuthToken({ store }),
+    setConfig({ store }),
+    getTOS({ store }),
+    getInstancePanel({ store }),
+    getStaticEmoji({ store }),
+    getCustomEmoji({ store }),
+    getNodeInfo({ store })
+  ])
+
+  const router = new VueRouter({
+    mode: 'history',
+    routes: routes(store),
+    scrollBehavior: (to, _from, savedPosition) => {
+      if (to.matched.some(m => m.meta.dontScroll)) {
+        return false
+      }
+      return savedPosition || { x: 0, y: 0 }
+    }
+  })
+
+  /* eslint-disable no-new */
+  return new Vue({
+    router,
+    store,
+    i18n,
+    el: '#app',
+    render: h => h(App)
+  })
 }
 
 export default afterStoreSetup

src/boot/routes.js

@@ -0,0 +1,53 @@
+import PublicTimeline from 'components/public_timeline/public_timeline.vue'
+import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
+import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
+import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
+import ConversationPage from 'components/conversation-page/conversation-page.vue'
+import Mentions from 'components/mentions/mentions.vue'
+import DMs from 'components/dm_timeline/dm_timeline.vue'
+import UserProfile from 'components/user_profile/user_profile.vue'
+import Settings from 'components/settings/settings.vue'
+import Registration from 'components/registration/registration.vue'
+import UserSettings from 'components/user_settings/user_settings.vue'
+import FollowRequests from 'components/follow_requests/follow_requests.vue'
+import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
+import UserSearch from 'components/user_search/user_search.vue'
+import Notifications from 'components/notifications/notifications.vue'
+import LoginForm from 'components/login_form/login_form.vue'
+import ChatPanel from 'components/chat_panel/chat_panel.vue'
+import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
+import About from 'components/about/about.vue'
+
+export default (store) => {
+  return [
+    { name: 'root',
+      path: '/',
+      redirect: _to => {
+        return (store.state.users.currentUser
+                ? store.state.instance.redirectRootLogin
+                : store.state.instance.redirectRootNoLogin) || '/main/all'
+      }
+    },
+    { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
+    { name: 'public-timeline', path: '/main/public', component: PublicTimeline },
+    { name: 'friends', path: '/main/friends', component: FriendsTimeline },
+    { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
+    { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+    { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
+    { name: 'mentions', path: '/users/:username/mentions', component: Mentions },
+    { name: 'dms', path: '/users/:username/dms', component: DMs },
+    { name: 'settings', path: '/settings', component: Settings },
+    { name: 'registration', path: '/registration', component: Registration },
+    { name: 'registration-token', path: '/registration/:token', component: Registration },
+    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
+    { name: 'user-settings', path: '/user-settings', component: UserSettings },
+    { name: 'notifications', path: '/:username/notifications', component: Notifications },
+    { name: 'login', path: '/login', component: LoginForm },
+    { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
+    { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
+    { name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) },
+    { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow },
+    { name: 'about', path: '/about', component: About },
+    { name: 'user-profile', path: '/(users/)?:name', component: UserProfile }
+  ]
+}

src/components/about/about.js

@@ -0,0 +1,16 @@
+import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
+import FeaturesPanel from '../features_panel/features_panel.vue'
+import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
+
+const About = {
+  components: {
+    InstanceSpecificPanel,
+    FeaturesPanel,
+    TermsOfServicePanel
+  },
+  computed: {
+    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
+  }
+}
+
+export default About

src/components/about/about.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="sidebar">
+    <instance-specific-panel></instance-specific-panel>
+    <features-panel v-if="showFeaturesPanel"></features-panel>
+    <terms-of-service-panel></terms-of-service-panel>
+  </div>
+</template>
+
+<script src="./about.js" ></script>
+
+<style lang="scss">
+</style>

src/components/attachment/attachment.js

@@ -1,4 +1,5 @@
 import StillImage from '../still-image/still-image.vue'
+import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
@@ -7,22 +8,32 @@ const Attachment = {
     'attachment',
     'nsfw',
     'statusId',
-    'size'
+    'size',
+    'allowPlay',
+    'setMedia'
   ],
   data () {
     return {
-      nsfwImage,
+      nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
-      loopVideo: this.$store.state.config.loopVideo,
-      showHidden: false,
+      preloadImage: this.$store.state.config.preloadImage,
       loading: false,
-      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img')
+      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
+      modalOpen: false,
+      showHidden: false
     }
   },
   components: {
-    StillImage
+    StillImage,
+    VideoAttachment
   },
   computed: {
+    usePlaceHolder () {
+      return this.size === 'hide' || this.type === 'unknown'
+    },
+    referrerpolicy () {
+      return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
+    },
     type () {
       return fileTypeService.fileType(this.attachment.mimetype)
     },
@@ -36,7 +47,7 @@ const Attachment = {
       return this.size === 'small'
     },
     fullwidth () {
-      return fileTypeService.fileType(this.attachment.mimetype) === 'html'
+      return this.type === 'html' || this.type === 'audio'
     }
   },
   methods: {
@@ -45,8 +56,25 @@ const Attachment = {
         window.open(target.href, '_blank')
       }
     },
-    toggleHidden () {
-      if (this.img) {
+    openModal (event) {
+      const modalTypes = this.$store.state.config.playVideosInModal
+        ? ['image', 'video']
+        : ['image']
+      if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
+        this.usePlaceHolder
+      ) {
+        event.stopPropagation()
+        event.preventDefault()
+        this.setMedia()
+        this.$store.dispatch('setCurrent', this.attachment)
+      }
+    },
+    toggleHidden (event) {
+      if (this.$store.state.config.useOneClickNsfw && !this.showHidden) {
+        this.openModal(event)
+        return
+      }
+      if (this.img && !this.preloadImage) {
         if (this.img.onload) {
           this.img.onload()
         } else {
@@ -60,23 +88,6 @@ const Attachment = {
       } else {
         this.showHidden = !this.showHidden
       }
-    },
-    onVideoDataLoad (e) {
-      if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
-        // non-zero if video has audio track
-        if (e.srcElement.webkitAudioDecodedByteCount > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      } else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
-        // true if video has audio track
-        if (e.srcElement.mozHasAudio) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      } else if (typeof e.srcElement.audioTracks !== 'undefined') {
-        if (e.srcElement.audioTracks.length > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      }
     }
   }
 }

src/components/attachment/attachment.vue

@@ -1,20 +1,39 @@
 <template>
-  <div v-if="size==='hide'">
-    <a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
+  <div v-if="usePlaceHolder" @click="openModal">
+    <a class="placeholder"
+      v-if="type !== 'html'"
+      target="_blank" :href="attachment.url"
+    >
+      [{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]
+    </a>
   </div>
   <div v-else class="attachment" :class="{[type]: true, loading, 'small-attachment': isSmall, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}" v-show="!isEmpty">
     <a class="image-attachment-placeholder" v-if="hidden" @click.prevent="toggleHidden()">
-      <img :key="nsfwImage" :src="nsfwImage"/>
+      <img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
     </a>
     <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
-      <a href="#" @click.prevent="toggleHidden()">Hide</a>
+      <a href="#" @click.prevent="toggleHidden">Hide</a>
     </div>
 
-    <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank" :title="attachment.description">
-      <StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
+    <a v-if="type === 'image' && (!hidden || preloadImage)"
+      @click="openModal"
+      class="image-attachment"
+      :class="{'hidden': hidden && preloadImage }"
+      :href="attachment.url" target="_blank"
+      :title="attachment.description"
+    >
+      <StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
-    <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" @loadeddata="onVideoDataLoad" :src="attachment.url" controls :loop="loopVideo" playsinline></video>
+    <a class="video-container"
+      @click="openModal"
+      v-if="type === 'video' && !hidden"
+      :class="{'small': isSmall}"
+      :href="allowPlay ? undefined : attachment.url"
+    >
+      <VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
+      <i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
+    </a>
 
     <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
 
@@ -41,12 +60,17 @@
 
   .attachment.media-upload-container {
     flex: 0 0 auto;
-    max-height: 300px;
+    max-height: 200px;
     max-width: 100%;
+    display: flex;
+    video {
+      max-width: 100%;
+    }
   }
 
   .placeholder {
-    margin-right: 0.5em;
+    margin-right: 8px;
+    margin-bottom: 4px;
   }
 
   .nsfw-placeholder {
@@ -57,17 +81,9 @@
     }
   }
 
-  .small-attachment {
-    &.image, &.video {
-      max-width: 35%;
-    }
-    max-height: 100px;
-  }
-
   .attachment {
     position: relative;
-    flex: 1 0 30%;
-    margin: 0.5em 0.7em 0.6em 0.0em;
+    margin-top: 0.5em;
     align-self: flex-start;
     line-height: 0;
 
@@ -79,6 +95,28 @@
     border-color: var(--border, $fallback--border);
     overflow: hidden;
   }
+
+  .non-gallery.attachment {
+    &.video {
+      flex: 1 0 40%;
+    }
+    .nsfw {
+      height: 260px;
+    }
+    .small {
+      height: 120px;
+      flex-grow: 0;
+    }
+    .video {
+      height: 260px;
+      display: flex;
+    }
+    video {
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+
   .fullwidth {
     flex-basis: 100%;
   }
@@ -87,6 +125,28 @@
     line-height: 0;
   }
 
+  .video-container {
+    display: flex;
+    max-height: 100%;
+  }
+
+  .video {
+    width: 100%;
+  }
+
+  .play-icon {
+    position: absolute;
+    font-size: 64px;
+    top: calc(50% - 32px);
+    left: calc(50% - 32px);
+    color: rgba(255, 255, 255, 0.75);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+  }
+
+  .play-icon::before {
+    margin: 0;
+  }
+
   &.html {
     flex-basis: 90%;
     width: 100%;
@@ -95,6 +155,8 @@
 
   .hider {
     position: absolute;
+    right: 0;
+    white-space: nowrap;
     margin: 10px;
     padding: 5px;
     background: rgba(230,230,230,0.6);
@@ -105,13 +167,7 @@
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   }
 
-  .small {
-    max-height: 100px;
-  }
   video {
-    max-height: 500px;
-    height: 100%;
-    width: 100%;
     z-index: 0;
   }
 
@@ -121,7 +177,7 @@
 
   img.media-upload {
     line-height: 0;
-    max-height: 300px;
+    max-height: 200px;
     max-width: 100%;
   }
 
@@ -158,25 +214,20 @@
   }
 
   .image-attachment {
-    display: flex;
-    flex: 1;
+    width: 100%;
+    height: 100%;
 
-    .still-image {
+    &.hidden {
+      display: none;
+    }
+
+    .nsfw {
+      object-fit: cover;
       width: 100%;
       height: 100%;
     }
 
-    .small {
-      img {
-        max-height: 100px;
-      }
-    }
-
     img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%; /* If this isn't here, chrome will stretch the images */
-      max-height: 500px;
       image-orientation: from-image;
     }
   }

src/components/autosuggest/autosuggest.js

@@ -0,0 +1,52 @@
+const debounceMilliseconds = 500
+
+export default {
+  props: {
+    query: {    // function to query results and return a promise
+      type: Function,
+      required: true
+    },
+    filter: {   // function to filter results in real time
+      type: Function
+    },
+    placeholder: {
+      type: String,
+      default: 'Search...'
+    }
+  },
+  data () {
+    return {
+      term: '',
+      timeout: null,
+      results: [],
+      resultsVisible: false
+    }
+  },
+  computed: {
+    filtered () {
+      return this.filter ? this.filter(this.results) : this.results
+    }
+  },
+  watch: {
+    term (val) {
+      this.fetchResults(val)
+    }
+  },
+  methods: {
+    fetchResults (term) {
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.results = []
+        if (term) {
+          this.query(term).then((results) => { this.results = results })
+        }
+      }, debounceMilliseconds)
+    },
+    onInputClick () {
+      this.resultsVisible = true
+    },
+    onClickOutside () {
+      this.resultsVisible = false
+    }
+  }
+}

src/components/autosuggest/autosuggest.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="autosuggest" v-click-outside="onClickOutside">
+    <input v-model="term" :placeholder="placeholder" @click="onInputClick" class="autosuggest-input" />
+    <div class="autosuggest-results" v-if="resultsVisible && filtered.length > 0">
+      <slot v-for="item in filtered" :item="item" />
+    </div>
+  </div>
+</template>
+
+<script src="./autosuggest.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.autosuggest {
+  position: relative;
+
+  &-input {
+    display: block;
+    width: 100%;
+  }
+
+  &-results {
+    position: absolute;
+    left: 0;
+    top: 100%;
+    right: 0;
+    max-height: 400px;
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
+    border-style: solid;
+    border-width: 1px;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-radius: $fallback--inputRadius;
+    border-radius: var(--inputRadius, $fallback--inputRadius);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    box-shadow: var(--panelShadow);
+    overflow-y: auto;
+    z-index: 1;
+  }
+}
+</style>

src/components/basic_user_card/basic_user_card.js

@@ -0,0 +1,28 @@
+import UserCard from '../user_card/user_card.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
+const BasicUserCard = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      userExpanded: false
+    }
+  },
+  components: {
+    UserCard,
+    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,62 @@
+<template>
+  <div class="basic-user-card">
+    <router-link :to="userProfileLink(user)">
+      <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
+    </router-link>
+    <div class="basic-user-card-expanded-content" v-if="userExpanded">
+      <UserCard :user="user" :rounded="true" :bordered="true"/>
+    </div>
+    <div class="basic-user-card-collapsed-content" v-else>
+      <div :title="user.name" class="basic-user-card-user-name">
+        <span v-if="user.name_html" class="basic-user-card-user-name-value" v-html="user.name_html"></span>
+        <span v-else class="basic-user-card-user-name-value">{{ user.name }}</span>
+      </div>
+      <div>
+        <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)">
+          @{{user.screen_name}}
+        </router-link>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script src="./basic_user_card.js"></script>
+
+<style lang="scss">
+.basic-user-card {
+  display: flex;
+  flex: 1 0;
+  margin: 0;
+  padding: 0.6em 1em;
+
+  &-collapsed-content {
+    margin-left: 0.7em;
+    text-align: left;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &-user-name {
+    img {
+      object-fit: contain;
+      height: 16px;
+      width: 16px;
+      vertical-align: middle;
+    }
+
+    &-value {
+      display: inline-block;
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &-expanded-content {
+    flex: 1;
+    margin-left: 0.7em;
+  }
+}
+</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.findUser(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,34 @@
+<template>
+  <basic-user-card :user="user">
+    <div class="block-card-content-container">
+      <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>
+    </div>
+  </basic-user-card>
+</template>
+
+<script src="./block_card.js"></script>
+
+<style lang="scss">
+.block-card-content-container {
+  margin-top: 0.5em;
+  text-align: right;
+  button {
+    width: 10em;
+  }
+}
+</style>

src/components/chat_panel/chat_panel.js

@@ -1,4 +1,7 @@
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 const chatPanel = {
+  props: [ 'floating' ],
   data () {
     return {
       currentMessage: '',
@@ -18,6 +21,9 @@ const chatPanel = {
     },
     togglePanel () {
       this.collapsed = !this.collapsed
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames)
     }
   }
 }

src/components/chat_panel/chat_panel.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="chat-panel" v-if="!this.collapsed">
+  <div class="chat-panel" v-if="!this.collapsed || !this.floating">
     <div class="panel panel-default">
-      <div class="panel-heading timeline-heading chat-heading" @click.stop.prevent="togglePanel">
+      <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
         <div class="title">
-          {{$t('chat.title')}}
-          <i class="icon-cancel" style="float: right;"></i>
+          <span>{{$t('chat.title')}}</span>
+          <i class="icon-cancel" v-if="floating"></i>
         </div>
       </div>
       <div class="chat-window" v-chat-scroll>
@@ -13,8 +13,10 @@
             <img :src="message.author.avatar" />
           </span>
           <div class="chat-content">
-            <router-link class="chat-name" :to="{ name: 'user-profile', params: { id: message.author.id } }">
-              {{message.author.username}}
+            <router-link
+              class="chat-name"
+              :to="userProfileLink(message.author)">
+                {{message.author.username}}
             </router-link>
             <br>
             <span class="chat-text">
@@ -50,6 +52,7 @@
   right: 0px;
   bottom: 0px;
   z-index: 1000;
+  max-width: 25em;
 }
 
 .chat-heading {
@@ -61,13 +64,13 @@
 }
 
 .chat-window {
-  width: 345px;
-  max-height: 40vh;
   overflow-y: auto;
   overflow-x: hidden;
+  max-height: 20em;
 }
 
-.chat-name {
+.chat-window-container {
+  height: 100%;
 }
 
 .chat-message {
@@ -95,4 +98,11 @@
     resize: none;
   }
 }
+
+.chat-panel {
+  .title {
+    display: flex;
+    justify-content: space-between;
+  }
+}
 </style>

src/components/checkbox/checkbox.vue

@@ -0,0 +1,75 @@
+<template>
+  <label class="checkbox">
+    <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" :indeterminate.prop="indeterminate">
+    <i class="checkbox-indicator" />
+    <span v-if="!!$slots.default"><slot></slot></span>
+  </label>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: ['checked', 'indeterminate']
+}
+</script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.checkbox {
+  position: relative;
+  display: inline-block;
+  padding-left: 1.2em;
+  min-height: 1.2em;
+
+  &-indicator::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    content: '✔';
+    transition: color 200ms;
+    width: 1.1em;
+    height: 1.1em;
+    border-radius: $fallback--checkboxRadius;
+    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    box-shadow: 0px 0px 2px black inset;
+    box-shadow: var(--inputShadow);
+    background-color: $fallback--fg;
+    background-color: var(--input, $fallback--fg);
+    vertical-align: top;
+    text-align: center;
+    line-height: 1.1em;
+    font-size: 1.1em;
+    color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  input[type=checkbox] {
+    display: none;
+
+    &:checked + .checkbox-indicator::before {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    &:indeterminate + .checkbox-indicator::before {
+      content: '–';
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    &:disabled + .checkbox-indicator::before {
+      opacity: .5;
+    }
+  }
+
+  & > span {
+    margin-left: .5em;
+  }
+}
+</style>

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

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

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

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

src/components/conversation/conversation.js

@@ -1,38 +1,94 @@
-import { reduce, filter, sortBy } from 'lodash'
-import { statusType } from '../../modules/statuses.js'
+import { reduce, filter, findIndex, clone } from 'lodash'
 import Status from '../status/status.vue'
 
-const sortAndFilterConversation = (conversation) => {
-  conversation = filter(conversation, (status) => statusType(status) !== 'retweet')
-  return sortBy(conversation, 'id')
+const sortById = (a, b) => {
+  const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
+  const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
+  const seqA = Number(idA)
+  const seqB = Number(idB)
+  const isSeqA = !Number.isNaN(seqA)
+  const isSeqB = !Number.isNaN(seqB)
+  if (isSeqA && isSeqB) {
+    return seqA < seqB ? -1 : 1
+  } else if (isSeqA && !isSeqB) {
+    return -1
+  } else if (!isSeqA && isSeqB) {
+    return 1
+  } else {
+    return idA < idB ? -1 : 1
+  }
+}
+
+const sortAndFilterConversation = (conversation, statusoid) => {
+  if (statusoid.type === 'retweet') {
+    conversation = filter(
+      conversation,
+      (status) => (status.type === 'retweet' || status.id !== statusoid.retweeted_status.id)
+    )
+  } else {
+    conversation = filter(conversation, (status) => status.type !== 'retweet')
+  }
+  return conversation.filter(_ => _).sort(sortById)
 }
 
 const conversation = {
   data () {
     return {
-      highlight: null
+      highlight: null,
+      expanded: false
     }
   },
   props: [
     'statusoid',
-    'collapsable'
+    'collapsable',
+    'isPage'
   ],
+  created () {
+    if (this.isPage) {
+      this.fetchConversation()
+    }
+  },
   computed: {
-    status () { return this.statusoid },
+    status () {
+      return this.statusoid
+    },
+    statusId () {
+      if (this.statusoid.retweeted_status) {
+        return this.statusoid.retweeted_status.id
+      } else {
+        return this.statusoid.id
+      }
+    },
+    conversationId () {
+      if (this.statusoid.retweeted_status) {
+        return this.statusoid.retweeted_status.statusnet_conversation_id
+      } else {
+        return this.statusoid.statusnet_conversation_id
+      }
+    },
     conversation () {
       if (!this.status) {
-        return false
+        return []
       }
 
-      const conversationId = this.status.statusnet_conversation_id
-      const statuses = this.$store.state.statuses.allStatuses
-      const conversation = filter(statuses, { statusnet_conversation_id: conversationId })
-      return sortAndFilterConversation(conversation)
+      if (!this.isExpanded) {
+        return [this.status]
+      }
+
+      const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId])
+      const statusIndex = findIndex(conversation, { id: this.statusId })
+      if (statusIndex !== -1) {
+        conversation[statusIndex] = this.status
+      }
+
+      return sortAndFilterConversation(conversation, this.status)
     },
     replies () {
       let i = 1
       return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => {
-        const irid = Number(in_reply_to_status_id)
+        /* eslint-disable camelcase */
+        const irid = in_reply_to_status_id
+        /* eslint-enable camelcase */
         if (irid) {
           result[irid] = result[irid] || []
           result[irid].push({
@@ -43,24 +99,31 @@ const conversation = {
         i++
         return result
       }, {})
+    },
+    isExpanded () {
+      return this.expanded || this.isPage
     }
   },
   components: {
     Status
   },
-  created () {
-    this.fetchConversation()
-  },
   watch: {
-    '$route': 'fetchConversation'
+    '$route': 'fetchConversation',
+    expanded (value) {
+      if (value) {
+        this.fetchConversation()
+      }
+    }
   },
   methods: {
     fetchConversation () {
       if (this.status) {
-        const conversationId = this.status.statusnet_conversation_id
-        this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
-          .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
-          .then(() => this.setHighlight(this.statusoid.id))
+        this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
+          .then(({ancestors, descendants}) => {
+            this.$store.dispatch('addNewStatuses', { statuses: ancestors })
+            this.$store.dispatch('addNewStatuses', { statuses: descendants })
+          })
+          .then(() => this.setHighlight(this.statusId))
       } else {
         const id = this.$route.params.id
         this.$store.state.api.backendInteractor.fetchStatus({id})
@@ -69,18 +132,22 @@ const conversation = {
       }
     },
     getReplies (id) {
-      id = Number(id)
       return this.replies[id] || []
     },
     focused (id) {
-      if (this.statusoid.retweeted_status) {
-        return (id === this.statusoid.retweeted_status.id)
-      } else {
-        return (id === this.statusoid.id)
-      }
+      return (this.isExpanded) && id === this.status.id
     },
     setHighlight (id) {
-      this.highlight = Number(id)
+      this.highlight = id
+    },
+    getHighlight () {
+      return this.isExpanded ? this.highlight : null
+    },
+    toggleExpanded () {
+      this.expanded = !this.expanded
+      if (!this.expanded) {
+        this.setHighlight(null)
+      }
     }
   }
 }

src/components/conversation/conversation.vue

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

src/components/delete_button/delete_button.js

@@ -10,7 +10,11 @@ const DeleteButton = {
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
-    canDelete () { return this.currentUser && this.currentUser.rights.delete_others_notice || this.status.user.id === this.currentUser.id }
+    canDelete () {
+      if (!this.currentUser) { return }
+      const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin
+      return superuser || this.status.user.id === this.currentUser.id
+    }
   }
 }
 

src/components/delete_button/delete_button.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="canDelete">
     <a href="#" v-on:click.prevent="deleteStatus()">
-      <i class='icon-cancel delete-status'></i>
+      <i class='button-icon icon-cancel delete-status'></i>
     </a>
   </div>
 </template>

src/components/dialog_modal/dialog_modal.js

@@ -0,0 +1,14 @@
+const DialogModal = {
+  props: {
+    darkOverlay: {
+      default: true,
+      type: Boolean
+    },
+    onCancel: {
+      default: () => {},
+      type: Function
+    }
+  }
+}
+
+export default DialogModal

src/components/dialog_modal/dialog_modal.vue

@@ -0,0 +1,92 @@
+<template>
+  <span v-bind:class="{ 'dark-overlay': darkOverlay }" @click.self.stop='onCancel()'>
+    <div class="dialog-modal panel panel-default" @click.stop=''>
+      <div class="panel-heading dialog-modal-heading">
+        <div class="title">
+          <slot name="header"></slot>
+        </div>
+      </div>
+      <div class="dialog-modal-content">
+        <slot name="default"></slot>
+      </div>
+      <div class="dialog-modal-footer user-interactions panel-footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </span>
+</template>
+
+<script src="./dialog_modal.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+// TODO: unify with other modals.
+.dark-overlay {
+  &::before {
+    bottom: 0;
+    content: " ";
+    display: block;
+    cursor: default;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background: rgba(27,31,35,.5);
+    z-index: 99;
+  }
+}
+
+.dialog-modal.panel {
+  top: 0;
+  left: 50%;
+  max-height: 80vh;
+  max-width: 90vw;
+  margin: 15vh auto;
+  position: fixed;
+  transform: translateX(-50%);
+  z-index: 999;
+  cursor: default;
+  display: block;
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  .dialog-modal-heading {
+    padding: .5em .5em;
+    margin-right: auto;
+    margin-bottom: 0;
+    white-space: nowrap;
+    color: var(--panelText);
+    background-color: $fallback--fg;
+    background-color: var(--panel, $fallback--fg);
+
+    .title {
+      margin-bottom: 0;
+    }
+  }
+
+  .dialog-modal-content {
+    margin: 0;
+    padding: 1rem 1rem;
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
+    white-space: normal;
+  }
+
+  .dialog-modal-footer {
+    margin: 0;
+    padding: .5em .5em;
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
+    border-top: 1px solid $fallback--bg;
+    border-top: 1px solid var(--bg, $fallback--bg);
+    justify-content: flex-end;
+
+    button {
+      width: auto;
+      margin-left: .5rem;
+    }
+  }
+}
+
+</style>

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

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

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

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

src/components/favorite_button/favorite_button.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="loggedIn">
-    <i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
+    <i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
     <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
   <div v-else>
-    <i :class='classes' class='favorite-button' :title="$t('tool_tip.favorite')"/>
+    <i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/>
     <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>

src/components/features_panel/features_panel.js

@@ -6,7 +6,7 @@ const FeaturesPanel = {
     gopher: function () { return this.$store.state.instance.gopherAvailable },
     whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
     mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
-    scopeOptions: function () { return this.$store.state.instance.scopeOptionsEnabled },
+    minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
     textlimit: function () { return this.$store.state.instance.textlimit }
   }
 }

src/components/features_panel/features_panel.vue

@@ -12,7 +12,7 @@
           <li v-if="gopher">{{$t('features_panel.gopher')}}</li>
           <li v-if="whoToFollow">{{$t('features_panel.who_to_follow')}}</li>
           <li v-if="mediaProxy">{{$t('features_panel.media_proxy')}}</li>
-          <li v-if="scopeOptions">{{$t('features_panel.scope_options')}}</li>
+          <li>{{$t('features_panel.scope_options')}}</li>
           <li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li>
         </ul>
       </div>

src/components/follow_card/follow_card.js

@@ -0,0 +1,50 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import RemoteFollow from '../remote_follow/remote_follow.vue'
+import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+
+const FollowCard = {
+  props: [
+    'user',
+    'noFollowsYou'
+  ],
+  data () {
+    return {
+      inProgress: false,
+      requestSent: false,
+      updated: false
+    }
+  },
+  components: {
+    BasicUserCard,
+    RemoteFollow
+  },
+  computed: {
+    isMe () { return this.$store.state.users.currentUser.id === this.user.id },
+    following () { return this.updated ? this.updated.following : this.user.following },
+    showFollow () {
+      return !this.following || this.updated && !this.updated.following
+    },
+    loggedIn () {
+      return this.$store.state.users.currentUser
+    }
+  },
+  methods: {
+    followUser () {
+      this.inProgress = true
+      requestFollow(this.user, this.$store).then(({ sent, updated }) => {
+        this.inProgress = false
+        this.requestSent = sent
+        this.updated = updated
+      })
+    },
+    unfollowUser () {
+      this.inProgress = true
+      requestUnfollow(this.user, this.$store).then(({ updated }) => {
+        this.inProgress = false
+        this.updated = updated
+      })
+    }
+  }
+}
+
+export default FollowCard

src/components/follow_card/follow_card.vue

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

src/components/follow_request_card/follow_request_card.js

@@ -0,0 +1,20 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const FollowRequestCard = {
+  props: ['user'],
+  components: {
+    BasicUserCard
+  },
+  methods: {
+    approveUser () {
+      this.$store.state.api.backendInteractor.approveUser(this.user.id)
+      this.$store.dispatch('removeFollowRequest', this.user)
+    },
+    denyUser () {
+      this.$store.state.api.backendInteractor.denyUser(this.user.id)
+      this.$store.dispatch('removeFollowRequest', this.user)
+    }
+  }
+}
+
+export default FollowRequestCard

src/components/follow_request_card/follow_request_card.vue

@@ -0,0 +1,29 @@
+<template>
+  <basic-user-card :user="user">
+    <div class="follow-request-card-content-container">
+      <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>
+  </basic-user-card>
+</template>
+
+<script src="./follow_request_card.js"></script>
+
+<style lang="scss">
+.follow-request-card-content-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  button {
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+    flex: 1 1;
+    max-width: 12em;
+    min-width: 8em;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>

src/components/follow_requests/follow_requests.js

@@ -1,22 +1,13 @@
-import UserCard from '../user_card/user_card.vue'
+import FollowRequestCard from '../follow_request_card/follow_request_card.vue'
 
 const FollowRequests = {
   components: {
-    UserCard
-  },
-  created () {
-    this.updateRequests()
+    FollowRequestCard
   },
   computed: {
     requests () {
       return this.$store.state.api.followRequests
     }
-  },
-  methods: {
-    updateRequests () {
-      this.$store.state.api.backendInteractor.fetchFollowRequests()
-        .then((requests) => { this.$store.commit('setFollowRequests', requests) })
-    }
   }
 }
 

src/components/follow_requests/follow_requests.vue

@@ -4,7 +4,7 @@
       {{$t('nav.friend_requests')}}
     </div>
     <div class="panel-body">
-      <user-card v-for="request in requests" :key="request.id" :user="request" :showFollows="false" :showApproval="true"></user-card>
+      <FollowRequestCard v-for="request in requests" :key="request.id" :user="request" class="list-item"/>
     </div>
   </div>
 </template>

src/components/gallery/gallery.js

@@ -0,0 +1,55 @@
+import Attachment from '../attachment/attachment.vue'
+import { chunk, last, dropRight } from 'lodash'
+
+const Gallery = {
+  data: () => ({
+    width: 500
+  }),
+  props: [
+    'attachments',
+    'nsfw',
+    'setMedia'
+  ],
+  components: { Attachment },
+  mounted () {
+    this.resize()
+    window.addEventListener('resize', this.resize)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.resize)
+  },
+  computed: {
+    rows () {
+      if (!this.attachments) {
+        return []
+      }
+      const rows = chunk(this.attachments, 3)
+      if (last(rows).length === 1 && rows.length > 1) {
+        // if 1 attachment on last row -> add it to the previous row instead
+        const lastAttachment = last(rows)[0]
+        const allButLastRow = dropRight(rows)
+        last(allButLastRow).push(lastAttachment)
+        return allButLastRow
+      }
+      return rows
+    },
+    rowHeight () {
+      return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
+    },
+    useContainFit () {
+      return this.$store.state.config.useContainFit
+    }
+  },
+  methods: {
+    resize () {
+      // Quick optimization to make resizing not always trigger state change,
+      // only update attachment size in 10px steps
+      const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10
+      if (this.width !== width) {
+        this.width = width
+      }
+    }
+  }
+}
+
+export default Gallery

src/components/gallery/gallery.vue

@@ -0,0 +1,65 @@
+<template>
+  <div ref="galleryContainer" style="width: 100%;">
+    <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
+      <attachment
+        v-for="attachment in row"
+        :setMedia="setMedia"
+        :nsfw="nsfw"
+        :attachment="attachment"
+        :allowPlay="false"
+        :key="attachment.id"
+      />
+    </div>
+  </div>
+</template>
+
+<script src='./gallery.js'></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.gallery-row {
+  height: 200px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  flex-grow: 1;
+  margin-top: 0.5em;
+
+  .attachments, .attachment {
+    margin: 0 0.5em 0 0;
+    flex-grow: 1;
+    height: 100%;
+    box-sizing: border-box;
+    // to make failed images a bit more noticeable on chromium
+    min-width: 2em;
+    &:last-child {
+      margin: 0;
+    }
+  }
+
+  .image-attachment {
+    width: 100%;
+    height: 100%;
+  }
+
+  .video-container {
+    height: 100%;
+  }
+
+  &.contain-fit {
+    img, video {
+      object-fit: contain;
+    }
+  }
+
+  &.cover-fit {
+    img, video {
+      object-fit: cover;
+    }
+  }
+}
+
+</style>

src/components/image_cropper/image_cropper.js

@@ -0,0 +1,146 @@
+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
+    },
+    saveWithoutCroppingButtonlabel: {
+      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')
+    },
+    saveWithoutCroppingText () {
+      return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
+    },
+    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.file)
+        .then(() => this.destroy())
+        .catch((err) => {
+          this.submitError = err
+        })
+        .finally(() => {
+          this.submitting = false
+        })
+    },
+    submitWithoutCropping () {
+      this.submitting = true
+      this.avatarUploadError = null
+      this.submitHandler(false, this.dataUrl)
+        .then(() => this.destroy())
+        .catch((err) => {
+          this.submitError = err
+        })
+        .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) {
+        this.file = fileInput.files[0]
+        let reader = new window.FileReader()
+        reader.onload = (e) => {
+          this.dataUrl = e.target.result
+          this.$emit('open')
+        }
+        reader.readAsDataURL(this.file)
+        this.$emit('changed', this.file, 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,47 @@
+<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>
+        <button class="btn" type="button" :disabled="submitting" @click="submitWithoutCropping" v-text="saveWithoutCroppingText"></button>
+        <i class="icon-spin4 animate-spin" v-if="submitting"></i>
+      </div>
+      <div class="alert error" v-if="submitError">
+        {{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: 10px;
+
+    button {
+      margin-top: 5px;
+    }
+  }
+}
+</style>

src/components/link-preview/link-preview.js

@@ -0,0 +1,21 @@
+const LinkPreview = {
+  name: 'LinkPreview',
+  props: [
+    'card',
+    'size',
+    'nsfw'
+  ],
+  computed: {
+    useImage () {
+      // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
+      // as it makes sure to hide the image if somehow NSFW tagged preview can
+      // exist.
+      return this.card.image && !this.nsfw && this.size !== 'hide'
+    },
+    useDescription () {
+      return this.card.description && /\S/.test(this.card.description)
+    }
+  }
+}
+
+export default LinkPreview

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

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
+      <div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
+        <img :src="card.image"></img>
+      </div>
+      <div class="card-content">
+        <span class="card-host faint">{{ card.provider_name }}</span>
+        <h4 class="card-title">{{ card.title }}</h4>
+        <p class="card-description" v-if="useDescription">{{ card.description }}</p>
+      </div>
+    </a>
+  </div>
+</template>
+
+<script src="./link-preview.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.link-preview-card {
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  overflow: hidden;
+  margin-top: 0.5em;
+
+  .card-image {
+    flex-shrink: 0;
+    width: 120px;
+    max-width: 25%;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: $fallback--attachmentRadius;
+      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+    }
+  }
+
+  .small-image {
+    width: 80px;
+  }
+
+  .card-content {
+    max-height: 100%;
+    margin: 0.5em;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-host {
+    font-size: 12px;
+  }
+
+  .card-description {
+    margin: 0.5em 0 0 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    line-height: 1.2em;
+    // cap description at 3 lines, the 1px is to clean up some stray pixels
+    // TODO: fancier fade-out at the bottom to show off that it's too long?
+    max-height: calc(1.2em * 3 - 1px);
+  }
+
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--attachmentRadius;
+  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+}
+</style>

src/components/list/list.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="list">
+    <div v-for="item in items" class="list-item" :key="getKey(item)">
+      <slot name="item" :item="item" />
+    </div>
+    <div class="list-empty-content faint" v-if="items.length === 0 && !!$slots.empty">
+      <slot name="empty" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item.id
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.list {
+  &-item:not(:last-child) {
+    border-bottom: 1px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+  }
+
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}
+</style>

src/components/login_form/login_form.js

@@ -22,19 +22,33 @@ const LoginForm = {
         oauth: this.$store.state.oauth,
         instance: this.$store.state.instance.server
       }
+      this.clearError()
       oauthApi.getOrCreateApp(data).then((app) => {
         oauthApi.getTokenWithCredentials(
           {
             app,
             instance: data.instance,
             username: this.user.username,
-            password: this.user.password})
-          .then((result) => {
-            this.$store.commit('setToken', result.access_token)
-            this.$store.dispatch('loginUser', result.access_token)
-            this.$router.push('/main/friends')
-          })
+            password: this.user.password
+          }
+        ).then(async (result) => {
+          if (result.error) {
+            this.authError = result.error
+            this.user.password = ''
+            return
+          }
+          this.$store.commit('setToken', result.access_token)
+          try {
+            await this.$store.dispatch('loginUser', result.access_token)
+            this.$router.push({name: 'friends'})
+          } catch (e) {
+            console.log(e)
+          }
+        })
       })
+    },
+    clearError () {
+      this.authError = false
     }
   }
 }

src/components/login_form/login_form.vue

@@ -33,6 +33,13 @@
           </div>
         </div>
       </form>
+      
+      <div v-if="authError" class='form-group'>
+        <div class='alert error'>
+          {{authError}}
+          <i class="button-icon icon-cancel" @click="clearError"></i>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -48,10 +55,6 @@
     width: 10em;
   }
 
-  .error {
-    text-align: center;
-  }
-
   .register {
     flex: 1 1;
   }
@@ -64,4 +67,14 @@
     justify-content: space-between;
   }
 }
+
+.login {
+  .error {
+    text-align: center;
+
+    animation-name: shakeError;
+    animation-duration: 0.4s;
+    animation-timing-function: ease-in-out;
+  }
+}
 </style>

src/components/media_modal/media_modal.js

@@ -0,0 +1,73 @@
+import StillImage from '../still-image/still-image.vue'
+import VideoAttachment from '../video_attachment/video_attachment.vue'
+import fileTypeService from '../../services/file_type/file_type.service.js'
+
+const MediaModal = {
+  components: {
+    StillImage,
+    VideoAttachment
+  },
+  computed: {
+    showing () {
+      return this.$store.state.mediaViewer.activated
+    },
+    media () {
+      return this.$store.state.mediaViewer.media
+    },
+    currentIndex () {
+      return this.$store.state.mediaViewer.currentIndex
+    },
+    currentMedia () {
+      return this.media[this.currentIndex]
+    },
+    canNavigate () {
+      return this.media.length > 1
+    },
+    type () {
+      return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
+    }
+  },
+  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)
+  }
+}
+
+export default MediaModal

src/components/media_modal/media_modal.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
+    <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
+    <VideoAttachment
+      class="modal-image"
+      v-if="type === 'video'"
+      :attachment="currentMedia"
+      :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>
+
+<script src="./media_modal.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.media-modal-view {
+  &:hover {
+    .modal-view-button-arrow {
+      opacity: 0.75;
+
+      &:focus,
+      &:hover {
+        outline: none;
+        box-shadow: none;
+      }
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.modal-image {
+  max-width: 90%;
+  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/media_upload/media_upload.js

@@ -1,28 +1,26 @@
 /* eslint-env browser */
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
+import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 
 const mediaUpload = {
-  mounted () {
-    const input = this.$el.querySelector('input')
-
-    input.addEventListener('change', ({target}) => {
-      for (var i = 0; i < target.files.length; i++) {
-        let file = target.files[i]
-        this.uploadFile(file)
-      }
-    })
-  },
   data () {
     return {
-      uploading: false
+      uploading: false,
+      uploadReady: true
     }
   },
   methods: {
     uploadFile (file) {
       const self = this
       const store = this.$store
+      if (file.size > store.state.instance.uploadlimit) {
+        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
+        const allowedsize = fileSizeFormatService.fileSizeFormat(store.state.instance.uploadlimit)
+        self.$emit('upload-failed', 'file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
+        return
+      }
       const formData = new FormData()
-      formData.append('media', file)
+      formData.append('file', file)
 
       self.$emit('uploading')
       self.uploading = true
@@ -32,7 +30,7 @@ const mediaUpload = {
           self.$emit('uploaded', fileData)
           self.uploading = false
         }, (error) => { // eslint-disable-line handle-callback-err
-          self.$emit('upload-failed')
+          self.$emit('upload-failed', 'default')
           self.uploading = false
         })
     },
@@ -49,6 +47,18 @@ const mediaUpload = {
       } else {
         e.dataTransfer.dropEffect = 'none'
       }
+    },
+    clearFile () {
+      this.uploadReady = false
+      this.$nextTick(() => {
+        this.uploadReady = true
+      })
+    },
+    change ({target}) {
+      for (var i = 0; i < target.files.length; i++) {
+        let file = target.files[i]
+        this.uploadFile(file)
+      }
     }
   },
   props: [

src/components/media_upload/media_upload.vue

@@ -3,7 +3,7 @@
     <label class="btn btn-default" :title="$t('tool_tip.media_upload')">
       <i class="icon-spin4 animate-spin" v-if="uploading"></i>
       <i class="icon-upload" v-if="!uploading"></i>
-      <input type="file" style="position: fixed; top: -100em" multiple="true"></input>
+      <input type="file" v-if="uploadReady" @change="change" style="position: fixed; top: -100em" multiple="true"></input>
     </label>
   </div>
 </template>

src/components/mobile_nav/mobile_nav.js

@@ -0,0 +1,77 @@
+import SideDrawer from '../side_drawer/side_drawer.vue'
+import Notifications from '../notifications/notifications.vue'
+import MobilePostStatusModal from '../mobile_post_status_modal/mobile_post_status_modal.vue'
+import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
+import GestureService from '../../services/gesture_service/gesture_service'
+
+const MobileNav = {
+  components: {
+    SideDrawer,
+    Notifications,
+    MobilePostStatusModal
+  },
+  data: () => ({
+    notificationsCloseGesture: undefined,
+    notificationsOpen: false
+  }),
+  created () {
+    this.notificationsCloseGesture = GestureService.swipeGesture(
+      GestureService.DIRECTION_RIGHT,
+      this.closeMobileNotifications,
+      50
+    )
+  },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    unseenNotifications () {
+      return unseenNotificationsFromStore(this.$store)
+    },
+    unseenNotificationsCount () {
+      return this.unseenNotifications.length
+    },
+    sitename () { return this.$store.state.instance.name }
+  },
+  methods: {
+    toggleMobileSidebar () {
+      this.$refs.sideDrawer.toggleDrawer()
+    },
+    openMobileNotifications () {
+      this.notificationsOpen = true
+    },
+    closeMobileNotifications () {
+      if (this.notificationsOpen) {
+        // make sure to mark notifs seen only when the notifs were open and not
+        // from close-calls.
+        this.notificationsOpen = false
+        this.markNotificationsAsSeen()
+      }
+    },
+    notificationsTouchStart (e) {
+      GestureService.beginSwipe(e, this.notificationsCloseGesture)
+    },
+    notificationsTouchMove (e) {
+      GestureService.updateSwipe(e, this.notificationsCloseGesture)
+    },
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('logout')
+    },
+    markNotificationsAsSeen () {
+      this.$refs.notifications.markAsSeen()
+    }
+  },
+  watch: {
+    $route () {
+      // handles closing notificaitons when you press any router-link on the
+      // notifications.
+      this.closeMobileNotifications()
+    }
+  }
+}
+
+export default MobileNav

src/components/mobile_nav/mobile_nav.vue

@@ -0,0 +1,140 @@
+<template>
+  <nav class='nav-bar container' id="nav">
+    <div class='mobile-inner-nav' @click="scrollToTop()">
+      <div class='item'>
+        <a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
+          <i class="button-icon icon-menu"></i>
+        </a>
+        <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
+      </div>
+      <div class='item right'>
+        <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
+          <i class="button-icon icon-bell-alt"></i>
+          <div class="alert-dot" v-if="unseenNotificationsCount"></div>
+        </a>
+      </div>
+    </div>
+    <SideDrawer ref="sideDrawer" :logout="logout"/>
+    <div v-if="currentUser"
+      class="mobile-notifications-drawer"
+      :class="{ 'closed': !notificationsOpen }"
+      @touchstart="notificationsTouchStart"
+      @touchmove="notificationsTouchMove"
+    >
+      <div class="mobile-notifications-header">
+        <span class="title">{{$t('notifications.notifications')}}</span>
+        <a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
+          <i class="button-icon icon-cancel"/>
+        </a>
+      </div>
+      <div v-if="currentUser" class="mobile-notifications">
+        <Notifications ref="notifications" noHeading="true"/>
+      </div>
+    </div>
+    <MobilePostStatusModal />
+  </nav>
+</template>
+
+<script src="./mobile_nav.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.mobile-inner-nav {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.mobile-nav-button {
+  display: flex;
+  justify-content: center;
+  width: 50px;
+  position: relative;
+  cursor: pointer;
+}
+
+.alert-dot {
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+  position: absolute;
+  left: calc(50% - 4px);
+  top: calc(50% - 4px);
+  margin-left: 6px;
+  margin-top: -6px;
+  background-color: $fallback--cRed;
+  background-color: var(--badgeNotification, $fallback--cRed);
+}
+
+.mobile-notifications-drawer {
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  transition-property: transform;
+  transition-duration: 0.25s;
+  transform: translateX(0);
+
+  &.closed {
+    transform: translateX(100%);
+  }
+}
+
+.mobile-notifications-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  position: absolute;
+  color: var(--topBarText);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
+  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+  box-shadow: var(--topBarShadow);
+
+  .title {
+    font-size: 1.3em;
+    margin-left: 0.6em;
+  }
+}
+
+.mobile-notifications {
+  margin-top: 50px;
+  width: 100vw;
+  height: calc(100vh - 50px);
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  .notifications {
+    padding: 0;
+    border-radius: 0;
+    box-shadow: none;
+    .panel {
+      border-radius: 0;
+      margin: 0;
+      box-shadow: none;
+    }
+    .panel:after {
+      border-radius: 0;
+    }
+    .panel .panel-heading {
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+</style>

src/components/mobile_post_status_modal/mobile_post_status_modal.js

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

src/components/mobile_post_status_modal/mobile_post_status_modal.vue

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

src/components/moderation_tools/moderation_tools.js

@@ -0,0 +1,106 @@
+import DialogModal from '../dialog_modal/dialog_modal.vue'
+import Popper from 'vue-popperjs/src/component/popper.js.vue'
+
+const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
+const STRIP_MEDIA = 'mrf_tag:media-strip'
+const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
+const DISABLE_REMOTE_SUBSCRIPTION = 'mrf_tag:disable-remote-subscription'
+const DISABLE_ANY_SUBSCRIPTION = 'mrf_tag:disable-any-subscription'
+const SANDBOX = 'mrf_tag:sandbox'
+const QUARANTINE = 'mrf_tag:quarantine'
+
+const ModerationTools = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      showDropDown: false,
+      tags: {
+        FORCE_NSFW,
+        STRIP_MEDIA,
+        FORCE_UNLISTED,
+        DISABLE_REMOTE_SUBSCRIPTION,
+        DISABLE_ANY_SUBSCRIPTION,
+        SANDBOX,
+        QUARANTINE
+      },
+      showDeleteUserDialog: false
+    }
+  },
+  components: {
+    DialogModal,
+    Popper
+  },
+  computed: {
+    tagsSet () {
+      return new Set(this.user.tags)
+    },
+    hasTagPolicy () {
+      return this.$store.state.instance.tagPolicyAvailable
+    }
+  },
+  methods: {
+    toggleMenu () {
+      this.showDropDown = !this.showDropDown
+    },
+    hasTag (tagName) {
+      return this.tagsSet.has(tagName)
+    },
+    toggleTag (tag) {
+      const store = this.$store
+      if (this.tagsSet.has(tag)) {
+        store.state.api.backendInteractor.untagUser(this.user, tag).then(response => {
+          if (!response.ok) { return }
+          store.commit('untagUser', {user: this.user, tag})
+        })
+      } else {
+        store.state.api.backendInteractor.tagUser(this.user, tag).then(response => {
+          if (!response.ok) { return }
+          store.commit('tagUser', {user: this.user, tag})
+        })
+      }
+    },
+    toggleRight (right) {
+      const store = this.$store
+      if (this.user.rights[right]) {
+        store.state.api.backendInteractor.deleteRight(this.user, right).then(response => {
+          if (!response.ok) { return }
+          store.commit('updateRight', {user: this.user, right: right, value: false})
+        })
+      } else {
+        store.state.api.backendInteractor.addRight(this.user, right).then(response => {
+          if (!response.ok) { return }
+          store.commit('updateRight', {user: this.user, right: right, value: true})
+        })
+      }
+    },
+    toggleActivationStatus () {
+      const store = this.$store
+      const status = !!this.user.deactivated
+      store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => {
+        if (!response.ok) { return }
+        store.commit('updateActivationStatus', {user: this.user, status: status})
+      })
+    },
+    deleteUserDialog (show) {
+      this.showDeleteUserDialog = show
+    },
+    deleteUser () {
+      const store = this.$store
+      const user = this.user
+      const {id, name} = user
+      store.state.api.backendInteractor.deleteUser(user)
+        .then(e => {
+          this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
+          const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile'
+          const isTargetUser = this.$route.params.name === name || this.$route.params.id === id
+          if (isProfile && isTargetUser) {
+            window.history.back()
+          }
+        })
+    }
+  }
+}
+
+export default ModerationTools

src/components/moderation_tools/moderation_tools.vue

@@ -0,0 +1,158 @@
+<template>
+<div class='block' style='position: relative'>
+  <Popper
+    trigger="click"
+    @hide='showDropDown = false'
+    append-to-body
+    :options="{
+      placement: 'bottom-end',
+      modifiers: {
+        arrow: { enabled: true },
+        offset: { offset: '0, 5px' },
+      }
+    }">
+    <div class="popper-wrapper">
+      <div class="dropdown-menu">
+        <span v-if='user.is_local'>
+          <button class="dropdown-item" @click='toggleRight("admin")'>
+            {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+          </button>
+          <button class="dropdown-item" @click='toggleRight("moderator")'>
+            {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+          </button>
+          <div role="separator" class="dropdown-divider"></div>
+        </span>
+        <button class="dropdown-item" @click='toggleActivationStatus()'>
+          {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
+        </button>
+        <button class="dropdown-item" @click='deleteUserDialog(true)'>
+          {{ $t('user_card.admin_menu.delete_account') }}
+        </button>
+        <div role="separator" class="dropdown-divider" v-if='hasTagPolicy'></div>
+        <span v-if='hasTagPolicy'>
+          <button class="dropdown-item" @click='toggleTag(tags.FORCE_NSFW)'>
+            {{ $t('user_card.admin_menu.force_nsfw') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"></span>
+          </button>
+          <button class="dropdown-item" @click='toggleTag(tags.STRIP_MEDIA)'>
+            {{ $t('user_card.admin_menu.strip_media') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"></span>
+          </button>
+          <button class="dropdown-item" @click='toggleTag(tags.FORCE_UNLISTED)'>
+            {{ $t('user_card.admin_menu.force_unlisted') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"></span>
+          </button>
+          <button class="dropdown-item" @click='toggleTag(tags.SANDBOX)'>
+            {{ $t('user_card.admin_menu.sandbox') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"></span>
+          </button>
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)'>
+            {{ $t('user_card.admin_menu.disable_remote_subscription') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"></span>
+          </button>
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)'>
+            {{ $t('user_card.admin_menu.disable_any_subscription') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"></span>
+          </button>
+          <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.QUARANTINE)'>
+            {{ $t('user_card.admin_menu.quarantine') }}
+            <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"></span>
+          </button>
+        </span>
+      </div>
+    </div>
+    <button slot="reference" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'>
+      {{ $t('user_card.admin_menu.moderation') }}
+    </button>
+  </Popper>
+  <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
+    <span slot="header">{{ $t('user_card.admin_menu.delete_user') }}</span>
+    <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+    <span slot="footer">
+      <button @click='deleteUserDialog(false)'>
+        {{ $t('general.cancel') }}
+      </button>
+      <button class="danger" @click='deleteUser()'>
+        {{ $t('user_card.admin_menu.delete_user') }}
+      </button>
+    </span>
+  </DialogModal>
+</div>
+</template>
+
+<script src="./moderation_tools.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import '../popper/popper.scss';
+
+.dropdown-menu {
+  display: block;
+  padding: .5rem 0;
+  font-size: 1rem;
+  text-align: left;
+  list-style: none;
+  max-width: 100vw;
+  z-index: 10;
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  border: none;
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  .dropdown-divider {
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border, $fallback--border);
+  }
+
+  .dropdown-item {
+    line-height: 21px;
+    margin-right: 5px;
+    overflow: auto;
+    display: block;
+    padding: .25rem 1.0rem .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    text-align: inherit;
+    white-space: normal;
+    border: none;
+    border-radius: 0px;
+    background-color: transparent;
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+
+    &:hover {
+      // TODO: improve the look on breeze themes
+      background-color: $fallback--fg;
+      background-color: var(--btn, $fallback--fg);
+      box-shadow: none;
+    }
+  }
+}
+
+.menu-checkbox {
+  float: right;
+  min-width: 22px;
+  max-width: 22px;
+  min-height: 22px;
+  max-height: 22px;
+  line-height: 22px;
+  text-align: center;
+  border-radius: 0px;
+  background-color: $fallback--fg;
+  background-color: var(--input, $fallback--fg);
+  box-shadow: 0px 0px 2px black inset;
+  box-shadow: var(--inputShadow);
+
+  &.menu-checkbox-checked::after {
+    content: '✔';
+  }
+}
+
+</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.findUser(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,34 @@
+<template>
+  <basic-user-card :user="user">
+    <div class="mute-card-content-container">
+      <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
+        <template v-if="progress">
+          {{ $t('user_card.unmute_progress') }}
+        </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>
+    </div>
+  </basic-user-card>
+</template>
+
+<script src="./mute_card.js"></script>
+
+<style lang="scss">
+.mute-card-content-container {
+  margin-top: 0.5em;
+  text-align: right;
+  button {
+    width: 10em;
+  }
+}
+</style>

src/components/nav_panel/nav_panel.js

@@ -1,11 +1,23 @@
+import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
+
 const NavPanel = {
-  props: [ 'activatePanel' ],
+  created () {
+    if (this.currentUser && this.currentUser.locked) {
+      const store = this.$store
+      const credentials = store.state.users.currentUser.credentials
+
+      followRequestFetcher.startFetching({ store, credentials })
+    }
+  },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
     },
     chat () {
       return this.$store.state.chat.channel
+    },
+    followRequestCount () {
+      return this.$store.state.api.followRequests.length
     }
   }
 }

src/components/nav_panel/nav_panel.vue

@@ -3,32 +3,35 @@
     <div class="panel panel-default">
       <ul>
         <li v-if='currentUser'>
-          <router-link @click.native="activatePanel('timeline')" to='/main/friends'>
+          <router-link :to="{ name: 'friends' }">
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
+          <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
+          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             {{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if='currentUser && currentUser.locked'>
-          <router-link @click.native="activatePanel('timeline')" to='/friend-requests'>
-            {{ $t("nav.friend_requests") }}
+          <router-link :to="{ name: 'friend-requests' }">
+            {{ $t("nav.friend_requests")}}
+            <span v-if='followRequestCount > 0' class="badge follow-request-count">
+              {{followRequestCount}}
+            </span>
           </router-link>
         </li>
         <li>
-          <router-link @click.native="activatePanel('timeline')" to='/main/public'>
+          <router-link :to="{ name: 'public-timeline' }">
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li>
-          <router-link @click.native="activatePanel('timeline')" to='/main/all'>
+          <router-link :to="{ name: 'public-external-timeline' }">
             {{ $t("nav.twkn") }}
           </router-link>
         </li>
@@ -44,6 +47,7 @@
 
 .nav-panel .panel {
   overflow: hidden;
+  box-shadow: var(--panelShadow);
 }
 .nav-panel ul {
   list-style: none;
@@ -51,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/notification/notification.js

@@ -1,7 +1,8 @@
 import Status from '../status/status.vue'
-import StillImage from '../still-image/still-image.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import UserCard from '../user_card/user_card.vue'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const Notification = {
   data () {
@@ -10,25 +11,38 @@ const Notification = {
       betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
-  props: [
-    'notification'
-  ],
+  props: [ 'notification' ],
   components: {
-    Status, StillImage, UserCardContent
+    Status, UserAvatar, UserCard
   },
   methods: {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    },
+    getUser (notification) {
+      return this.$store.state.users.usersObject[notification.from_profile.id]
     }
   },
   computed: {
     userClass () {
-      return highlightClass(this.notification.action.user)
+      return highlightClass(this.notification.from_profile)
     },
     userStyle () {
       const highlight = this.$store.state.config.highlight
-      const user = this.notification.action.user
+      const user = this.notification.from_profile
       return highlightStyle(highlight[user.screen_name])
+    },
+    userInStore () {
+      return this.$store.getters.findUser(this.notification.from_profile.id)
+    },
+    user () {
+      if (this.userInStore) {
+        return this.userInStore
+      }
+      return this.notification.from_profile
     }
   }
 }

src/components/notification/notification.vue

@@ -1,17 +1,20 @@
 <template>
-  <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
-  <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
-    <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-      <StillImage class='avatar-compact' :class="{'better-shadow': betterShadow}" :src="notification.action.user.profile_image_url_original"/>
+  <status
+    v-if="notification.type === 'mention'"
+    :compact="true"
+    :statusoid="notification.status"
+  >
+  </status>
+  <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]" v-else>
+    <a class='avatar-container' :href="notification.from_profile.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
+      <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.from_profile.profile_image_url_original" />
     </a>
     <div class='notification-right'>
-      <div class="usercard notification-usercard" v-if="userExpanded">
-        <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
-      </div>
+      <UserCard :user="getUser(notification)" :rounded="true" :bordered="true" v-if="userExpanded" />
       <span class="notification-details">
         <div class="name-and-action">
-          <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
-          <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+          <span class="username" v-if="!!notification.from_profile.name_html" :title="'@'+notification.from_profile.screen_name" v-html="notification.from_profile.name_html"></span>
+          <span class="username" v-else :title="'@'+notification.from_profile.screen_name">{{ notification.from_profile.name }}</span>
           <span v-if="notification.type === 'like'">
             <i class="fa icon-star lit"></i>
             <small>{{$t('notifications.favorited_you')}}</small>
@@ -25,16 +28,24 @@
             <small>{{$t('notifications.followed_you')}}</small>
           </span>
         </div>
-        <small class="timeago"><router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
+        <div class="timeago" v-if="notification.type === 'follow'">
+          <span class="faint">
+            <timeago :since="notification.created_at" :auto-update="240"></timeago>
+          </span>
+        </div>
+        <div class="timeago" v-else>
+          <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link">
+            <timeago :since="notification.created_at" :auto-update="240"></timeago>
+          </router-link>
+        </div>
       </span>
       <div class="follow-text" v-if="notification.type === 'follow'">
-        <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
+        <router-link :to="userProfileLink(notification.from_profile)">
+          @{{notification.from_profile.screen_name}}
+        </router-link>
       </div>
       <template v-else>
-        <status v-if="notification.status"  class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
-        <div class="broken-favorite" v-else>
-          {{$t('notifications.broken_favorite')}}
-        </div>
+        <status class="faint" :compact="true" :statusoid="notification.action" :noHeading="true"></status>
       </template>
     </div>
   </div>

src/components/notifications/notifications.js

@@ -1,41 +1,38 @@
 import Notification from '../notification/notification.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
-
-import { sortBy, filter } from 'lodash'
+import {
+  notificationsFromStore,
+  visibleNotificationsFromStore,
+  unseenNotificationsFromStore
+} from '../../services/notification_utils/notification_utils.js'
 
 const Notifications = {
-  created () {
-    const store = this.$store
-    const credentials = store.state.users.currentUser.credentials
-
-    notificationsFetcher.startFetching({ store, credentials })
+  props: [
+    'noHeading'
+  ],
+  data () {
+    return {
+      bottomedOut: false
+    }
   },
   computed: {
-    visibleTypes () {
-      return [
-        this.$store.state.config.notificationVisibility.likes && 'like',
-        this.$store.state.config.notificationVisibility.mentions && 'mention',
-        this.$store.state.config.notificationVisibility.repeats && 'repeat',
-        this.$store.state.config.notificationVisibility.follows && 'follow'
-      ].filter(_ => _)
-    },
     notifications () {
-      return this.$store.state.statuses.notifications.data
+      return notificationsFromStore(this.$store)
     },
     error () {
       return this.$store.state.statuses.notifications.error
     },
     unseenNotifications () {
-      return filter(this.visibleNotifications, ({seen}) => !seen)
+      return unseenNotificationsFromStore(this.$store)
     },
     visibleNotifications () {
-      // Don't know why, but sortBy([seen, -action.id]) doesn't work.
-      let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id)
-      sortedNotifications = sortBy(sortedNotifications, 'seen')
-      return sortedNotifications.filter((notification) => this.visibleTypes.includes(notification.type))
+      return visibleNotificationsFromStore(this.$store)
     },
     unseenCount () {
       return this.unseenNotifications.length
+    },
+    loading () {
+      return this.$store.state.statuses.notifications.loading
     }
   },
   components: {
@@ -52,15 +49,21 @@ const Notifications = {
   },
   methods: {
     markAsSeen () {
-      this.$store.dispatch('markNotificationsAsSeen', this.visibleNotifications)
+      this.$store.dispatch('markNotificationsAsSeen')
     },
     fetchOlderNotifications () {
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
+      store.commit('setNotificationsLoading', { value: true })
       notificationsFetcher.fetchAndUpdate({
         store,
         credentials,
         older: true
+      }).then(notifs => {
+        store.commit('setNotificationsLoading', { value: false })
+        if (notifs.length === 0) {
+          this.bottomedOut = true
+        }
       })
     }
   }

src/components/notifications/notifications.scss

@@ -36,36 +36,7 @@
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
 
-  .broken-favorite {
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    color: $fallback--text;
-    color: var(--alertErrorText, $fallback--text);
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
-    padding: 2px .5em
-  }
-
-  .avatar-compact {
-    width: 32px;
-    height: 32px;
-    box-shadow: var(--avatarStatusShadow);
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    overflow: hidden;
-    line-height: 0;
-
-    &.better-shadow {
-      box-shadow: var(--avatarStatusShadowInset);
-      filter: var(--avatarStatusShadowFilter)
-    }
-
-    &.animated::before {
-      display: none;
-    }
-  }
-
-  &:hover .animated.avatar-compact {
+  &:hover .animated.avatar {
     canvas {
       display: none;
     }
@@ -74,10 +45,6 @@
     }
   }
 
-  .notification-usercard {
-    margin: 0;
-  }
-
   .non-mention {
     display: flex;
     flex: 1;
@@ -132,6 +99,7 @@
     flex: 1 1 0;
     display: flex;
     flex-wrap: nowrap;
+    justify-content: space-between;
 
     .name-and-action {
       flex: 1;
@@ -152,9 +120,9 @@
         object-fit: contain
       }
     }
+
     .timeago {
-      float: right;
-      font-size: 12px;
+      margin-right: .2em;
     }
 
     .icon-retweet.lit {

src/components/notifications/notifications.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default">
-      <div class="panel-heading">
+      <div v-if="!noHeading" class="panel-heading">
         <div class="title">
           {{$t('notifications.notifications')}}
           <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
@@ -12,16 +12,21 @@
         <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
       </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
+        <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !notification.seen}'>
           <div class="notification-overlay"></div>
           <notification :notification="notification"></notification>
         </div>
       </div>
       <div class="panel-footer">
-        <a href="#" v-on:click.prevent='fetchOlderNotifications()' v-if="!notifications.loading">
+        <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+          {{$t('notifications.no_more_notifications')}}
+        </div>
+        <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()">
           <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
         </a>
-        <div class="new-status-notification text-center panel-footer" v-else>...</div>
+        <div v-else class="new-status-notification text-center panel-footer">
+          <i class="icon-spin3 animate-spin"/>
+        </div>
       </div>
     </div>
   </div>

src/components/oauth_callback/oauth_callback.js

@@ -11,7 +11,7 @@ const oac = {
       }).then((result) => {
         this.$store.commit('setToken', result.access_token)
         this.$store.dispatch('loginUser', result.access_token)
-        this.$router.push('/main/friends')
+        this.$router.push({name: 'friends'})
       })
     }
   }

src/components/popper/popper.scss

@@ -0,0 +1,70 @@
+@import '../../_variables.scss';
+
+.popper-wrapper {
+  z-index: 8;
+}
+
+.popper-wrapper .popper__arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+}
+
+.popper-wrapper[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+
+.popper-wrapper[x-placement^="top"] .popper__arrow {
+  border-width: 5px 5px 0 5px;
+  border-color: $fallback--bg transparent transparent transparent;
+  border-color: var(--bg, $fallback--bg) transparent transparent transparent;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.popper-wrapper[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.popper-wrapper[x-placement^="bottom"] .popper__arrow {
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent $fallback--bg transparent;
+  border-color: transparent transparent var(--bg, $fallback--bg) transparent;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.popper-wrapper[x-placement^="right"] {
+  margin-left: 5px;
+}
+
+.popper-wrapper[x-placement^="right"] .popper__arrow {
+  border-width: 5px 5px 5px 0;
+  border-color: transparent $fallback--bg transparent transparent;
+  border-color: transparent var(--bg, $fallback--bg) transparent transparent;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.popper-wrapper[x-placement^="left"] {
+  margin-right: 5px;
+}
+
+.popper-wrapper[x-placement^="left"] .popper__arrow {
+  border-width: 5px 0 5px 5px;
+  border-color: transparent transparent transparent $fallback--bg;
+  border-color: transparent transparent transparent var(--bg, $fallback--bg);
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+

src/components/post_status_form/post_status_form.js

@@ -1,5 +1,7 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
+import ScopeSelector from '../scope_selector/scope_selector.vue'
+import EmojiInput from '../emoji-input/emoji-input.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import Completion from '../../services/completion/completion.js'
 import { take, filter, reject, map, uniqBy } from 'lodash'
@@ -16,7 +18,7 @@ const buildMentionsString = ({user, attentions}, currentUser) => {
     return `@${attention.screen_name}`
   })
 
-  return mentions.join(' ') + ' '
+  return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
 }
 
 const PostStatusForm = {
@@ -28,10 +30,14 @@ const PostStatusForm = {
     'subject'
   ],
   components: {
-    MediaUpload
+    MediaUpload,
+    ScopeSelector,
+    EmojiInput
   },
   mounted () {
     this.resize(this.$refs.textarea)
+    const textLength = this.$refs.textarea.value.length
+    this.$refs.textarea.setSelectionRange(textLength, textLength)
 
     if (this.replyTo) {
       this.$refs.textarea.focus()
@@ -41,15 +47,23 @@ const PostStatusForm = {
     const preset = this.$route.query.message
     let statusText = preset || ''
 
+    const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
+          ? this.$store.state.instance.scopeCopy
+          : this.$store.state.config.scopeCopy
+
     if (this.replyTo) {
       const currentUser = this.$store.state.users.currentUser
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
 
-    const scope = (this.copyMessageScope && this.$store.state.config.copyScope || this.copyMessageScope === 'direct')
+    const scope = (this.copyMessageScope && scopeCopy || this.copyMessageScope === 'direct')
           ? 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,
@@ -59,23 +73,15 @@ const PostStatusForm = {
       newStatus: {
         spoilerText: this.subject || '',
         status: statusText,
-        contentType: 'text/plain',
         nsfw: false,
         files: [],
-        visibility: scope
+        visibility: scope,
+        contentType
       },
       caret: 0
     }
   },
   computed: {
-    vis () {
-      return {
-        public: { selected: this.newStatus.visibility === 'public' },
-        unlisted: { selected: this.newStatus.visibility === 'unlisted' },
-        private: { selected: this.newStatus.visibility === 'private' },
-        direct: { selected: this.newStatus.visibility === 'direct' }
-      }
-    },
     candidates () {
       const firstchar = this.textAtCaret.charAt(0)
       if (firstchar === '@') {
@@ -123,6 +129,15 @@ const PostStatusForm = {
     users () {
       return this.$store.state.users.users
     },
+    userDefaultScope () {
+      return this.$store.state.users.currentUser.default_scope
+    },
+    showAllScopes () {
+      const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
+            ? this.$store.state.instance.minimalScopesMode
+            : this.$store.state.config.minimalScopesMode
+      return !minimalScopesMode
+    },
     emoji () {
       return this.$store.state.instance.emoji || []
     },
@@ -147,8 +162,8 @@ const PostStatusForm = {
     isOverLengthLimit () {
       return this.hasStatusLengthLimit && (this.charactersLeft < 0)
     },
-    scopeOptionsEnabled () {
-      return this.$store.state.instance.scopeOptionsEnabled
+    minimalScopesMode () {
+      return this.$store.state.instance.minimalScopesMode
     },
     alwaysShowSubject () {
       if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
@@ -156,11 +171,17 @@ const PostStatusForm = {
       } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
         return this.$store.state.instance.alwaysShowSubjectInput
       } else {
-        return this.$store.state.instance.scopeOptionsEnabled
+        return true
       }
     },
     formattingOptionsEnabled () {
       return this.$store.state.instance.formattingOptionsEnabled
+    },
+    postFormats () {
+      return this.$store.state.instance.postFormats || []
+    },
+    safeDMEnabled () {
+      return this.$store.state.instance.safeDM
     }
   },
   methods: {
@@ -209,6 +230,9 @@ const PostStatusForm = {
         this.highlighted = 0
       }
     },
+    onKeydown (e) {
+      e.stopPropagation()
+    },
     setCaret ({target: {selectionStart}}) {
       this.caret = selectionStart
     },
@@ -244,9 +268,11 @@ const PostStatusForm = {
             visibility: newStatus.visibility,
             contentType: newStatus.contentType
           }
+          this.$refs.mediaUpload.clearFile()
           this.$emit('posted')
           let el = this.$el.querySelector('textarea')
-          el.style.height = '16px'
+          el.style.height = 'auto'
+          el.style.height = undefined
           this.error = null
         } else {
           this.error = data.error
@@ -262,6 +288,11 @@ const PostStatusForm = {
       let index = this.newStatus.files.indexOf(fileInfo)
       this.newStatus.files.splice(index, 1)
     },
+    uploadFailed (errString, templateArgs) {
+      templateArgs = templateArgs || {}
+      this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
+      this.enableSubmit()
+    },
     disableSubmit () {
       this.submitDisabled = true
     },
@@ -273,6 +304,8 @@ const PostStatusForm = {
     },
     paste (e) {
       if (e.clipboardData.files.length > 0) {
+        // prevent pasting of file as text
+        e.preventDefault()
         // Strangely, files property gets emptied after event propagation
         // Trying to wrap it in array doesn't work. Plus I doubt it's possible
         // to hold more than one file in clipboard.
@@ -289,13 +322,15 @@ const PostStatusForm = {
       e.dataTransfer.dropEffect = 'copy'
     },
     resize (e) {
-      if (!e.target) { return }
-      const vertPadding = Number(window.getComputedStyle(e.target)['padding-top'].substr(0, 1)) +
-            Number(window.getComputedStyle(e.target)['padding-bottom'].substr(0, 1))
-      e.target.style.height = 'auto'
-      e.target.style.height = `${e.target.scrollHeight - vertPadding}px`
-      if (e.target.value === '') {
-        e.target.style.height = '16px'
+      const target = e.target || e
+      if (!(target instanceof window.Element)) { return }
+      const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) +
+            Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1))
+      // Auto is needed to make textbox shrink when removing lines
+      target.style.height = 'auto'
+      target.style.height = `${target.scrollHeight - vertPadding}px`
+      if (target.value === '') {
+        target.style.height = null
       }
     },
     clearError () {

src/components/post_status_form/post_status_form.vue

@@ -3,23 +3,28 @@
   <form @submit.prevent="postStatus(newStatus)">
     <div class="form-group" >
       <i18n
-        v-if="!this.$store.state.users.currentUser.locked && this.newStatus.visibility == 'private'"
+        v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
         path="post_status.account_not_locked_warning"
         tag="p"
         class="visibility-notice">
-        <router-link to="/user-settings">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
+        <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
       </i18n>
-      <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
-      <input
+      <p v-if="newStatus.visibility === 'direct'" class="visibility-notice">
+        <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
+        <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
+      </p>
+      <EmojiInput
         v-if="newStatus.spoilerText || alwaysShowSubject"
         type="text"
         :placeholder="$t('post_status.content_warning')"
         v-model="newStatus.spoilerText"
-        class="form-cw">
+        classname="form-control"
+      />
       <textarea
         ref="textarea"
         @click="setCaret"
         @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
+        @keydown="onKeydown"
         @keydown.down="cycleForward"
         @keydown.up="cycleBackward"
         @keydown.shift.tab="cycleBackward"
@@ -30,41 +35,47 @@
         @drop="fileDrop"
         @dragover.prevent="fileDrag"
         @input="resize"
-        @paste="paste">
+        @paste="paste"
+        :disabled="posting"
+      >
       </textarea>
       <div class="visibility-tray">
         <span class="text-format" v-if="formattingOptionsEnabled">
           <label for="post-content-type" class="select">
             <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
-              <option value="text/plain">{{$t('post_status.content_type.plain_text')}}</option>
-              <option value="text/html">HTML</option>
-              <option value="text/markdown">Markdown</option>
+              <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+                {{$t(`post_status.content_type["${postFormat}"]`)}}
+              </option>
             </select>
             <i class="icon-down-open"></i>
           </label>
         </span>
 
-        <div v-if="scopeOptionsEnabled">
-          <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')"></i>
-          <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
-          <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
-          <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
-        </div>
+        <scope-selector
+          :showAll="showAllScopes"
+          :userDefault="userDefaultScope"
+          :originalScope="copyMessageScope"
+          :initialScope="newStatus.visibility"
+          :onScopeChange="changeVis"/>
       </div>
     </div>
-    <div style="position:relative;" v-if="candidates">
-        <div class="autocomplete-panel">
-          <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">
-            <div class="autocomplete" :class="{ highlighted: candidate.highlighted }">
-              <span v-if="candidate.img"><img :src="candidate.img"></img></span>
-              <span v-else>{{candidate.utf}}</span>
-              <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
-            </div>
+    <div class="autocomplete-panel" v-if="candidates">
+        <div class="autocomplete-panel-body">
+          <div
+            v-for="(candidate, index) in candidates"
+            :key="index"
+            @click="replace(candidate.utf || (candidate.screen_name + ' '))"
+            class="autocomplete-item"
+            :class="{ highlighted: candidate.highlighted }"
+          >
+            <span v-if="candidate.img"><img :src="candidate.img" /></span>
+            <span v-else>{{candidate.utf}}</span>
+            <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
           </div>
         </div>
       </div>
       <div class='form-bottom'>
-        <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
+        <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
 
         <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
         <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
@@ -75,16 +86,16 @@
       </div>
       <div class='alert error' v-if="error">
         Error: {{ error }}
-        <i class="icon-cancel" @click="clearError"></i>
+        <i class="button-icon icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
         <div class="media-upload-wrapper" v-for="file in newStatus.files">
-          <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
+          <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
           <div class="media-upload-container attachment">
-            <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
-            <video v-if="type(file) === 'video'" :src="file.image" controls></video>
-            <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
-            <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
+            <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
+            <video v-if="type(file) === 'video'" :src="file.url" controls></video>
+            <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
+            <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
           </div>
         </div>
       </div>
@@ -118,6 +129,14 @@
   }
 }
 
+.post-status-form {
+  .visibility-tray {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+  }
+}
+
 .post-status-form, .login {
   .form-bottom {
     display: flex;
@@ -250,52 +269,5 @@
     cursor: pointer;
     z-index: 4;
   }
-
-  .autocomplete-panel {
-    margin: 0 0.5em 0 0.5em;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    position: absolute;
-    z-index: 1;
-    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
-    // this doesn't match original but i don't care, making it uniform.
-    box-shadow: var(--popupShadow);
-    min-width: 75%;
-    background: $fallback--bg;
-    background: var(--bg, $fallback--bg);
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-  }
-
-  .autocomplete {
-    cursor: pointer;
-    padding: 0.2em 0.4em 0.2em 0.4em;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-    display: flex;
-
-    img {
-      width: 24px;
-      height: 24px;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
-      object-fit: contain;
-    }
-
-    span {
-      line-height: 24px;
-      margin: 0 0.1em 0 0.2em;
-    }
-
-    small {
-      margin-left: .5em;
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
-    }
-
-    &.highlighted {
-      background-color: $fallback--fg;
-      background-color: var(--lightBg, $fallback--fg);
-    }
-  }
 }
 </style>

src/components/progress_button/progress_button.vue

@@ -0,0 +1,35 @@
+<template>
+  <button :disabled="progress || disabled" @click="onClick">
+    <template v-if="progress">
+      <slot name="progress" />
+    </template>
+    <template v-else>
+      <slot />
+    </template>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean
+    },
+    click: { // click event handler. Must return a promise
+      type: Function,
+      default: () => Promise.resolve()
+    }
+  },
+  data () {
+    return {
+      progress: false
+    }
+  },
+  methods: {
+    onClick () {
+      this.progress = true
+      this.click().then(() => { this.progress = false })
+    }
+  }
+}
+</script>

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('startFetchingTimeline', { 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('startFetchingTimeline', { timeline: 'public' })
   },
   destroyed () {
     this.$store.dispatch('stopFetching', 'public')

src/components/registration/registration.js

@@ -11,7 +11,8 @@ const registration = {
       username: '',
       password: '',
       confirm: ''
-    }
+    },
+    captcha: {}
   }),
   validations: {
     user: {
@@ -27,11 +28,16 @@ const registration = {
   },
   created () {
     if ((!this.registrationOpen && !this.token) || this.signedIn) {
-      this.$router.push('/main/all')
+      this.$router.push({name: 'root'})
     }
+
+    this.setCaptcha()
   },
   computed: {
     token () { return this.$route.params.token },
+    bioPlaceholder () {
+      return this.$t('registration.bio_placeholder').replace(/\s*\n\s*/g, ' \n')
+    },
     ...mapState({
       registrationOpen: (state) => state.instance.registrationOpen,
       signedIn: (state) => !!state.users.currentUser,
@@ -41,21 +47,28 @@ const registration = {
     })
   },
   methods: {
-    ...mapActions(['signUp']),
+    ...mapActions(['signUp', 'getCaptcha']),
     async submit () {
       this.user.nickname = this.user.username
       this.user.token = this.token
 
+      this.user.captcha_solution = this.captcha.solution
+      this.user.captcha_token = this.captcha.token
+      this.user.captcha_answer_data = this.captcha.answer_data
+
       this.$v.$touch()
 
       if (!this.$v.$invalid) {
         try {
           await this.signUp(this.user)
-          this.$router.push('/main/friends')
+          this.$router.push({name: 'friends'})
         } catch (error) {
           console.warn('Registration failed: ' + error)
         }
       }
+    },
+    setCaptcha () {
+      this.getCaptcha().then(cpt => { this.captcha = cpt })
     }
   }
 }

src/components/registration/registration.vue

@@ -9,7 +9,7 @@
           <div class='text-fields'>
             <div class='form-group' :class="{ 'form-group--error': $v.user.username.$error }">
               <label class='form--label' for='sign-up-username'>{{$t('login.username')}}</label>
-              <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' placeholder='e.g. lain'>
+              <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' :placeholder="$t('registration.username_placeholder')">
             </div>
             <div class="form-error" v-if="$v.user.username.$dirty">
               <ul>
@@ -21,7 +21,7 @@
 
             <div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
               <label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
-              <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' placeholder='e.g. Lain Iwakura'>
+              <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')">
             </div>
             <div class="form-error" v-if="$v.user.fullname.$dirty">
               <ul>
@@ -44,8 +44,8 @@
             </div>
 
             <div class='form-group'>
-              <label class='form--label' for='bio'>{{$t('registration.bio')}}</label>
-              <input :disabled="isPending" v-model='user.bio' class='form-control' id='bio'>
+              <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label>
+              <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="bioPlaceholder"></textarea>
             </div>
 
             <div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
@@ -75,6 +75,20 @@
               </ul>
             </div>
 
+            <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
+              <label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>
+
+              <template v-if="captcha.type == 'kocaptcha'">
+                <img v-bind:src="captcha.url" v-on:click="setCaptcha">
+
+                <sub>{{$t('registration.new_captcha')}}</sub>
+
+                <input :disabled="isPending"
+                  v-model='captcha.solution'
+                  class='form-control' id='captcha-answer' type='text' autocomplete="off">
+              </template>
+            </div>
+
             <div class='form-group' v-if='token' >
               <label for='token'>{{$t('registration.token')}}</label>
               <input disabled='true' v-model='token' class='form-control' id='token' type='text'>
@@ -125,6 +139,10 @@ $validations-cRed: #f04124;
     flex-direction: column;
   }
 
+  textarea {
+    min-height: 100px;
+  }
+
   .form-group {
     display: flex;
     flex-direction: column;
@@ -133,24 +151,6 @@ $validations-cRed: #f04124;
     margin-bottom: 1em;
   }
 
-  @keyframes shakeError {
-    0% {
-      transform: translateX(0); }
-    15% {
-      transform: translateX(0.375rem); }
-    30% {
-      transform: translateX(-0.375rem); }
-    45% {
-      transform: translateX(0.375rem); }
-    60% {
-      transform: translateX(-0.375rem); }
-    75% {
-      transform: translateX(0.375rem); }
-    90% {
-      transform: translateX(-0.375rem); }
-    100% {
-      transform: translateX(0); } }
-
   .form-group--error {
     animation-name: shakeError;
     animation-duration: .6s;
@@ -201,7 +201,7 @@ $validations-cRed: #f04124;
   }
 }
 
-@media all and (max-width: 959px) {
+@media all and (max-width: 800px) {
   .registration-form .container {
     flex-direction: column-reverse;
   }

src/components/remote_follow/remote_follow.js

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

src/components/remote_follow/remote_follow.vue

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

src/components/retweet_button/retweet_button.vue

@@ -1,15 +1,15 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-      <i :class='classes' class='retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
+      <i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
       <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
     </template>
     <template v-else>
-      <i :class='classes' class='icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
+      <i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
     </template>
   </div>
   <div v-else-if="!loggedIn">
-    <i :class='classes' class='icon-retweet' :title="$t('tool_tip.repeat')"></i>
+    <i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i>
     <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
 </template>

src/components/scope_selector/scope_selector.js

@@ -0,0 +1,54 @@
+const ScopeSelector = {
+  props: [
+    'showAll',
+    'userDefault',
+    'originalScope',
+    'initialScope',
+    'onScopeChange'
+  ],
+  data () {
+    return {
+      currentScope: this.initialScope
+    }
+  },
+  computed: {
+    showNothing () {
+      return !this.showPublic && !this.showUnlisted && !this.showPrivate && !this.showDirect
+    },
+    showPublic () {
+      return this.originalScope !== 'direct' && this.shouldShow('public')
+    },
+    showUnlisted () {
+      return this.originalScope !== 'direct' && this.shouldShow('unlisted')
+    },
+    showPrivate () {
+      return this.originalScope !== 'direct' && this.shouldShow('private')
+    },
+    showDirect () {
+      return this.shouldShow('direct')
+    },
+    css () {
+      return {
+        public: {selected: this.currentScope === 'public'},
+        unlisted: {selected: this.currentScope === 'unlisted'},
+        private: {selected: this.currentScope === 'private'},
+        direct: {selected: this.currentScope === 'direct'}
+      }
+    }
+  },
+  methods: {
+    shouldShow (scope) {
+      return this.showAll ||
+        this.currentScope === scope ||
+        this.originalScope === scope ||
+        this.userDefault === scope ||
+        scope === 'direct'
+    },
+    changeVis (scope) {
+      this.currentScope = scope
+      this.onScopeChange && this.onScopeChange(scope)
+    }
+  }
+}
+
+export default ScopeSelector

src/components/scope_selector/scope_selector.vue

@@ -0,0 +1,30 @@
+<template>
+<div v-if="!showNothing">
+  <i class="icon-mail-alt"
+     :class="css.direct"
+     :title="$t('post_status.scope.direct')"
+     v-if="showDirect"
+     @click="changeVis('direct')">
+  </i>
+  <i class="icon-lock"
+     :class="css.private"
+     :title="$t('post_status.scope.private')"
+     v-if="showPrivate"
+     v-on:click="changeVis('private')">
+  </i>
+  <i class="icon-lock-open-alt"
+     :class="css.unlisted"
+     :title="$t('post_status.scope.unlisted')"
+     v-if="showUnlisted"
+     @click="changeVis('unlisted')">
+  </i>
+  <i class="icon-globe"
+     :class="css.public"
+     :title="$t('post_status.scope.public')"
+     v-if="showPublic"
+     @click="changeVis('public')">
+  </i>
+</div>
+</template>
+
+<script src="./scope_selector.js"></script>

src/components/selectable_list/selectable_list.js

@@ -0,0 +1,66 @@
+import List from '../list/list.vue'
+import Checkbox from '../checkbox/checkbox.vue'
+
+const SelectableList = {
+  components: {
+    List,
+    Checkbox
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    getKey: {
+      type: Function,
+      default: item => item.id
+    }
+  },
+  data () {
+    return {
+      selected: []
+    }
+  },
+  computed: {
+    allKeys () {
+      return this.items.map(this.getKey)
+    },
+    filteredSelected () {
+      return this.allKeys.filter(key => this.selected.indexOf(key) !== -1)
+    },
+    allSelected () {
+      return this.filteredSelected.length === this.items.length
+    },
+    noneSelected () {
+      return this.filteredSelected.length === 0
+    },
+    someSelected () {
+      return !this.allSelected && !this.noneSelected
+    }
+  },
+  methods: {
+    isSelected (item) {
+      return this.filteredSelected.indexOf(this.getKey(item)) !== -1
+    },
+    toggle (checked, item) {
+      const key = this.getKey(item)
+      const oldChecked = this.isSelected(key)
+      if (checked !== oldChecked) {
+        if (checked) {
+          this.selected.push(key)
+        } else {
+          this.selected.splice(this.selected.indexOf(key), 1)
+        }
+      }
+    },
+    toggleAll (value) {
+      if (value) {
+        this.selected = this.allKeys.slice(0)
+      } else {
+        this.selected = []
+      }
+    }
+  }
+}
+
+export default SelectableList

src/components/selectable_list/selectable_list.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="selectable-list">
+    <div class="selectable-list-header" v-if="items.length > 0">
+      <div class="selectable-list-checkbox-wrapper">
+        <Checkbox :checked="allSelected" @change="toggleAll" :indeterminate="someSelected">{{ $t('selectable_list.select_all') }}</Checkbox>
+      </div>
+      <div class="selectable-list-header-actions">
+        <slot name="header" :selected="filteredSelected" />
+      </div>
+    </div>
+    <List :items="items" :getKey="getKey">
+      <template slot="item" slot-scope="{item}">
+        <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(item) }">
+          <div class="selectable-list-checkbox-wrapper">
+            <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+          </div>
+          <slot name="item" :item="item" />
+        </div>
+      </template>
+      <template slot="empty"><slot name="empty" /></template>
+    </List>
+  </div>
+</template>
+
+<script src="./selectable_list.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.selectable-list {
+  &-item-inner {
+    display: flex;
+    align-items: center;
+  }
+
+  &-item-selected-inner {
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
+  }
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 0.6em 0;
+    border-bottom: 2px solid;
+    border-bottom-color: $fallback--border;
+    border-bottom-color: var(--border, $fallback--border);
+
+    &-actions {
+      flex: 1;
+    }
+  }
+
+  &-checkbox-wrapper {
+    padding: 0 10px;
+    flex: none;
+  }
+}
+</style>

src/components/settings/settings.js

@@ -1,8 +1,13 @@
 /* eslint-env browser */
-import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
+import { filter, trim } from 'lodash'
+
+import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
-import { filter, trim } from 'lodash'
+import { extractCommit } from '../../services/version/version.service'
+
+const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
+const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
 
 const settings = {
   data () {
@@ -12,47 +17,86 @@ const settings = {
     return {
       hideAttachmentsLocal: user.hideAttachments,
       hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
+      maxThumbnails: user.maxThumbnails,
       hideNsfwLocal: user.hideNsfw,
+      useOneClickNsfw: user.useOneClickNsfw,
       hideISPLocal: user.hideISP,
+      preloadImage: user.preloadImage,
+
       hidePostStatsLocal: typeof user.hidePostStats === 'undefined'
         ? instance.hidePostStats
         : user.hidePostStats,
       hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats),
+
       hideUserStatsLocal: typeof user.hideUserStats === 'undefined'
         ? instance.hideUserStats
         : 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,
-      loopVideoSilentOnlyLocal: user.loopVideoSilentOnly,
       muteWordsString: user.muteWords.join('\n'),
       autoLoadLocal: user.autoLoad,
       streamingLocal: user.streaming,
       pauseOnUnfocusedLocal: user.pauseOnUnfocused,
       hoverPreviewLocal: user.hoverPreview,
+
+      hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined'
+        ? instance.hideMutedPosts
+        : user.hideMutedPosts,
+      hideMutedPostsDefault: this.$t('settings.values.' + instance.hideMutedPosts),
+
       collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'
         ? instance.collapseMessageWithSubject
         : user.collapseMessageWithSubject,
       collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject),
+
       subjectLineBehaviorLocal: typeof user.subjectLineBehavior === 'undefined'
         ? instance.subjectLineBehavior
         : 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,
-      alwaysShowSubjectInputDefault: instance.alwaysShowSubjectInput,
-      scopeCopyLocal: user.scopeCopy,
+      alwaysShowSubjectInputDefault: this.$t('settings.values.' + instance.alwaysShowSubjectInput),
+
+      scopeCopyLocal: typeof user.scopeCopy === 'undefined'
+        ? instance.scopeCopy
+        : user.scopeCopy,
       scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
+
+      minimalScopesModeLocal: typeof user.minimalScopesMode === 'undefined'
+        ? instance.minimalScopesMode
+        : user.minimalScopesMode,
+      minimalScopesModeDefault: this.$t('settings.values.' + instance.minimalScopesMode),
+
       stopGifs: user.stopGifs,
+      webPushNotificationsLocal: user.webPushNotifications,
+      loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,
       loopSilentAvailable:
         // Firefox
         Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
         // Chrome-likes
         Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
         // Future spec, still not supported in Nightly 63 as of 08/2018
-        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
+        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
+      playVideosInModal: user.playVideosInModal,
+      useContainFit: user.useContainFit,
+
+      backendVersion: instance.backendVersion,
+      frontendVersion: instance.frontendVersion
     }
   },
   components: {
@@ -66,6 +110,16 @@ const settings = {
     },
     currentSaveStateNotice () {
       return this.$store.state.interface.settings.currentSaveStateNotice
+    },
+    postFormats () {
+      return this.$store.state.instance.postFormats || []
+    },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    frontendVersionLink () {
+      return pleromaFeCommitUrl + this.frontendVersion
+    },
+    backendVersionLink () {
+      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
     }
   },
   watch: {
@@ -81,9 +135,18 @@ 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 })
     },
+    useOneClickNsfw (value) {
+      this.$store.dispatch('setOption', { name: 'useOneClickNsfw', value })
+    },
+    preloadImage (value) {
+      this.$store.dispatch('setOption', { name: 'preloadImage', value })
+    },
     hideISPLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideISP', value })
     },
@@ -124,6 +187,9 @@ const settings = {
       value = filter(value.split('\n'), (word) => trim(word).length > 0)
       this.$store.dispatch('setOption', { name: 'muteWords', value })
     },
+    hideMutedPostsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hideMutedPosts', value })
+    },
     collapseMessageWithSubjectLocal (value) {
       this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
     },
@@ -136,8 +202,28 @@ const settings = {
     subjectLineBehaviorLocal (value) {
       this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })
     },
+    postContentTypeLocal (value) {
+      this.$store.dispatch('setOption', { name: 'postContentType', value })
+    },
+    minimalScopesModeLocal (value) {
+      this.$store.dispatch('setOption', { name: 'minimalScopesMode', value })
+    },
     stopGifs (value) {
       this.$store.dispatch('setOption', { name: 'stopGifs', value })
+    },
+    webPushNotificationsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'webPushNotifications', value })
+      if (value) this.$store.dispatch('registerPushNotifications')
+    },
+    playVideosInModal (value) {
+      this.$store.dispatch('setOption', { name: 'playVideosInModal', value })
+    },
+    useContainFit (value) {
+      this.$store.dispatch('setOption', { name: 'useContainFit', value })
+    },
+    maxThumbnails (value) {
+      value = this.maxThumbnails = Math.floor(Math.max(value, 0))
+      this.$store.dispatch('setOption', { name: 'maxThumbnails', 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>
@@ -36,11 +36,13 @@
         <div class="setting-item">
           <h2>{{$t('nav.timeline')}}</h2>
           <ul class="setting-list">
+            <li>
+              <input type="checkbox" id="hideMutedPosts" v-model="hideMutedPostsLocal">
+              <label for="hideMutedPosts">{{$t('settings.hide_muted_posts')}} {{$t('settings.instance_default', { value: hideMutedPostsDefault })}}</label>
+            </li>
             <li>
               <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
-              <label for="collapseMessageWithSubject">
-                {{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}
-              </label>
+              <label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}</label>
             </li>
             <li>
               <input type="checkbox" id="streaming" v-model="streamingLocal">
@@ -100,6 +102,26 @@
                 </label>
               </div>
             </li>
+            <li>
+              <div>
+                {{$t('settings.post_status_content_type')}}
+                <label for="postContentType" class="select">
+                  <select id="postContentType" v-model="postContentTypeLocal">
+                    <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+                      {{$t(`post_status.content_type["${postFormat}"]`)}}
+                      {{postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : ''}}
+                    </option>
+                  </select>
+                  <i class="icon-down-open"/>
+                </label>
+              </div>
+            </li>
+            <li>
+              <input type="checkbox" id="minimalScopesMode" v-model="minimalScopesModeLocal">
+              <label for="minimalScopesMode">
+                {{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}}
+              </label>
+            </li>
           </ul>
         </div>
 
@@ -114,10 +136,24 @@
               <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
               <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
             </li>
+            <li>
+              <label for="maxThumbnails">{{$t('settings.max_thumbnails')}}</label>
+              <input class="number-input" type="number" id="maxThumbnails" v-model.number="maxThumbnails" min="0" step="1">
+            </li>
             <li>
               <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
               <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
             </li>
+            <ul class="setting-list suboptions" >
+              <li>
+                <input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
+                <label for="preloadImage">{{$t('settings.preload_images')}}</label>
+              </li>
+              <li>
+                <input :disabled="!hideNsfwLocal" type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
+                <label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
+              </li>
+            </ul>
             <li>
               <input type="checkbox" id="stopGifs" v-model="stopGifs">
               <label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
@@ -135,6 +171,26 @@
                 </li>
               </ul>
             </li>
+            <li>
+              <input type="checkbox" id="playVideosInModal" v-model="playVideosInModal">
+              <label for="playVideosInModal">{{$t('settings.play_videos_in_modal')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="useContainFit" v-model="useContainFit">
+              <label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
+            </li>
+          </ul>
+        </div>
+
+       <div class="setting-item">
+          <h2>{{$t('settings.notifications')}}</h2>
+          <ul class="setting-list">
+            <li>
+              <input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal">
+              <label for="webPushNotifications">
+                {{$t('settings.enable_web_push_notifications')}}
+              </label>
+            </li>
           </ul>
         </div>
       </div>
@@ -175,7 +231,6 @@
                 </label>
               </li>
             </ul>
-            </label>
           </div>
           <div>
             {{$t('settings.replies_in_timeline')}}
@@ -202,11 +257,40 @@
           </div>
         </div>
         <div class="setting-item">
-          <p>{{$t('settings.filtering_explanation')}}</p>
-          <textarea id="muteWords" v-model="muteWordsString"></textarea>
+          <div>
+            <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>
+      <div :label="$t('settings.version.title')" >
+        <div class="setting-item">
+          <ul class="setting-list">
+            <li>
+              <p>{{$t('settings.version.backend_version')}}</p>
+              <ul class="option-list">
+                <li>
+                  <a :href="backendVersionLink" target="_blank">{{backendVersion}}</a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <p>{{$t('settings.version.frontend_version')}}</p>
+              <ul class="option-list">
+                <li>
+                  <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
+                </li>
+              </ul>
+            </li>
+          </ul>
         </div>
       </div>
-
     </tab-switcher>
 </keep-alive>
   </div>
@@ -244,6 +328,7 @@
 
   textarea {
     width: 100%;
+    max-width: 100%;
     height: 100px;
   }
 
@@ -253,25 +338,15 @@
     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;
     padding: 0 2em;
   }
+
+  .number-input {
+    max-width: 6em;
+  }
 }
 .select-multiple {
   display: flex;

src/components/side_drawer/side_drawer.js

@@ -0,0 +1,56 @@
+import UserCard from '../user_card/user_card.vue'
+import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
+import GestureService from '../../services/gesture_service/gesture_service'
+
+const SideDrawer = {
+  props: [ 'logout' ],
+  data: () => ({
+    closed: true,
+    closeGesture: undefined
+  }),
+  created () {
+    this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)
+  },
+  components: { UserCard },
+  computed: {
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
+    chat () { return this.$store.state.chat.channel.state === 'joined' },
+    unseenNotifications () {
+      return unseenNotificationsFromStore(this.$store)
+    },
+    unseenNotificationsCount () {
+      return this.unseenNotifications.length
+    },
+    suggestionsEnabled () {
+      return this.$store.state.instance.suggestionsEnabled
+    },
+    logo () {
+      return this.$store.state.instance.logo
+    },
+    sitename () {
+      return this.$store.state.instance.name
+    },
+    followRequestCount () {
+      return this.$store.state.api.followRequests.length
+    }
+  },
+  methods: {
+    toggleDrawer () {
+      this.closed = !this.closed
+    },
+    doLogout () {
+      this.logout()
+      this.toggleDrawer()
+    },
+    touchStart (e) {
+      GestureService.beginSwipe(e, this.closeGesture)
+    },
+    touchMove (e) {
+      GestureService.updateSwipe(e, this.closeGesture)
+    }
+  }
+}
+
+export default SideDrawer

src/components/side_drawer/side_drawer.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="side-drawer-container"
+    :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
+  >
+    <div class="side-drawer-darken" :class="{ 'side-drawer-darken-closed': closed}" />
+    <div class="side-drawer"
+      :class="{'side-drawer-closed': closed}"
+      @touchstart="touchStart"
+      @touchmove="touchMove"
+    >
+      <div class="side-drawer-heading" @click="toggleDrawer">
+        <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
+        <div class="side-drawer-logo-wrapper" v-else>
+          <img :src="logo"/>
+          <span>{{sitename}}</span>
+        </div>
+      </div>
+      <ul>
+        <li v-if="!currentUser" @click="toggleDrawer">
+          <router-link :to="{ name: 'login' }">
+            {{ $t("login.login") }}
+          </router-link>
+        </li>
+        <li v-if="currentUser" @click="toggleDrawer">
+          <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
+            {{ $t("nav.dms") }}
+          </router-link>
+        </li>
+      </ul>
+      <ul>
+        <li v-if="currentUser" @click="toggleDrawer">
+          <router-link :to="{ name: 'friends' }">
+            {{ $t("nav.timeline") }}
+          </router-link>
+        </li>
+        <li v-if="currentUser && currentUser.locked" @click="toggleDrawer">
+          <router-link to='/friend-requests'>
+            {{ $t("nav.friend_requests") }}
+            <span v-if='followRequestCount > 0' class="badge follow-request-count">
+              {{followRequestCount}}
+            </span>
+
+          </router-link>
+        </li>
+        <li @click="toggleDrawer">
+          <router-link to='/main/public'>
+            {{ $t("nav.public_tl") }}
+          </router-link>
+        </li>
+        <li @click="toggleDrawer">
+          <router-link to='/main/all'>
+            {{ $t("nav.twkn") }}
+          </router-link>
+        </li>
+        <li v-if="currentUser && chat" @click="toggleDrawer">
+          <router-link :to="{ name: 'chat' }">
+            {{ $t("nav.chat") }}
+          </router-link>
+        </li>
+      </ul>
+      <ul>
+        <li @click="toggleDrawer">
+          <router-link :to="{ name: 'user-search' }">
+            {{ $t("nav.user_search") }}
+          </router-link>
+        </li>
+        <li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer">
+          <router-link :to="{ name: 'who-to-follow' }">
+            {{ $t("nav.who_to_follow") }}
+          </router-link>
+        </li>
+        <li @click="toggleDrawer">
+          <router-link :to="{ name: 'settings' }">
+            {{ $t("settings.settings") }}
+          </router-link>
+        </li>
+        <li @click="toggleDrawer">
+          <router-link :to="{ name: 'about'}">
+            {{ $t("nav.about") }}
+          </router-link>
+        </li>
+        <li v-if="currentUser" @click="toggleDrawer">
+          <a @click="doLogout" href="#">
+            {{ $t("login.logout") }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div class="side-drawer-click-outside"
+      @click.stop.prevent="toggleDrawer"
+      :class="{'side-drawer-click-outside-closed': closed}"
+    ></div>
+  </div>
+</template>
+
+<script src="./side_drawer.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.side-drawer-container {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: stretch;
+  transition-duration: 0s;
+  transition-property: transform;
+}
+
+.side-drawer-container-open {
+  transform: translate(0%);
+}
+
+.side-drawer-container-closed {
+  transition-delay: 0.35s;
+  transform: translate(-100%);
+}
+
+.side-drawer-darken {
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
+  transition: 0.35s;
+  transition-property: background-color;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.side-drawer-darken-closed {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.side-drawer-click-outside {
+  flex: 1 1 100%;
+}
+
+.side-drawer {
+  overflow-x: hidden;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  transition: 0.35s;
+  transition-property: transform;
+  margin: 0 0 0 -100px;
+  padding: 0 0 1em 100px;
+  width: 80%;
+  max-width: 20em;
+  flex: 0 0 80%;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+  box-shadow: var(--panelShadow);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+}
+
+.side-drawer-logo-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0.85em;
+
+  img {
+    flex: none;
+    height: 50px;
+    margin-right: 0.85em;
+  }
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.side-drawer-click-outside-closed {
+  flex: 0 0 0;
+}
+
+.side-drawer-closed {
+  transform: translate(-100%);
+}
+
+.side-drawer-heading {
+  background: transparent;
+  flex-direction: column;
+  align-items: stretch;
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+
+.side-drawer ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  border-bottom: 1px solid;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  margin: 0.2em 0;
+}
+
+.side-drawer ul:last-child {
+  border: 0;
+}
+
+.side-drawer li {
+  padding: 0;
+
+  a {
+    display: block;
+    padding: 0.5em 0.85em;
+
+    &:hover {
+      background-color: $fallback--lightBg;
+      background-color: var(--lightBg, $fallback--lightBg);
+    }
+  }
+}
+</style>

src/components/status/status.js

@@ -3,10 +3,15 @@ import FavoriteButton from '../favorite_button/favorite_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
-import UserCardContent from '../user_card_content/user_card_content.vue'
-import StillImage from '../still-image/still-image.vue'
-import { filter, find } from 'lodash'
+import UserCard from '../user_card/user_card.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import Gallery from '../gallery/gallery.vue'
+import LinkPreview from '../link-preview/link-preview.vue'
+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, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
+import { filter, find, unescape } from 'lodash'
 
 const Status = {
   name: 'Status',
@@ -18,7 +23,7 @@ const Status = {
     'highlight',
     'compact',
     'replies',
-    'noReplyLinks',
+    'isPreview',
     'noHeading',
     'inlineExpanded'
   ],
@@ -30,7 +35,8 @@ const Status = {
       userExpanded: false,
       preview: null,
       showPreview: false,
-      showingTall: false,
+      showingTall: this.inConversation && this.focused,
+      showingLongSubject: false,
       expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
         ? !this.$store.state.instance.collapseMessageWithSubject
         : !this.$store.state.config.collapseMessageWithSubject,
@@ -72,9 +78,18 @@ const Status = {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
         (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
     },
+    userProfileLink () {
+      return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
+    },
+    replyProfileLink () {
+      if (this.isReply) {
+        return this.generateUserProfileLink(this.status.in_reply_to_user_id, this.replyToName)
+      }
+    },
     retweet () { return !!this.statusoid.retweeted_status },
-    retweeter () { return this.statusoid.user.name },
+    retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name },
     retweeterHtml () { return this.statusoid.user.name_html },
+    retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
     status () {
       if (this.retweet) {
         return this.statusoid.retweeted_status
@@ -94,6 +109,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) {
@@ -115,20 +138,19 @@ const Status = {
       const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
       return lengthScore > 20
     },
+    longSubject () {
+      return this.status.summary.length > 900
+    },
     isReply () {
-      if (this.status.in_reply_to_status_id) {
-        return true
+      return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
+    },
+    replyToName () {
+      if (this.status.in_reply_to_screen_name) {
+        return this.status.in_reply_to_screen_name
+      } else {
+        const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
+        return user && user.screen_name
       }
-      // For private replies where we can't see the OP, in_reply_to_status_id will be null.
-      // So instead, check that the post starts with a @mention.
-      if (this.status.visibility === 'private') {
-        var textBody = this.status.text
-        if (this.status.summary !== null) {
-          textBody = textBody.substring(this.status.summary.length, textBody.length)
-        }
-        return textBody.startsWith('@')
-      }
-      return false
     },
     hideReply () {
       if (this.$store.state.config.replyVisibility === 'all') {
@@ -140,7 +162,7 @@ const Status = {
       if (this.status.user.id === this.$store.state.users.currentUser.id) {
         return false
       }
-      if (this.status.activity_type === 'repeat') {
+      if (this.status.type === 'retweet') {
         return false
       }
       var checkFollowing = this.$store.state.config.replyVisibility === 'following'
@@ -173,7 +195,7 @@ const Status = {
       return this.tallStatus
     },
     showingMore () {
-      return this.showingTall || (this.status.summary && this.expandingSubject)
+      return (this.tallStatus && this.showingTall) || (this.status.summary && this.expandingSubject)
     },
     nsfwClickthrough () {
       if (!this.status.nsfw) {
@@ -186,24 +208,55 @@ const Status = {
     },
     replySubject () {
       if (!this.status.summary) return ''
-      const behavior = this.$store.state.config.subjectLineBehavior
-      const startsWithRe = this.status.summary.match(/^re[: ]/i)
+      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 = 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 ''
       }
     },
     attachmentSize () {
       if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
-        (this.$store.state.config.hideAttachmentsInConv && this.inConversation)) {
+        (this.$store.state.config.hideAttachmentsInConv && this.inConversation) ||
+        (this.status.attachments.length > this.maxThumbnails)) {
         return 'hide'
       } else if (this.compact) {
         return 'small'
       }
       return 'normal'
+    },
+    galleryTypes () {
+      if (this.attachmentSize === 'hide') {
+        return []
+      }
+      return this.$store.state.config.playVideosInModal
+        ? ['image', 'video']
+        : ['image']
+    },
+    galleryAttachments () {
+      return this.status.attachments.filter(
+        file => fileType.fileMatchesSomeType(this.galleryTypes, file)
+      )
+    },
+    nonGalleryAttachments () {
+      return this.status.attachments.filter(
+        file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
+      )
+    },
+    maxThumbnails () {
+      return this.$store.state.config.maxThumbnails
+    },
+    contentHtml () {
+      if (!this.status.summary_html) {
+        return this.status.statusnet_html
+      }
+      return this.status.summary_html + '<br />' + this.status.statusnet_html
     }
   },
   components: {
@@ -212,8 +265,10 @@ const Status = {
     RetweetButton,
     DeleteButton,
     PostStatusForm,
-    UserCardContent,
-    StillImage
+    UserCard,
+    UserAvatar,
+    Gallery,
+    LinkPreview
   },
   methods: {
     visibilityIcon (visibility) {
@@ -228,11 +283,32 @@ const Status = {
           return 'icon-globe'
       }
     },
-    linkClicked ({target}) {
+    linkClicked (event) {
+      let { target } = event
       if (target.tagName === 'SPAN') {
         target = target.parentNode
       }
       if (target.tagName === 'A') {
+        if (target.className.match(/mention/)) {
+          const href = target.href
+          const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
+          if (attn) {
+            event.stopPropagation()
+            event.preventDefault()
+            const link = this.generateUserProfileLink(attn.id, attn.screen_name)
+            this.$router.push(link)
+            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')
       }
     },
@@ -240,7 +316,6 @@ const Status = {
       this.replying = !this.replying
     },
     gotoOriginal (id) {
-      // only handled by conversation, not status_or_conversation
       if (this.inConversation) {
         this.$emit('goto', id)
       }
@@ -257,17 +332,17 @@ const Status = {
     toggleShowMore () {
       if (this.showingTall) {
         this.showingTall = false
-      } else if (this.expandingSubject) {
+      } else if (this.expandingSubject && this.status.summary) {
         this.expandingSubject = false
       } else if (this.hideTallStatus) {
         this.showingTall = true
-      } else if (this.hideSubjectStatus) {
+      } else if (this.hideSubjectStatus && this.status.summary) {
         this.expandingSubject = true
       }
     },
     replyEnter (id, event) {
       this.showPreview = true
-      const targetId = Number(id)
+      const targetId = id
       const statuses = this.$store.state.statuses.allStatuses
 
       if (!this.preview) {
@@ -285,16 +360,30 @@ const Status = {
     },
     replyLeave () {
       this.showPreview = false
+    },
+    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)
     }
   },
   watch: {
     'highlight': function (id) {
-      id = Number(id)
       if (this.status.id === id) {
         let rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
-          window.scrollBy(0, rect.top - 200)
+          // Post is above screen, match its top to screen top
+          window.scrollBy(0, rect.top - 100)
+        } else if (rect.height >= (window.innerHeight - 50)) {
+          // Post we want to see is taller than screen so match its top to screen top
+          window.scrollBy(0, rect.top - 100)
         } else if (rect.bottom > window.innerHeight - 50) {
+          // Post is below screen, match its bottom to screen bottom
           window.scrollBy(0, rect.bottom - window.innerHeight + 50)
         }
       }

src/components/status/status.vue

@@ -1,102 +1,142 @@
 <template>
-  <div class="status-el" v-if="!hideReply && !deleted" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
-    <template v-if="muted && !noReplyLinks">
+  <div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+    <template v-if="muted && !isPreview">
       <div class="media status container muted">
-        <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
+        <small>
+          <router-link :to="userProfileLink">
+            {{status.user.screen_name}}
+          </router-link>
+        </small>
         <small class="muteWords">{{muteWordHits.join(', ')}}</small>
-        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
+        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
       </div>
     </template>
     <template v-else>
-      <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
-        <StillImage v-if="retweet" class='avatar' :class='{ "better-shadow": betterShadow }' :src="statusoid.user.profile_image_url_original"/>
+      <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
+        <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
-          <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
-          <a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
+          <span class="user-name">
+            <router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/>
+            <router-link v-else :to="retweeterProfileLink">{{retweeter}}</router-link>
+          </span>
           <i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
           {{$t('timeline.repeated')}}
         </div>
       </div>
 
-      <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
+      <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" :style="[ userStyle ]" class="media status">
         <div v-if="!noHeading" class="media-left">
-          <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-            <StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}"  :src="status.user.profile_image_url_original"/>
-          </a>
+          <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
+            <UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/>
+          </router-link>
         </div>
         <div class="status-body">
-          <div class="usercard media-body" v-if="userExpanded">
-            <user-card-content :user="status.user" :switcher="false"></user-card-content>
-          </div>
-          <div v-if="!noHeading" class="media-body container media-heading">
-            <div class="media-heading-left">
-              <div class="name-and-links">
+          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
+          <div v-if="!noHeading" class="media-heading">
+            <div class="heading-name-row">
+              <div class="name-and-account-name">
                 <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
                 <h4 class="user-name" v-else>{{status.user.name}}</h4>
-                <span class="links">
-                  <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
-                  <span v-if="status.in_reply_to_screen_name" class="faint reply-info">
-                    <i class="icon-right-open"></i>
-                    <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
-                      {{status.in_reply_to_screen_name}}
-                    </router-link>
-                  </span>
-                  <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :title="$t('tool_tip.reply')">
-                    <i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
+                <router-link class="account-name" :to="userProfileLink">
+                  {{status.user.screen_name}}
+                </router-link>
+              </div>
+
+              <span class="heading-right">
+                <router-link class="timeago faint-link" :to="{ name: 'conversation', params: { id: status.id } }">
+                  <timeago :since="status.created_at" :auto-update="60"></timeago>
+                </router-link>
+                <div class="button-icon visibility-icon" v-if="status.visibility">
+                  <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
+                </div>
+                <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
+                  <i class="button-icon icon-link-ext-alt"></i>
+                </a>
+                <template v-if="expandable && !isPreview">
+                  <a href="#" @click.prevent="toggleExpanded" title="Expand">
+                    <i class="button-icon icon-plus-squared"></i>
                   </a>
+                </template>
+                <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
+              </span>
+            </div>
+
+            <div class="heading-reply-row">
+              <div v-if="isReply" class="reply-to-and-accountname">
+                <a class="reply-to"
+                  href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                  :aria-label="$t('tool_tip.reply')"
+                  @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)"
+                  @mouseleave.prevent.stop="replyLeave()"
+                >
+                  <i class="button-icon icon-reply" v-if="!isPreview"></i>
+                  <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
+                </a>
+                <router-link :to="replyProfileLink">
+                  {{replyToName}}
+                </router-link>
+                <span class="faint replies-separator" v-if="replies && replies.length">
+                  -
                 </span>
               </div>
-              <h4 class="replies" v-if="inConversation && !noReplyLinks">
-                <small 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>
-              </h4>
-            </div>
-            <div class="media-heading-right">
-              <router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }">
-                <timeago :since="status.created_at" :auto-update="60"></timeago>
-              </router-link>
-              <div class="visibility-icon" v-if="status.visibility">
-                <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
+              <div class="replies" v-if="inConversation && !isPreview">
+                <span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span>
+                <span class="reply-link faint" v-if="replies" v-for="reply in replies">
+                  <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
+                </span>
               </div>
-              <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url" title="Source">
-                <i class="icon-link-ext-alt"></i>
-              </a>
-              <template v-if="expandable">
-                <a href="#" @click.prevent="toggleExpanded" title="Expand">
-                  <i class="icon-plus-squared"></i>
-                </a>
-              </template>
-              <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a>
             </div>
+
+
           </div>
 
           <div v-if="showPreview" class="status-preview-container">
-            <status class="status-preview" v-if="preview" :noReplyLinks="true" :statusoid="preview" :compact=true></status>
+            <status class="status-preview" v-if="preview" :isPreview="true" :statusoid="preview" :compact=true></status>
             <div class="status-preview status-preview-loading" v-else>
               <i class="icon-spin4 animate-spin"></i>
             </div>
           </div>
 
-          <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper">
-            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a>
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideSubjectStatus"></div>
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary" v-else></div>
-            <a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a>
-            <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
+          <div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">{{$t("general.show_more")}}</a>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml"></div>
+            <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">{{$t("general.show_less")}}</a>
+          </div>
+          <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else>
+            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml" v-if="!hideSubjectStatus"></div>
+            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
+            <a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
+            <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">{{$t("general.show_less")}}</a>
           </div>
 
-          <div v-if='status.attachments && !hideSubjectStatus' class='attachments media-body'>
-            <attachment :size="attachmentSize" :status-id="status.id" :nsfw="nsfwClickthrough" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id">
-            </attachment>
+          <div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body">
+            <attachment
+              class="non-gallery"
+              v-for="attachment in nonGalleryAttachments"
+              :size="attachmentSize"
+              :nsfw="nsfwClickthrough"
+              :attachment="attachment"
+              :allowPlay="true"
+              :setMedia="setMedia()"
+              :key="attachment.id"
+            />
+            <gallery
+              v-if="galleryAttachments.length > 0"
+              :nsfw="nsfwClickthrough"
+              :attachments="galleryAttachments"
+              :setMedia="setMedia()"
+            />
           </div>
 
-          <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
+          <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
+            <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
+          </div>
+
+          <div v-if="!noHeading && !isPreview" class='status-actions media-body'>
             <div v-if="loggedIn">
-              <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
-                <i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
-              </a>
+              <i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'icon-reply-active': replying}"></i>
+              <span v-if="status.replies_count > 0">{{status.replies_count}}</span>
             </div>
             <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
             <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
@@ -116,6 +156,8 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+$status-margin: 0.75em;
+
 .status-body {
   flex: 1;
   min-width: 0;
@@ -171,13 +213,16 @@
   }
 }
 
+.media-left {
+  margin-right: $status-margin;
+}
+
 .status-el {
   hyphens: auto;
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   border-left-width: 0px;
-  line-height: 18px;
   min-width: 0;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
@@ -198,58 +243,89 @@
   .media-body {
     flex: 1;
     padding: 0;
-    margin: 0 0 0.25em 0.8em;
   }
 
-  .usercard {
-    margin-bottom: .7em
+  .status-usercard {
+    margin-bottom: $status-margin;
+  }
+
+  .user-name {
+    white-space: nowrap;
+    font-size: 14px;
+    overflow: hidden;
+    flex-shrink: 0;
+    max-width: 85%;
+    font-weight: bold;
+
+    img {
+      width: 14px;
+      height: 14px;
+      vertical-align: middle;
+      object-fit: contain
+    }
   }
 
   .media-heading {
-    flex-wrap: nowrap;
-    line-height: 18px;
-  }
-
-  .media-heading-left {
     padding: 0;
     vertical-align: bottom;
     flex-basis: 100%;
+    margin-bottom: 0.5em;
+
+    a {
+      display: inline-block;
+      word-break: break-all;
+    }
 
     small {
       font-weight: lighter;
     }
-    h4 {
-      white-space: nowrap;
-      font-size: 14px;
-      margin-right: 0.25em;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .name-and-links {
+
+    .heading-name-row {
       padding: 0;
-      flex: 1 0;
       display: flex;
-      flex-wrap: wrap;
-      align-items: baseline;
+      justify-content: space-between;
+      line-height: 18px;
+
+      .name-and-account-name {
+        display: flex;
+        min-width: 0;
+      }
 
       .user-name {
-        margin-right: .45em;
+        flex-shrink: 1;
+        margin-right: 0.4em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
 
-        img {
-          width: 14px;
-          height: 14px;
-          vertical-align: middle;
-          object-fit: contain
-        }
+      .account-name {
+        min-width: 1.6em;
+        margin-right: 0.4em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1 1 0;
       }
     }
 
-    .links {
+    .heading-right {
       display: flex;
+      flex-shrink: 0;
+    }
+
+    .timeago {
+      margin-right: 0.2em;
+    }
+
+    .heading-reply-row {
+      align-content: baseline;
       font-size: 12px;
-      color: $fallback--link;
-      color: var(--link, $fallback--link);
+      line-height: 18px;
       max-width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: stretch;
+
       a {
         max-width: 100%;
         text-overflow: ellipsis;
@@ -257,42 +333,49 @@
         white-space: nowrap;
       }
     }
+
+    .reply-to-and-accountname {
+      display: flex;
+      height: 18px;
+      margin-right: 0.5em;
+      overflow: hidden;
+      max-width: 100%;
+      .icon-reply {
+        transform: scaleX(-1);
+      }
+    }
+
     .reply-info {
       display: flex;
     }
+
+    .reply-to {
+      display: flex;
+    }
+
+    .reply-to-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0 0.4em 0 0.2em;
+    }
+
+    .replies-separator {
+      margin-left: 0.4em;
+    }
+
     .replies {
-      line-height: 16px;
-    }
-    .reply-link {
-      margin-right: 0.2em;
-    }
-  }
-
-  .media-heading-right {
-    display: inline-flex;
-    flex-shrink: 0;
-    flex-wrap: nowrap;
-    margin-left: .25em;
-    align-self: baseline;
-
-    .timeago {
-      margin-right: 0.2em;
+      line-height: 18px;
       font-size: 12px;
-      align-self: last baseline;
+      display: flex;
+      flex-wrap: wrap;
+      & > * {
+        margin-right: 0.4em;
+      }
     }
 
-    > * {
-      margin-left: 0.2em;
+    .reply-link {
+      height: 17px;
     }
-    a:hover i {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-  }
-
-  a {
-    display: inline-block;
-    word-break: break-all;
   }
 
   .tall-status {
@@ -303,6 +386,8 @@
   }
 
   .tall-status-hider {
+    display: inline-block;
+    word-break: break-all;
     position: absolute;
     height: 70px;
     margin-top: 150px;
@@ -320,17 +405,24 @@
   .status-unhider, .cw-status-hider {
     width: 100%;
     text-align: center;
+    display: inline-block;
+    word-break: break-all;
   }
 
   .status-content {
-    margin-right: 0.5em;
     font-family: var(--postFont, sans-serif);
+    line-height: 1.4em;
 
     img, video {
       max-width: 100%;
       max-height: 400px;
       vertical-align: middle;
       object-fit: contain;
+
+      &.emoji {
+        width: 32px;
+        height: 32px;
+      }
     }
 
     blockquote {
@@ -347,9 +439,11 @@
     }
 
     p {
-      margin: 0;
-      margin-top: 0.2em;
-      margin-bottom: 0.5em;
+      margin: 0 0 1em 0;
+    }
+
+    p:last-child {
+      margin: 0 0 0 0;
     }
 
     h1 {
@@ -374,10 +468,10 @@
   }
 
   .retweet-info {
-    padding: 0.4em 0.6em 0 0.6em;
+    padding: 0.4em $status-margin;
     margin: 0;
 
-    .avatar {
+    .avatar.still-image {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       margin-left: 28px;
@@ -395,6 +489,8 @@
 
       .user-name {
         font-weight: bold;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         img {
           width: 14px;
@@ -443,10 +539,10 @@
 .status-actions {
   width: 100%;
   display: flex;
+  margin-top: $status-margin;
 
   div, favorite-button {
-    padding-top: 0.25em;
-    max-width: 6em;
+    max-width: 4em;
     flex: 1;
   }
 }
@@ -454,6 +550,7 @@
 .icon-reply:hover {
   color: $fallback--cBlue;
   color: var(--cBlue, $fallback--cBlue);
+  cursor: pointer;
 }
 
 .icon-reply.icon-reply-active {
@@ -461,46 +558,6 @@
   color: var(--cBlue, $fallback--cBlue);
 }
 
-.status .avatar-compact {
-  width: 32px;
-  height: 32px;
-  box-shadow: var(--avatarStatusShadow);
-  border-radius: $fallback--avatarAltRadius;
-  border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-
-  &.better-shadow {
-    box-shadow: var(--avatarStatusShadowInset);
-    filter: var(--avatarStatusShadowFilter)
-  }
-}
-
-.avatar {
-  width: 48px;
-  height: 48px;
-  box-shadow: var(--avatarStatusShadow);
-  border-radius: $fallback--avatarRadius;
-  border-radius: var(--avatarRadius, $fallback--avatarRadius);
-  overflow: hidden;
-  position: relative;
-
-  &.better-shadow {
-    box-shadow: var(--avatarStatusShadowInset);
-    filter: var(--avatarStatusShadowFilter)
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-
-  &.animated::before {
-    display: none;
-  }
-
-  &.retweeted {
-  }
-}
-
 .status:hover .animated.avatar {
   canvas {
     display: none;
@@ -512,9 +569,9 @@
 
 .status {
   display: flex;
-  padding: 0.6em;
+  padding: $status-margin;
   &.is-retweet {
-    padding-top: 0.1em;
+    padding-top: 0;
   }
 }
 
@@ -549,16 +606,16 @@ 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;
   }
 }
 
-@media all and (max-width: 960px) {
+@media all and (max-width: 800px) {
   .status-el {
     .retweet-info {
-      .avatar {
+      .avatar.still-image {
         margin-left: 20px;
       }
     }
@@ -567,14 +624,14 @@ a.unmute {
     max-width: 100%;
   }
 
-  .status .avatar {
+  .status .avatar.still-image {
     width: 40px;
     height: 40px;
-  }
 
-  .status .avatar-compact {
-    width: 32px;
-    height: 32px;
+    &.avatar-compact {
+      width: 32px;
+      height: 32px;
+    }
   }
 }