Webpack 4, ESLint with Vue, Node-sass, updated dependencies overall. New linting.

.eslintrc.js

@@ -1,14 +1,17 @@
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
   parserOptions: {
+    parser: 'babel-eslint',
     sourceType: 'module'
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
+  extends: [
+    'standard',
+    'plugin:vue/recommended'
+  ],
   // required to lint *.vue files
   plugins: [
-    'html'
+    'vue'
   ],
   // add your custom rules here
   rules: {
@@ -17,6 +20,7 @@ module.exports = {
     // allow async-await
     'generator-star-spacing': 0,
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'vue/require-prop-types': 0
   }
 }

build/utils.js

@@ -1,61 +1,64 @@
 var path = require('path')
 var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var sass = require('sass')
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 exports.assetsPath = function (_path) {
   var assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
+      ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
+      : config.dev.assetsSubDirectory
   return path.posix.join(assetsSubDirectory, _path)
 }
 
 exports.cssLoaders = function (options) {
   options = options || {}
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loaders) {
-    var sourceLoader = loaders.map(function (loader) {
-      var extraParamChar
-      if (/\?/.test(loader)) {
-        loader = loader.replace(/\?/, '-loader?')
-        extraParamChar = '&'
-      } else {
-        loader = loader + '-loader'
-        extraParamChar = '?'
-      }
-      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
 
+  function generateLoaders (loaders) {
     // Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {
-      return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+      return [MiniCssExtractPlugin.loader].concat(loaders)
     } else {
-      return ['vue-style-loader', sourceLoader].join('!')
+      return ['vue-style-loader'].concat(loaders)
     }
   }
 
   // http://vuejs.github.io/vue-loader/configurations/extract-css.html
-  return {
+  return [
-    css: generateLoaders(['css']),
+    {
-    postcss: generateLoaders(['css']),
+      test: /\.(post)?css$/,
-    less: generateLoaders(['css', 'less']),
+      use: generateLoaders(['css-loader']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
+    },
-    scss: generateLoaders(['css', 'sass']),
+    {
-    stylus: generateLoaders(['css', 'stylus']),
+      test: /\.less$/,
-    styl: generateLoaders(['css', 'stylus'])
+      use: generateLoaders(['css-loader', 'less-loader']),
-  }
+    },
+    {
+      test: /\.sass$/,
+      use: generateLoaders([
+        'css-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            indentedSyntax: true
+          }
+        }
+      ])
+    },
+    {
+      test: /\.scss$/,
+      use: generateLoaders(['css-loader', 'sass-loader'])
+    },
+    {
+      test: /\.styl(us)?$/,
+      use: generateLoaders(['css-loader', 'stylus-loader']),
+    },
+  ]
 }
 
 // Generate loaders for standalone style files (outside of .vue)
 exports.styleLoaders = function (options) {
-  var output = []
+  var output = exports.cssLoaders(options)
-  var loaders = exports.cssLoaders(options)
+  console.log(output)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      loader: loader
-    })
-  }
   return output
 }

build/webpack.base.conf.js

@@ -21,8 +21,10 @@ module.exports = {
     filename: '[name].js'
   },
   resolve: {
-    extensions: ['', '.js', '.vue'],
+    extensions: ['.js', '.vue'],
-    fallback: [path.join(__dirname, '../node_modules')],
+    modules: [
+      path.join(__dirname, '../node_modules')
+    ],
     alias: {
       'vue$': 'vue/dist/vue.runtime.common',
       'src': path.resolve(__dirname, '../src'),
@@ -30,67 +32,53 @@ module.exports = {
       'components': path.resolve(__dirname, '../src/components')
     }
   },
-  resolveLoader: {
-    fallback: [path.join(__dirname, '../node_modules')]
-  },
   module: {
     noParse: /node_modules\/localforage\/dist\/localforage.js/,
-    preLoaders: [
+    rules: [
       {
-        test: /\.vue$/,
+        enforce: 'pre',
-        loader: 'eslint',
+        test: /\.(js|vue)$/,
         include: projectRoot,
-        exclude: /node_modules/
+        exclude: /node_modules/,
+        use: {
+          loader: 'eslint-loader',
+          options: {
+            formatter: require('eslint-friendly-formatter'),
+            sourceMap: config.build.productionSourceMap,
+            extract: true
+          }
+        }
       },
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: projectRoot,
-        exclude: /node_modules/
-      }
-    ],
-    loaders: [
       {
         test: /\.vue$/,
-        loader: 'vue'
+        use: 'vue-loader'
       },
       {
         test: /\.jsx?$/,
-        loader: 'babel',
         include: projectRoot,
-        exclude: /node_modules\/(?!tributejs)/
+        exclude: /node_modules\/(?!tributejs)/,
-      },
+        use: 'babel-loader'
-      {
-        test: /\.json$/,
-        loader: 'json'
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url',
+        use: {
-        query: {
+          loader: 'url-loader',
-          limit: 10000,
+          options: {
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+            limit: 10000,
+            name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          }
         }
       },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url',
+        use: {
-        query: {
+          loader: 'url-loader',
-          limit: 10000,
+          options: {
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+            limit: 10000,
+            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          }
         }
-      }
+      },
-    ]
-  },
-  eslint: {
-    formatter: require('eslint-friendly-formatter')
-  },
-  vue: {
-    loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }),
-    postcss: [
-      require('autoprefixer')({
-        browsers: ['last 2 versions']
-      })
     ]
   },
   plugins: [

build/webpack.dev.conf.js

@@ -12,7 +12,7 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) {
 
 module.exports = merge(baseWebpackConfig, {
   module: {
-    loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
   },
   // eval-source-map is faster for development
   devtool: '#eval-source-map',
@@ -23,9 +23,7 @@ module.exports = merge(baseWebpackConfig, {
       'DEV_OVERRIDES': JSON.stringify(config.dev.settings)
     }),
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: 'index.html',

build/webpack.prod.conf.js

@@ -4,7 +4,7 @@ var utils = require('./utils')
 var webpack = require('webpack')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var env = process.env.NODE_ENV === 'testing'
     ? require('../config/test.env')
@@ -13,24 +13,22 @@ var env = process.env.NODE_ENV === 'testing'
 let commitHash = require('child_process')
     .execSync('git rev-parse --short HEAD')
     .toString();
+
 console.log(commitHash)
 
 var webpackConfig = merge(baseWebpackConfig, {
   module: {
-    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
   },
   devtool: config.build.productionSourceMap ? '#source-map' : false,
+  optimization: {
+    minimize: true
+  },
   output: {
     path: config.build.assetsRoot,
     filename: utils.assetsPath('js/[name].[chunkhash].js'),
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
   },
-  vue: {
-    loaders: utils.cssLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true
-    })
-  },
   plugins: [
     // http://vuejs.github.io/vue-loader/workflow/production.html
     new webpack.DefinePlugin({
@@ -38,14 +36,10 @@ var webpackConfig = merge(baseWebpackConfig, {
       'COMMIT_HASH': JSON.stringify(commitHash),
       'DEV_OVERRIDES': JSON.stringify(undefined)
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.optimize.OccurenceOrderPlugin(),
     // extract css into its own file
-    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),
+    new MiniCssExtractPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
     // generate dist index.html with correct asset hash for caching.
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
@@ -67,25 +61,11 @@ var webpackConfig = merge(baseWebpackConfig, {
       chunksSortMode: 'dependency'
     }),
     // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module, count) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
     // extract webpack runtime and module manifest to its own file in order to
     // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
+    // new webpack.optimize.SplitChunksPlugin({
-      name: 'manifest',
+    // name: ['app', 'vendor']
-      chunks: ['vendor']
+    // }),
-    })
   ]
 })
 

package.json

@@ -11,7 +11,8 @@
     "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
+    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -21,11 +22,9 @@
     "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",
     "sanitize-html": "^1.13.0",
-    "sass-loader": "^4.0.2",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
     "vue-compose": "^0.7.1",
@@ -44,7 +43,7 @@
     "babel-core": "^6.0.0",
     "babel-eslint": "^7.0.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^6.0.0",
+    "babel-loader": "^7.0.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.0.0",
     "babel-plugin-transform-vue-jsx": "3",
@@ -57,20 +56,21 @@
     "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
     "cross-spawn": "^4.0.2",
-    "css-loader": "^0.25.0",
+    "css-loader": "^0.28.0",
-    "eslint": "^3.7.1",
+    "eslint": "^5.16.0",
-    "eslint-config-standard": "^6.1.0",
+    "eslint-config-standard": "^12.0.0",
     "eslint-friendly-formatter": "^2.0.5",
-    "eslint-loader": "^1.5.0",
+    "eslint-loader": "^2.1.0",
-    "eslint-plugin-html": "^1.5.5",
+    "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-promise": "^2.0.1",
+    "eslint-plugin-node": "^7.0.0",
-    "eslint-plugin-standard": "^2.0.1",
+    "eslint-plugin-promise": "^4.0.0",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^5.2.2",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^3.0.1",
-    "file-loader": "^0.9.0",
     "function-bind": "^1.0.2",
-    "html-webpack-plugin": "^2.8.1",
+    "html-webpack-plugin": "^3.0.0",
     "http-proxy-middleware": "^0.17.2",
     "inject-loader": "^2.0.1",
     "iso-639-1": "^2.0.3",
@@ -83,26 +83,29 @@
     "karma-sinon-chai": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
-    "karma-webpack": "^1.7.0",
+    "karma-webpack": "git://github.com/webpack-contrib/karma-webpack.git#v4.0.0-rc.3",
     "lodash": "^4.16.4",
     "lolex": "^1.4.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "mocha": "^3.1.0",
     "nightwatch": "^0.9.8",
     "opn": "^4.0.2",
     "ora": "^0.3.0",
     "phantomjs-prebuilt": "^2.1.3",
     "raw-loader": "^0.5.1",
+    "sass": "^1.17.3",
+    "sass-loader": "git://github.com/webpack-contrib/sass-loader",
     "selenium-server": "2.53.1",
     "semver": "^5.3.0",
-    "serviceworker-webpack-plugin": "0.2.3",
+    "serviceworker-webpack-plugin": "^1.0.0",
     "shelljs": "^0.7.4",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
-    "url-loader": "^0.5.7",
+    "url-loader": "^1.1.2",
-    "vue-loader": "^11.1.0",
+    "vue-loader": "^14.0.0",
-    "vue-style-loader": "^2.0.0",
+    "vue-style-loader": "^4.0.0",
-    "webpack": "^1.13.2",
+    "webpack": "^4.0.0",
-    "webpack-dev-middleware": "^1.8.3",
+    "webpack-dev-middleware": "^3.6.0",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1"
   },

src/App.vue

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

src/boot/routes.js

@@ -24,8 +24,8 @@ export default (store) => {
       path: '/',
       redirect: _to => {
         return (store.state.users.currentUser
-                ? store.state.instance.redirectRootLogin
+          ? store.state.instance.redirectRootLogin
-                : store.state.instance.redirectRootNoLogin) || '/main/all'
+          : store.state.instance.redirectRootNoLogin) || '/main/all'
       }
     },
     { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },

src/components/about/about.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="sidebar">
-    <instance-specific-panel></instance-specific-panel>
+    <instance-specific-panel />
-    <features-panel v-if="showFeaturesPanel"></features-panel>
+    <features-panel v-if="showFeaturesPanel" />
-    <terms-of-service-panel></terms-of-service-panel>
+    <terms-of-service-panel />
   </div>
 </template>
 

src/components/attachment/attachment.js

@@ -51,7 +51,7 @@ const Attachment = {
     }
   },
   methods: {
-    linkClicked ({target}) {
+    linkClicked ({ target }) {
       if (target.tagName === 'A') {
         window.open(target.href, '_blank')
       }

src/components/attachment/attachment.vue

@@ -1,54 +1,104 @@
 <template>
-  <div v-if="usePlaceHolder" @click="openModal">
+  <div
-    <a class="placeholder"
+    v-if="usePlaceHolder"
+    @click="openModal"
+  >
+    <a
       v-if="type !== 'html'"
-      target="_blank" :href="attachment.url"
+      class="placeholder"
+      target="_blank"
+      :href="attachment.url"
     >
-      [{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]
+      [{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}]
     </a>
   </div>
   <div
-    v-else class="attachment"
+    v-else
-    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
     v-show="!isEmpty"
+    class="attachment"
+    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
   >
-    <a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden">
+    <a
-      <img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
+      v-if="hidden"
-      <i v-if="type === 'video'" class="play-icon icon-play-circled"></i>
+      class="image-attachment"
+      :href="attachment.url"
+      @click.prevent="toggleHidden"
+    >
+      <img
+        :key="nsfwImage"
+        class="nsfw"
+        :src="nsfwImage"
+        :class="{'small': isSmall}"
+      >
+      <i
+        v-if="type === 'video'"
+        class="play-icon icon-play-circled"
+      />
     </a>
-    <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
+    <div
-      <a href="#" @click.prevent="toggleHidden">Hide</a>
+      v-if="nsfw && hideNsfwLocal && !hidden"
+      class="hider"
+    >
+      <a
+        href="#"
+        @click.prevent="toggleHidden"
+      >Hide</a>
     </div>
 
-    <a v-if="type === 'image' && (!hidden || preloadImage)"
+    <a
-      @click="openModal"
+      v-if="type === 'image' && (!hidden || preloadImage)"
       class="image-attachment"
       :class="{'hidden': hidden && preloadImage }"
-      :href="attachment.url" target="_blank"
+      :href="attachment.url"
+      target="_blank"
       :title="attachment.description"
+      @click="openModal"
     >
-      <StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
+      <StillImage
+        :referrerpolicy="referrerpolicy"
+        :mimetype="attachment.mimetype"
+        :src="attachment.large_thumb_url || attachment.url"
+      />
     </a>
 
-    <a class="video-container"
+    <a
-      @click="openModal"
       v-if="type === 'video' && !hidden"
+      class="video-container"
       :class="{'small': isSmall}"
       :href="allowPlay ? undefined : attachment.url"
+      @click="openModal"
     >
-      <VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
+      <VideoAttachment
-      <i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
+        class="video"
+        :attachment="attachment"
+        :controls="allowPlay"
+      />
+      <i
+        v-if="!allowPlay"
+        class="play-icon icon-play-circled"
+      />
     </a>
 
-    <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
+    <audio
+      v-if="type === 'audio'"
+      :src="attachment.url"
+      controls
+    />
 
-    <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed">
+    <div
-      <div v-if="attachment.thumb_url" class="image">
+      v-if="type === 'html' && attachment.oembed"
-        <img :src="attachment.thumb_url"/>
+      class="oembed"
+      @click.prevent="linkClicked"
+    >
+      <div
+        v-if="attachment.thumb_url"
+        class="image"
+      >
+        <img :src="attachment.thumb_url">
       </div>
       <div class="text">
-        <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
+        <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
-        <div v-html="attachment.oembed.oembedHTML"></div>
+        <div v-html="attachment.oembed.oembedHTML" />
       </div>
     </div>
   </div>

src/components/basic_user_card/basic_user_card.vue

@@ -1,22 +1,49 @@
 <template>
   <div class="basic-user-card">
     <router-link :to="userProfileLink(user)">
-      <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
+      <UserAvatar
+        class="avatar"
+        :src="user.profile_image_url"
+        @click.prevent.native="toggleUserExpanded"
+      />
     </router-link>
-    <div class="basic-user-card-expanded-content" v-if="userExpanded">
+    <div
-      <UserCard :user="user" :rounded="true" :bordered="true"/>
+      v-if="userExpanded"
+      class="basic-user-card-expanded-content"
+    >
+      <UserCard
+        :user="user"
+        :rounded="true"
+        :bordered="true"
+      />
     </div>
-    <div class="basic-user-card-collapsed-content" v-else>
+    <div
-      <div :title="user.name" class="basic-user-card-user-name">
+      v-else
-        <span v-if="user.name_html" class="basic-user-card-user-name-value" v-html="user.name_html"></span>
+      class="basic-user-card-collapsed-content"
-        <span v-else class="basic-user-card-user-name-value">{{ user.name }}</span>
+    >
+      <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
+          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)">
+        <router-link
-          @{{user.screen_name}}
+          class="basic-user-card-screen-name"
+          :to="userProfileLink(user)"
+        >
+          @{{ user.screen_name }}
         </router-link>
       </div>
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </template>

src/components/block_card/block_card.vue

@@ -1,7 +1,12 @@
 <template>
   <basic-user-card :user="user">
     <div class="block-card-content-container">
-      <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
+      <button
+        v-if="blocked"
+        class="btn btn-default"
+        :disabled="progress"
+        @click="unblockUser"
+      >
         <template v-if="progress">
           {{ $t('user_card.unblock_progress') }}
         </template>
@@ -9,7 +14,12 @@
           {{ $t('user_card.unblock') }}
         </template>
       </button>
-      <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
+      <button
+        v-else
+        class="btn btn-default"
+        :disabled="progress"
+        @click="blockUser"
+      >
         <template v-if="progress">
           {{ $t('user_card.block_progress') }}
         </template>

src/components/chat_panel/chat_panel.js

@@ -16,7 +16,7 @@ const chatPanel = {
   },
   methods: {
     submit (message) {
-      this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
+      this.$store.state.chat.channel.push('new_msg', { text: message }, 10000)
       this.currentMessage = ''
     },
     togglePanel () {

src/components/chat_panel/chat_panel.vue

@@ -1,41 +1,70 @@
 <template>
-  <div class="chat-panel" v-if="!this.collapsed || !this.floating">
+  <div
+    v-if="!this.collapsed || !this.floating"
+    class="chat-panel"
+  >
     <div class="panel panel-default">
-      <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
+      <div
+        class="panel-heading timeline-heading"
+        :class="{ 'chat-heading': floating }"
+        @click.stop.prevent="togglePanel"
+      >
         <div class="title">
-          <span>{{$t('chat.title')}}</span>
+          <span>{{ $t('chat.title') }}</span>
-          <i class="icon-cancel" v-if="floating"></i>
+          <i
+            v-if="floating"
+            class="icon-cancel"
+          />
         </div>
       </div>
-      <div class="chat-window" v-chat-scroll>
+      <div
-        <div class="chat-message" v-for="message in messages" :key="message.id">
+        v-chat-scroll
+        class="chat-window"
+      >
+        <div
+          v-for="message in messages"
+          :key="message.id"
+          class="chat-message"
+        >
           <span class="chat-avatar">
-            <img :src="message.author.avatar" />
+            <img :src="message.author.avatar">
           </span>
           <div class="chat-content">
             <router-link
               class="chat-name"
-              :to="userProfileLink(message.author)">
+              :to="userProfileLink(message.author)"
-                {{message.author.username}}
+            >
+              {{ message.author.username }}
             </router-link>
             <br>
             <span class="chat-text">
-              {{message.text}}
+              {{ message.text }}
             </span>
           </div>
         </div>
       </div>
       <div class="chat-input">
-        <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea>
+        <textarea
+          v-model="currentMessage"
+          class="chat-input-textarea"
+          rows="1"
+          @keyup.enter="submit(currentMessage)"
+        />
       </div>
     </div>
   </div>
-  <div v-else class="chat-panel">
+  <div
+    v-else
+    class="chat-panel"
+  >
     <div class="panel panel-default">
-      <div class="panel-heading stub timeline-heading chat-heading" @click.stop.prevent="togglePanel">
+      <div
+        class="panel-heading stub timeline-heading chat-heading"
+        @click.stop.prevent="togglePanel"
+      >
         <div class="title">
-          <i class="icon-comment-empty"></i>
+          <i class="icon-comment-empty" />
-          {{$t('chat.title')}}
+          {{ $t('chat.title') }}
         </div>
       </div>
     </div>

src/components/color_input/color_input.vue

@@ -1,33 +1,44 @@
 <template>
-<div class="color-control style-control" :class="{ disabled: !present || disabled }">
+  <div
-  <label :for="name" class="label">
+    class="color-control style-control"
-    {{label}}
+    :class="{ disabled: !present || disabled }"
-  </label>
+  >
-  <input
+    <label
-    v-if="typeof fallback !== 'undefined'"
+      :for="name"
-    class="opt exlcude-disabled"
+      class="label"
-    :id="name + '-o'"
-    type="checkbox"
-    :checked="present"
-    @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
-  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
-  <input
-    :id="name"
-    class="color-input"
-    type="color"
-    :value="value || fallback"
-    :disabled="!present || disabled"
-    @input="$emit('input', $event.target.value)"
     >
-  <input
+      {{ label }}
-    :id="name + '-t'"
+    </label>
-    class="text-input"
+    <input
-    type="text"
+      v-if="typeof fallback !== 'undefined'"
-    :value="value || fallback"
+      :id="name + '-o'"
-    :disabled="!present || disabled"
+      class="opt exlcude-disabled"
-    @input="$emit('input', $event.target.value)"
+      type="checkbox"
+      :checked="present"
+      @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
     >
-</div>
+    <label
+      v-if="typeof fallback !== 'undefined'"
+      class="opt-l"
+      :for="name + '-o'"
+    />
+    <input
+      :id="name"
+      class="color-input"
+      type="color"
+      :value="value || fallback"
+      :disabled="!present || disabled"
+      @input="$emit('input', $event.target.value)"
+    >
+    <input
+      :id="name + '-t'"
+      class="text-input"
+      type="text"
+      :value="value || fallback"
+      :disabled="!present || disabled"
+      @input="$emit('input', $event.target.value)"
+    >
+  </div>
 </template>
 
 <script>

src/components/contrast_ratio/contrast_ratio.vue

@@ -1,28 +1,38 @@
 <template>
-<span  v-if="contrast" class="contrast-ratio">
+  <span
-  <span :title="hint" class="rating">
+    v-if="contrast"
-    <span v-if="contrast.aaa">
+    class="contrast-ratio"
-      <i class="icon-thumbs-up-alt"/>
+  >
+    <span
+      :title="hint"
+      class="rating"
+    >
+      <span v-if="contrast.aaa">
+        <i class="icon-thumbs-up-alt" />
+      </span>
+      <span v-if="!contrast.aaa && contrast.aa">
+        <i class="icon-adjust" />
+      </span>
+      <span v-if="!contrast.aaa && !contrast.aa">
+        <i class="icon-attention" />
+      </span>
     </span>
-    <span v-if="!contrast.aaa && contrast.aa">
+    <span
-      <i class="icon-adjust"/>
+      v-if="contrast && large"
-    </span>
+      class="rating"
-    <span v-if="!contrast.aaa && !contrast.aa">
+      :title="hint_18pt"
-      <i class="icon-attention"/>
+    >
+      <span v-if="contrast.laaa">
+        <i class="icon-thumbs-up-alt" />
+      </span>
+      <span v-if="!contrast.laaa && contrast.laa">
+        <i class="icon-adjust" />
+      </span>
+      <span v-if="!contrast.laaa && !contrast.laa">
+        <i class="icon-attention" />
+      </span>
     </span>
   </span>
-  <span class="rating" v-if="contrast && large" :title="hint_18pt">
-    <span v-if="contrast.laaa">
-      <i class="icon-thumbs-up-alt"/>
-    </span>
-    <span v-if="!contrast.laaa && contrast.laa">
-      <i class="icon-adjust"/>
-    </span>
-    <span v-if="!contrast.laaa && !contrast.laa">
-      <i class="icon-attention"/>
-    </span>
-  </span>
-</span>
 </template>
 
 <script>

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

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

src/components/conversation/conversation.js

@@ -94,8 +94,8 @@ const conversation = {
     },
     replies () {
       let i = 1
-      return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => {
+      /* eslint-disable camelcase */
-        /* eslint-disable camelcase */
+      return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
         const irid = in_reply_to_status_id
         /* eslint-enable camelcase */
         if (irid) {
@@ -127,8 +127,8 @@ const conversation = {
   methods: {
     fetchConversation () {
       if (this.status) {
-        this.$store.state.api.backendInteractor.fetchConversation({id: this.status.id})
+        this.$store.state.api.backendInteractor.fetchConversation({ id: this.status.id })
-          .then(({ancestors, descendants}) => {
+          .then(({ ancestors, descendants }) => {
             this.$store.dispatch('addNewStatuses', { statuses: ancestors })
             this.$store.dispatch('addNewStatuses', { statuses: descendants })
             set(this, 'converationStatusIds', [].concat(
@@ -139,7 +139,7 @@ const conversation = {
           .then(() => this.setHighlight(this.statusId))
       } else {
         const id = this.$route.params.id
-        this.$store.state.api.backendInteractor.fetchStatus({id})
+        this.$store.state.api.backendInteractor.fetchStatus({ id })
           .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
           .then(() => this.fetchConversation())
       }

src/components/conversation/conversation.vue

@@ -1,24 +1,33 @@
 <template>
-  <div class="timeline panel-default" :class="[isExpanded ? 'panel' : 'panel-disabled']">
+  <div
-    <div v-if="isExpanded" class="panel-heading conversation-heading">
+    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="toggleExpanded">{{ $t('timeline.collapse') }}</a>
+        <a
+          href="#"
+          @click.prevent="toggleExpanded"
+        >{{ $t('timeline.collapse') }}</a>
       </span>
     </div>
     <status
       v-for="status in conversation"
-      @goto="setHighlight"
-      @toggleExpanded="toggleExpanded"
       :key="status.id"
-      :inlineExpanded="collapsable"
+      :inline-expanded="collapsable"
       :statusoid="status"
-      :expandable='!expanded'
+      :expandable="!expanded"
       :focused="focused(status.id)"
-      :inConversation="isExpanded"
+      :in-conversation="isExpanded"
       :highlight="getHighlight()"
       :replies="getReplies(status.id)"
       class="status-fadein panel-body"
+      @goto="setHighlight"
+      @toggleExpanded="toggleExpanded"
     />
   </div>
 </template>

src/components/delete_button/delete_button.js

@@ -10,7 +10,7 @@ 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 () { return (this.currentUser && this.currentUser.rights.delete_others_notice) || this.status.user.id === this.currentUser.id }
   }
 }
 

src/components/delete_button/delete_button.vue

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

src/components/dm_timeline/dm_timeline.vue

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

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

@@ -23,7 +23,8 @@ const EmojiInput = {
         if (matchedEmoji.length <= 0) {
           return false
         }
-        return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
+        // eslint-disable-next-line camelcase
+        return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
           shortcode: `:${shortcode}:`,
           utf: utf || '',
           // eslint-disable-next-line camelcase
@@ -98,7 +99,7 @@ const EmojiInput = {
     onInput (e) {
       this.$emit('input', e.target.value)
     },
-    setCaret ({target: {selectionStart}}) {
+    setCaret ({ target: { selectionStart } }) {
       this.caret = selectionStart
     }
   }

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

@@ -9,13 +9,13 @@
       @input="onInput"
       @click="setCaret"
       @keyup="setCaret"
-      @keydown="onKeydown"
+      @keydown.exact="onKeydown"
-      @keydown.down="cycleForward"
+      @keydown.down.exact="cycleForward"
-      @keydown.up="cycleBackward"
+      @keydown.up.exact="cycleBackward"
-      @keydown.shift.tab="cycleBackward"
+      @keydown.shift.tab.exact="cycleBackward"
-      @keydown.tab="cycleForward"
+      @keydown.tab.exact="cycleForward"
-      @keydown.enter="replaceEmoji"
+      @keydown.enter.exact="replaceEmoji"
-    />
+    >
     <textarea
       v-else
       :class="classname"
@@ -24,27 +24,30 @@
       @input="onInput"
       @click="setCaret"
       @keyup="setCaret"
-      @keydown="onKeydown"
+      @keydown.exact="onKeydown"
-      @keydown.down="cycleForward"
+      @keydown.down.exact="cycleForward"
-      @keydown.up="cycleBackward"
+      @keydown.up.exact="cycleBackward"
-      @keydown.shift.tab="cycleBackward"
+      @keydown.shift.tab.exact="cycleBackward"
-      @keydown.tab="cycleForward"
+      @keydown.tab.exact="cycleForward"
-      @keydown.enter="replaceEmoji"
+      @keydown.enter.exact="replaceEmoji"
-    ></textarea>
+    />
-    <div class="autocomplete-panel" v-if="suggestions">
+    <div
+      v-if="suggestions"
+      class="autocomplete-panel"
+    >
       <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 }"
+          @click="replace(emoji.utf || (emoji.shortcode + ' '))"
         >
           <span v-if="emoji.img">
-            <img :src="emoji.img" />
+            <img :src="emoji.img">
           </span>
-          <span v-else>{{emoji.utf}}</span>
+          <span v-else>{{ emoji.utf }}</span>
-          <span>{{emoji.shortcode}}</span>
+          <span>{{ emoji.shortcode }}</span>
         </div>
       </div>
     </div>

src/components/export_import/export_import.vue

@@ -1,12 +1,27 @@
 <template>
-<div class="import-export-container">
+  <div class="import-export-container">
-  <slot name="before"/>
+    <slot name="before" />
-  <button class="btn" @click="exportData">{{ exportLabel }}</button>
+    <button
-  <button class="btn" @click="importData">{{ importLabel }}</button>
+      class="btn"
-  <slot name="afterButtons"/>
+      @click="exportData"
-  <p v-if="importFailed" class="alert error">{{ importFailedText }}</p>
+    >
-  <slot name="afterError"/>
+      {{ exportLabel }}
-</div>
+    </button>
+    <button
+      class="btn"
+      @click="importData"
+    >
+      {{ importLabel }}
+    </button>
+    <slot name="afterButtons" />
+    <p
+      v-if="importFailed"
+      class="alert error"
+    >
+      {{ importFailedText }}
+    </p>
+    <slot name="afterError" />
+  </div>
 </template>
 
 <script>
@@ -49,7 +64,7 @@ export default {
         if (event.target.files[0]) {
           // eslint-disable-next-line no-undef
           const reader = new FileReader()
-          reader.onload = ({target}) => {
+          reader.onload = ({ target }) => {
             try {
               const parsed = JSON.parse(target.result)
               const valid = this.validator(parsed)

src/components/favorite_button/favorite_button.js

@@ -11,9 +11,9 @@ const FavoriteButton = {
   methods: {
     favorite () {
       if (!this.status.favorited) {
-        this.$store.dispatch('favorite', {id: this.status.id})
+        this.$store.dispatch('favorite', { id: this.status.id })
       } else {
-        this.$store.dispatch('unfavorite', {id: this.status.id})
+        this.$store.dispatch('unfavorite', { id: this.status.id })
       }
       this.animated = true
       setTimeout(() => {

src/components/favorite_button/favorite_button.vue

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

@@ -3,17 +3,25 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
         <div class="title">
-          {{$t('features_panel.title')}}
+          {{ $t('features_panel.title') }}
         </div>
       </div>
       <div class="panel-body features-panel">
         <ul>
-          <li v-if="chat">{{$t('features_panel.chat')}}</li>
+          <li v-if="chat">
-          <li v-if="gopher">{{$t('features_panel.gopher')}}</li>
+            {{ $t('features_panel.chat') }}
-          <li v-if="whoToFollow">{{$t('features_panel.who_to_follow')}}</li>
+          </li>
-          <li v-if="mediaProxy">{{$t('features_panel.media_proxy')}}</li>
+          <li v-if="gopher">
-          <li>{{$t('features_panel.scope_options')}}</li>
+            {{ $t('features_panel.gopher') }}
-          <li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li>
+          </li>
+          <li v-if="whoToFollow">
+            {{ $t('features_panel.who_to_follow') }}
+          </li>
+          <li v-if="mediaProxy">
+            {{ $t('features_panel.media_proxy') }}
+          </li>
+          <li>{{ $t('features_panel.scope_options') }}</li>
+          <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
         </ul>
       </div>
     </div>

src/components/follow_card/follow_card.js

@@ -22,7 +22,7 @@ const FollowCard = {
     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
+      return !this.following || (this.updated && !this.updated.following)
     },
     loggedIn () {
       return this.$store.state.users.currentUser

src/components/follow_card/follow_card.vue

@@ -1,18 +1,24 @@
 <template>
   <basic-user-card :user="user">
     <div class="follow-card-content-container">
-      <span class="faint" v-if="!noFollowsYou && user.follows_you">
+      <span
+        v-if="!noFollowsYou && user.follows_you"
+        class="faint"
+      >
         {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
       </span>
-      <div class="follow-card-follow-button" v-if="showFollow && !loggedIn">
+      <div
+        v-if="showFollow && !loggedIn"
+        class="follow-card-follow-button"
+      >
         <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') : ''"
+        @click="followUser"
       >
         <template v-if="inProgress">
           {{ $t('user_card.follow_progress') }}
@@ -24,7 +30,12 @@
           {{ $t('user_card.follow') }}
         </template>
       </button>
-      <button v-if="following" class="btn btn-default follow-card-follow-button pressed" @click="unfollowUser" :disabled="inProgress">
+      <button
+        v-if="following"
+        class="btn btn-default follow-card-follow-button pressed"
+        :disabled="inProgress"
+        @click="unfollowUser"
+      >
         <template v-if="inProgress">
           {{ $t('user_card.follow_progress') }}
         </template>

src/components/follow_request_card/follow_request_card.vue

@@ -1,8 +1,18 @@
 <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
-      <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</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>

src/components/follow_requests/follow_requests.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{$t('nav.friend_requests')}}
+      {{ $t('nav.friend_requests') }}
     </div>
     <div class="panel-body">
-      <FollowRequestCard v-for="request in requests" :key="request.id" :user="request"/>
+      <FollowRequestCard
+        v-for="request in requests"
+        :key="request.id"
+        :user="request"
+      />
     </div>
   </div>
 </template>

src/components/font_control/font_control.vue

@@ -1,35 +1,56 @@
 <template>
-<div class="font-control style-control" :class="{ custom: isCustom }">
+  <div
-  <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
+    class="font-control style-control"
-    {{label}}
+    :class="{ custom: isCustom }"
-  </label>
+  >
-  <input
+    <label
-    v-if="typeof fallback !== 'undefined'"
+      :for="preset === 'custom' ? name : name + '-font-switcher'"
-    class="opt exlcude-disabled"
+      class="label"
-    type="checkbox"
+    >
-    :id="name + '-o'"
+      {{ label }}
-    :checked="present"
+    </label>
-    @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
+    <input
-  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+      v-if="typeof fallback !== 'undefined'"
-  <label :for="name + '-font-switcher'" class="select" :disabled="!present">
+      :id="name + '-o'"
-    <select
+      class="opt exlcude-disabled"
+      type="checkbox"
+      :checked="present"
+      @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+    >
+    <label
+      v-if="typeof fallback !== 'undefined'"
+      class="opt-l"
+      :for="name + '-o'"
+    />
+    <label
+      :for="name + '-font-switcher'"
+      class="select"
       :disabled="!present"
-      v-model="preset"
+    >
-      class="font-switcher"
+      <select
-      :id="name + '-font-switcher'">
+        :id="name + '-font-switcher'"
-      <option v-for="option in availableOptions" :value="option">
+        v-model="preset"
-        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+        :disabled="!present"
-      </option>
+        class="font-switcher"
-    </select>
+      >
-    <i class="icon-down-open"/>
+        <option
-  </label>
+          v-for="option in availableOptions"
-  <input
+          :key="option"
-    v-if="isCustom"
+          :value="option"
-    class="custom-font"
+        >
-    type="text"
+          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-    :id="name"
+        </option>
-    v-model="family">
+      </select>
-</div>
+      <i class="icon-down-open" />
+    </label>
+    <input
+      v-if="isCustom"
+      :id="name"
+      v-model="family"
+      class="custom-font"
+      type="text"
+    >
+  </div>
 </template>
 
 <script src="./font_control.js" ></script>

src/components/friends_timeline/friends_timeline.vue

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

src/components/gallery/gallery.vue

@@ -1,13 +1,22 @@
 <template>
-  <div ref="galleryContainer" style="width: 100%;">
+  <div
-    <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
+    ref="galleryContainer"
+    style="width: 100%;"
+  >
+    <div
+      v-for="row in rows"
+      :key="row"
+      class="gallery-row"
+      :style="rowHeight(row.length)"
+      :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"
+    >
       <attachment
         v-for="attachment in row"
-        :setMedia="setMedia"
+        :key="attachment.id"
+        :set-media="setMedia"
         :nsfw="nsfw"
         :attachment="attachment"
-        :allowPlay="false"
+        :allow-play="false"
-        :key="attachment.id"
       />
     </div>
   </div>

src/components/image_cropper/image_cropper.vue

@@ -2,20 +2,57 @@
   <div class="image-cropper">
     <div v-if="dataUrl">
       <div class="image-cropper-image-container">
-        <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
+        <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
-        <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
+          class="btn"
-        <button class="btn" type="button" :disabled="submitting" @click="submitWithoutCropping" v-text="saveWithoutCroppingText"></button>
+          type="button"
-        <i class="icon-spin4 animate-spin" v-if="submitting"></i>
+          :disabled="submitting"
+          @click="submit"
+          v-text="saveText"
+        />
+        <button
+          class="btn"
+          type="button"
+          :disabled="submitting"
+          @click="destroy"
+          v-text="cancelText"
+        />
+        <button
+          class="btn"
+          type="button"
+          :disabled="submitting"
+          @click="submitWithoutCropping"
+          v-text="saveWithoutCroppingText"
+        />
+        <i
+          v-if="submitting"
+          class="icon-spin4 animate-spin"
+        />
       </div>
-      <div class="alert error" v-if="submitError">
+      <div
-        {{submitErrorMsg}}
+        v-if="submitError"
-        <i class="button-icon icon-cancel" @click="clearError"></i>
+        class="alert error"
+      >
+        {{ submitErrorMsg }}
+        <i
+          class="button-icon icon-cancel"
+          @click="clearError"
+        />
       </div>
     </div>
-    <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
+    <input
+      ref="input"
+      type="file"
+      class="image-cropper-img-input"
+      :accept="mimes"
+    >
   </div>
 </template>
 

src/components/instance_specific_panel/instance_specific_panel.vue

@@ -1,9 +1,11 @@
 <template>
-  <div v-if="show" class="instance-specific-panel">
+  <div
+    v-if="show"
+    class="instance-specific-panel"
+  >
     <div class="panel panel-default">
       <div class="panel-body">
-        <div v-html="instanceSpecificPanelContent">
+        <div v-html="instanceSpecificPanelContent" />
-        </div>
       </div>
     </div>
   </div>

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -3,39 +3,49 @@
     <label for="interface-language-switcher">
       {{ $t('settings.interfaceLanguage') }}
     </label>
-    <label for="interface-language-switcher" class='select'>
+    <label
-      <select id="interface-language-switcher" v-model="language">
+      for="interface-language-switcher"
-        <option v-for="(langCode, i) in languageCodes" :value="langCode">
+      class="select"
+    >
+      <select
+        id="interface-language-switcher"
+        v-model="language"
+      >
+        <option
+          v-for="(langCode, i) in languageCodes"
+          :key="langCode"
+          :value="langCode"
+        >
           {{ languageNames[i] }}
         </option>
       </select>
-      <i class="icon-down-open"/>
+      <i class="icon-down-open" />
     </label>
   </div>
 </template>
 
 <script>
-  import languagesObject from '../../i18n/messages'
+import languagesObject from '../../i18n/messages'
-  import ISO6391 from 'iso-639-1'
+import ISO6391 from 'iso-639-1'
-  import _ from 'lodash'
+import _ from 'lodash'
 
-  export default {
+export default {
-    computed: {
+  computed: {
-      languageCodes () {
+    languageCodes () {
-        return Object.keys(languagesObject)
+      return Object.keys(languagesObject)
-      },
+    },
 
-      languageNames () {
+    languageNames () {
-        return _.map(this.languageCodes, ISO6391.getName)
+      return _.map(this.languageCodes, ISO6391.getName)
-      },
+    },
 
-      language: {
+    language: {
-        get: function () { return this.$store.state.config.interfaceLanguage },
+      get: function () { return this.$store.state.config.interfaceLanguage },
-        set: function (val) {
+      set: function (val) {
-          this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-          this.$i18n.locale = val
+        this.$i18n.locale = val
-        }
       }
     }
   }
+}
 </script>

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

@@ -1,13 +1,25 @@
 <template>
   <div>
-    <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
+    <a
-      <div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
+      class="link-preview-card"
-        <img :src="card.image"></img>
+      :href="card.url"
+      target="_blank"
+      rel="noopener"
+    >
+      <div
+        v-if="useImage"
+        class="card-image"
+        :class="{ 'small-image': size === 'small' }"
+      >
+        <img :src="card.image">
       </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>
+        <p
+          v-if="useDescription"
+          class="card-description"
+        >{{ card.description }}</p>
       </div>
     </a>
   </div>

src/components/login_form/login_form.js

@@ -39,7 +39,7 @@ const LoginForm = {
           }
           this.$store.commit('setToken', result.access_token)
           this.$store.dispatch('loginUser', result.access_token)
-          this.$router.push({name: 'friends'})
+          this.$router.push({ name: 'friends' })
         })
       })
     },

src/components/login_form/login_form.vue

@@ -2,42 +2,96 @@
   <div class="login panel panel-default">
     <!-- Default panel contents -->
     <div class="panel-heading">
-      {{$t('login.login')}}
+      {{ $t('login.login') }}
     </div>
     <div class="panel-body">
-      <form v-if="loginMethod == 'password'" v-on:submit.prevent='submit(user)' class='login-form'>
+      <form
-        <div class='form-group'>
+        v-if="loginMethod == 'password'"
-          <label for='username'>{{$t('login.username')}}</label>
+        class="login-form"
-          <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' v-bind:placeholder="$t('login.placeholder')">
+        @submit.prevent="submit(user)"
-        </div>
+      >
-        <div class='form-group'>
-          <label for='password'>{{$t('login.password')}}</label>
-          <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
-        </div>
-        <div class='form-group'>
-          <div class='login-bottom'>
-            <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
-            <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
-          </div>
-        </div>
-      </form>
-
-      <form v-if="loginMethod == 'token'" v-on:submit.prevent='oAuthLogin'  class="login-form">
         <div class="form-group">
-          <p>{{$t('login.description')}}</p>
+          <label for="username">{{ $t('login.username') }}</label>
+          <input
+            id="username"
+            v-model="user.username"
+            :disabled="loggingIn"
+            class="form-control"
+            :placeholder="$t('login.placeholder')"
+          >
         </div>
-        <div class='form-group'>
+        <div class="form-group">
-          <div class='login-bottom'>
+          <label for="password">{{ $t('login.password') }}</label>
-            <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
+          <input
-            <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
+            id="password"
+            v-model="user.password"
+            :disabled="loggingIn"
+            class="form-control"
+            type="password"
+          >
+        </div>
+        <div class="form-group">
+          <div class="login-bottom">
+            <div>
+              <router-link
+                v-if="registrationOpen"
+                :to="{name: 'registration'}"
+                class="register"
+              >
+                {{ $t('login.register') }}
+              </router-link>
+            </div>
+            <button
+              :disabled="loggingIn"
+              type="submit"
+              class="btn btn-default"
+            >
+              {{ $t('login.login') }}
+            </button>
           </div>
         </div>
       </form>
 
-      <div v-if="authError" class='form-group'>
+      <form
-        <div class='alert error'>
+        v-if="loginMethod == 'token'"
-          {{authError}}
+        class="login-form"
-          <i class="button-icon icon-cancel" @click="clearError"></i>
+        @submit.prevent="oAuthLogin"
+      >
+        <div class="form-group">
+          <p>{{ $t('login.description') }}</p>
+        </div>
+        <div class="form-group">
+          <div class="login-bottom">
+            <div>
+              <router-link
+                v-if="registrationOpen"
+                :to="{name: 'registration'}"
+                class="register"
+              >
+                {{ $t('login.register') }}
+              </router-link>
+            </div>
+            <button
+              :disabled="loggingIn"
+              type="submit"
+              class="btn btn-default"
+            >
+              {{ $t('login.login') }}
+            </button>
+          </div>
+        </div>
+      </form>
+
+      <div
+        v-if="authError"
+        class="form-group"
+      >
+        <div class="alert error">
+          {{ authError }}
+          <i
+            class="button-icon icon-cancel"
+            @click="clearError"
+          />
         </div>
       </div>
     </div>

src/components/media_modal/media_modal.vue

@@ -1,25 +1,33 @@
 <template>
-  <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide">
+  <div
-    <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
+    v-if="showing"
-    <VideoAttachment
+    class="modal-view media-modal-view"
+    @click.prevent="hide"
+  >
+    <img
+      v-if="type === 'image'"
       class="modal-image"
+      :src="currentMedia.url"
+    >
+    <VideoAttachment
       v-if="type === 'video'"
+      class="modal-image"
       :attachment="currentMedia"
       :controls="true"
-      @click.stop.native="">
+      @click.stop.native=""
-    </VideoAttachment>
+    />
     <button
+      v-if="canNavigate"
       :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
+      v-if="canNavigate"
       :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" />

src/components/media_upload/media_upload.js

@@ -16,7 +16,7 @@ const mediaUpload = {
       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})
+        self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
         return
       }
       const formData = new FormData()
@@ -36,7 +36,7 @@ const mediaUpload = {
     },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
-        e.preventDefault()  // allow dropping text like before
+        e.preventDefault() // allow dropping text like before
         this.uploadFile(e.dataTransfer.files[0])
       }
     },
@@ -54,7 +54,7 @@ const mediaUpload = {
         this.uploadReady = true
       })
     },
-    change ({target}) {
+    change ({ target }) {
       for (var i = 0; i < target.files.length; i++) {
         let file = target.files[i]
         this.uploadFile(file)

src/components/media_upload/media_upload.vue

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

src/components/mentions/mentions.vue

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

src/components/mobile_nav/mobile_nav.vue

@@ -1,34 +1,71 @@
 <template>
-  <nav class='nav-bar container' id="nav">
+  <nav
-    <div class='mobile-inner-nav' @click="scrollToTop()">
+    id="nav"
-      <div class='item'>
+    class="nav-bar container"
-        <a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
+  >
-          <i class="button-icon icon-menu"></i>
+    <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" />
         </a>
-        <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
+        <router-link
+          class="site-name"
+          :to="{ name: 'root' }"
+          active-class="home"
+        >
+          {{ sitename }}
+        </router-link>
       </div>
-      <div class='item right'>
+      <div class="item right">
-        <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
+        <a
-          <i class="button-icon icon-bell-alt"></i>
+          v-if="currentUser"
-          <div class="alert-dot" v-if="unseenNotificationsCount"></div>
+          class="mobile-nav-button"
+          href="#"
+          @click.stop.prevent="openMobileNotifications()"
+        >
+          <i class="button-icon icon-bell-alt" />
+          <div
+            v-if="unseenNotificationsCount"
+            class="alert-dot"
+          />
         </a>
       </div>
     </div>
-    <SideDrawer ref="sideDrawer" :logout="logout"/>
+    <SideDrawer
-    <div v-if="currentUser"
+      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>
+        <span class="title">{{ $t('notifications.notifications') }}</span>
-        <a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
+        <a
-          <i class="button-icon icon-cancel"/>
+          class="mobile-nav-button"
+          @click.stop.prevent="closeMobileNotifications()"
+        >
+          <i class="button-icon icon-cancel" />
         </a>
       </div>
-      <div v-if="currentUser" class="mobile-notifications">
+      <div
-        <Notifications ref="notifications" noHeading="true"/>
+        v-if="currentUser"
+        class="mobile-notifications"
+      >
+        <Notifications
+          ref="notifications"
+          no-heading="true"
+        />
       </div>
     </div>
     <MobilePostStatusModal />

src/components/mobile_post_status_modal/mobile_post_status_modal.vue

@@ -1,23 +1,31 @@
 <template>
-<div v-if="currentUser">
+  <div v-if="currentUser">
-  <div
+    <div
-    class="post-form-modal-view modal-view"
+      v-show="postFormOpen"
-    v-show="postFormOpen"
+      class="post-form-modal-view modal-view"
-    @click="closePostForm"
+      @click="closePostForm"
-  >
+    >
-    <div class="post-form-modal-panel panel" @click.stop="">
+      <div
-      <div class="panel-heading">{{$t('post_status.new_status')}}</div>
+        class="post-form-modal-panel panel"
-      <PostStatusForm class="panel-body" @posted="closePostForm"/>
+        @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>
-  <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>

src/components/mute_card/mute_card.vue

@@ -1,7 +1,12 @@
 <template>
   <basic-user-card :user="user">
     <div class="mute-card-content-container">
-      <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
+      <button
+        v-if="muted"
+        class="btn btn-default"
+        :disabled="progress"
+        @click="unmuteUser"
+      >
         <template v-if="progress">
           {{ $t('user_card.unmute_progress') }}
         </template>
@@ -9,7 +14,12 @@
           {{ $t('user_card.unmute') }}
         </template>
       </button>
-      <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else>
+      <button
+        v-else
+        class="btn btn-default"
+        :disabled="progress"
+        @click="muteUser"
+      >
         <template v-if="progress">
           {{ $t('user_card.mute_progress') }}
         </template>

src/components/nav_panel/nav_panel.vue

@@ -2,26 +2,29 @@
   <div class="nav-panel">
     <div class="panel panel-default">
       <ul>
-        <li v-if='currentUser'>
+        <li v-if="currentUser">
           <router-link :to="{ name: 'friends' }">
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
-        <li v-if='currentUser'>
+        <li v-if="currentUser">
           <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}
           </router-link>
         </li>
-        <li v-if='currentUser'>
+        <li v-if="currentUser">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             {{ $t("nav.dms") }}
           </router-link>
         </li>
-        <li v-if='currentUser && currentUser.locked'>
+        <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
-            {{ $t("nav.friend_requests")}}
+            {{ $t("nav.friend_requests") }}
-            <span v-if='followRequestCount > 0' class="badge follow-request-count">
+            <span
-              {{followRequestCount}}
+              v-if="followRequestCount > 0"
+              class="badge follow-request-count"
+            >
+              {{ followRequestCount }}
             </span>
           </router-link>
         </li>

src/components/notification/notification.vue

@@ -1,41 +1,90 @@
 <template>
-  <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
+  <status
-  <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]" v-else>
+    v-if="notification.type === 'mention'"
-    <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
+    :compact="true"
-      <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
+    :statusoid="notification.status"
+  />
+  <div
+    v-else
+    class="non-mention"
+    :class="[userClass, { highlighted: userStyle }]"
+    :style="[ userStyle ]"
+  >
+    <a
+      class="avatar-container"
+      :href="notification.action.user.statusnet_profile_url"
+      @click.stop.prevent.capture="toggleUserExpanded"
+    >
+      <UserAvatar
+        :compact="true"
+        :better-shadow="betterShadow"
+        :src="notification.action.user.profile_image_url_original"
+      />
     </a>
-    <div class='notification-right'>
+    <div class="notification-right">
-      <UserCard :user="user" :rounded="true" :bordered="true" v-if="userExpanded"/>
+      <UserCard
+        v-if="userExpanded"
+        :user="user"
+        :rounded="true"
+        :bordered="true"
+      />
       <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
-          <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+            v-if="!!notification.action.user.name_html"
+            class="username"
+            :title="'@'+notification.action.user.screen_name"
+            v-html="notification.action.user.name_html"
+          />
+          <span
+            v-else
+            class="username"
+            :title="'@'+notification.action.user.screen_name"
+          >{{ notification.action.user.name }}</span>
           <span v-if="notification.type === 'like'">
-            <i class="fa icon-star lit"></i>
+            <i class="fa icon-star lit" />
-            <small>{{$t('notifications.favorited_you')}}</small>
+            <small>{{ $t('notifications.favorited_you') }}</small>
           </span>
           <span v-if="notification.type === 'repeat'">
-            <i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i>
+            <i
-            <small>{{$t('notifications.repeated_you')}}</small>
+              class="fa icon-retweet lit"
+              :title="$t('tool_tip.repeat')"
+            />
+            <small>{{ $t('notifications.repeated_you') }}</small>
           </span>
           <span v-if="notification.type === 'follow'">
-            <i class="fa icon-user-plus lit"></i>
+            <i class="fa icon-user-plus lit" />
-            <small>{{$t('notifications.followed_you')}}</small>
+            <small>{{ $t('notifications.followed_you') }}</small>
           </span>
         </div>
         <div class="timeago">
-          <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link">
+          <router-link
-            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+            v-if="notification.status"
+            :to="{ name: 'conversation', params: { id: notification.status.id } }"
+            class="faint-link"
+          >
+            <timeago
+              :since="notification.action.created_at"
+              :auto-update="240"
+            />
           </router-link>
         </div>
       </span>
-      <div class="follow-text" v-if="notification.type === 'follow'">
+      <div
+        v-if="notification.type === 'follow'"
+        class="follow-text"
+      >
         <router-link :to="userProfileLink(notification.action.user)">
-          @{{notification.action.user.screen_name}}
+          @{{ notification.action.user.screen_name }}
         </router-link>
       </div>
       <template v-else>
-        <status class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
+        <status
+          class="faint"
+          :compact="true"
+          :statusoid="notification.status"
+          :no-heading="true"
+        />
       </template>
     </div>
   </div>

src/components/notifications/notifications.vue

@@ -1,31 +1,62 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default">
-      <div v-if="!noHeading" class="panel-heading">
+      <div
+        v-if="!noHeading"
+        class="panel-heading"
+      >
         <div class="title">
-          {{$t('notifications.notifications')}}
+          {{ $t('notifications.notifications') }}
-          <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+          <span
+            v-if="unseenCount"
+            class="badge badge-notification unseen-count"
+          >{{ unseenCount }}</span>
         </div>
-        <div @click.prevent class="loadmore-error alert error" v-if="error">
+        <div
-          {{$t('timeline.error_fetching')}}
+          v-if="error"
+          class="loadmore-error alert error"
+          @click.prevent
+        >
+          {{ $t('timeline.error_fetching') }}
         </div>
-        <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
+        <button
+          v-if="unseenCount"
+          class="read-button"
+          @click.prevent="markAsSeen"
+        >
+          {{ $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
-          <div class="notification-overlay"></div>
+          v-for="notification in visibleNotifications"
-          <notification :notification="notification"></notification>
+          :key="notification.action.id"
+          class="notification"
+          :class="{&quot;unseen&quot;: !notification.seen}"
+        >
+          <div class="notification-overlay" />
+          <notification :notification="notification" />
         </div>
       </div>
       <div class="panel-footer">
-        <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+        <div
-          {{$t('notifications.no_more_notifications')}}
+          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()">
+        <a
-          <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div>
+          v-else-if="!loading"
+          href="#"
+          @click.prevent="fetchOlderNotifications()"
+        >
+          <div class="new-status-notification text-center panel-footer">{{ $t('notifications.load_older') }}</div>
         </a>
-        <div v-else class="new-status-notification text-center panel-footer">
+        <div
-          <i class="icon-spin3 animate-spin"/>
+          v-else
+          class="new-status-notification text-center panel-footer"
+        >
+          <i class="icon-spin3 animate-spin" />
         </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({name: 'friends'})
+        this.$router.push({ name: 'friends' })
       })
     }
   }

src/components/opacity_input/opacity_input.vue

@@ -1,27 +1,39 @@
 <template>
-<div class="opacity-control style-control" :class="{ disabled: !present || disabled }">
+  <div
-  <label :for="name" class="label">
+    class="opacity-control style-control"
-    {{$t('settings.style.common.opacity')}}
+    :class="{ disabled: !present || disabled }"
-  </label>
+  >
-  <input
+    <label
-    v-if="typeof fallback !== 'undefined'"
+      :for="name"
-    class="opt exclude-disabled"
+      class="label"
-    :id="name + '-o'"
+    >
-    type="checkbox"
+      {{ $t('settings.style.common.opacity') }}
-    :checked="present"
+    </label>
-    @input="$emit('input', !present ? fallback : undefined)">
+    <input
-  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+      v-if="typeof fallback !== 'undefined'"
-  <input
+      :id="name + '-o'"
-    :id="name"
+      class="opt exclude-disabled"
-    class="input-number"
+      type="checkbox"
-    type="number"
+      :checked="present"
-    :value="value || fallback"
+      @input="$emit('input', !present ? fallback : undefined)"
-    :disabled="!present || disabled"
+    >
-    @input="$emit('input', $event.target.value)"
+    <label
-    max="1"
+      v-if="typeof fallback !== 'undefined'"
-    min="0"
+      class="opt-l"
-    step=".05">
+      :for="name + '-o'"
-</div>
+    />
+    <input
+      :id="name"
+      class="input-number"
+      type="number"
+      :value="value || fallback"
+      :disabled="!present || disabled"
+      max="1"
+      min="0"
+      step=".05"
+      @input="$emit('input', $event.target.value)"
+    >
+  </div>
 </template>
 
 <script>

src/components/post_status_form/post_status_form.js

@@ -6,13 +6,13 @@ 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'
 
-const buildMentionsString = ({user, attentions}, currentUser) => {
+const buildMentionsString = ({ user, attentions }, currentUser) => {
   let allAttentions = [...attentions]
 
   allAttentions.unshift(user)
 
   allAttentions = uniqBy(allAttentions, 'id')
-  allAttentions = reject(allAttentions, {id: currentUser.id})
+  allAttentions = reject(allAttentions, { id: currentUser.id })
 
   let mentions = map(allAttentions, (attention) => {
     return `@${attention.screen_name}`
@@ -48,17 +48,17 @@ const PostStatusForm = {
     let statusText = preset || ''
 
     const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
-          ? this.$store.state.instance.scopeCopy
+      ? this.$store.state.instance.scopeCopy
-          : this.$store.state.config.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 && scopeCopy || this.copyMessageScope === 'direct')
+    const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct')
-          ? this.copyMessageScope
+      ? this.copyMessageScope
-          : this.$store.state.users.currentUser.default_scope
+      : this.$store.state.users.currentUser.default_scope
 
     const contentType = typeof this.$store.state.config.postContentType === 'undefined'
       ? this.$store.state.instance.postContentType
@@ -88,13 +88,13 @@ const PostStatusForm = {
         const query = this.textAtCaret.slice(1).toUpperCase()
         const matchedUsers = filter(this.users, (user) => {
           return user.screen_name.toUpperCase().startsWith(query) ||
-            user.name && user.name.toUpperCase().startsWith(query)
+            (user.name && user.name.toUpperCase().startsWith(query))
         })
         if (matchedUsers.length <= 0) {
           return false
         }
         // eslint-disable-next-line camelcase
-        return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}, index) => ({
+        return map(take(matchedUsers, 5), ({ screen_name, name, profile_image_url_original }, index) => ({
           // eslint-disable-next-line camelcase
           screen_name: `@${screen_name}`,
           name: name,
@@ -107,7 +107,8 @@ const PostStatusForm = {
         if (matchedEmoji.length <= 0) {
           return false
         }
-        return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
+        // eslint-disable-next-line camelcase
+        return map(take(matchedEmoji, 5), ({ shortcode, image_url, utf }, index) => ({
           screen_name: `:${shortcode}:`,
           name: '',
           utf: utf || '',
@@ -134,8 +135,8 @@ const PostStatusForm = {
     },
     showAllScopes () {
       const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined'
-            ? this.$store.state.instance.minimalScopesMode
+        ? this.$store.state.instance.minimalScopesMode
-            : this.$store.state.config.minimalScopesMode
+        : this.$store.state.config.minimalScopesMode
       return !minimalScopesMode
     },
     emoji () {
@@ -233,7 +234,7 @@ const PostStatusForm = {
     onKeydown (e) {
       e.stopPropagation()
     },
-    setCaret ({target: {selectionStart}}) {
+    setCaret ({ target: { selectionStart } }) {
       this.caret = selectionStart
     },
     postStatus (newStatus) {
@@ -314,7 +315,7 @@ const PostStatusForm = {
     },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
-        e.preventDefault()  // allow dropping text like before
+        e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
       }
     },

src/components/post_status_form/post_status_form.vue

@@ -1,107 +1,204 @@
 <template>
-<div class="post-status-form">
+  <div class="post-status-form">
-  <form @submit.prevent="postStatus(newStatus)">
+    <form @submit.prevent="postStatus(newStatus)">
-    <div class="form-group" >
+      <div class="form-group">
-      <i18n
+        <i18n
-        v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
+          v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
-        path="post_status.account_not_locked_warning"
+          path="post_status.account_not_locked_warning"
-        tag="p"
+          tag="p"
-        class="visibility-notice">
+          class="visibility-notice"
-        <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
+        >
-      </i18n>
+          <router-link :to="{ name: 'user-settings' }">
-      <p v-if="newStatus.visibility === 'direct'" class="visibility-notice">
+            {{ $t('post_status.account_not_locked_warning_link') }}
-        <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
+          </router-link>
-        <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
+        </i18n>
-      </p>
+        <p
-      <EmojiInput
+          v-if="newStatus.visibility === 'direct'"
-        v-if="newStatus.spoilerText || alwaysShowSubject"
+          class="visibility-notice"
-        type="text"
+        >
-        :placeholder="$t('post_status.content_warning')"
+          <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
-        v-model="newStatus.spoilerText"
+          <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
-        classname="form-control"
+        </p>
-      />
+        <EmojiInput
-      <textarea
+          v-if="newStatus.spoilerText || alwaysShowSubject"
-        ref="textarea"
+          v-model="newStatus.spoilerText"
-        @click="setCaret"
+          type="text"
-        @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
+          :placeholder="$t('post_status.content_warning')"
-        @keydown="onKeydown"
+          classname="form-control"
-        @keydown.down="cycleForward"
+        />
-        @keydown.up="cycleBackward"
+        <textarea
-        @keydown.shift.tab="cycleBackward"
+          ref="textarea"
-        @keydown.tab="cycleForward"
+          v-model="newStatus.status"
-        @keydown.enter="replaceCandidate"
+          :placeholder="$t('post_status.default')"
-        @keydown.meta.enter="postStatus(newStatus)"
+          rows="1"
-        @keyup.ctrl.enter="postStatus(newStatus)"
+          class="form-control"
-        @drop="fileDrop"
+          :disabled="posting"
-        @dragover.prevent="fileDrag"
+          @click="setCaret"
-        @input="resize"
+          @keyup.exact="setCaret"
-        @paste="paste"
+          @keydown.exact="onKeydown"
-        :disabled="posting"
+          @keydown.exact.down="cycleForward"
-      >
+          @keydown.exact.up="cycleBackward"
-      </textarea>
+          @keydown.exact.shift.tab="cycleBackward"
-      <div class="visibility-tray">
+          @keydown.exact.tab="cycleForward"
-        <span class="text-format" v-if="formattingOptionsEnabled">
+          @keydown.exact.enter="replaceCandidate"
-          <label for="post-content-type" class="select">
+          @keydown.exact.meta.enter="postStatus(newStatus)"
-            <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
+          @keyup.exact.ctrl.enter="postStatus(newStatus)"
-              <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat">
+          @drop="fileDrop"
-                {{$t(`post_status.content_type["${postFormat}"]`)}}
+          @dragover.prevent="fileDrag"
-              </option>
+          @input="resize"
-            </select>
+          @paste="paste"
-            <i class="icon-down-open"></i>
+        />
-          </label>
+        <div class="visibility-tray">
-        </span>
+          <span
+            v-if="formattingOptionsEnabled"
+            class="text-format"
+          >
+            <label
+              for="post-content-type"
+              class="select"
+            >
+              <select
+                id="post-content-type"
+                v-model="newStatus.contentType"
+                class="form-control"
+              >
+                <option
+                  v-for="postFormat in postFormats"
+                  :key="postFormat"
+                  :value="postFormat"
+                >
+                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
+                </option>
+              </select>
+              <i class="icon-down-open" />
+            </label>
+          </span>
 
-        <scope-selector
+          <scope-selector
-          :showAll="showAllScopes"
+            :show-all="showAllScopes"
-          :userDefault="userDefaultScope"
+            :user-default="userDefaultScope"
-          :originalScope="copyMessageScope"
+            :original-scope="copyMessageScope"
-          :initialScope="newStatus.visibility"
+            :initial-scope="newStatus.visibility"
-          :onScopeChange="changeVis"/>
+            :on-scope-change="changeVis"
+          />
+        </div>
       </div>
-    </div>
+      <div
-    <div class="autocomplete-panel" v-if="candidates">
+        v-if="candidates"
+        class="autocomplete-panel"
+      >
         <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 }"
+            @click="replace(candidate.utf || (candidate.screen_name + ' '))"
           >
-            <span v-if="candidate.img"><img :src="candidate.img" /></span>
+            <span v-if="candidate.img"><img :src="candidate.img"></span>
-            <span v-else>{{candidate.utf}}</span>
+            <span v-else>{{ candidate.utf }}</span>
-            <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
+            <span>{{ candidate.screen_name }}<small>{{ candidate.name }}</small></span>
           </div>
         </div>
       </div>
-      <div class='form-bottom'>
+      <div class="form-bottom">
-        <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>
+        <media-upload
+          ref="mediaUpload"
+          :drop-files="dropFiles"
+          @uploading="disableSubmit"
+          @uploaded="addMediaFile"
+          @upload-failed="uploadFailed"
+        />
 
-        <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
+        <p
-        <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
+          v-if="isOverLengthLimit"
+          class="error"
+        >
+          {{ charactersLeft }}
+        </p>
+        <p
+          v-else-if="hasStatusLengthLimit"
+          class="faint"
+        >
+          {{ charactersLeft }}
+        </p>
 
-        <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
+        <button
-        <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
+          v-if="posting"
-        <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
+          disabled
+          class="btn btn-default"
+        >
+          {{ $t('post_status.posting') }}
+        </button>
+        <button
+          v-else-if="isOverLengthLimit"
+          disabled
+          class="btn btn-default"
+        >
+          {{ $t('general.submit') }}
+        </button>
+        <button
+          v-else
+          :disabled="submitDisabled"
+          type="submit"
+          class="btn btn-default"
+        >
+          {{ $t('general.submit') }}
+        </button>
       </div>
-      <div class='alert error' v-if="error">
+      <div
+        v-if="error"
+        class="alert error"
+      >
         Error: {{ error }}
-        <i class="button-icon icon-cancel" @click="clearError"></i>
+        <i
+          class="button-icon icon-cancel"
+          @click="clearError"
+        />
       </div>
       <div class="attachments">
-        <div class="media-upload-wrapper" v-for="file in newStatus.files">
+        <div
-          <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
+          v-for="file in newStatus.files"
+          :key="file.url"
+          class="media-upload-wrapper"
+        >
+          <i
+            class="fa button-icon icon-cancel"
+            @click="removeMediaFile(file)"
+          />
           <div class="media-upload-container attachment">
-            <img class="thumbnail media-upload" :src="file.url" v-if="type(file) === 'image'"></img>
+            <img
-            <video v-if="type(file) === 'video'" :src="file.url" controls></video>
+              v-if="type(file) === 'image'"
-            <audio v-if="type(file) === 'audio'" :src="file.url" controls></audio>
+              class="thumbnail media-upload"
-            <a v-if="type(file) === 'unknown'" :href="file.url">{{file.url}}</a>
+              :src="file.url"
+            >
+            <video
+              v-if="type(file) === 'video'"
+              :src="file.url"
+              controls
+            />
+            <audio
+              v-if="type(file) === 'audio'"
+              :src="file.url"
+              controls
+            />
+            <a
+              v-if="type(file) === 'unknown'"
+              :href="file.url"
+            >{{ file.url }}</a>
           </div>
         </div>
       </div>
-      <div class="upload_settings" v-if="newStatus.files.length > 0">
+      <div
-        <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
+        v-if="newStatus.files.length > 0"
-        <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
+        class="upload_settings"
+      >
+        <input
+          id="filesSensitive"
+          v-model="newStatus.nsfw"
+          type="checkbox"
+        >
+        <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
       </div>
     </form>
   </div>
@@ -214,7 +311,6 @@
     }
   }
 
-
   .btn {
     cursor: pointer;
   }

src/components/public_and_external_timeline/public_and_external_timeline.vue

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

src/components/public_timeline/public_timeline.vue

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

src/components/range_input/range_input.vue

@@ -1,37 +1,50 @@
 <template>
-<div class="range-control style-control" :class="{ disabled: !present || disabled }">
+  <div
-  <label :for="name" class="label">
+    class="range-control style-control"
-    {{label}}
+    :class="{ disabled: !present || disabled }"
-  </label>
+  >
-  <input
+    <label
-    v-if="typeof fallback !== 'undefined'"
+      :for="name"
-    class="opt exclude-disabled"
+      class="label"
-    :id="name + '-o'"
+    >
-    type="checkbox"
+      {{ label }}
-    :checked="present"
+    </label>
-    @input="$emit('input', !present ? fallback : undefined)">
+    <input
-  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+      v-if="typeof fallback !== 'undefined'"
-  <input
+      :id="name + '-o'"
-    :id="name"
+      class="opt exclude-disabled"
-    class="input-number"
+      type="checkbox"
-    type="range"
+      :checked="present"
-    :value="value || fallback"
+      @input="$emit('input', !present ? fallback : undefined)"
-    :disabled="!present || disabled"
+    >
-    @input="$emit('input', $event.target.value)"
+    <label
-    :max="max || hardMax || 100"
+      v-if="typeof fallback !== 'undefined'"
-    :min="min || hardMin || 0"
+      class="opt-l"
-    :step="step || 1">
+      :for="name + '-o'"
-  <input
+    />
-    :id="name"
+    <input
-    class="input-number"
+      :id="name"
-    type="number"
+      class="input-number"
-    :value="value || fallback"
+      type="range"
-    :disabled="!present || disabled"
+      :value="value || fallback"
-    @input="$emit('input', $event.target.value)"
+      :disabled="!present || disabled"
-    :max="hardMax"
+      :max="max || hardMax || 100"
-    :min="hardMin"
+      :min="min || hardMin || 0"
-    :step="step || 1">
+      :step="step || 1"
-</div>
+      @input="$emit('input', $event.target.value)"
+    >
+    <input
+      :id="name"
+      class="input-number"
+      type="number"
+      :value="value || fallback"
+      :disabled="!present || disabled"
+      :max="hardMax"
+      :min="hardMin"
+      :step="step || 1"
+      @input="$emit('input', $event.target.value)"
+    >
+  </div>
 </template>
 
 <script>

src/components/registration/registration.js

@@ -28,7 +28,7 @@ const registration = {
   },
   created () {
     if ((!this.registrationOpen && !this.token) || this.signedIn) {
-      this.$router.push({name: 'root'})
+      this.$router.push({ name: 'root' })
     }
 
     this.setCaptcha()
@@ -61,7 +61,7 @@ const registration = {
       if (!this.$v.$invalid) {
         try {
           await this.signUp(this.user)
-          this.$router.push({name: 'friends'})
+          this.$router.push({ name: 'friends' })
         } catch (error) {
           console.warn('Registration failed: ' + error)
         }

src/components/registration/registration.vue

@@ -1,109 +1,234 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{$t('registration.registration')}}
+      {{ $t('registration.registration') }}
     </div>
     <div class="panel-body">
-      <form v-on:submit.prevent='submit(user)' class='registration-form'>
+      <form
-        <div class='container'>
+        class="registration-form"
-          <div class='text-fields'>
+        @submit.prevent="submit(user)"
-            <div class='form-group' :class="{ 'form-group--error': $v.user.username.$error }">
+      >
-              <label class='form--label' for='sign-up-username'>{{$t('login.username')}}</label>
+        <div class="container">
-              <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' :placeholder="$t('registration.username_placeholder')">
+          <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
+                id="sign-up-username"
+                v-model.trim="$v.user.username.$model"
+                :disabled="isPending"
+                class="form-control"
+                :placeholder="$t('registration.username_placeholder')"
+              >
             </div>
-            <div class="form-error" v-if="$v.user.username.$dirty">
+            <div
+              v-if="$v.user.username.$dirty"
+              class="form-error"
+            >
               <ul>
                 <li v-if="!$v.user.username.required">
-                  <span>{{$t('registration.validations.username_required')}}</span>
+                  <span>{{ $t('registration.validations.username_required') }}</span>
                 </li>
               </ul>
             </div>
 
-            <div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
+            <div
-              <label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
+              class="form-group"
-              <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')">
+              :class="{ 'form-group--error': $v.user.fullname.$error }"
+            >
+              <label
+                class="form--label"
+                for="sign-up-fullname"
+              >{{ $t('registration.fullname') }}</label>
+              <input
+                id="sign-up-fullname"
+                v-model.trim="$v.user.fullname.$model"
+                :disabled="isPending"
+                class="form-control"
+                :placeholder="$t('registration.fullname_placeholder')"
+              >
             </div>
-            <div class="form-error" v-if="$v.user.fullname.$dirty">
+            <div
+              v-if="$v.user.fullname.$dirty"
+              class="form-error"
+            >
               <ul>
                 <li v-if="!$v.user.fullname.required">
-                  <span>{{$t('registration.validations.fullname_required')}}</span>
+                  <span>{{ $t('registration.validations.fullname_required') }}</span>
                 </li>
               </ul>
             </div>
 
-            <div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
+            <div
-              <label class='form--label' for='email'>{{$t('registration.email')}}</label>
+              class="form-group"
-              <input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
+              :class="{ 'form-group--error': $v.user.email.$error }"
+            >
+              <label
+                class="form--label"
+                for="email"
+              >{{ $t('registration.email') }}</label>
+              <input
+                id="email"
+                v-model="$v.user.email.$model"
+                :disabled="isPending"
+                class="form-control"
+                type="email"
+              >
             </div>
-            <div class="form-error" v-if="$v.user.email.$dirty">
+            <div
+              v-if="$v.user.email.$dirty"
+              class="form-error"
+            >
               <ul>
                 <li v-if="!$v.user.email.required">
-                  <span>{{$t('registration.validations.email_required')}}</span>
+                  <span>{{ $t('registration.validations.email_required') }}</span>
                 </li>
               </ul>
             </div>
 
-            <div class='form-group'>
+            <div class="form-group">
-              <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label>
+              <label
-              <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="bioPlaceholder"></textarea>
+                class="form--label"
+                for="bio"
+              >{{ $t('registration.bio') }} ({{ $t('general.optional') }})</label>
+              <textarea
+                id="bio"
+                v-model="user.bio"
+                :disabled="isPending"
+                class="form-control"
+                :placeholder="bioPlaceholder"
+              />
             </div>
 
-            <div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
+            <div
-              <label class='form--label' for='sign-up-password'>{{$t('login.password')}}</label>
+              class="form-group"
-              <input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'>
+              :class="{ 'form-group--error': $v.user.password.$error }"
+            >
+              <label
+                class="form--label"
+                for="sign-up-password"
+              >{{ $t('login.password') }}</label>
+              <input
+                id="sign-up-password"
+                v-model="user.password"
+                :disabled="isPending"
+                class="form-control"
+                type="password"
+              >
             </div>
-            <div class="form-error" v-if="$v.user.password.$dirty">
+            <div
+              v-if="$v.user.password.$dirty"
+              class="form-error"
+            >
               <ul>
                 <li v-if="!$v.user.password.required">
-                  <span>{{$t('registration.validations.password_required')}}</span>
+                  <span>{{ $t('registration.validations.password_required') }}</span>
                 </li>
               </ul>
             </div>
 
-            <div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }">
+            <div
-              <label class='form--label' for='sign-up-password-confirmation'>{{$t('registration.password_confirm')}}</label>
+              class="form-group"
-              <input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
+              :class="{ 'form-group--error': $v.user.confirm.$error }"
+            >
+              <label
+                class="form--label"
+                for="sign-up-password-confirmation"
+              >{{ $t('registration.password_confirm') }}</label>
+              <input
+                id="sign-up-password-confirmation"
+                v-model="user.confirm"
+                :disabled="isPending"
+                class="form-control"
+                type="password"
+              >
             </div>
-            <div class="form-error" v-if="$v.user.confirm.$dirty">
+            <div
+              v-if="$v.user.confirm.$dirty"
+              class="form-error"
+            >
               <ul>
                 <li v-if="!$v.user.confirm.required">
-                  <span>{{$t('registration.validations.password_confirmation_required')}}</span>
+                  <span>{{ $t('registration.validations.password_confirmation_required') }}</span>
                 </li>
                 <li v-if="!$v.user.confirm.sameAsPassword">
-                  <span>{{$t('registration.validations.password_confirmation_match')}}</span>
+                  <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
                 </li>
               </ul>
             </div>
 
-            <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
+            <div
-              <label class='form--label' for='captcha-label'>{{$t('captcha')}}</label>
+              v-if="captcha.type != 'none'"
+              id="captcha-group"
+              class="form-group"
+            >
+              <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">
+                <img
+                  :src="captcha.url"
+                  @click="setCaptcha"
+                >
 
-                <sub>{{$t('registration.new_captcha')}}</sub>
+                <sub>{{ $t('registration.new_captcha') }}</sub>
 
-                <input :disabled="isPending"
+                <input
-                  v-model='captcha.solution'
+                  id="captcha-answer"
-                  class='form-control' id='captcha-answer' type='text' autocomplete="off">
+                  v-model="captcha.solution"
+                  :disabled="isPending"
+                  class="form-control"
+                  type="text"
+                  autocomplete="off"
+                >
               </template>
             </div>
 
-            <div class='form-group' v-if='token' >
+            <div
-              <label for='token'>{{$t('registration.token')}}</label>
+              v-if="token"
-              <input disabled='true' v-model='token' class='form-control' id='token' type='text'>
+              class="form-group"
+            >
+              <label for="token">{{ $t('registration.token') }}</label>
+              <input
+                id="token"
+                v-model="token"
+                disabled="true"
+                class="form-control"
+                type="text"
+              >
             </div>
-            <div class='form-group'>
+            <div class="form-group">
-              <button :disabled="isPending" type='submit' class='btn btn-default'>{{$t('general.submit')}}</button>
+              <button
+                :disabled="isPending"
+                type="submit"
+                class="btn btn-default"
+              >
+                {{ $t('general.submit') }}
+              </button>
             </div>
           </div>
 
-          <div class='terms-of-service' v-html="termsOfService">
+          <div
-          </div>
+            class="terms-of-service"
+            v-html="termsOfService"
+          />
         </div>
-        <div v-if="serverValidationErrors.length" class='form-group'>
+        <div
-          <div class='alert error'>
+          v-if="serverValidationErrors.length"
-            <span v-for="error in serverValidationErrors">{{error}}</span>
+          class="form-group"
+        >
+          <div class="alert error">
+            <span
+              v-for="error in serverValidationErrors"
+              :key="error"
+            >{{ error }}</span>
           </div>
         </div>
       </form>

src/components/remote_follow/remote_follow.vue

@@ -1,9 +1,23 @@
 <template>
   <div class="remote-follow">
-    <form method="POST" :action='subscribeUrl'>
+    <form
-      <input type="hidden" name="nickname" :value="user.screen_name">
+      method="POST"
-      <input type="hidden" name="profile" value="">
+      :action="subscribeUrl"
-      <button click="submit" class="remote-button">
+    >
+      <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>

src/components/retweet_button/retweet_button.js

@@ -11,9 +11,9 @@ const RetweetButton = {
   methods: {
     retweet () {
       if (!this.status.repeated) {
-        this.$store.dispatch('retweet', {id: this.status.id})
+        this.$store.dispatch('retweet', { id: this.status.id })
       } else {
-        this.$store.dispatch('unretweet', {id: this.status.id})
+        this.$store.dispatch('unretweet', { id: this.status.id })
       }
       this.animated = true
       setTimeout(() => {

src/components/retweet_button/retweet_button.vue

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

src/components/scope_selector/scope_selector.js

@@ -29,10 +29,10 @@ const ScopeSelector = {
     },
     css () {
       return {
-        public: {selected: this.currentScope === 'public'},
+        public: { selected: this.currentScope === 'public' },
-        unlisted: {selected: this.currentScope === 'unlisted'},
+        unlisted: { selected: this.currentScope === 'unlisted' },
-        private: {selected: this.currentScope === 'private'},
+        private: { selected: this.currentScope === 'private' },
-        direct: {selected: this.currentScope === 'direct'}
+        direct: { selected: this.currentScope === 'direct' }
       }
     }
   },

src/components/scope_selector/scope_selector.vue

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

src/components/settings/settings.vue

@@ -1,302 +1,476 @@
 <template>
-<div class="settings panel panel-default">
+  <div class="settings panel panel-default">
-  <div class="panel-heading">
+    <div class="panel-heading">
-    <div class="title">
+      <div class="title">
-      {{$t('settings.settings')}}
+        {{ $t('settings.settings') }}
+      </div>
+
+      <transition name="fade">
+        <template v-if="currentSaveStateNotice">
+          <div
+            v-if="currentSaveStateNotice.error"
+            class="alert error"
+            @click.prevent
+          >
+            {{ $t('settings.saving_err') }}
+          </div>
+
+          <div
+            v-if="!currentSaveStateNotice.error"
+            class="alert transparent"
+            @click.prevent
+          >
+            {{ $t('settings.saving_ok') }}
+          </div>
+        </template>
+      </transition>
     </div>
-
+    <div class="panel-body">
-    <transition name="fade">
+      <keep-alive>
-      <template v-if="currentSaveStateNotice">
+        <tab-switcher>
-        <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+          <div :label="$t('settings.general')">
-          {{ $t('settings.saving_err') }}
+            <div class="setting-item">
-        </div>
+              <h2>{{ $t('settings.interface') }}</h2>
-
+              <ul class="setting-list">
-        <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
-          {{ $t('settings.saving_ok') }}
-        </div>
-      </template>
-    </transition>
-  </div>
-  <div class="panel-body">
-<keep-alive>
-    <tab-switcher>
-      <div :label="$t('settings.general')" >
-        <div class="setting-item">
-          <h2>{{ $t('settings.interface') }}</h2>
-          <ul class="setting-list">
-            <li>
-              <interface-language-switcher />
-            </li>
-            <li v-if="instanceSpecificPanelPresent">
-              <input type="checkbox" id="hideISP" v-model="hideISPLocal">
-              <label for="hideISP">{{$t('settings.hide_isp')}}</label>
-            </li>
-          </ul>
-        </div>
-        <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>
-            </li>
-            <li>
-              <input type="checkbox" id="streaming" v-model="streamingLocal">
-              <label for="streaming">{{$t('settings.streaming')}}</label>
-              <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
                 <li>
-                  <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
+                  <interface-language-switcher />
-                  <label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
+                </li>
+                <li v-if="instanceSpecificPanelPresent">
+                  <input
+                    id="hideISP"
+                    v-model="hideISPLocal"
+                    type="checkbox"
+                  >
+                  <label for="hideISP">{{ $t('settings.hide_isp') }}</label>
                 </li>
               </ul>
-            </li>
+            </div>
-            <li>
+            <div class="setting-item">
-              <input type="checkbox" id="autoload" v-model="autoLoadLocal">
+              <h2>{{ $t('nav.timeline') }}</h2>
-              <label for="autoload">{{$t('settings.autoload')}}</label>
+              <ul class="setting-list">
-            </li>
-            <li>
-              <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
-              <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
-            </li>
-          </ul>
-        </div>
-
-        <div class="setting-item">
-          <h2>{{$t('settings.composing')}}</h2>
-          <ul class="setting-list">
-            <li>
-              <input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal">
-              <label for="scopeCopy">
-                {{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}}
-              </label>
-            </li>
-            <li>
-              <input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal">
-              <label for="subjectHide">
-                {{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}}
-              </label>
-            </li>
-            <li>
-              <div>
-                {{$t('settings.subject_line_behavior')}}
-                <label for="subjectLineBehavior" class="select">
-                  <select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal">
-                    <option value="email">
-                      {{$t('settings.subject_line_email')}}
-                      {{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}}
-                    </option>
-                    <option value="masto">
-                      {{$t('settings.subject_line_mastodon')}}
-                      {{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}}
-                    </option>
-                    <option value="noop">
-                      {{$t('settings.subject_line_noop')}}
-                      {{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}}
-                    </option>
-                  </select>
-                  <i class="icon-down-open"/>
-                </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>
-
-        <div class="setting-item">
-          <h2>{{$t('settings.attachments')}}</h2>
-          <ul class="setting-list">
-            <li>
-              <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
-              <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
-            </li>
-            <li>
-              <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>
-            </li>
-            <li>
-              <input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
-              <label for="loopVideo">{{$t('settings.loop_video')}}</label>
-              <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
                 <li>
-                  <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
+                  <input
-                  <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
+                    id="hideMutedPosts"
-                  <div v-if="!loopSilentAvailable" class="unavailable">
+                    v-model="hideMutedPostsLocal"
-                    <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
+                    type="checkbox"
+                  >
+                  <label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsDefault }) }}</label>
+                </li>
+                <li>
+                  <input
+                    id="collapseMessageWithSubject"
+                    v-model="collapseMessageWithSubjectLocal"
+                    type="checkbox"
+                  >
+                  <label for="collapseMessageWithSubject">
+                    {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectDefault }) }}
+                  </label>
+                </li>
+                <li>
+                  <input
+                    id="streaming"
+                    v-model="streamingLocal"
+                    type="checkbox"
+                  >
+                  <label for="streaming">{{ $t('settings.streaming') }}</label>
+                  <ul
+                    class="setting-list suboptions"
+                    :class="[{disabled: !streamingLocal}]"
+                  >
+                    <li>
+                      <input
+                        id="pauseOnUnfocused"
+                        v-model="pauseOnUnfocusedLocal"
+                        :disabled="!streamingLocal"
+                        type="checkbox"
+                      >
+                      <label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <input
+                    id="autoload"
+                    v-model="autoLoadLocal"
+                    type="checkbox"
+                  >
+                  <label for="autoload">{{ $t('settings.autoload') }}</label>
+                </li>
+                <li>
+                  <input
+                    id="hoverPreview"
+                    v-model="hoverPreviewLocal"
+                    type="checkbox"
+                  >
+                  <label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label>
+                </li>
+              </ul>
+            </div>
+
+            <div class="setting-item">
+              <h2>{{ $t('settings.composing') }}</h2>
+              <ul class="setting-list">
+                <li>
+                  <input
+                    id="scopeCopy"
+                    v-model="scopeCopyLocal"
+                    type="checkbox"
+                  >
+                  <label for="scopeCopy">
+                    {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyDefault }) }}
+                  </label>
+                </li>
+                <li>
+                  <input
+                    id="subjectHide"
+                    v-model="alwaysShowSubjectInputLocal"
+                    type="checkbox"
+                  >
+                  <label for="subjectHide">
+                    {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputDefault }) }}
+                  </label>
+                </li>
+                <li>
+                  <div>
+                    {{ $t('settings.subject_line_behavior') }}
+                    <label
+                      for="subjectLineBehavior"
+                      class="select"
+                    >
+                      <select
+                        id="subjectLineBehavior"
+                        v-model="subjectLineBehaviorLocal"
+                      >
+                        <option value="email">
+                          {{ $t('settings.subject_line_email') }}
+                          {{ subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : '' }}
+                        </option>
+                        <option value="masto">
+                          {{ $t('settings.subject_line_mastodon') }}
+                          {{ subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
+                        </option>
+                        <option value="noop">
+                          {{ $t('settings.subject_line_noop') }}
+                          {{ subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : '' }}
+                        </option>
+                      </select>
+                      <i class="icon-down-open" />
+                    </label>
                   </div>
                 </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>
-
-      <div :label="$t('settings.theme')" >
-        <div class="setting-item">
-          <style-switcher></style-switcher>
-        </div>
-      </div>
-
-      <div :label="$t('settings.filtering')" >
-        <div class="setting-item">
-          <div class="select-multiple">
-            <span class="label">{{$t('settings.notification_visibility')}}</span>
-            <ul class="option-list">
-              <li>
-                <input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes">
-                <label for="notification-visibility-likes">
-                  {{$t('settings.notification_visibility_likes')}}
-                </label>
-              </li>
-              <li>
-                <input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats">
-                <label for="notification-visibility-repeats">
-                {{$t('settings.notification_visibility_repeats')}}
-                </label>
-              </li>
-              <li>
-                <input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows">
-                <label for="notification-visibility-follows">
-                {{$t('settings.notification_visibility_follows')}}
-                </label>
-              </li>
-              <li>
-                <input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions">
-                <label for="notification-visibility-mentions">
-                {{$t('settings.notification_visibility_mentions')}}
-                </label>
-              </li>
-            </ul>
-          </div>
-          <div>
-            {{$t('settings.replies_in_timeline')}}
-            <label for="replyVisibility" class="select">
-              <select id="replyVisibility" v-model="replyVisibilityLocal">
-                <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
-                <option value="following">{{$t('settings.reply_visibility_following')}}</option>
-                <option value="self">{{$t('settings.reply_visibility_self')}}</option>
-              </select>
-              <i class="icon-down-open"/>
-            </label>
-          </div>
-          <div>
-            <input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
-            <label for="hidePostStats">
-              {{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}}
-            </label>
-          </div>
-          <div>
-            <input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal">
-            <label for="hideUserStats">
-              {{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
-            </label>
-          </div>
-        </div>
-        <div class="setting-item">
-          <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>
+                  <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
+                    id="minimalScopesMode"
+                    v-model="minimalScopesModeLocal"
+                    type="checkbox"
+                  >
+                  <label for="minimalScopesMode">
+                    {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeDefault }) }}
+                  </label>
                 </li>
               </ul>
-            </li>
+            </div>
-            <li>
+
-              <p>{{$t('settings.version.frontend_version')}}</p>
+            <div class="setting-item">
-              <ul class="option-list">
+              <h2>{{ $t('settings.attachments') }}</h2>
+              <ul class="setting-list">
                 <li>
-                  <a :href="frontendVersionLink" target="_blank">{{frontendVersion}}</a>
+                  <input
+                    id="hideAttachments"
+                    v-model="hideAttachmentsLocal"
+                    type="checkbox"
+                  >
+                  <label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label>
+                </li>
+                <li>
+                  <input
+                    id="hideAttachmentsInConv"
+                    v-model="hideAttachmentsInConvLocal"
+                    type="checkbox"
+                  >
+                  <label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label>
+                </li>
+                <li>
+                  <label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label>
+                  <input
+                    id="maxThumbnails"
+                    v-model.number="maxThumbnails"
+                    class="number-input"
+                    type="number"
+                    min="0"
+                    step="1"
+                  >
+                </li>
+                <li>
+                  <input
+                    id="hideNsfw"
+                    v-model="hideNsfwLocal"
+                    type="checkbox"
+                  >
+                  <label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label>
+                </li>
+                <ul class="setting-list suboptions">
+                  <li>
+                    <input
+                      id="preloadImage"
+                      v-model="preloadImage"
+                      :disabled="!hideNsfwLocal"
+                      type="checkbox"
+                    >
+                    <label for="preloadImage">{{ $t('settings.preload_images') }}</label>
+                  </li>
+                  <li>
+                    <input
+                      id="useOneClickNsfw"
+                      v-model="useOneClickNsfw"
+                      :disabled="!hideNsfwLocal"
+                      type="checkbox"
+                    >
+                    <label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label>
+                  </li>
+                </ul>
+                <li>
+                  <input
+                    id="stopGifs"
+                    v-model="stopGifs"
+                    type="checkbox"
+                  >
+                  <label for="stopGifs">{{ $t('settings.stop_gifs') }}</label>
+                </li>
+                <li>
+                  <input
+                    id="loopVideo"
+                    v-model="loopVideoLocal"
+                    type="checkbox"
+                  >
+                  <label for="loopVideo">{{ $t('settings.loop_video') }}</label>
+                  <ul
+                    class="setting-list suboptions"
+                    :class="[{disabled: !streamingLocal}]"
+                  >
+                    <li>
+                      <input
+                        id="loopVideoSilentOnly"
+                        v-model="loopVideoSilentOnlyLocal"
+                        :disabled="!loopVideoLocal || !loopSilentAvailable"
+                        type="checkbox"
+                      >
+                      <label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label>
+                      <div
+                        v-if="!loopSilentAvailable"
+                        class="unavailable"
+                      >
+                        <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <input
+                    id="playVideosInModal"
+                    v-model="playVideosInModal"
+                    type="checkbox"
+                  >
+                  <label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label>
+                </li>
+                <li>
+                  <input
+                    id="useContainFit"
+                    v-model="useContainFit"
+                    type="checkbox"
+                  >
+                  <label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label>
                 </li>
               </ul>
-            </li>
+            </div>
-          </ul>
+
-        </div>
+            <div class="setting-item">
-      </div>
+              <h2>{{ $t('settings.notifications') }}</h2>
-    </tab-switcher>
+              <ul class="setting-list">
-</keep-alive>
+                <li>
+                  <input
+                    id="webPushNotifications"
+                    v-model="webPushNotificationsLocal"
+                    type="checkbox"
+                  >
+                  <label for="webPushNotifications">
+                    {{ $t('settings.enable_web_push_notifications') }}
+                  </label>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+          <div :label="$t('settings.theme')">
+            <div class="setting-item">
+              <style-switcher />
+            </div>
+          </div>
+
+          <div :label="$t('settings.filtering')">
+            <div class="setting-item">
+              <div class="select-multiple">
+                <span class="label">{{ $t('settings.notification_visibility') }}</span>
+                <ul class="option-list">
+                  <li>
+                    <input
+                      id="notification-visibility-likes"
+                      v-model="notificationVisibilityLocal.likes"
+                      type="checkbox"
+                    >
+                    <label for="notification-visibility-likes">
+                      {{ $t('settings.notification_visibility_likes') }}
+                    </label>
+                  </li>
+                  <li>
+                    <input
+                      id="notification-visibility-repeats"
+                      v-model="notificationVisibilityLocal.repeats"
+                      type="checkbox"
+                    >
+                    <label for="notification-visibility-repeats">
+                      {{ $t('settings.notification_visibility_repeats') }}
+                    </label>
+                  </li>
+                  <li>
+                    <input
+                      id="notification-visibility-follows"
+                      v-model="notificationVisibilityLocal.follows"
+                      type="checkbox"
+                    >
+                    <label for="notification-visibility-follows">
+                      {{ $t('settings.notification_visibility_follows') }}
+                    </label>
+                  </li>
+                  <li>
+                    <input
+                      id="notification-visibility-mentions"
+                      v-model="notificationVisibilityLocal.mentions"
+                      type="checkbox"
+                    >
+                    <label for="notification-visibility-mentions">
+                      {{ $t('settings.notification_visibility_mentions') }}
+                    </label>
+                  </li>
+                </ul>
+              </div>
+              <div>
+                {{ $t('settings.replies_in_timeline') }}
+                <label
+                  for="replyVisibility"
+                  class="select"
+                >
+                  <select
+                    id="replyVisibility"
+                    v-model="replyVisibilityLocal"
+                  >
+                    <option
+                      value="all"
+                      selected
+                    >{{ $t('settings.reply_visibility_all') }}</option>
+                    <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
+                    <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
+                  </select>
+                  <i class="icon-down-open" />
+                </label>
+              </div>
+              <div>
+                <input
+                  id="hidePostStats"
+                  v-model="hidePostStatsLocal"
+                  type="checkbox"
+                >
+                <label for="hidePostStats">
+                  {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsDefault }) }}
+                </label>
+              </div>
+              <div>
+                <input
+                  id="hideUserStats"
+                  v-model="hideUserStatsLocal"
+                  type="checkbox"
+                >
+                <label for="hideUserStats">
+                  {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsDefault }) }}
+                </label>
+              </div>
+            </div>
+            <div class="setting-item">
+              <div>
+                <p>{{ $t('settings.filtering_explanation') }}</p>
+                <textarea
+                  id="muteWords"
+                  v-model="muteWordsString"
+                />
+              </div>
+              <div>
+                <input
+                  id="hideFilteredStatuses"
+                  v-model="hideFilteredStatusesLocal"
+                  type="checkbox"
+                >
+                <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>
   </div>
-</div>
 </template>
 
 <script src="./settings.js">
@@ -327,7 +501,6 @@
     min-width: 10em;
   }
 
-
   textarea {
     width: 100%;
     height: 100px;

src/components/shadow_control/shadow_control.vue

@@ -1,134 +1,207 @@
 <template>
-<div class="shadow-control" :class="{ disabled: !present }">
+  <div
-  <div class="shadow-preview-container">
+    class="shadow-control"
-    <div :disabled="!present" class="y-shift-control">
+    :class="{ disabled: !present }"
-      <input
+  >
-        v-model="selected.y"
+    <div class="shadow-preview-container">
+      <div
         :disabled="!present"
-        class="input-number"
+        class="y-shift-control"
-        type="number">
+      >
-      <div class="wrap">
         <input
           v-model="selected.y"
           :disabled="!present"
-          class="input-range"
+          class="input-number"
-          type="range"
+          type="number"
-          max="20"
+        >
-          min="-20">
+        <div class="wrap">
+          <input
+            v-model="selected.y"
+            :disabled="!present"
+            class="input-range"
+            type="range"
+            max="20"
+            min="-20"
+          >
+        </div>
       </div>
-    </div>
+      <div class="preview-window">
-    <div class="preview-window">
+        <div
-      <div class="preview-block" :style="style"></div>
+          class="preview-block"
-    </div>
+          :style="style"
-    <div :disabled="!present" class="x-shift-control">
+        />
-      <input
+      </div>
-        v-model="selected.x"
+      <div
         :disabled="!present"
-        class="input-number"
+        class="x-shift-control"
-        type="number">
+      >
-      <div class="wrap">
         <input
           v-model="selected.x"
           :disabled="!present"
+          class="input-number"
+          type="number"
+        >
+        <div class="wrap">
+          <input
+            v-model="selected.x"
+            :disabled="!present"
+            class="input-range"
+            type="range"
+            max="20"
+            min="-20"
+          >
+        </div>
+      </div>
+    </div>
+
+    <div class="shadow-tweak">
+      <div
+        :disabled="usingFallback"
+        class="id-control style-control"
+      >
+        <label
+          for="shadow-switcher"
+          class="select"
+          :disabled="!ready || usingFallback"
+        >
+          <select
+            id="shadow-switcher"
+            v-model="selectedId"
+            class="shadow-switcher"
+            :disabled="!ready || usingFallback"
+          >
+            <option
+              v-for="(shadow, index) in cValue"
+              :key="index"
+              :value="index"
+            >
+              {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
+            </option>
+          </select>
+          <i class="icon-down-open" />
+        </label>
+        <button
+          class="btn btn-default"
+          :disabled="!ready || !present"
+          @click="del"
+        >
+          <i class="icon-cancel" />
+        </button>
+        <button
+          class="btn btn-default"
+          :disabled="!moveUpValid"
+          @click="moveUp"
+        >
+          <i class="icon-up-open" />
+        </button>
+        <button
+          class="btn btn-default"
+          :disabled="!moveDnValid"
+          @click="moveDn"
+        >
+          <i class="icon-down-open" />
+        </button>
+        <button
+          class="btn btn-default"
+          :disabled="usingFallback"
+          @click="add"
+        >
+          <i class="icon-plus" />
+        </button>
+      </div>
+      <div
+        :disabled="!present"
+        class="inset-control style-control"
+      >
+        <label
+          for="inset"
+          class="label"
+        >
+          {{ $t('settings.style.shadows.inset') }}
+        </label>
+        <input
+          id="inset"
+          v-model="selected.inset"
+          :disabled="!present"
+          name="inset"
+          class="input-inset"
+          type="checkbox"
+        >
+        <label
+          class="checkbox-label"
+          for="inset"
+        />
+      </div>
+      <div
+        :disabled="!present"
+        class="blur-control style-control"
+      >
+        <label
+          for="spread"
+          class="label"
+        >
+          {{ $t('settings.style.shadows.blur') }}
+        </label>
+        <input
+          id="blur"
+          v-model="selected.blur"
+          :disabled="!present"
+          name="blur"
           class="input-range"
           type="range"
           max="20"
-          min="-20">
+          min="0"
+        >
+        <input
+          v-model="selected.blur"
+          :disabled="!present"
+          class="input-number"
+          type="number"
+          min="0"
+        >
       </div>
+      <div
+        :disabled="!present"
+        class="spread-control style-control"
+      >
+        <label
+          for="spread"
+          class="label"
+        >
+          {{ $t('settings.style.shadows.spread') }}
+        </label>
+        <input
+          id="spread"
+          v-model="selected.spread"
+          :disabled="!present"
+          name="spread"
+          class="input-range"
+          type="range"
+          max="20"
+          min="-20"
+        >
+        <input
+          v-model="selected.spread"
+          :disabled="!present"
+          class="input-number"
+          type="number"
+        >
+      </div>
+      <ColorInput
+        v-model="selected.color"
+        :disabled="!present"
+        :label="$t('settings.style.common.color')"
+        name="shadow"
+      />
+      <OpacityInput
+        v-model="selected.alpha"
+        :disabled="!present"
+      />
+      <p>
+        {{ $t('settings.style.shadows.hint') }}
+      </p>
     </div>
   </div>
-
-  <div class="shadow-tweak">
-    <div :disabled="usingFallback" class="id-control style-control">
-      <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback">
-        <select
-          v-model="selectedId" class="shadow-switcher"
-          :disabled="!ready || usingFallback"
-          id="shadow-switcher">
-          <option v-for="(shadow, index) in cValue" :value="index">
-            {{$t('settings.style.shadows.shadow_id', { value: index })}}
-          </option>
-        </select>
-        <i class="icon-down-open"/>
-      </label>
-      <button class="btn btn-default" :disabled="!ready || !present" @click="del">
-        <i class="icon-cancel"/>
-      </button>
-      <button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp">
-        <i class="icon-up-open"/>
-      </button>
-      <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn">
-        <i class="icon-down-open"/>
-      </button>
-      <button class="btn btn-default" :disabled="usingFallback" @click="add">
-        <i class="icon-plus"/>
-      </button>
-    </div>
-    <div :disabled="!present" class="inset-control style-control">
-      <label for="inset" class="label">
-        {{$t('settings.style.shadows.inset')}}
-      </label>
-      <input
-        v-model="selected.inset"
-        :disabled="!present"
-        name="inset"
-        id="inset"
-        class="input-inset"
-        type="checkbox">
-      <label class="checkbox-label" for="inset"></label>
-    </div>
-    <div :disabled="!present" class="blur-control style-control">
-      <label for="spread" class="label">
-        {{$t('settings.style.shadows.blur')}}
-      </label>
-      <input
-        v-model="selected.blur"
-        :disabled="!present"
-        name="blur"
-        id="blur"
-        class="input-range"
-        type="range"
-        max="20"
-        min="0">
-      <input
-        v-model="selected.blur"
-        :disabled="!present"
-        class="input-number"
-        type="number"
-        min="0">
-    </div>
-    <div :disabled="!present" class="spread-control style-control">
-      <label for="spread" class="label">
-        {{$t('settings.style.shadows.spread')}}
-      </label>
-      <input
-        v-model="selected.spread"
-        :disabled="!present"
-        name="spread"
-        id="spread"
-        class="input-range"
-        type="range"
-        max="20"
-        min="-20">
-      <input
-        v-model="selected.spread"
-        :disabled="!present"
-        class="input-number"
-        type="number">
-    </div>
-    <ColorInput
-      v-model="selected.color"
-      :disabled="!present"
-      :label="$t('settings.style.common.color')"
-      name="shadow"/>
-    <OpacityInput
-      v-model="selected.alpha"
-      :disabled="!present"/>
-    <p>
-      {{$t('settings.style.shadows.hint')}}
-    </p>
-  </div>
-</div>
 </template>
 
 <script src="./shadow_control.js" ></script>

src/components/side_drawer/side_drawer.vue

@@ -1,58 +1,90 @@
 <template>
-  <div class="side-drawer-container"
+  <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
-    <div class="side-drawer"
+      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">
+      <div
-        <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/>
+        class="side-drawer-heading"
-        <div class="side-drawer-logo-wrapper" v-else>
+        @click="toggleDrawer"
-          <img :src="logo"/>
+      >
-          <span>{{sitename}}</span>
+        <UserCard
+          v-if="currentUser"
+          :user="currentUser"
+          :hide-bio="true"
+        />
+        <div
+          v-else
+          class="side-drawer-logo-wrapper"
+        >
+          <img :src="logo">
+          <span>{{ sitename }}</span>
         </div>
       </div>
       <ul>
-        <li v-if="!currentUser" @click="toggleDrawer">
+        <li
+          v-if="!currentUser"
+          @click="toggleDrawer"
+        >
           <router-link :to="{ name: 'login' }">
             {{ $t("login.login") }}
           </router-link>
         </li>
-        <li v-if="currentUser" @click="toggleDrawer">
+        <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">
+        <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">
+        <li
-          <router-link to='/friend-requests'>
+          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">
+            <span
-              {{followRequestCount}}
+              v-if="followRequestCount > 0"
+              class="badge follow-request-count"
+            >
+              {{ followRequestCount }}
             </span>
-
           </router-link>
         </li>
         <li @click="toggleDrawer">
-          <router-link to='/main/public'>
+          <router-link to="/main/public">
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
-          <router-link to='/main/all'>
+          <router-link to="/main/all">
             {{ $t("nav.twkn") }}
           </router-link>
         </li>
-        <li v-if="currentUser && chat" @click="toggleDrawer">
+        <li
+          v-if="currentUser && chat"
+          @click="toggleDrawer"
+        >
           <router-link :to="{ name: 'chat' }">
             {{ $t("nav.chat") }}
           </router-link>
@@ -64,7 +96,10 @@
             {{ $t("nav.user_search") }}
           </router-link>
         </li>
-        <li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer">
+        <li
+          v-if="currentUser && suggestionsEnabled"
+          @click="toggleDrawer"
+        >
           <router-link :to="{ name: 'who-to-follow' }">
             {{ $t("nav.who_to_follow") }}
           </router-link>
@@ -79,17 +114,24 @@
             {{ $t("nav.about") }}
           </router-link>
         </li>
-        <li v-if="currentUser" @click="toggleDrawer">
+        <li
-          <a @click="doLogout" href="#">
+          v-if="currentUser"
+          @click="toggleDrawer"
+        >
+          <a
+            href="#"
+            @click="doLogout"
+          >
             {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
     </div>
-    <div class="side-drawer-click-outside"
+    <div
-      @click.stop.prevent="toggleDrawer"
+      class="side-drawer-click-outside"
       :class="{'side-drawer-click-outside-closed': closed}"
-    ></div>
+      @click.stop.prevent="toggleDrawer"
+    />
   </div>
 </template>
 

src/components/status/status.js

@@ -210,10 +210,10 @@ const Status = {
       if (!this.status.summary) return ''
       const decodedSummary = unescape(this.status.summary)
       const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined'
-            ? this.$store.state.instance.subjectLineBehavior
+        ? this.$store.state.instance.subjectLineBehavior
-            : this.$store.state.config.subjectLineBehavior
+        : this.$store.state.config.subjectLineBehavior
       const startsWithRe = decodedSummary.match(/^re[: ]/i)
-      if (behavior !== 'noop' && startsWithRe || behavior === 'masto') {
+      if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') {
         return decodedSummary
       } else if (behavior === 'email') {
         return 're: '.concat(decodedSummary)
@@ -350,7 +350,7 @@ const Status = {
         this.preview = find(statuses, { 'id': targetId })
         // or if we have to fetch it
         if (!this.preview) {
-          this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
+          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
             this.preview = status
           })
         }

src/components/status/status.vue

@@ -1,152 +1,366 @@
 <template>
-  <div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div
+    v-if="!hideStatus"
+    class="status-el"
+    :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
+  >
     <template v-if="muted && !isPreview">
       <div class="media status container muted">
         <small>
           <router-link :to="userProfileLink">
-            {{status.user.screen_name}}
+            {{ status.user.screen_name }}
           </router-link>
         </small>
-        <small class="muteWords">{{muteWordHits.join(', ')}}</small>
+        <small class="muteWords">{{ muteWordHits.join(', ') }}</small>
-        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
+        <a
+          href="#"
+          class="unmute"
+          @click.prevent="toggleMute"
+        ><i class="button-icon icon-eye-off" /></a>
       </div>
     </template>
     <template v-else>
-      <div v-if="retweet && !noHeading && !inConversation" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
+      <div
-        <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/>
+        v-if="retweet && !noHeading && !inConversation"
+        :class="[repeaterClass, { highlighted: repeaterStyle }]"
+        :style="[repeaterStyle]"
+        class="media container retweet-info"
+      >
+        <UserAvatar
+          v-if="retweet"
+          class="media-left"
+          :better-shadow="betterShadow"
+          :src="statusoid.user.profile_image_url_original"
+        />
         <div class="media-body faint">
           <span class="user-name">
-            <router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/>
+            <router-link
-            <router-link v-else :to="retweeterProfileLink">{{retweeter}}</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>
+          <i
-          {{$t('timeline.repeated')}}
+            class="fa icon-retweet retweeted"
+            :title="$t('tool_tip.repeat')"
+          />
+          {{ $t('timeline.repeated') }}
         </div>
       </div>
 
-      <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" :style="[ userStyle ]" class="media status">
+      <div
-        <div v-if="!noHeading" class="media-left">
+        :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
-          <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded">
+        :style="[ userStyle ]"
-            <UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/>
+        class="media status"
+      >
+        <div
+          v-if="!noHeading"
+          class="media-left"
+        >
+          <router-link
+            :to="userProfileLink"
+            @click.stop.prevent.capture.native="toggleUserExpanded"
+          >
+            <UserAvatar
+              :compact="compact"
+              :better-shadow="betterShadow"
+              :src="status.user.profile_image_url_original"
+            />
           </router-link>
         </div>
         <div class="status-body">
-          <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/>
+          <UserCard
-          <div v-if="!noHeading" class="media-heading">
+            v-if="userExpanded"
+            :user="status.user"
+            :rounded="true"
+            :bordered="true"
+            class="status-usercard"
+          />
+          <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
-                <h4 class="user-name" v-else>{{status.user.name}}</h4>
+                  v-if="status.user.name_html"
-                <router-link class="account-name" :to="userProfileLink">
+                  class="user-name"
-                  {{status.user.screen_name}}
+                  v-html="status.user.name_html"
+                />
+                <h4
+                  v-else
+                  class="user-name"
+                >
+                  {{ status.user.name }}
+                </h4>
+                <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 } }">
+                <router-link
-                  <timeago :since="status.created_at" :auto-update="60"></timeago>
+                  class="timeago faint-link"
+                  :to="{ name: 'conversation', params: { id: status.id } }"
+                >
+                  <timeago
+                    :since="status.created_at"
+                    :auto-update="60"
+                  />
                 </router-link>
-                <div class="button-icon visibility-icon" v-if="status.visibility">
+                <div
-                  <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
+                  v-if="status.visibility"
+                  class="button-icon visibility-icon"
+                >
+                  <i
+                    :class="visibilityIcon(status.visibility)"
+                    :title="status.visibility | capitalize"
+                  />
                 </div>
-                <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source">
+                <a
-                  <i class="button-icon icon-link-ext-alt"></i>
+                  v-if="!status.is_local && !isPreview"
+                  :href="status.external_url"
+                  target="_blank"
+                  class="source_url"
+                  title="Source"
+                >
+                  <i class="button-icon icon-link-ext-alt" />
                 </a>
                 <template v-if="expandable && !isPreview">
-                  <a href="#" @click.prevent="toggleExpanded" title="Expand">
+                  <a
-                    <i class="button-icon icon-plus-squared"></i>
+                    href="#"
+                    title="Expand"
+                    @click.prevent="toggleExpanded"
+                  >
+                    <i class="button-icon icon-plus-squared" />
                   </a>
                 </template>
-                <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
+                <a
+                  v-if="unmuted"
+                  href="#"
+                  @click.prevent="toggleMute"
+                ><i class="button-icon icon-eye-off" /></a>
               </span>
             </div>
 
             <div class="heading-reply-row">
-              <div v-if="isReply" class="reply-to-and-accountname">
+              <div
-                <a class="reply-to"
+                v-if="isReply"
-                  href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
+                class="reply-to-and-accountname"
+              >
+                <a
+                  class="reply-to"
+                  href="#"
                   :aria-label="$t('tool_tip.reply')"
+                  @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   @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>
+                  <i
-                  <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span>
+                    v-if="!isPreview"
+                    class="button-icon icon-reply"
+                  />
+                  <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                 </a>
                 <router-link :to="replyProfileLink">
-                  {{replyToName}}
+                  {{ replyToName }}
                 </router-link>
-                <span class="faint replies-separator" v-if="replies && replies.length">
+                <span
+                  v-if="replies && replies.length"
+                  class="faint replies-separator"
+                >
                   -
                 </span>
               </div>
-              <div class="replies" v-if="inConversation && !isPreview">
+              <div
-                <span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span>
+                v-if="inConversation && !isPreview"
-                <span class="reply-link faint" v-if="replies" v-for="reply in replies">
+                class="replies"
-                  <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a>
+              >
-                </span>
+                <span
+                  v-if="replies && replies.length"
+                  class="faint"
+                >{{ $t('status.replies_list') }}</span>
+                <template
+                  v-if="replies"
+                >
+                  <span
+                    v-for="reply in replies"
+                    :key="reply.name"
+                    class="reply-link faint"
+                  >
+                    <a
+                      href="#"
+                      @click.prevent="gotoOriginal(reply.id)"
+                      @mouseenter="replyEnter(reply.id, $event)"
+                      @mouseout="replyLeave()"
+                    >{{ reply.name }}</a>
+                  </span>
+                </template>
               </div>
             </div>
-
-
           </div>
 
-          <div v-if="showPreview" class="status-preview-container">
+          <div
-            <status class="status-preview" v-if="preview" :isPreview="true" :statusoid="preview" :compact=true></status>
+            v-if="showPreview"
-            <div class="status-preview status-preview-loading" v-else>
+            class="status-preview-container"
-              <i class="icon-spin4 animate-spin"></i>
+          >
+            <status
+              v-if="preview"
+              class="status-preview"
+              :is-preview="true"
+              :statusoid="preview"
+              :compact="true"
+            />
+            <div
+              v-else
+              class="status-preview status-preview-loading"
+            >
+              <i class="icon-spin4 animate-spin" />
             </div>
           </div>
 
-          <div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject">
+          <div
-            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">{{$t("general.show_more")}}</a>
+            v-if="longSubject"
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml"></div>
+            class="status-content-wrapper"
-            <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">{{$t("general.show_less")}}</a>
+            :class="{ 'tall-status': !showingLongSubject }"
+          >
+            <a
+              v-if="!showingLongSubject"
+              class="tall-status-hider"
+              :class="{ 'tall-status-hider_focused': isFocused }"
+              href="#"
+              @click.prevent="showingLongSubject=true"
+            >{{ $t("general.show_more") }}</a>
+            <div
+              class="status-content media-body"
+              @click.prevent="linkClicked"
+              v-html="contentHtml"
+            />
+            <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>
+          <div
-            <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a>
+            v-else
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml" v-if="!hideSubjectStatus"></div>
+            :class="{'tall-status': hideTallStatus}"
-            <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div>
+            class="status-content-wrapper"
-            <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>
+            <a
+              v-if="hideTallStatus"
+              class="tall-status-hider"
+              :class="{ 'tall-status-hider_focused': isFocused }"
+              href="#"
+              @click.prevent="toggleShowMore"
+            >{{ $t("general.show_more") }}</a>
+            <div
+              v-if="!hideSubjectStatus"
+              class="status-content media-body"
+              @click.prevent="linkClicked"
+              v-html="contentHtml"
+            />
+            <div
+              v-else
+              class="status-content media-body"
+              @click.prevent="linkClicked"
+              v-html="status.summary_html"
+            />
+            <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 || showingLongSubject)" class="attachments media-body">
+          <div
+            v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)"
+            class="attachments media-body"
+          >
             <attachment
-              class="non-gallery"
               v-for="attachment in nonGalleryAttachments"
+              :key="attachment.id"
+              class="non-gallery"
               :size="attachmentSize"
               :nsfw="nsfwClickthrough"
               :attachment="attachment"
-              :allowPlay="true"
+              :allow-play="true"
-              :setMedia="setMedia()"
+              :set-media="setMedia()"
-              :key="attachment.id"
             />
             <gallery
               v-if="galleryAttachments.length > 0"
               :nsfw="nsfwClickthrough"
               :attachments="galleryAttachments"
-              :setMedia="setMedia()"
+              :set-media="setMedia()"
             />
           </div>
 
-          <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
+          <div
-            <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
+            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="!noHeading && !isPreview"
+            class="status-actions media-body"
+          >
             <div v-if="loggedIn">
-              <i class="button-icon icon-reply" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')" :class="{'icon-reply-active': replying}"></i>
+              <i
-              <span v-if="status.replies_count > 0">{{status.replies_count}}</span>
+                class="button-icon icon-reply"
+                :title="$t('tool_tip.reply')"
+                :class="{'icon-reply-active': replying}"
+                @click.prevent="toggleReplying"
+              />
+              <span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
             </div>
-            <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
+            <retweet-button
-            <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
+              :visibility="status.visibility"
-            <delete-button :status='status'></delete-button>
+              :logged-in="loggedIn"
+              :status="status"
+            />
+            <favorite-button
+              :logged-in="loggedIn"
+              :status="status"
+            />
+            <delete-button :status="status" />
           </div>
         </div>
       </div>
-      <div class="container" v-if="replying">
+      <div
-        <div class="reply-left"/>
+        v-if="replying"
-        <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
+        class="container"
+      >
+        <div class="reply-left" />
+        <post-status-form
+          class="reply-body"
+          :reply-to="status.id"
+          :attentions="status.attentions"
+          :replied-user="status.user"
+          :copy-message-scope="status.visibility"
+          :subject="replySubject"
+          @posted="toggleReplying"
+        />
       </div>
     </template>
   </div>

src/components/still-image/still-image.vue

@@ -1,7 +1,19 @@
 <template>
-  <div class='still-image' :class='{ animated: animated }' >
+  <div
-    <canvas ref="canvas" v-if="animated"></canvas>
+    class="still-image"
-    <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad" @error="onError"/>
+    :class="{ animated: animated }"
+  >
+    <canvas
+      v-if="animated"
+      ref="canvas"
+    />
+    <img
+      ref="src"
+      :src="src"
+      :referrerpolicy="referrerpolicy"
+      @load="onLoad"
+      @error="onError"
+    >
   </div>
 </template>
 

src/components/style_switcher/preview.vue

@@ -1,78 +1,101 @@
 <template>
-<div class="panel dummy">
+  <div class="panel dummy">
-  <div class="panel-heading">
+    <div class="panel-heading">
-    <div class="title">
+      <div class="title">
-      {{$t('settings.style.preview.header')}}
+        {{ $t('settings.style.preview.header') }}
-      <span class="badge badge-notification">
+        <span class="badge badge-notification">
-        99
+          99
+        </span>
+      </div>
+      <span class="faint">
+        {{ $t('settings.style.preview.header_faint') }}
       </span>
-    </div>
+      <span class="alert error">
-    <span class="faint">
+        {{ $t('settings.style.preview.error') }}
-      {{$t('settings.style.preview.header_faint')}}
-    </span>
-    <span class="alert error">
-      {{$t('settings.style.preview.error')}}
-    </span>
-    <button class="btn">
-      {{$t('settings.style.preview.button')}}
-    </button>
-  </div>
-  <div class="panel-body theme-preview-content">
-    <div class="post">
-      <div class="avatar">
-        ( ͡° ͜ʖ ͡°)
-      </div>
-      <div class="content">
-        <h4>
-          {{$t('settings.style.preview.content')}}
-        </h4>
-
-        <i18n path="settings.style.preview.text">
-          <code style="font-family: var(--postCodeFont)">
-            {{$t('settings.style.preview.mono')}}
-          </code>
-          <a style="color: var(--link)">
-            {{$t('settings.style.preview.link')}}
-          </a>
-        </i18n>
-
-        <div class="icons">
-          <i style="color: var(--cBlue)" class="button-icon icon-reply"/>
-          <i style="color: var(--cGreen)" class="button-icon icon-retweet"/>
-          <i style="color: var(--cOrange)" class="button-icon icon-star"/>
-          <i style="color: var(--cRed)" class="button-icon icon-cancel"/>
-        </div>
-      </div>
-    </div>
-
-    <div class="after-post">
-      <div class="avatar-alt">
-        :^)
-      </div>
-      <div class="content">
-        <i18n path="settings.style.preview.fine_print" tag="span" class="faint">
-          <a style="color: var(--faintLink)">
-            {{$t('settings.style.preview.faint_link')}}
-          </a>
-        </i18n>
-      </div>
-    </div>
-    <div class="separator"></div>
-
-    <span class="alert error">
-      {{$t('settings.style.preview.error')}}
-    </span>
-    <input :value="$t('settings.style.preview.input')" type="text">
-
-    <div class="actions">
-      <span class="checkbox">
-        <input checked="very yes" type="checkbox" id="preview_checkbox">
-        <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label>
       </span>
       <button class="btn">
-        {{$t('settings.style.preview.button')}}
+        {{ $t('settings.style.preview.button') }}
       </button>
     </div>
+    <div class="panel-body theme-preview-content">
+      <div class="post">
+        <div class="avatar">
+          ( ͡° ͜ʖ ͡°)
+        </div>
+        <div class="content">
+          <h4>
+            {{ $t('settings.style.preview.content') }}
+          </h4>
+
+          <i18n path="settings.style.preview.text">
+            <code style="font-family: var(--postCodeFont)">
+              {{ $t('settings.style.preview.mono') }}
+            </code>
+            <a style="color: var(--link)">
+              {{ $t('settings.style.preview.link') }}
+            </a>
+          </i18n>
+
+          <div class="icons">
+            <i
+              style="color: var(--cBlue)"
+              class="button-icon icon-reply"
+            />
+            <i
+              style="color: var(--cGreen)"
+              class="button-icon icon-retweet"
+            />
+            <i
+              style="color: var(--cOrange)"
+              class="button-icon icon-star"
+            />
+            <i
+              style="color: var(--cRed)"
+              class="button-icon icon-cancel"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="after-post">
+        <div class="avatar-alt">
+          :^)
+        </div>
+        <div class="content">
+          <i18n
+            path="settings.style.preview.fine_print"
+            tag="span"
+            class="faint"
+          >
+            <a style="color: var(--faintLink)">
+              {{ $t('settings.style.preview.faint_link') }}
+            </a>
+          </i18n>
+        </div>
+      </div>
+      <div class="separator" />
+
+      <span class="alert error">
+        {{ $t('settings.style.preview.error') }}
+      </span>
+      <input
+        :value="$t('settings.style.preview.input')"
+        type="text"
+      >
+
+      <div class="actions">
+        <span class="checkbox">
+          <input
+            id="preview_checkbox"
+            checked="very yes"
+            type="checkbox"
+          >
+          <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+        </span>
+        <button class="btn">
+          {{ $t('settings.style.preview.button') }}
+        </button>
+      </div>
+    </div>
   </div>
-</div>
 </template>

src/components/style_switcher/style_switcher.vue

@@ -1,274 +1,593 @@
 <template>
-<div class="style-switcher">
+  <div class="style-switcher">
-  <div class="presets-container">
+    <div class="presets-container">
-    <div class="save-load">
+      <div class="save-load">
-      <export-import
+        <export-import
-        :exportObject='exportedTheme'
+          :export-object="exportedTheme"
-        :exportLabel='$t("settings.export_theme")'
+          :export-label="$t(&quot;settings.export_theme&quot;)"
-        :importLabel='$t("settings.import_theme")'
+          :import-label="$t(&quot;settings.import_theme&quot;)"
-        :importFailedText='$t("settings.invalid_theme_imported")'
+          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-        :onImport='onImport'
+          :on-import="onImport"
-        :validator='importValidator'>
+          :validator="importValidator"
-        <template slot="before">
+        >
-          <div class="presets">
+          <template slot="before">
-            {{$t('settings.presets')}}
+            <div class="presets">
-            <label for="preset-switcher" class='select'>
+              {{ $t('settings.presets') }}
-              <select id="preset-switcher" v-model="selected" class="preset-switcher">
+              <label
-                <option v-for="style in availableStyles"
+                for="preset-switcher"
-                        :value="style"
+                class="select"
-                        :style="{
+              >
-                                backgroundColor: style[1] || style.theme.colors.bg,
+                <select
-                                color: style[3] || style.theme.colors.text
+                  id="preset-switcher"
-                                }">
+                  v-model="selected"
-                  {{style[0] || style.name}}
+                  class="preset-switcher"
-                </option>
+                >
-              </select>
+                  <option
-              <i class="icon-down-open"/>
+                    v-for="style in availableStyles"
-            </label>
+                    :key="style.name"
-          </div>
+                    :value="style"
-        </template>
+                    :style="{
-      </export-import>
+                      backgroundColor: style[1] || style.theme.colors.bg,
+                      color: style[3] || style.theme.colors.text
+                    }"
+                  >
+                    {{ style[0] || style.name }}
+                  </option>
+                </select>
+                <i class="icon-down-open" />
+              </label>
+            </div>
+          </template>
+        </export-import>
+      </div>
+      <div class="save-load-options">
+        <span class="keep-option">
+          <input
+            id="keep-color"
+            v-model="keepColor"
+            type="checkbox"
+          >
+          <label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
+        </span>
+        <span class="keep-option">
+          <input
+            id="keep-shadows"
+            v-model="keepShadows"
+            type="checkbox"
+          >
+          <label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
+        </span>
+        <span class="keep-option">
+          <input
+            id="keep-opacity"
+            v-model="keepOpacity"
+            type="checkbox"
+          >
+          <label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
+        </span>
+        <span class="keep-option">
+          <input
+            id="keep-roundness"
+            v-model="keepRoundness"
+            type="checkbox"
+          >
+          <label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
+        </span>
+        <span class="keep-option">
+          <input
+            id="keep-fonts"
+            v-model="keepFonts"
+            type="checkbox"
+          >
+          <label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
+        </span>
+        <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
+      </div>
     </div>
-    <div class="save-load-options">
+
-      <span class="keep-option">
+    <div class="preview-container">
-        <input
+      <preview :style="previewRules" />
-          id="keep-color"
+    </div>
-          type="checkbox"
+
-          v-model="keepColor">
+    <keep-alive>
-        <label for="keep-color">{{$t('settings.style.switcher.keep_color')}}</label>
+      <tab-switcher key="style-tweak">
-      </span>
+        <div
-      <span class="keep-option">
+          :label="$t('settings.style.common_colors._tab_label')"
-        <input
+          class="color-container"
-          id="keep-shadows"
+        >
-          type="checkbox"
+          <div class="tab-header">
-          v-model="keepShadows">
+            <p>{{ $t('settings.theme_help') }}</p>
-        <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
+            <button
-      </span>
+              class="btn"
-      <span class="keep-option">
+              @click="clearOpacity"
-        <input
+            >
-          id="keep-opacity"
+              {{ $t('settings.style.switcher.clear_opacity') }}
-          type="checkbox"
+            </button>
-          v-model="keepOpacity">
+            <button
-        <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
+              class="btn"
-      </span>
+              @click="clearV1"
-      <span class="keep-option">
+            >
-        <input
+              {{ $t('settings.style.switcher.clear_all') }}
-          id="keep-roundness"
+            </button>
-          type="checkbox"
+          </div>
-          v-model="keepRoundness">
+          <p>{{ $t('settings.theme_help_v2_1') }}</p>
-        <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
+          <h4>{{ $t('settings.style.common_colors.main') }}</h4>
-      </span>
+          <div class="color-item">
-      <span class="keep-option">
+            <ColorInput
-        <input
+              v-model="bgColorLocal"
-          id="keep-fonts"
+              name="bgColor"
-          type="checkbox"
+              :label="$t('settings.background')"
-          v-model="keepFonts">
+            />
-        <label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label>
+            <OpacityInput
-      </span>
+              v-model="bgOpacityLocal"
-      <p>{{$t('settings.style.switcher.save_load_hint')}}</p>
+              name="bgOpacity"
+              :fallback="previewTheme.opacity.bg || 1"
+            />
+            <ColorInput
+              v-model="textColorLocal"
+              name="textColor"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgText" />
+            <ColorInput
+              v-model="linkColorLocal"
+              name="linkColor"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgLink" />
+          </div>
+          <div class="color-item">
+            <ColorInput
+              v-model="fgColorLocal"
+              name="fgColor"
+              :label="$t('settings.foreground')"
+            />
+            <ColorInput
+              v-model="fgTextColorLocal"
+              name="fgTextColor"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.fgText"
+            />
+            <ColorInput
+              v-model="fgLinkColorLocal"
+              name="fgLinkColor"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.fgLink"
+            />
+            <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
+          </div>
+          <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
+          <div class="color-item">
+            <ColorInput
+              v-model="cRedColorLocal"
+              name="cRedColor"
+              :label="$t('settings.cRed')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgRed" />
+            <ColorInput
+              v-model="cBlueColorLocal"
+              name="cBlueColor"
+              :label="$t('settings.cBlue')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgBlue" />
+          </div>
+          <div class="color-item">
+            <ColorInput
+              v-model="cGreenColorLocal"
+              name="cGreenColor"
+              :label="$t('settings.cGreen')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgGreen" />
+            <ColorInput
+              v-model="cOrangeColorLocal"
+              name="cOrangeColor"
+              :label="$t('settings.cOrange')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgOrange" />
+          </div>
+          <p>{{ $t('settings.theme_help_v2_2') }}</p>
+        </div>
+
+        <div
+          :label="$t('settings.style.advanced_colors._tab_label')"
+          class="color-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.theme_help') }}</p>
+            <button
+              class="btn"
+              @click="clearOpacity"
+            >
+              {{ $t('settings.style.switcher.clear_opacity') }}
+            </button>
+            <button
+              class="btn"
+              @click="clearV1"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
+            <ColorInput
+              v-model="alertErrorColorLocal"
+              name="alertError"
+              :label="$t('settings.style.advanced_colors.alert_error')"
+              :fallback="previewTheme.colors.alertError"
+            />
+            <ContrastRatio :contrast="previewContrast.alertError" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
+            <ColorInput
+              v-model="badgeNotificationColorLocal"
+              name="badgeNotification"
+              :label="$t('settings.style.advanced_colors.badge_notification')"
+              :fallback="previewTheme.colors.badgeNotification"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
+            <ColorInput
+              v-model="panelColorLocal"
+              name="panelColor"
+              :fallback="fgColorLocal"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="panelOpacityLocal"
+              name="panelOpacity"
+              :fallback="previewTheme.opacity.panel || 1"
+            />
+            <ColorInput
+              v-model="panelTextColorLocal"
+              name="panelTextColor"
+              :fallback="previewTheme.colors.panelText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.panelText"
+              large="1"
+            />
+            <ColorInput
+              v-model="panelLinkColorLocal"
+              name="panelLinkColor"
+              :fallback="previewTheme.colors.panelLink"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.panelLink"
+              large="1"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
+            <ColorInput
+              v-model="topBarColorLocal"
+              name="topBarColor"
+              :fallback="fgColorLocal"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="topBarTextColorLocal"
+              name="topBarTextColor"
+              :fallback="previewTheme.colors.topBarText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.topBarText" />
+            <ColorInput
+              v-model="topBarLinkColorLocal"
+              name="topBarLinkColor"
+              :fallback="previewTheme.colors.topBarLink"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio :contrast="previewContrast.topBarLink" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
+            <ColorInput
+              v-model="inputColorLocal"
+              name="inputColor"
+              :fallback="fgColorLocal"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="inputOpacityLocal"
+              name="inputOpacity"
+              :fallback="previewTheme.opacity.input || 1"
+            />
+            <ColorInput
+              v-model="inputTextColorLocal"
+              name="inputTextColor"
+              :fallback="previewTheme.colors.inputText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.inputText" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
+            <ColorInput
+              v-model="btnColorLocal"
+              name="btnColor"
+              :fallback="fgColorLocal"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="btnOpacityLocal"
+              name="btnOpacity"
+              :fallback="previewTheme.opacity.btn || 1"
+            />
+            <ColorInput
+              v-model="btnTextColorLocal"
+              name="btnTextColor"
+              :fallback="previewTheme.colors.btnText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnText" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
+            <ColorInput
+              v-model="borderColorLocal"
+              name="borderColor"
+              :fallback="previewTheme.colors.border"
+              :label="$t('settings.style.common.color')"
+            />
+            <OpacityInput
+              v-model="borderOpacityLocal"
+              name="borderOpacity"
+              :fallback="previewTheme.opacity.border || 1"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
+            <ColorInput
+              v-model="faintColorLocal"
+              name="faintColor"
+              :fallback="previewTheme.colors.faint || 1"
+              :label="$t('settings.text')"
+            />
+            <ColorInput
+              v-model="faintLinkColorLocal"
+              name="faintLinkColor"
+              :fallback="previewTheme.colors.faintLink"
+              :label="$t('settings.links')"
+            />
+            <ColorInput
+              v-model="panelFaintColorLocal"
+              name="panelFaintColor"
+              :fallback="previewTheme.colors.panelFaint"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <OpacityInput
+              v-model="faintOpacityLocal"
+              name="faintOpacity"
+              :fallback="previewTheme.opacity.faint || 0.5"
+            />
+          </div>
+        </div>
+
+        <div
+          :label="$t('settings.style.radii._tab_label')"
+          class="radius-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.radii_help') }}</p>
+            <button
+              class="btn"
+              @click="clearRoundness"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <RangeInput
+            v-model="btnRadiusLocal"
+            name="btnRadius"
+            :label="$t('settings.btnRadius')"
+            :fallback="previewTheme.radii.btn"
+            max="16"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="inputRadiusLocal"
+            name="inputRadius"
+            :label="$t('settings.inputRadius')"
+            :fallback="previewTheme.radii.input"
+            max="9"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="checkboxRadiusLocal"
+            name="checkboxRadius"
+            :label="$t('settings.checkboxRadius')"
+            :fallback="previewTheme.radii.checkbox"
+            max="16"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="panelRadiusLocal"
+            name="panelRadius"
+            :label="$t('settings.panelRadius')"
+            :fallback="previewTheme.radii.panel"
+            max="50"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="avatarRadiusLocal"
+            name="avatarRadius"
+            :label="$t('settings.avatarRadius')"
+            :fallback="previewTheme.radii.avatar"
+            max="28"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="avatarAltRadiusLocal"
+            name="avatarAltRadius"
+            :label="$t('settings.avatarAltRadius')"
+            :fallback="previewTheme.radii.avatarAlt"
+            max="28"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="attachmentRadiusLocal"
+            name="attachmentRadius"
+            :label="$t('settings.attachmentRadius')"
+            :fallback="previewTheme.radii.attachment"
+            max="50"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="tooltipRadiusLocal"
+            name="tooltipRadius"
+            :label="$t('settings.tooltipRadius')"
+            :fallback="previewTheme.radii.tooltip"
+            max="50"
+            hard-min="0"
+          />
+        </div>
+
+        <div
+          :label="$t('settings.style.shadows._tab_label')"
+          class="shadow-container"
+        >
+          <div class="tab-header shadow-selector">
+            <div class="select-container">
+              {{ $t('settings.style.shadows.component') }}
+              <label
+                for="shadow-switcher"
+                class="select"
+              >
+                <select
+                  id="shadow-switcher"
+                  v-model="shadowSelected"
+                  class="shadow-switcher"
+                >
+                  <option
+                    v-for="shadow in shadowsAvailable"
+                    :key="shadow"
+                    :value="shadow"
+                  >
+                    {{ $t('settings.style.shadows.components.' + shadow) }}
+                  </option>
+                </select>
+                <i class="icon-down-open" />
+              </label>
+            </div>
+            <div class="override">
+              <label
+                for="override"
+                class="label"
+              >
+                {{ $t('settings.style.shadows.override') }}
+              </label>
+              <input
+                id="override"
+                v-model="currentShadowOverriden"
+                name="override"
+                class="input-override"
+                type="checkbox"
+              >
+              <label
+                class="checkbox-label"
+                for="override"
+              />
+            </div>
+            <button
+              class="btn"
+              @click="clearShadows"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <shadow-control
+            v-model="currentShadow"
+            :ready="!!currentShadowFallback"
+            :fallback="currentShadowFallback"
+          />
+          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
+            <i18n
+              path="settings.style.shadows.filter_hint.always_drop_shadow"
+              tag="p"
+            >
+              <code>filter: drop-shadow()</code>
+            </i18n>
+            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
+            <i18n
+              path="settings.style.shadows.filter_hint.drop_shadow_syntax"
+              tag="p"
+            >
+              <code>drop-shadow</code>
+              <code>spread-radius</code>
+              <code>inset</code>
+            </i18n>
+            <i18n
+              path="settings.style.shadows.filter_hint.inset_classic"
+              tag="p"
+            >
+              <code>box-shadow</code>
+            </i18n>
+            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
+          </div>
+        </div>
+
+        <div
+          :label="$t('settings.style.fonts._tab_label')"
+          class="fonts-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.style.fonts.help') }}</p>
+            <button
+              class="btn"
+              @click="clearFonts"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <FontControl
+            v-model="fontsLocal.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="previewTheme.fonts.interface"
+            no-inherit="1"
+          />
+          <FontControl
+            v-model="fontsLocal.input"
+            name="input"
+            :label="$t('settings.style.fonts.components.input')"
+            :fallback="previewTheme.fonts.input"
+          />
+          <FontControl
+            v-model="fontsLocal.post"
+            name="post"
+            :label="$t('settings.style.fonts.components.post')"
+            :fallback="previewTheme.fonts.post"
+          />
+          <FontControl
+            v-model="fontsLocal.postCode"
+            name="postCode"
+            :label="$t('settings.style.fonts.components.postCode')"
+            :fallback="previewTheme.fonts.postCode"
+          />
+        </div>
+      </tab-switcher>
+    </keep-alive>
+
+    <div class="apply-container">
+      <button
+        class="btn submit"
+        :disabled="!themeValid"
+        @click="setCustomTheme"
+      >
+        {{ $t('general.apply') }}
+      </button>
+      <button
+        class="btn"
+        @click="clearAll"
+      >
+        {{ $t('settings.style.switcher.reset') }}
+      </button>
     </div>
   </div>
-
-  <div class="preview-container">
-    <preview :style="previewRules"/>
-  </div>
-
-  <keep-alive>
-    <tab-switcher key="style-tweak">
-      <div :label="$t('settings.style.common_colors._tab_label')" class="color-container">
-        <div class="tab-header">
-          <p>{{$t('settings.theme_help')}}</p>
-          <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
-          <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
-        </div>
-        <p>{{$t('settings.theme_help_v2_1')}}</p>
-        <h4>{{ $t('settings.style.common_colors.main') }}</h4>
-        <div class="color-item">
-          <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
-          <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
-          <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.bgText"/>
-          <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
-          <ContrastRatio :contrast="previewContrast.bgLink"/>
-        </div>
-        <div class="color-item">
-          <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
-          <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
-          <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
-          <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
-        </div>
-        <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
-        <div class="color-item">
-          <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
-          <ContrastRatio :contrast="previewContrast.bgRed"/>
-          <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
-          <ContrastRatio :contrast="previewContrast.bgBlue"/>
-        </div>
-        <div class="color-item">
-          <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
-          <ContrastRatio :contrast="previewContrast.bgGreen"/>
-          <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
-          <ContrastRatio :contrast="previewContrast.bgOrange"/>
-        </div>
-        <p>{{$t('settings.theme_help_v2_2')}}</p>
-      </div>
-
-      <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container">
-        <div class="tab-header">
-          <p>{{$t('settings.theme_help')}}</p>
-          <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button>
-          <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
-          <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/>
-          <ContrastRatio :contrast="previewContrast.alertError"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
-          <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.style.advanced_colors.badge_notification')" :fallback="previewTheme.colors.badgeNotification"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
-          <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-          <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
-          <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
-          <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/>
-          <ContrastRatio :contrast="previewContrast.panelLink" large="1"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
-          <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-          <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.topBarText"/>
-          <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
-          <ContrastRatio :contrast="previewContrast.topBarLink"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
-          <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-          <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/>
-          <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.inputText"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
-          <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
-          <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
-          <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
-          <ContrastRatio :contrast="previewContrast.btnText"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
-          <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" :label="$t('settings.style.common.color')"/>
-          <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/>
-        </div>
-        <div class="color-item">
-          <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
-          <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/>
-          <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/>
-          <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.style.advanced_colors.panel_header')"/>
-          <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/>
-        </div>
-      </div>
-
-      <div :label="$t('settings.style.radii._tab_label')" class="radius-container">
-        <div class="tab-header">
-          <p>{{$t('settings.radii_help')}}</p>
-          <button class="btn" @click="clearRoundness">{{$t('settings.style.switcher.clear_all')}}</button>
-        </div>
-        <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/>
-        <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="9" hardMin="0"/>
-        <RangeInput name="checkboxRadius" :label="$t('settings.checkboxRadius')" v-model="checkboxRadiusLocal" :fallback="previewTheme.radii.checkbox" max="16" hardMin="0"/>
-        <RangeInput name="panelRadius" :label="$t('settings.panelRadius')" v-model="panelRadiusLocal" :fallback="previewTheme.radii.panel" max="50" hardMin="0"/>
-        <RangeInput name="avatarRadius" :label="$t('settings.avatarRadius')" v-model="avatarRadiusLocal" :fallback="previewTheme.radii.avatar" max="28" hardMin="0"/>
-        <RangeInput name="avatarAltRadius" :label="$t('settings.avatarAltRadius')" v-model="avatarAltRadiusLocal" :fallback="previewTheme.radii.avatarAlt" max="28" hardMin="0"/>
-        <RangeInput name="attachmentRadius" :label="$t('settings.attachmentRadius')" v-model="attachmentRadiusLocal" :fallback="previewTheme.radii.attachment" max="50" hardMin="0"/>
-        <RangeInput name="tooltipRadius" :label="$t('settings.tooltipRadius')" v-model="tooltipRadiusLocal" :fallback="previewTheme.radii.tooltip" max="50" hardMin="0"/>
-      </div>
-
-      <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container">
-        <div class="tab-header shadow-selector">
-          <div class="select-container">
-            {{$t('settings.style.shadows.component')}}
-            <label for="shadow-switcher" class="select">
-              <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher">
-                <option v-for="shadow in shadowsAvailable"
-                        :value="shadow">
-                  {{$t('settings.style.shadows.components.' + shadow)}}
-                </option>
-              </select>
-              <i class="icon-down-open"/>
-            </label>
-          </div>
-          <div class="override">
-            <label for="override" class="label">
-              {{$t('settings.style.shadows.override')}}
-            </label>
-            <input
-              v-model="currentShadowOverriden"
-              name="override"
-              id="override"
-              class="input-override"
-              type="checkbox">
-            <label class="checkbox-label" for="override"></label>
-          </div>
-          <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button>
-        </div>
-        <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/>
-        <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-          <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p">
-            <code>filter: drop-shadow()</code>
-          </i18n>
-          <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p>
-          <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p">
-            <code>drop-shadow</code>
-            <code>spread-radius</code>
-            <code>inset</code>
-          </i18n>
-          <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p">
-            <code>box-shadow</code>
-          </i18n>
-          <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p>
-        </div>
-      </div>
-
-      <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container">
-        <div class="tab-header">
-          <p>{{$t('settings.style.fonts.help')}}</p>
-          <button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button>
-        </div>
-        <FontControl
-          name="ui"
-          v-model="fontsLocal.interface"
-          :label="$t('settings.style.fonts.components.interface')"
-          :fallback="previewTheme.fonts.interface"
-          no-inherit="1"/>
-        <FontControl
-          name="input"
-          v-model="fontsLocal.input"
-          :label="$t('settings.style.fonts.components.input')"
-          :fallback="previewTheme.fonts.input"/>
-        <FontControl
-          name="post"
-          v-model="fontsLocal.post"
-          :label="$t('settings.style.fonts.components.post')"
-          :fallback="previewTheme.fonts.post"/>
-        <FontControl
-          name="postCode"
-          v-model="fontsLocal.postCode"
-          :label="$t('settings.style.fonts.components.postCode')"
-          :fallback="previewTheme.fonts.postCode"/>
-      </div>
-    </tab-switcher>
-  </keep-alive>
-
-  <div class="apply-container">
-    <button class="btn submit" :disabled="!themeValid" @click="setCustomTheme">{{$t('general.apply')}}</button>
-    <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button>
-  </div>
-</div>
 </template>
 
 <script src="./style_switcher.js"></script>

src/components/tab_switcher/tab_switcher.js

@@ -10,6 +10,12 @@ export default Vue.component('tab-switcher', {
       active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
+  beforeUpdate () {
+    const currentSlot = this.$slots.default[this.active]
+    if (!currentSlot.tag) {
+      this.active = this.$slots.default.findIndex(_ => _.tag)
+    }
+  },
   methods: {
     activateTab (index) {
       return () => {
@@ -17,30 +23,24 @@ export default Vue.component('tab-switcher', {
       }
     }
   },
-  beforeUpdate () {
-    const currentSlot = this.$slots.default[this.active]
-    if (!currentSlot.tag) {
-      this.active = this.$slots.default.findIndex(_ => _.tag)
-    }
-  },
   render (h) {
     const tabs = this.$slots.default
-          .map((slot, index) => {
+      .map((slot, index) => {
-            if (!slot.tag) return
+        if (!slot.tag) return
-            const classesTab = ['tab']
+        const classesTab = ['tab']
-            const classesWrapper = ['tab-wrapper']
+        const classesWrapper = ['tab-wrapper']
 
-            if (index === this.active) {
+        if (index === this.active) {
-              classesTab.push('active')
+          classesTab.push('active')
-              classesWrapper.push('active')
+          classesWrapper.push('active')
-            }
+        }
 
-            return (
+        return (
-              <div class={ classesWrapper.join(' ')}>
+          <div class={ classesWrapper.join(' ')}>
-                <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
+            <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
-              </div>
+          </div>
-            )
+        )
-          })
+      })
 
     const contents = this.$slots.default.map((slot, index) => {
       if (!slot.tag) return

src/components/tag_timeline/tag_timeline.vue

@@ -1,5 +1,10 @@
 <template>
-  <Timeline :title="tag" :timeline="timeline" :timeline-name="'tag'" :tag="tag" />
+  <Timeline
+    :title="tag"
+    :timeline="timeline"
+    :timeline-name="'tag'"
+    :tag="tag"
+  />
 </template>
 
 <script src='./tag_timeline.js'></script>

src/components/terms_of_service_panel/terms_of_service_panel.vue

@@ -2,8 +2,10 @@
   <div>
     <div class="panel panel-default">
       <div class="panel-body">
-        <div v-html="content" class="tos-content">
+        <div
-        </div>
+          class="tos-content"
+          v-html="content"
+        />
       </div>
     </div>
   </div>

src/components/timeline/timeline.js

@@ -137,7 +137,7 @@ const Timeline = {
         if (top < 15 &&
             !this.paused &&
             !(this.unfocused && this.$store.state.config.pauseOnUnfocused)
-           ) {
+        ) {
           this.showNewStatuses()
         } else {
           this.paused = true

src/components/timeline/timeline.vue

@@ -2,41 +2,66 @@
   <div :class="classes.root">
     <div :class="classes.header">
       <div class="title">
-        {{title}}
+        {{ title }}
       </div>
-      <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
+      <div
-        {{$t('timeline.error_fetching')}}
+        v-if="timelineError"
+        class="loadmore-error alert error"
+        @click.prevent
+      >
+        {{ $t('timeline.error_fetching') }}
       </div>
-      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+      <button
-        {{$t('timeline.show_new')}}{{newStatusCountStr}}
+        v-if="timeline.newStatusCount > 0 && !timelineError"
+        class="loadmore-button"
+        @click.prevent="showNewStatuses"
+      >
+        {{ $t('timeline.show_new') }}{{ newStatusCountStr }}
       </button>
-      <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
+      <div
-        {{$t('timeline.up_to_date')}}
+        v-if="!timeline.newStatusCount > 0 && !timelineError"
+        class="loadmore-text faint"
+        @click.prevent
+      >
+        {{ $t('timeline.up_to_date') }}
       </div>
     </div>
     <div :class="classes.body">
       <div class="timeline">
         <conversation
           v-for="status in timeline.visibleStatuses"
-          class="status-fadein"
           :key="status.id"
+          class="status-fadein"
           :statusoid="status"
           :collapsable="true"
         />
       </div>
     </div>
     <div :class="classes.footer">
-      <div v-if="count===0" class="new-status-notification text-center panel-footer faint">
+      <div
-        {{$t('timeline.no_statuses')}}
+        v-if="count===0"
+        class="new-status-notification text-center panel-footer faint"
+      >
+        {{ $t('timeline.no_statuses') }}
       </div>
-      <div v-else-if="bottomedOut" class="new-status-notification text-center panel-footer faint">
+      <div
-        {{$t('timeline.no_more_statuses')}}
+        v-else-if="bottomedOut"
+        class="new-status-notification text-center panel-footer faint"
+      >
+        {{ $t('timeline.no_more_statuses') }}
       </div>
-      <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'>
+      <a
-        <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
+        v-else-if="!timeline.loading"
+        href="#"
+        @click.prevent="fetchOlderStatuses()"
+      >
+        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
       </a>
-      <div v-else class="new-status-notification text-center panel-footer">
+      <div
-        <i class="icon-spin3 animate-spin"/>
+        v-else
+        class="new-status-notification text-center panel-footer"
+      >
+        <i class="icon-spin3 animate-spin" />
       </div>
     </div>
   </div>

src/components/user_avatar/user_avatar.vue

@@ -3,7 +3,7 @@
     class="avatar"
     :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }"
     :src="imgSrc"
-    :imageLoadError="imageLoadError"
+    :image-load-error="imageLoadError"
   />
 </template>
 

src/components/user_card/user_card.js

@@ -22,15 +22,15 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-rounded-t': this.rounded === 'top',  // set border-top-left-radius and border-top-right-radius
+        'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-rounded': this.rounded === true,     // set border-radius for all sides
+        'user-card-rounded': this.rounded === true, // set border-radius for all sides
-        'user-card-bordered': this.bordered === true    // set border for all sides
+        'user-card-bordered': this.bordered === true // set border for all sides
       }]
     },
     style () {
       const color = this.$store.state.config.customTheme.colors
-            ? this.$store.state.config.customTheme.colors.bg  // v2
+        ? this.$store.state.config.customTheme.colors.bg // v2
-            : this.$store.state.config.colors.bg // v1
+        : this.$store.state.config.colors.bg // v1
 
       if (color) {
         const rgb = (typeof color === 'string') ? hex2rgb(color) : color
@@ -72,12 +72,12 @@ export default {
     userHighlightType: {
       get () {
         const data = this.$store.state.config.highlight[this.user.screen_name]
-        return data && data.type || 'disabled'
+        return (data && data.type) || 'disabled'
       },
       set (type) {
         const data = this.$store.state.config.highlight[this.user.screen_name]
         if (type !== 'disabled') {
-          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })
         } else {
           this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
         }
@@ -107,7 +107,7 @@ export default {
     followUser () {
       const store = this.$store
       this.followRequestInProgress = true
-      requestFollow(this.user, store).then(({sent}) => {
+      requestFollow(this.user, store).then(({ sent }) => {
         this.followRequestInProgress = false
         this.followRequestSent = sent
       })
@@ -138,7 +138,7 @@ export default {
         store.commit('setProfileView', { v })
       }
     },
-    linkClicked ({target}) {
+    linkClicked ({ target }) {
       if (target.tagName === 'SPAN') {
         target = target.parentNode
       }

src/components/user_card/user_card.vue

@@ -1,126 +1,240 @@
 <template>
-<div class="user-card" :class="classes" :style="style">
+  <div
-  <div class="panel-heading">
+    class="user-card"
-    <div class='user-info'>
+    :class="classes"
-      <div class='container'>
+    :style="style"
-        <router-link :to="userProfileLink(user)">
+  >
-          <UserAvatar :betterShadow="betterShadow" :src="user.profile_image_url_original"/>
+    <div class="panel-heading">
-        </router-link>
+      <div class="user-info">
-        <div class="name-and-screen-name">
+        <div class="container">
-          <div class="top-line">
+          <router-link :to="userProfileLink(user)">
-            <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
+            <UserAvatar
-            <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
+              :better-shadow="betterShadow"
-            <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser">
+              :src="user.profile_image_url_original"
-              <i class="button-icon icon-pencil usersettings" :title="$t('tool_tip.user_settings')"></i>
+            />
-            </router-link>
-            <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local">
-              <i class="icon-link-ext usersettings"></i>
-            </a>
-          </div>
-
-          <router-link class='user-screen-name' :to="userProfileLink(user)">
-            <span class="handle">@{{user.screen_name}}
-              <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
-            </span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
-            <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
+          <div class="name-and-screen-name">
+            <div class="top-line">
+              <div
+                v-if="user.name_html"
+                :title="user.name"
+                class="user-name"
+                v-html="user.name_html"
+              />
+              <div
+                v-else
+                :title="user.name"
+                class="user-name"
+              >
+                {{ user.name }}
+              </div>
+              <router-link
+                v-if="!isOtherUser"
+                :to="{ name: 'user-settings' }"
+              >
+                <i
+                  class="button-icon icon-pencil usersettings"
+                  :title="$t('tool_tip.user_settings')"
+                />
+              </router-link>
+              <a
+                v-if="isOtherUser && !user.is_local"
+                :href="user.statusnet_profile_url"
+                target="_blank"
+              >
+                <i class="icon-link-ext usersettings" />
+              </a>
+            </div>
+
+            <router-link
+              class="user-screen-name"
+              :to="userProfileLink(user)"
+            >
+              <span class="handle">@{{ user.screen_name }}
+                <span
+                  v-if="!hideBio && !!visibleRole"
+                  class="alert staff"
+                >{{ visibleRole }}</span>
+              </span><span v-if="user.locked"><i class="icon icon-lock" /></span>
+              <span
+                v-if="!hideUserStatsLocal && !hideBio"
+                class="dailyAvg"
+              >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
+            </router-link>
+          </div>
         </div>
-      </div>
+        <div class="user-meta">
-      <div class="user-meta">
+          <div
-        <div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
+            v-if="user.follows_you && loggedIn && isOtherUser"
-          {{ $t('user_card.follows_you') }}
+            class="following"
+          >
+            {{ $t('user_card.follows_you') }}
+          </div>
+          <div
+            v-if="isOtherUser && (loggedIn || !switcher)"
+            class="highlighter"
+          >
+            <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+            <input
+              v-if="userHighlightType !== 'disabled'"
+              :id="'userHighlightColorTx'+user.id"
+              v-model="userHighlightColor"
+              class="userHighlightText"
+              type="text"
+            >
+            <input
+              v-if="userHighlightType !== 'disabled'"
+              :id="'userHighlightColor'+user.id"
+              v-model="userHighlightColor"
+              class="userHighlightCl"
+              type="color"
+            >
+            <label
+              for="style-switcher"
+              class="userHighlightSel select"
+            >
+              <select
+                :id="'userHighlightSel'+user.id"
+                v-model="userHighlightType"
+                class="userHighlightSel"
+              >
+                <option value="disabled">No highlight</option>
+                <option value="solid">Solid bg</option>
+                <option value="striped">Striped bg</option>
+                <option value="side">Side stripe</option>
+              </select>
+              <i class="icon-down-open" />
+            </label>
+          </div>
         </div>
-        <div class="highlighter" v-if="isOtherUser && (loggedIn || !switcher)">
+        <div
-          <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+          v-if="isOtherUser"
-          <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
+          class="user-interactions"
-          <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
+        >
-          <label for="style-switcher" class='userHighlightSel select'>
+          <div
-            <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
+            v-if="loggedIn"
-              <option value="disabled">No highlight</option>
+            class="follow"
-              <option value="solid">Solid bg</option>
+          >
-              <option value="striped">Striped bg</option>
+            <span v-if="user.following">
-              <option value="side">Side stripe</option>
+              <!--Following them!-->
-            </select>
+              <button
-            <i class="icon-down-open"/>
+                class="pressed"
-          </label>
+                :disabled="followRequestInProgress"
-        </div>
+                :title="$t('user_card.follow_unfollow')"
-      </div>
+                @click="unfollowUser"
-      <div v-if="isOtherUser" class="user-interactions">
+              >
-        <div class="follow" v-if="loggedIn">
+                <template v-if="followRequestInProgress">
-          <span v-if="user.following">
+                  {{ $t('user_card.follow_progress') }}
-            <!--Following them!-->
+                </template>
-            <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')">
+                <template v-else>
-              <template v-if="followRequestInProgress">
+                  {{ $t('user_card.following') }}
-                {{ $t('user_card.follow_progress') }}
+                </template>
-              </template>
+              </button>
-              <template v-else>
+            </span>
-                {{ $t('user_card.following') }}
+            <span v-if="!user.following">
-              </template>
+              <button
-            </button>
+                :disabled="followRequestInProgress"
-          </span>
+                :title="followRequestSent ? $t('user_card.follow_again') : ''"
-          <span v-if="!user.following">
+                @click="followUser"
-            <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''">
+              >
-              <template v-if="followRequestInProgress">
+                <template v-if="followRequestInProgress">
-                {{ $t('user_card.follow_progress') }}
+                  {{ $t('user_card.follow_progress') }}
-              </template>
+                </template>
-              <template v-else-if="followRequestSent">
+                <template v-else-if="followRequestSent">
-                {{ $t('user_card.follow_sent') }}
+                  {{ $t('user_card.follow_sent') }}
-              </template>
+                </template>
-              <template v-else>
+                <template v-else>
-                {{ $t('user_card.follow') }}
+                  {{ $t('user_card.follow') }}
-              </template>
+                </template>
-            </button>
+              </button>
-          </span>
+            </span>
-        </div>
+          </div>
-        <div class='mute' v-if='isOtherUser && loggedIn'>
+          <div
-          <span v-if='user.muted'>
+            v-if="isOtherUser && loggedIn"
-            <button @click="unmuteUser" class="pressed">
+            class="mute"
-              {{ $t('user_card.muted') }}
+          >
-            </button>
+            <span v-if="user.muted">
-          </span>
+              <button
-          <span v-if='!user.muted'>
+                class="pressed"
-            <button @click="muteUser">
+                @click="unmuteUser"
-              {{ $t('user_card.mute') }}
+              >
-            </button>
+                {{ $t('user_card.muted') }}
-          </span>
+              </button>
-        </div>
+            </span>
-        <div v-if='!loggedIn && user.is_local'>
+            <span v-if="!user.muted">
-          <RemoteFollow :user="user" />
+              <button @click="muteUser">
-        </div>
+                {{ $t('user_card.mute') }}
-        <div class='block' v-if='isOtherUser && loggedIn'>
+              </button>
-          <span v-if='user.statusnet_blocking'>
+            </span>
-            <button @click="unblockUser" class="pressed">
+          </div>
-              {{ $t('user_card.blocked') }}
+          <div v-if="!loggedIn && user.is_local">
-            </button>
+            <RemoteFollow :user="user" />
-          </span>
+          </div>
-          <span v-if='!user.statusnet_blocking'>
+          <div
-            <button @click="blockUser">
+            v-if="isOtherUser && loggedIn"
-              {{ $t('user_card.block') }}
+            class="block"
-            </button>
+          >
-          </span>
+            <span v-if="user.statusnet_blocking">
+              <button
+                class="pressed"
+                @click="unblockUser"
+              >
+                {{ $t('user_card.blocked') }}
+              </button>
+            </span>
+            <span v-if="!user.statusnet_blocking">
+              <button @click="blockUser">
+                {{ $t('user_card.block') }}
+              </button>
+            </span>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+    <div
-  <div class="panel-body" v-if="!hideBio">
+      v-if="!hideBio"
-    <div v-if="!hideUserStatsLocal && switcher" class="user-counts">
+      class="panel-body"
-      <div class="user-count" v-on:click.prevent="setProfileView('statuses')">
+    >
-        <h5>{{ $t('user_card.statuses') }}</h5>
+      <div
-        <span>{{user.statuses_count}} <br></span>
+        v-if="!hideUserStatsLocal && switcher"
-      </div>
+        class="user-counts"
-      <div class="user-count" v-on:click.prevent="setProfileView('friends')">
+      >
-        <h5>{{ $t('user_card.followees') }}</h5>
+        <div
-        <span>{{user.friends_count}}</span>
+          class="user-count"
-      </div>
+          @click.prevent="setProfileView('statuses')"
-      <div class="user-count" v-on:click.prevent="setProfileView('followers')">
+        >
-        <h5>{{ $t('user_card.followers') }}</h5>
+          <h5>{{ $t('user_card.statuses') }}</h5>
-        <span>{{user.followers_count}}</span>
+          <span>{{ user.statuses_count }} <br></span>
+        </div>
+        <div
+          class="user-count"
+          @click.prevent="setProfileView('friends')"
+        >
+          <h5>{{ $t('user_card.followees') }}</h5>
+          <span>{{ user.friends_count }}</span>
+        </div>
+        <div
+          class="user-count"
+          @click.prevent="setProfileView('followers')"
+        >
+          <h5>{{ $t('user_card.followers') }}</h5>
+          <span>{{ user.followers_count }}</span>
+        </div>
       </div>
+      <p
+        v-if="!hideBio && user.description_html"
+        class="user-card-bio"
+        @click.prevent="linkClicked"
+        v-html="user.description_html"
+      />
+      <p
+        v-else-if="!hideBio"
+        class="user-card-bio"
+      >
+        {{ user.description }}
+      </p>
     </div>
-    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p>
-    <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p>
   </div>
-</div>
 </template>
 
 <script src="./user_card.js"></script>

src/components/user_finder/user_finder.vue

@@ -1,14 +1,38 @@
 <template>
   <div>
     <div class="user-finder-container">
-      <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
+      <i
-      <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
+        v-if="loading"
+        class="icon-spin4 user-finder-icon animate-spin-slow"
+      />
+      <a
+        v-if="hidden"
+        href="#"
+        :title="$t('finder.find_user')"
+      ><i
+        class="icon-user-plus user-finder-icon"
+        @click.prevent.stop="toggleHidden"
+      /></a>
       <template v-else>
-        <input class="user-finder-input" ref="userSearchInput" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
+        <input
-        <button class="btn search-button" @click="findUser(username)">
+          id="user-finder-input"
-          <i class="icon-search"/>
+          ref="userSearchInput"
+          v-model="username"
+          class="user-finder-input"
+          :placeholder="$t('finder.find_user')"
+          type="text"
+          @keyup.enter="findUser(username)"
+        >
+        <button
+          class="btn search-button"
+          @click="findUser(username)"
+        >
+          <i class="icon-search" />
         </button>
-        <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
+        <i
+          class="button-icon icon-cancel user-finder-icon"
+          @click.prevent.stop="toggleHidden"
+        />
       </template>
     </div>
   </div>
@@ -25,7 +49,6 @@
   align-items: baseline;
   vertical-align: baseline;
 
-
   .user-finder-input,
   .search-button {
     height: 29px;

src/components/user_panel/user_panel.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="user-panel">
-    <div v-if='user' class="panel panel-default" style="overflow: visible;">
+    <div
-      <UserCard :user="user" :hideBio="true" rounded="top"/>
+      v-if="user"
+      class="panel panel-default"
+      style="overflow: visible;"
+    >
+      <UserCard
+        :user="user"
+        :hide-bio="true"
+        rounded="top"
+      />
       <div class="panel-footer">
-        <post-status-form v-if='user'></post-status-form>
+        <post-status-form v-if="user" />
       </div>
     </div>
-    <login-form v-if='!user'></login-form>
+    <login-form v-if="!user" />
   </div>
 </template>
 

src/components/user_profile/user_profile.vue

@@ -1,55 +1,84 @@
 <template>
-<div>
+  <div>
-  <div v-if="user.id" class="user-profile panel panel-default">
+    <div
-    <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/>
+      v-if="user.id"
-    <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher">
+      class="user-profile panel panel-default"
-      <Timeline
+    >
-        :label="$t('user_card.statuses')"
+      <UserCard
-        :disabled="!user.statuses_count"
+        :user="user"
-        :count="user.statuses_count"
+        :switcher="true"
-        :embedded="true"
+        :selected="timeline.viewing"
-        :title="$t('user_profile.timeline_title')"
+        rounded="top"
-        :timeline="timeline"
-        :timeline-name="'user'"
-        :user-id="userId"
       />
-      <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count">
+      <tab-switcher
-        <FriendList :userId="userId" />
+        ref="tabSwitcher"
+        :render-only-focused="true"
+      >
+        <Timeline
+          :label="$t('user_card.statuses')"
+          :disabled="!user.statuses_count"
+          :count="user.statuses_count"
+          :embedded="true"
+          :title="$t('user_profile.timeline_title')"
+          :timeline="timeline"
+          :timeline-name="'user'"
+          :user-id="userId"
+        />
+        <div
+          v-if="followsTabVisible"
+          :label="$t('user_card.followees')"
+          :disabled="!user.friends_count"
+        >
+          <FriendList :user-id="userId" />
+        </div>
+        <div
+          v-if="followersTabVisible"
+          :label="$t('user_card.followers')"
+          :disabled="!user.followers_count"
+        >
+          <FollowerList
+            :user-id="userId"
+            :entry-props="{noFollowsYou: isUs}"
+          />
+        </div>
+        <Timeline
+          :label="$t('user_card.media')"
+          :disabled="!media.visibleStatuses.length"
+          :embedded="true"
+          :title="$t('user_card.media')"
+          timeline-name="media"
+          :timeline="media"
+          :user-id="userId"
+        />
+        <Timeline
+          v-if="isUs"
+          :label="$t('user_card.favorites')"
+          :disabled="!favorites.visibleStatuses.length"
+          :embedded="true"
+          :title="$t('user_card.favorites')"
+          timeline-name="favorites"
+          :timeline="favorites"
+        />
+      </tab-switcher>
+    </div>
+    <div
+      v-else
+      class="panel user-profile-placeholder"
+    >
+      <div class="panel-heading">
+        <div class="title">
+          {{ $t('settings.profile_tab') }}
+        </div>
       </div>
-      <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count">
+      <div class="panel-body">
-        <FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" />
+        <span v-if="error">{{ error }}</span>
-      </div>
+        <i
-      <Timeline
+          v-else
-        :label="$t('user_card.media')"
+          class="icon-spin3 animate-spin"
-        :disabled="!media.visibleStatuses.length"
+        />
-        :embedded="true" :title="$t('user_card.media')"
-        timeline-name="media"
-        :timeline="media"
-        :user-id="userId"
-      />
-      <Timeline
-        v-if="isUs"
-        :label="$t('user_card.favorites')"
-        :disabled="!favorites.visibleStatuses.length"
-        :embedded="true"
-        :title="$t('user_card.favorites')"
-        timeline-name="favorites"
-        :timeline="favorites"
-      />
-    </tab-switcher>
-  </div>
-  <div v-else class="panel user-profile-placeholder">
-    <div class="panel-heading">
-      <div class="title">
-        {{ $t('settings.profile_tab') }}
       </div>
     </div>
-    <div class="panel-body">
-      <span v-if="error">{{ error }}</span>
-      <i class="icon-spin3 animate-spin" v-else></i>
-    </div>
   </div>
-</div>
 </template>
 
 <script src="./user_profile.js"></script>

src/components/user_search/user_search.js

@@ -33,7 +33,7 @@ const userSearch = {
         return
       }
       this.loading = true
-      userSearchApi.search({query, store: this.$store})
+      userSearchApi.search({ query, store: this.$store })
         .then((res) => {
           this.loading = false
           this.users = res

src/components/user_search/user_search.vue

@@ -1,19 +1,38 @@
 <template>
   <div class="user-search panel panel-default">
     <div class="panel-heading">
-      {{$t('nav.user_search')}}
+      {{ $t('nav.user_search') }}
     </div>
     <div class="user-search-input-container">
-      <input class="user-finder-input" ref="userSearchInput" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/>
+      <input
-      <button class="btn search-button" @click="newQuery(username)">
+        ref="userSearchInput"
-        <i class="icon-search"/>
+        v-model="username"
+        class="user-finder-input"
+        :placeholder="$t('finder.find_user')"
+        @keyup.enter="newQuery(username)"
+      >
+      <button
+        class="btn search-button"
+        @click="newQuery(username)"
+      >
+        <i class="icon-search" />
       </button>
     </div>
-    <div v-if="loading" class="text-center loading-icon">
+    <div
-      <i class="icon-spin3 animate-spin"/>
+      v-if="loading"
+      class="text-center loading-icon"
+    >
+      <i class="icon-spin3 animate-spin" />
     </div>
-    <div v-else class="panel-body">
+    <div
-      <FollowCard v-for="user in users" :key="user.id" :user="user"/>
+      v-else
+      class="panel-body"
+    >
+      <FollowCard
+        v-for="user in users"
+        :key="user.id"
+        :user="user"
+      />
     </div>
   </div>
 </template>

src/components/user_settings/user_settings.js

@@ -134,12 +134,12 @@ const UserSettings = {
             hide_followers,
             show_role
             /* eslint-enable camelcase */
-          }}).then((user) => {
+          } }).then((user) => {
-            if (!user.error) {
+          if (!user.error) {
-              this.$store.commit('addNewUsers', [user])
+            this.$store.commit('addNewUsers', [user])
-              this.$store.commit('setCurrentUser', user)
+            this.$store.commit('setCurrentUser', user)
-            }
+          }
-          })
+        })
     },
     changeVis (visibility) {
       this.newDefaultScope = visibility
@@ -150,12 +150,12 @@ const UserSettings = {
       if (file.size > this.$store.state.instance[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit})
+        this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
         return
       }
       // eslint-disable-next-line no-undef
       const reader = new FileReader()
-      reader.onload = ({target}) => {
+      reader.onload = ({ target }) => {
         const img = target.result
         this[slot + 'Preview'] = img
       }
@@ -195,7 +195,7 @@ const UserSettings = {
       offset_top = 0
       offset_left = 0
       this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => {
+      this.$store.state.api.backendInteractor.updateBanner({ params: { banner, offset_top, offset_left, width, height } }).then((data) => {
         if (!data.error) {
           let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
           clone.cover_photo = data.url
@@ -221,7 +221,7 @@ const UserSettings = {
       cropW = imginfo.width
       cropH = imginfo.width
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => {
+      this.$store.state.api.backendInteractor.updateBg({ params: { img, cropX, cropY, cropW, cropH } }).then((data) => {
         if (!data.error) {
           let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser))
           clone.background_image = data.url
@@ -237,7 +237,7 @@ const UserSettings = {
     importFollows () {
       this.followListUploading = true
       const followList = this.followList
-      this.$store.state.api.backendInteractor.followImport({params: followList})
+      this.$store.state.api.backendInteractor.followImport({ params: followList })
         .then((status) => {
           if (status) {
             this.followsImported = true
@@ -295,11 +295,11 @@ const UserSettings = {
       this.deletingAccount = true
     },
     deleteAccount () {
-      this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput})
+      this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
         .then((res) => {
           if (res.status === 'success') {
             this.$store.dispatch('logout')
-            this.$router.push({name: 'root'})
+            this.$router.push({ name: 'root' })
           } else {
             this.deleteAccountError = res.error
           }

src/components/user_settings/user_settings.vue

@@ -2,15 +2,23 @@
   <div class="settings panel panel-default">
     <div class="panel-heading">
       <div class="title">
-        {{$t('settings.user_settings')}}
+        {{ $t('settings.user_settings') }}
       </div>
       <transition name="fade">
         <template v-if="currentSaveStateNotice">
-          <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+          <div
+            v-if="currentSaveStateNotice.error"
+            class="alert error"
+            @click.prevent
+          >
             {{ $t('settings.saving_err') }}
           </div>
 
-          <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
+          <div
+            v-if="!currentSaveStateNotice.error"
+            class="alert transparent"
+            @click.prevent
+          >
             {{ $t('settings.saving_ok') }}
           </div>
         </template>
@@ -19,132 +27,258 @@
     <div class="panel-body profile-edit">
       <tab-switcher>
         <div :label="$t('settings.profile_tab')">
-          <div class="setting-item" >
+          <div class="setting-item">
-            <h2>{{$t('settings.name_bio')}}</h2>
+            <h2>{{ $t('settings.name_bio') }}</h2>
-            <p>{{$t('settings.name')}}</p>
+            <p>{{ $t('settings.name') }}</p>
             <EmojiInput
-              type="text"
-              v-model="newName"
               id="username"
+              v-model="newName"
+              type="text"
               classname="name-changer"
             />
-            <p>{{$t('settings.bio')}}</p>
+            <p>{{ $t('settings.bio') }}</p>
             <EmojiInput
-              type="textarea"
               v-model="newBio"
+              type="textarea"
               classname="bio"
             />
             <p>
-              <input type="checkbox" v-model="newLocked" id="account-locked">
+              <input
-              <label for="account-locked">{{$t('settings.lock_account_description')}}</label>
+                id="account-locked"
+                v-model="newLocked"
+                type="checkbox"
+              >
+              <label for="account-locked">{{ $t('settings.lock_account_description') }}</label>
             </p>
             <div>
-              <label for="default-vis">{{$t('settings.default_vis')}}</label>
+              <label for="default-vis">{{ $t('settings.default_vis') }}</label>
-              <div id="default-vis" class="visibility-tray">
+              <div
+                id="default-vis"
+                class="visibility-tray"
+              >
                 <scope-selector
-                  :showAll="true"
+                  :show-all="true"
-                  :userDefault="newDefaultScope"
+                  :user-default="newDefaultScope"
-                  :onScopeChange="changeVis"/>
+                  :on-scope-change="changeVis"
+                />
               </div>
             </div>
             <p>
-              <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text">
+              <input
-              <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
+                id="account-no-rich-text"
+                v-model="newNoRichText"
+                type="checkbox"
+              >
+              <label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label>
             </p>
             <p>
-              <input type="checkbox" v-model="hideFollows" id="account-hide-follows">
+              <input
-              <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label>
+                id="account-hide-follows"
+                v-model="hideFollows"
+                type="checkbox"
+              >
+              <label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label>
             </p>
             <p>
-              <input type="checkbox" v-model="hideFollowers" id="account-hide-followers">
+              <input
-              <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label>
+                id="account-hide-followers"
+                v-model="hideFollowers"
+                type="checkbox"
+              >
+              <label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label>
             </p>
             <p>
-              <input type="checkbox" v-model="showRole" id="account-show-role">
+              <input
-              <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label>
+                id="account-show-role"
-              <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label>
+                v-model="showRole"
+                type="checkbox"
+              >
+              <label
+                v-if="role === 'admin'"
+                for="account-show-role"
+              >{{ $t('settings.show_admin_badge') }}</label>
+              <label
+                v-if="role === 'moderator'"
+                for="account-show-role"
+              >{{ $t('settings.show_moderator_badge') }}</label>
             </p>
-            <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
+            <button
+              :disabled="newName && newName.length === 0"
+              class="btn btn-default"
+              @click="updateProfile"
+            >
+              {{ $t('general.submit') }}
+            </button>
           </div>
           <div class="setting-item">
-            <h2>{{$t('settings.avatar')}}</h2>
+            <h2>{{ $t('settings.avatar') }}</h2>
-            <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
+            <p class="visibility-notice">
-            <p>{{$t('settings.current_avatar')}}</p>
+              {{ $t('settings.avatar_size_instruction') }}
-            <img :src="user.profile_image_url_original" class="current-avatar" />
+            </p>
-            <p>{{$t('settings.set_new_avatar')}}</p>
+            <p>{{ $t('settings.current_avatar') }}</p>
-            <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
+            <img
-            <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
+              :src="user.profile_image_url_original"
+              class="current-avatar"
+            >
+            <p>{{ $t('settings.set_new_avatar') }}</p>
+            <button
+              v-show="pickAvatarBtnVisible"
+              id="pick-avatar"
+              class="btn"
+              type="button"
+            >
+              {{ $t('settings.upload_a_photo') }}
+            </button>
+            <image-cropper
+              trigger="#pick-avatar"
+              :submit-handler="submitAvatar"
+              @open="pickAvatarBtnVisible=false"
+              @close="pickAvatarBtnVisible=true"
+            />
           </div>
           <div class="setting-item">
-            <h2>{{$t('settings.profile_banner')}}</h2>
+            <h2>{{ $t('settings.profile_banner') }}</h2>
-            <p>{{$t('settings.current_profile_banner')}}</p>
+            <p>{{ $t('settings.current_profile_banner') }}</p>
-            <img :src="user.cover_photo" class="banner" />
+            <img
-            <p>{{$t('settings.set_new_profile_banner')}}</p>
+              :src="user.cover_photo"
-            <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview" />
+              class="banner"
+            >
+            <p>{{ $t('settings.set_new_profile_banner') }}</p>
+            <img
+              v-if="bannerPreview"
+              class="banner"
+              :src="bannerPreview"
+            >
             <div>
-              <input type="file" @change="uploadFile('banner', $event)" />
+              <input
+                type="file"
+                @change="uploadFile('banner', $event)"
+              >
             </div>
-            <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i>
+            <i
-            <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
+              v-if="bannerUploading"
-            <div class='alert error' v-if="bannerUploadError">
+              class=" icon-spin4 animate-spin uploading"
+            />
+            <button
+              v-else-if="bannerPreview"
+              class="btn btn-default"
+              @click="submitBanner"
+            >
+              {{ $t('general.submit') }}
+            </button>
+            <div
+              v-if="bannerUploadError"
+              class="alert error"
+            >
               Error: {{ bannerUploadError }}
-              <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
+              <i
+                class="button-icon icon-cancel"
+                @click="clearUploadError('banner')"
+              />
             </div>
           </div>
           <div class="setting-item">
-            <h2>{{$t('settings.profile_background')}}</h2>
+            <h2>{{ $t('settings.profile_background') }}</h2>
-            <p>{{$t('settings.set_new_profile_background')}}</p>
+            <p>{{ $t('settings.set_new_profile_background') }}</p>
-            <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview" />
+            <img
+              v-if="backgroundPreview"
+              class="bg"
+              :src="backgroundPreview"
+            >
             <div>
-              <input type="file" @change="uploadFile('background', $event)" />
+              <input
+                type="file"
+                @change="uploadFile('background', $event)"
+              >
             </div>
-            <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i>
+            <i
-            <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
+              v-if="backgroundUploading"
-            <div class='alert error' v-if="backgroundUploadError">
+              class=" icon-spin4 animate-spin uploading"
+            />
+            <button
+              v-else-if="backgroundPreview"
+              class="btn btn-default"
+              @click="submitBg"
+            >
+              {{ $t('general.submit') }}
+            </button>
+            <div
+              v-if="backgroundUploadError"
+              class="alert error"
+            >
               Error: {{ backgroundUploadError }}
-              <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
+              <i
+                class="button-icon icon-cancel"
+                @click="clearUploadError('background')"
+              />
             </div>
           </div>
         </div>
 
         <div :label="$t('settings.security_tab')">
           <div class="setting-item">
-            <h2>{{$t('settings.change_password')}}</h2>
+            <h2>{{ $t('settings.change_password') }}</h2>
             <div>
-              <p>{{$t('settings.current_password')}}</p>
+              <p>{{ $t('settings.current_password') }}</p>
-              <input type="password" v-model="changePasswordInputs[0]">
+              <input
+                v-model="changePasswordInputs[0]"
+                type="password"
+              >
             </div>
             <div>
-              <p>{{$t('settings.new_password')}}</p>
+              <p>{{ $t('settings.new_password') }}</p>
-              <input type="password" v-model="changePasswordInputs[1]">
+              <input
+                v-model="changePasswordInputs[1]"
+                type="password"
+              >
             </div>
             <div>
-              <p>{{$t('settings.confirm_new_password')}}</p>
+              <p>{{ $t('settings.confirm_new_password') }}</p>
-              <input type="password" v-model="changePasswordInputs[2]">
+              <input
+                v-model="changePasswordInputs[2]"
+                type="password"
+              >
             </div>
-            <button class="btn btn-default" @click="changePassword">{{$t('general.submit')}}</button>
+            <button
-            <p v-if="changedPassword">{{$t('settings.changed_password')}}</p>
+              class="btn btn-default"
-            <p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p>
+              @click="changePassword"
-            <p v-if="changePasswordError">{{changePasswordError}}</p>
+            >
+              {{ $t('general.submit') }}
+            </button>
+            <p v-if="changedPassword">
+              {{ $t('settings.changed_password') }}
+            </p>
+            <p v-else-if="changePasswordError !== false">
+              {{ $t('settings.change_password_error') }}
+            </p>
+            <p v-if="changePasswordError">
+              {{ changePasswordError }}
+            </p>
           </div>
 
           <div class="setting-item">
-            <h2>{{$t('settings.oauth_tokens')}}</h2>
+            <h2>{{ $t('settings.oauth_tokens') }}</h2>
             <table class="oauth-tokens">
               <thead>
                 <tr>
-                  <th>{{$t('settings.app_name')}}</th>
+                  <th>{{ $t('settings.app_name') }}</th>
-                  <th>{{$t('settings.valid_until')}}</th>
+                  <th>{{ $t('settings.valid_until') }}</th>
-                  <th></th>
+                  <th />
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="oauthToken in oauthTokens" :key="oauthToken.id">
+                <tr
-                  <td>{{oauthToken.appName}}</td>
+                  v-for="oauthToken in oauthTokens"
-                  <td>{{oauthToken.validUntil}}</td>
+                  :key="oauthToken.id"
+                >
+                  <td>{{ oauthToken.appName }}</td>
+                  <td>{{ oauthToken.validUntil }}</td>
                   <td class="actions">
-                    <button class="btn btn-default" @click="revokeToken(oauthToken.id)">
+                    <button
-                      {{$t('settings.revoke_token')}}
+                      class="btn btn-default"
+                      @click="revokeToken(oauthToken.id)"
+                    >
+                      {{ $t('settings.revoke_token') }}
                     </button>
                   </td>
                 </tr>
@@ -153,56 +287,113 @@
           </div>
 
           <div class="setting-item">
-            <h2>{{$t('settings.delete_account')}}</h2>
+            <h2>{{ $t('settings.delete_account') }}</h2>
-            <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
+            <p v-if="!deletingAccount">
+              {{ $t('settings.delete_account_description') }}
+            </p>
             <div v-if="deletingAccount">
-              <p>{{$t('settings.delete_account_instructions')}}</p>
+              <p>{{ $t('settings.delete_account_instructions') }}</p>
-              <p>{{$t('login.password')}}</p>
+              <p>{{ $t('login.password') }}</p>
-              <input type="password" v-model="deleteAccountConfirmPasswordInput">
+              <input
-              <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button>
+                v-model="deleteAccountConfirmPasswordInput"
+                type="password"
+              >
+              <button
+                class="btn btn-default"
+                @click="deleteAccount"
+              >
+                {{ $t('settings.delete_account') }}
+              </button>
             </div>
-            <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p>
+            <p v-if="deleteAccountError !== false">
-            <p v-if="deleteAccountError">{{deleteAccountError}}</p>
+              {{ $t('settings.delete_account_error') }}
-            <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button>
+            </p>
+            <p v-if="deleteAccountError">
+              {{ deleteAccountError }}
+            </p>
+            <button
+              v-if="!deletingAccount"
+              class="btn btn-default"
+              @click="confirmDelete"
+            >
+              {{ $t('general.submit') }}
+            </button>
           </div>
         </div>
 
-        <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend">
+        <div
+          v-if="pleromaBackend"
+          :label="$t('settings.data_import_export_tab')"
+        >
           <div class="setting-item">
-            <h2>{{$t('settings.follow_import')}}</h2>
+            <h2>{{ $t('settings.follow_import') }}</h2>
-            <p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
+            <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
             <form>
-              <input type="file" ref="followlist" v-on:change="followListChange" />
+              <input
+                ref="followlist"
+                type="file"
+                @change="followListChange"
+              >
             </form>
-            <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i>
+            <i
-            <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button>
+              v-if="followListUploading"
+              class=" icon-spin4 animate-spin uploading"
+            />
+            <button
+              v-else
+              class="btn btn-default"
+              @click="importFollows"
+            >
+              {{ $t('general.submit') }}
+            </button>
             <div v-if="followsImported">
-              <i class="icon-cross" @click="dismissImported"></i>
+              <i
-              <p>{{$t('settings.follows_imported')}}</p>
+                class="icon-cross"
+                @click="dismissImported"
+              />
+              <p>{{ $t('settings.follows_imported') }}</p>
             </div>
             <div v-else-if="followImportError">
-              <i class="icon-cross" @click="dismissImported"></i>
+              <i
-              <p>{{$t('settings.follow_import_error')}}</p>
+                class="icon-cross"
+                @click="dismissImported"
+              />
+              <p>{{ $t('settings.follow_import_error') }}</p>
             </div>
           </div>
-          <div class="setting-item" v-if="enableFollowsExport">
+          <div
-            <h2>{{$t('settings.follow_export')}}</h2>
+            v-if="enableFollowsExport"
-            <button class="btn btn-default" @click="exportFollows">{{$t('settings.follow_export_button')}}</button>
+            class="setting-item"
+          >
+            <h2>{{ $t('settings.follow_export') }}</h2>
+            <button
+              class="btn btn-default"
+              @click="exportFollows"
+            >
+              {{ $t('settings.follow_export_button') }}
+            </button>
           </div>
-          <div class="setting-item" v-else>
+          <div
-            <h2>{{$t('settings.follow_export_processing')}}</h2>
+            v-else
+            class="setting-item"
+          >
+            <h2>{{ $t('settings.follow_export_processing') }}</h2>
           </div>
         </div>
 
         <div :label="$t('settings.blocks_tab')">
           <block-list :refresh="true">
-            <template slot="empty">{{$t('settings.no_blocks')}}</template>
+            <template slot="empty">
+              {{ $t('settings.no_blocks') }}
+            </template>
           </block-list>
         </div>
 
         <div :label="$t('settings.mutes_tab')">
           <mute-list :refresh="true">
-            <template slot="empty">{{$t('settings.no_mutes')}}</template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
           </mute-list>
         </div>
       </tab-switcher>

src/components/video_attachment/video_attachment.vue

@@ -1,10 +1,11 @@
 <template>
-  <video class="video"
+  <video
-    @loadeddata="onVideoDataLoad"
+    class="video"
     :src="attachment.url"
     :loop="loopVideo"
     :controls="controls"
     playsinline
+    @loadeddata="onVideoDataLoad"
   />
 </template>
 

src/components/who_to_follow/who_to_follow.js

@@ -36,7 +36,7 @@ const WhoToFollow = {
     getWhoToFollow () {
       const credentials = this.$store.state.users.currentUser.credentials
       if (credentials) {
-        apiService.suggestions({credentials: credentials})
+        apiService.suggestions({ credentials: credentials })
           .then((reply) => {
             this.showWhoToFollow(reply)
           })

src/components/who_to_follow/who_to_follow.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="panel panel-default">
     <div class="panel-heading">
-      {{$t('who_to_follow.who_to_follow')}}
+      {{ $t('who_to_follow.who_to_follow') }}
     </div>
     <div class="panel-body">
-      <FollowCard v-for="user in users" :key="user.id" :user="user"/>
+      <FollowCard
+        v-for="user in users"
+        :key="user.id"
+        :user="user"
+      />
     </div>
   </div>
 </template>

src/components/who_to_follow_panel/who_to_follow_panel.js

@@ -29,7 +29,7 @@ function getWhoToFollow (panel) {
     panel.usersToFollow.forEach(toFollow => {
       toFollow.name = 'Loading...'
     })
-    apiService.suggestions({credentials: credentials})
+    apiService.suggestions({ credentials: credentials })
       .then((reply) => {
         showWhoToFollow(panel, reply)
       })

src/components/who_to_follow_panel/who_to_follow_panel.vue

@@ -3,17 +3,22 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
         <div class="title">
-          {{$t('who_to_follow.who_to_follow')}}
+          {{ $t('who_to_follow.who_to_follow') }}
         </div>
       </div>
       <div class="panel-body who-to-follow">
-        <span v-for="user in usersToFollow">
+        <span
-          <img v-bind:src="user.img" />
+          v-for="user in usersToFollow"
-            <router-link v-bind:to="userProfileLink(user.id, user.name)">
+          :key="user.id"
-              {{user.name}}
+        >
-            </router-link><br />
+          <img :src="user.img">
+          <router-link :to="userProfileLink(user.id, user.name)">
+            {{ user.name }}
+          </router-link><br>
         </span>
-        <img v-bind:src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }">{{$t('who_to_follow.more')}}</router-link>
+        <img :src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }">
+          {{ $t('who_to_follow.more') }}
+        </router-link>
       </div>
     </div>
   </div>

src/hocs/with_list/with_list.js

@@ -7,14 +7,14 @@ const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
 
 const withList = ({
-  getEntryProps = defaultEntryPropsGetter,  // function to accept entry and index values and return props to be passed into the item component
+  getEntryProps = defaultEntryPropsGetter, // function to accept entry and index values and return props to be passed into the item component
-  getKey = defaultKeyGetter                 // funciton to accept entry and index values and return key prop value
+  getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value
 }) => (ItemComponent) => (
   Vue.component('withList', {
     props: [
-      'entries',                            // array of entry
+      'entries', // array of entry
-      'entryProps',                         // additional props to be passed into each entry
+      'entryProps', // additional props to be passed into each entry
-      'entryListeners'                      // additional event listeners to be passed into each entry
+      'entryListeners' // additional event listeners to be passed into each entry
     ],
     render (createElement) {
       return (

src/hocs/with_load_more/with_load_more.js

@@ -4,39 +4,16 @@ import { getComponentProps } from '../../services/component_utils/component_util
 import './with_load_more.scss'
 
 const withLoadMore = ({
-  fetch,                      // function to fetch entries and return a promise
+  fetch, // function to fetch entries and return a promise
-  select,                     // function to select data from store
+  select, // function to select data from store
-  destroy,                    // function called at "destroyed" lifecycle
+  destroy, // function called at "destroyed" lifecycle
-  childPropName = 'entries',  // name of the prop to be passed into the wrapped component
+  childPropName = 'entries', // name of the prop to be passed into the wrapped component
-  additionalPropNames = []    // additional prop name list of the wrapper component
+  additionalPropNames = [] // additional prop name list of the wrapper component
 }) => (WrappedComponent) => {
   const originalProps = Object.keys(getComponentProps(WrappedComponent))
   const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
 
   return Vue.component('withLoadMore', {
-    render (createElement) {
-      const props = {
-        props: {
-          ...this.$props,
-          [childPropName]: this.entries
-        },
-        on: this.$listeners,
-        scopedSlots: this.$scopedSlots
-      }
-      const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
-      return (
-        <div class="with-load-more">
-          <WrappedComponent {...props}>
-            {children}
-          </WrappedComponent>
-          <div class="with-load-more-footer">
-            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
-            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
-          </div>
-        </div>
-      )
-    },
     props,
     data () {
       return {
@@ -87,6 +64,29 @@ const withLoadMore = ({
           this.fetchEntries()
         }
       }
+    },
+    render (createElement) {
+      const props = {
+        props: {
+          ...this.$props,
+          [childPropName]: this.entries
+        },
+        on: this.$listeners,
+        scopedSlots: this.$scopedSlots
+      }
+      const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
+      return (
+        <div class="with-load-more">
+          <WrappedComponent {...props}>
+            {children}
+          </WrappedComponent>
+          <div class="with-load-more-footer">
+            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
+            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
+          </div>
+        </div>
+      )
     }
   })
 }

src/hocs/with_subscription/with_subscription.js

@@ -4,10 +4,10 @@ import { getComponentProps } from '../../services/component_utils/component_util
 import './with_subscription.scss'
 
 const withSubscription = ({
-  fetch,                      // function to fetch entries and return a promise
+  fetch, // function to fetch entries and return a promise
-  select,                     // function to select data from store
+  select, // function to select data from store
-  childPropName = 'content',  // name of the prop to be passed into the wrapped component
+  childPropName = 'content', // name of the prop to be passed into the wrapped component
-  additionalPropNames = []    // additional prop name list of the wrapper component
+  additionalPropNames = [] // additional prop name list of the wrapper component
 }) => (WrappedComponent) => {
   const originalProps = Object.keys(getComponentProps(WrappedComponent))
   const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames)
@@ -15,37 +15,8 @@ const withSubscription = ({
   return Vue.component('withSubscription', {
     props: [
       ...props,
-      'refresh'               // boolean saying to force-fetch data whenever created
+      'refresh' // boolean saying to force-fetch data whenever created
     ],
-    render (createElement) {
-      if (!this.error && !this.loading) {
-        const props = {
-          props: {
-            ...this.$props,
-            [childPropName]: this.fetchedData
-          },
-          on: this.$listeners,
-          scopedSlots: this.$scopedSlots
-        }
-        const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
-        return (
-          <div class="with-subscription">
-            <WrappedComponent {...props}>
-              {children}
-            </WrappedComponent>
-          </div>
-        )
-      } else {
-        return (
-          <div class="with-subscription-loading">
-            {this.error
-              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
-              : <i class="icon-spin3 animate-spin"/>
-            }
-          </div>
-        )
-      }
-    },
     data () {
       return {
         loading: false,
@@ -77,6 +48,35 @@ const withSubscription = ({
             })
         }
       }
+    },
+    render (createElement) {
+      if (!this.error && !this.loading) {
+        const props = {
+          props: {
+            ...this.$props,
+            [childPropName]: this.fetchedData
+          },
+          on: this.$listeners,
+          scopedSlots: this.$scopedSlots
+        }
+        const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
+        return (
+          <div class="with-subscription">
+            <WrappedComponent {...props}>
+              {children}
+            </WrappedComponent>
+          </div>
+        )
+      } else {
+        return (
+          <div class="with-subscription-loading">
+            {this.error
+              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
+              : <i class="icon-spin3 animate-spin"/>
+            }
+          </div>
+        )
+      }
     }
   })
 }

src/modules/api.js

@@ -13,10 +13,10 @@ const api = {
     setBackendInteractor (state, backendInteractor) {
       state.backendInteractor = backendInteractor
     },
-    addFetcher (state, {timeline, fetcher}) {
+    addFetcher (state, { timeline, fetcher }) {
       state.fetchers[timeline] = fetcher
     },
-    removeFetcher (state, {timeline}) {
+    removeFetcher (state, { timeline }) {
       delete state.fetchers[timeline]
     },
     setWsToken (state, token) {
@@ -33,7 +33,7 @@ const api = {
     }
   },
   actions: {
-    startFetching (store, {timeline = 'friends', tag = false, userId = false}) {
+    startFetching (store, { timeline = 'friends', tag = false, userId = false }) {
       // Don't start fetching if we already are.
       if (store.state.fetchers[timeline]) return
 
@@ -43,7 +43,7 @@ const api = {
     stopFetching (store, timeline) {
       const fetcher = store.state.fetchers[timeline]
       window.clearInterval(fetcher)
-      store.commit('removeFetcher', {timeline})
+      store.commit('removeFetcher', { timeline })
     },
     setWsToken (store, token) {
       store.commit('setWsToken', token)
@@ -52,7 +52,7 @@ const api = {
       // Set up websocket connection
       if (!store.state.chatDisabled) {
         const token = store.state.wsToken
-        const socket = new Socket('/socket', {params: {token}})
+        const socket = new Socket('/socket', { params: { token } })
         socket.connect()
         store.dispatch('initializeChat', socket)
       }

src/modules/chat.js

@@ -1,7 +1,7 @@
 const chat = {
   state: {
     messages: [],
-    channel: {state: ''},
+    channel: { state: '' },
     socket: null
   },
   mutations: {
@@ -29,7 +29,7 @@ const chat = {
       channel.on('new_msg', (msg) => {
         store.commit('addMessage', msg)
       })
-      channel.on('messages', ({messages}) => {
+      channel.on('messages', ({ messages }) => {
         store.commit('setMessages', messages)
       })
       channel.join()

src/modules/config.js

@@ -54,10 +54,10 @@ const config = {
   },
   actions: {
     setHighlight ({ commit, dispatch }, { user, color, type }) {
-      commit('setHighlight', {user, color, type})
+      commit('setHighlight', { user, color, type })
     },
     setOption ({ commit, dispatch }, { name, value }) {
-      commit('setOption', {name, value})
+      commit('setOption', { name, value })
       switch (name) {
         case 'theme':
           setPreset(value, commit)