Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into snoot

Themes v2

See merge request pleroma/pleroma-fe!377

.gitlab-ci.yml

@@ -3,32 +3,10 @@
 # https://hub.docker.com/r/library/node/tags/
 image: node:7
 
-before_script:
-  # Install ssh-agent if not already installed, it is required by Docker.
-  # (change apt-get to yum if you use a CentOS-based image)
-  - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
-
-  # Run ssh-agent (inside the build environment)
-  - eval $(ssh-agent -s)
-
-  # For Docker builds disable host key checking. Be aware that by adding that
-  # you are suspectible to man-in-the-middle attacks.
-  # WARNING: Use this only with the Docker executor, if you use it with shell
-  # you will overwrite your user's SSH config.
-  - mkdir -p ~/.ssh
-  - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
-
-# This folder is cached between builds
-# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
-#cache:
-#  paths:
-#  - node_modules/
-
 stages:
   - lint
   - build
   - test
-  - deploy
 
 lint:
   stage: lint
@@ -50,14 +28,3 @@ build:
   artifacts:
     paths:
     - dist/
-
-deploy:
-  stage: deploy
-  environment: dev
-  only:
-    - develop
-  script:
-    - yarn
-    - npm run build
-    - ssh-add <(echo "$SSH_PRIVATE_KEY")
-    - scp -r dist/* pleroma@tenshi.heldscal.la:~/pleroma

README.md

@@ -32,3 +32,9 @@ npm run unit
 # Configuration
 
 Edit config.json for configuration. scopeOptionsEnabled gives you input fields for CWs and the scope settings.
+
+## Options
+
+### Login methods
+
+```loginMethod``` can be set to either ```password``` (the default) or ```token```, which will use the full oauth redirection flow, which is useful for SSO situations.

config/index.js

@@ -27,6 +27,11 @@ module.exports = {
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
       },
+      '/nodeinfo': {
+        target: 'http://localhost:4000/',
+        changeOrigin: true,
+        cookieDomainRewrite: 'localhost'
+      },
       '/socket': {
         target: 'http://localhost:4000/',
         changeOrigin: true,

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-lodash": "^3.2.11",
+    "chromatism": "^3.0.0",
     "diff": "^3.0.1",
     "karma-mocha-reporter": "^2.2.1",
     "localforage": "^1.5.0",
@@ -30,6 +31,7 @@
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.3.4",
     "vue-timeago": "^3.1.2",
+    "vuelidate": "^0.7.4",
     "vuex": "^3.0.1",
     "whatwg-fetch": "^2.0.3"
   },

src/App.js

@@ -36,9 +36,9 @@ export default {
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
     background () {
-      return this.currentUser.background_image || this.$store.state.config.background
+      return this.currentUser.background_image || this.$store.state.instance.background
     },
-    enableMask () { return this.supportsMask && this.$store.state.config.logoMask },
+    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
     logoStyle () {
       return {
         'visibility': this.enableMask ? 'hidden' : 'visible'
@@ -46,24 +46,29 @@ export default {
     },
     logoMaskStyle () {
       return this.enableMask ? {
-        'mask-image': `url(${this.$store.state.config.logo})`
+        'mask-image': `url(${this.$store.state.instance.logo})`
       } : {
         'background-color': this.enableMask ? '' : 'transparent'
       }
     },
     logoBgStyle () {
       return Object.assign({
-        'margin': `${this.$store.state.config.logoMargin} 0`
+        'margin': `${this.$store.state.instance.logoMargin} 0`
       }, this.enableMask ? {} : {
         'background-color': this.enableMask ? '' : 'transparent'
       })
     },
-    logo () { return this.$store.state.config.logo },
-    style () { return { 'background-image': `url(${this.background})` } },
-    sitename () { return this.$store.state.config.name },
+    logo () { return this.$store.state.instance.logo },
+    style () {
+      return {
+        '--body-background-image': `url(${this.background})`,
+        'background-image': `url(${this.background})`
+      }
+    },
+    sitename () { return this.$store.state.instance.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
-    suggestionsEnabled () { return this.$store.state.config.suggestionsEnabled },
-    showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel }
+    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
+    showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel }
   },
   methods: {
     activatePanel (panelName) {
@@ -73,6 +78,7 @@ export default {
       window.scrollTo(0, 0)
     },
     logout () {
+      this.$router.replace('/main/public')
       this.$store.dispatch('logout')
     }
   }

src/App.scss

@@ -30,10 +30,11 @@ h4 {
 
 body {
   font-family: sans-serif;
+  font-family: var(--interfaceFont, sans-serif);
   font-size: 14px;
   margin: 0;
-  color: $fallback--fg;
-  color: var(--fg, $fallback--fg);
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
   max-width: 100vw;
   overflow-x: hidden;
 }
@@ -46,19 +47,24 @@ a {
 
 button {
   user-select: none;
-  color: $fallback--fg;
-  color: var(--fg, $fallback--fg);
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  color: $fallback--text;
+  color: var(--btnText, $fallback--text);
+  background-color: $fallback--fg;
+  background-color: var(--btn, $fallback--fg);
   border: none;
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px black;
+  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: var(--buttonShadow);
   font-size: 14px;
   font-family: sans-serif;
+  font-family: var(--interfaceFont, sans-serif);
+
+  i[class*=icon-] {
+    color: $fallback--text;
+    color: var(--btnText, $fallback--text);
+  }
 
   &::-moz-focus-inner {
     border: none;
@@ -66,11 +72,12 @@ button {
 
   &:hover {
     box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+    box-shadow: var(--buttonHoverShadow);
   }
 
   &:active {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-    border-top: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    box-shadow: var(--buttonPressedShadow);
   }
 
   &:disabled {
@@ -95,32 +102,37 @@ input, textarea, .select {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0px 0px 2px black inset;
-  background-color: $fallback--input;
-  background-color: var(--input, $fallback--input);
-  color: $fallback--lightFg;
-  color: var(--lightFg, $fallback--lightFg);
+  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
+  box-shadow: var(--inputShadow);
+  background-color: $fallback--fg;
+  background-color: var(--input, $fallback--fg);
+  color: $fallback--lightText;
+  color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
+  font-family: var(--inputFont, sans-serif);
   font-size: 14px;
-  padding: 8px 7px;
+  padding: 8px .5em;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 29px;
+  height: 28px;
   line-height: 16px;
   hyphens: none;
 
+  &:disabled, &[disabled=disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   .icon-down-open {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 5px;
     height: 100%;
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
-    line-height: 29px;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    line-height: 28px;
     z-index: 0;
     pointer-events: none;
   }
@@ -131,22 +143,33 @@ input, textarea, .select {
     appearance: none;
     background: transparent;
     border: none;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
     margin: 0;
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
-    padding: 4px 2em 3px 3px;
+    padding: 0 2em 0 .2em;
+    font-family: sans-serif;
+    font-family: var(--inputFont, sans-serif);
+    font-size: 14px;
     width: 100%;
     z-index: 1;
-    height: 29px;
+    height: 28px;
     line-height: 16px;
   }
 
+  &[type=range] {
+    background: none;
+    border: none;
+    margin: 0;
+    box-shadow: none;
+    flex: 1;
+  }
+
   &[type=radio],
   &[type=checkbox] {
     display: none;
     &:checked + label::before {
-      color: $fallback--fg;
-      color: var(--fg, $fallback--fg);
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
     &:disabled,
     {
@@ -162,14 +185,13 @@ input, textarea, .select {
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: $fallback--checkBoxRadius;
-      border-radius: var(--checkBoxRadius, $fallback--checkBoxRadius);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-      border-top: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: $fallback--checkboxRadius;
+      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
       box-shadow: 0px 0px 2px black inset;
+      box-shadow: var(--inputShadow);
       margin-right: .5em;
-      background-color: $fallback--input;
-      background-color: var(--input, $fallback--input);
+      background-color: $fallback--fg;
+      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;
@@ -183,8 +205,8 @@ input, textarea, .select {
 }
 
 option {
-  color: $fallback--fg;
-  color: var(--fg, $fallback--fg);
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 }
@@ -250,7 +272,7 @@ nav {
       mask-position: center;
       mask-size: contain;
       background-color: $fallback--fg;
-      background-color: var(--fg, $fallback--fg);
+      background-color: var(--topBarText, $fallback--fg);
       position: absolute;
       top: 0;
       bottom: 0;
@@ -275,9 +297,9 @@ nav {
     margin: auto;
     height: 50px;
 
-    a i {
+    a, a i {
       color: $fallback--link;
-      color: var(--link, $fallback--link);
+      color: var(--topBarLink, $fallback--link);
     }
   }
 }
@@ -300,15 +322,33 @@ main-router {
 
 .panel {
   display: flex;
+  position: relative;
+
   flex-direction: column;
   margin: 0.5em;
 
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  &::after, & {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    pointer-events: none;
+
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: var(--panelShadow);
+  }
 }
 
 .panel-body:empty::before {
@@ -326,15 +366,23 @@ main-router {
   padding: .6em .6em;
   text-align: left;
   line-height: 28px;
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  color: var(--panelText);
+  background-color: $fallback--fg;
+  background-color: var(--panel, $fallback--fg);
   align-items: baseline;
+  box-shadow: var(--panelHeaderShadow);
 
   .title {
     flex: 1 0 auto;
     font-size: 1.3em;
   }
 
+  .faint {
+    background-color: transparent;
+    color: $fallback--faint;
+    color: var(--panelFaint, $fallback--faint);
+  }
+
   .alert {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -355,6 +403,11 @@ main-router {
     min-width: 1px;
     align-self: stretch;
   }
+
+  a {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link)
+  }
 }
 
 .panel-heading.stub {
@@ -365,6 +418,11 @@ main-router {
 .panel-footer {
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+
+  a {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link)
+  }
 }
 
 .panel-body > p {
@@ -383,11 +441,13 @@ main-router {
 
 nav {
   z-index: 1000;
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  color: var(--topBarText);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
   box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+  box-shadow: var(--topBarShadow);
 }
 
 .fade-enter-active, .fade-leave-active {
@@ -461,20 +521,46 @@ nav {
     flex-grow: 0;
   }
 }
+.badge {
+  display: inline-block;
+  border-radius: 99px;
+  min-width: 22px;
+  max-width: 22px;
+  min-height: 22px;
+  max-height: 22px;
+  font-size: 15px;
+  line-height: 22px;
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+  padding: 0;
+
+  &.badge-notification {
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+    color: white;
+    color: var(--badgeNotificationText, white);
+  }
+}
 
 .alert {
   margin: 0.35em;
   padding: 0.25em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
   min-height: 28px;
   line-height: 28px;
 
   &.error {
-    background-color: $fallback--cAlertRed;
-    background-color: var(--cAlertRed, $fallback--cAlertRed);
+    background-color: $fallback--alertError;
+    background-color: var(--alertError, $fallback--alertError);
+    color: $fallback--text;
+    color: var(--alertErrorText, $fallback--text);
+
+    .panel-heading & {
+      color: $fallback--text;
+      color: var(--alertErrorPanelText, $fallback--text);
+    }
   }
 }
 
@@ -512,8 +598,8 @@ nav {
   cursor: pointer;
 
   .selected {
-    color: $fallback--lightFg;
-    color: var(--lightFg, $fallback--lightFg);
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
   }
 
   .text-format {

src/App.vue

@@ -11,7 +11,7 @@
         </div>
         <div class='item right'>
           <user-finder class="nav-icon"></user-finder>
-          <router-link :to="{ name: 'settings'}"><i class="icon-cog nav-icon"></i></router-link>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
           <a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
         </div>
       </div>
@@ -25,8 +25,8 @@
         <div class="sidebar-bounds">
           <div class="sidebar-scroller">
             <div class="sidebar">
-              <user-panel></user-panel>
-              <nav-panel></nav-panel>
+              <user-panel :activatePanel="activatePanel"></user-panel>
+              <nav-panel :activatePanel="activatePanel"></nav-panel>
               <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
               <features-panel v-if="!currentUser"></features-panel>
               <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>

src/_variables.scss

@@ -3,24 +3,23 @@ $main-background: white;
 $darkened-background: whitesmoke;
 
 $fallback--bg: #121a24;
-$fallback--btn: #182230;
-$fallback--input: #182230;
+$fallback--fg: #182230;
 $fallback--faint: rgba(185, 185, 186, .5);
-$fallback--fg: #b9b9ba;
+$fallback--text: #b9b9ba;
 $fallback--link: #d8a070;
 $fallback--icon: #666;
 $fallback--lightBg: rgb(21, 30, 42);
-$fallback--lightFg: #b9b9ba;
+$fallback--lightText: #b9b9ba;
 $fallback--border: #222;
 $fallback--cRed: #ff0000;
 $fallback--cBlue: #0095ff;
 $fallback--cGreen: #0fa00f;
 $fallback--cOrange: orange;
 
-$fallback--cAlertRed: rgba(211,16,20,.5);
+$fallback--alertError: rgba(211,16,20,.5);
 
 $fallback--panelRadius: 10px;
-$fallback--checkBoxRadius: 2px;
+$fallback--checkboxRadius: 2px;
 $fallback--btnRadius: 4px;
 $fallback--inputRadius: 4px;
 $fallback--tooltipRadius: 5px;

src/boot/after_store.js

@@ -0,0 +1,186 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import App from '../App.vue'
+import PublicTimeline from '../components/public_timeline/public_timeline.vue'
+import PublicAndExternalTimeline from '../components/public_and_external_timeline/public_and_external_timeline.vue'
+import FriendsTimeline from '../components/friends_timeline/friends_timeline.vue'
+import TagTimeline from '../components/tag_timeline/tag_timeline.vue'
+import ConversationPage from '../components/conversation-page/conversation-page.vue'
+import Mentions from '../components/mentions/mentions.vue'
+import DMs from '../components/dm_timeline/dm_timeline.vue'
+import UserProfile from '../components/user_profile/user_profile.vue'
+import Settings from '../components/settings/settings.vue'
+import Registration from '../components/registration/registration.vue'
+import UserSettings from '../components/user_settings/user_settings.vue'
+import FollowRequests from '../components/follow_requests/follow_requests.vue'
+import OAuthCallback from '../components/oauth_callback/oauth_callback.vue'
+import UserSearch from '../components/user_search/user_search.vue'
+
+const afterStoreSetup = ({store, i18n}) => {
+  window.fetch('/api/statusnet/config.json')
+    .then((res) => res.json())
+    .then((data) => {
+      const {name, closed: registrationClosed, textlimit, server} = data.site
+
+      store.dispatch('setInstanceOption', { name: 'name', value: name })
+      store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
+      store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
+      store.dispatch('setInstanceOption', { name: 'server', value: server })
+
+      var apiConfig = data.site.pleromafe
+
+      window.fetch('/static/config.json')
+        .then((res) => res.json())
+        .catch((err) => {
+          console.warn('Failed to load static/config.json, continuing without it.')
+          console.warn(err)
+          return {}
+        })
+        .then((staticConfig) => {
+          // This takes static config and overrides properties that are present in apiConfig
+          var config = Object.assign({}, staticConfig, apiConfig)
+
+          var theme = (config.theme)
+          var background = (config.background)
+          var hidePostStats = (config.hidePostStats)
+          var hideUserStats = (config.hideUserStats)
+          var logo = (config.logo)
+          var logoMask = (typeof config.logoMask === 'undefined' ? true : config.logoMask)
+          var logoMargin = (typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin)
+          var redirectRootNoLogin = (config.redirectRootNoLogin)
+          var redirectRootLogin = (config.redirectRootLogin)
+          var chatDisabled = (config.chatDisabled)
+          var showInstanceSpecificPanel = (config.showInstanceSpecificPanel)
+          var scopeOptionsEnabled = (config.scopeOptionsEnabled)
+          var formattingOptionsEnabled = (config.formattingOptionsEnabled)
+          var collapseMessageWithSubject = (config.collapseMessageWithSubject)
+          var loginMethod = (config.loginMethod)
+          var scopeCopy = (config.scopeCopy)
+          var subjectLineBehavior = (config.subjectLineBehavior)
+          var alwaysShowSubjectInput = (config.alwaysShowSubjectInput)
+
+          store.dispatch('setInstanceOption', { name: 'theme', value: theme })
+          store.dispatch('setInstanceOption', { name: 'background', value: background })
+          store.dispatch('setInstanceOption', { name: 'hidePostStats', value: hidePostStats })
+          store.dispatch('setInstanceOption', { name: 'hideUserStats', value: hideUserStats })
+          store.dispatch('setInstanceOption', { name: 'logo', value: logo })
+          store.dispatch('setInstanceOption', { name: 'logoMask', value: logoMask })
+          store.dispatch('setInstanceOption', { name: 'logoMargin', value: logoMargin })
+          store.dispatch('setInstanceOption', { name: 'redirectRootNoLogin', value: redirectRootNoLogin })
+          store.dispatch('setInstanceOption', { name: 'redirectRootLogin', value: redirectRootLogin })
+          store.dispatch('setInstanceOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
+          store.dispatch('setInstanceOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
+          store.dispatch('setInstanceOption', { name: 'formattingOptionsEnabled', value: formattingOptionsEnabled })
+          store.dispatch('setInstanceOption', { name: 'collapseMessageWithSubject', value: collapseMessageWithSubject })
+          store.dispatch('setInstanceOption', { name: 'loginMethod', value: loginMethod })
+          store.dispatch('setInstanceOption', { name: 'scopeCopy', value: scopeCopy })
+          store.dispatch('setInstanceOption', { name: 'subjectLineBehavior', value: subjectLineBehavior })
+          store.dispatch('setInstanceOption', { name: 'alwaysShowSubjectInput', value: alwaysShowSubjectInput })
+          if (chatDisabled) {
+            store.dispatch('disableChat')
+          }
+
+          const routes = [
+            { name: 'root',
+              path: '/',
+              redirect: to => {
+                return (store.state.users.currentUser
+                        ? store.state.instance.redirectRootLogin
+                        : store.state.instance.redirectRootNoLogin) || '/main/all'
+              }},
+            { path: '/main/all', component: PublicAndExternalTimeline },
+            { path: '/main/public', component: PublicTimeline },
+            { path: '/main/friends', component: FriendsTimeline },
+            { path: '/tag/:tag', component: TagTimeline },
+            { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+            { name: 'user-profile', path: '/users/:id', component: UserProfile },
+            { name: 'mentions', path: '/:username/mentions', component: Mentions },
+            { name: 'dms', path: '/:username/dms', component: DMs },
+            { name: 'settings', path: '/settings', component: Settings },
+            { name: 'registration', path: '/registration', component: Registration },
+            { name: 'registration', path: '/registration/:token', component: Registration },
+            { name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
+            { name: 'user-settings', path: '/user-settings', component: UserSettings },
+            { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
+            { name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }
+          ]
+
+          const router = new VueRouter({
+            mode: 'history',
+            routes,
+            scrollBehavior: (to, from, savedPosition) => {
+              if (to.matched.some(m => m.meta.dontScroll)) {
+                return false
+              }
+              return savedPosition || { x: 0, y: 0 }
+            }
+          })
+
+          /* eslint-disable no-new */
+          new Vue({
+            router,
+            store,
+            i18n,
+            el: '#app',
+            render: h => h(App)
+          })
+        })
+    })
+
+  window.fetch('/static/terms-of-service.html')
+    .then((res) => res.text())
+    .then((html) => {
+      store.dispatch('setInstanceOption', { name: 'tos', value: html })
+    })
+
+  window.fetch('/api/pleroma/emoji.json')
+    .then(
+      (res) => res.json()
+        .then(
+          (values) => {
+            const emoji = Object.keys(values).map((key) => {
+              return { shortcode: key, image_url: values[key] }
+            })
+            store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
+            store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
+          },
+          (failure) => {
+            store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false })
+          }
+        ),
+      (error) => console.log(error)
+    )
+
+  window.fetch('/static/emoji.json')
+    .then((res) => res.json())
+    .then((values) => {
+      const emoji = Object.keys(values).map((key) => {
+        return { shortcode: key, image_url: false, 'utf': values[key] }
+      })
+      store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
+    })
+
+  window.fetch('/instance/panel.html')
+    .then((res) => res.text())
+    .then((html) => {
+      store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
+    })
+
+  window.fetch('/nodeinfo/2.0.json')
+    .then((res) => res.json())
+    .then((data) => {
+      const metadata = data.metadata
+
+      const features = metadata.features
+      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
+      store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
+      store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
+
+      const suggestions = metadata.suggestions
+      store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
+      store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
+    })
+}
+
+export default afterStoreSetup

src/components/attachment/attachment.vue

@@ -14,7 +14,7 @@
       <StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
-    <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" @loadeddata="onVideoDataLoad" :src="attachment.url" controls :loop="loopVideo"></video>
+    <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" @loadeddata="onVideoDataLoad" :src="attachment.url" controls :loop="loopVideo" playsinline></video>
 
     <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
 

src/components/chat_panel/chat_panel.vue

@@ -55,8 +55,8 @@
 .chat-heading {
   cursor: pointer;
   .icon-comment-empty {
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
   }
 }
 

src/components/color_input/color_input.vue

@@ -0,0 +1,53 @@
+<template>
+<div class="color-control style-control" :class="{ disabled: !present || disabled }">
+  <label :for="name" class="label">
+    {{label}}
+  </label>
+  <input
+    v-if="typeof fallback !== 'undefined'"
+    class="opt exlcude-disabled"
+    :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
+    :id="name + '-t'"
+    class="text-input"
+    type="text"
+    :value="value || fallback"
+    :disabled="!present || disabled"
+    @input="$emit('input', $event.target.value)"
+    >
+</div>
+</template>
+
+<script>
+export default {
+  props: [
+    'name', 'label', 'value', 'fallback', 'disabled'
+  ],
+  computed: {
+    present () {
+      return typeof this.value !== 'undefined'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.color-control {
+  input.text-input {
+    max-width: 7em;
+    flex: 1;
+  }
+}
+</style>

src/components/contrast_ratio/contrast_ratio.vue

@@ -0,0 +1,69 @@
+<template>
+<span  v-if="contrast" class="contrast-ratio">
+  <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 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>
+export default {
+  props: [
+    'large', 'contrast'
+  ],
+  computed: {
+    hint () {
+      const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')
+      const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
+      const context = this.$t('settings.style.common.contrast.context.text')
+      const ratio = this.contrast.text
+      return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
+    },
+    hint_18pt () {
+      const levelVal = this.contrast.laaa ? 'aaa' : (this.contrast.laa ? 'aa' : 'bad')
+      const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
+      const context = this.$t('settings.style.common.contrast.context.18pt')
+      const ratio = this.contrast.text
+      return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.contrast-ratio {
+  display: flex;
+  justify-content: flex-end;
+
+  margin-top: -4px;
+  margin-bottom: 5px;
+
+  .label {
+    margin-right: 1em;
+  }
+
+  .rating {
+    display: inline-block;
+    text-align: center;
+  }
+}
+</style>

src/components/delete_button/delete_button.vue

@@ -14,8 +14,8 @@
 .icon-cancel,.delete-status {
   cursor: pointer;
   &:hover {
-    color: var(--cRed, $fallback--cRed);
     color: $fallback--cRed;
+    color: var(--cRed, $fallback--cRed);
   }
 }
 </style>

src/components/dm_timeline/dm_timeline.js

@@ -0,0 +1,14 @@
+import Timeline from '../timeline/timeline.vue'
+
+const DMs = {
+  computed: {
+    timeline () {
+      return this.$store.state.statuses.timelines.dms
+    }
+  },
+  components: {
+    Timeline
+  }
+}
+
+export default DMs

src/components/dm_timeline/dm_timeline.vue

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

src/components/export_import/export_import.vue

@@ -0,0 +1,87 @@
+<template>
+<div class="import-export-container">
+  <slot name="before"/>
+  <button class="btn" @click="exportData">{{ exportLabel }}</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>
+export default {
+  props: [
+    'exportObject',
+    'importLabel',
+    'exportLabel',
+    'importFailedText',
+    'validator',
+    'onImport',
+    'onImportFailure'
+  ],
+  data () {
+    return {
+      importFailed: false
+    }
+  },
+  methods: {
+    exportData () {
+      const stringified = JSON.stringify(this.exportObject) // Pretty-print and indent with 2 spaces
+
+      // Create an invisible link with a data url and simulate a click
+      const e = document.createElement('a')
+      e.setAttribute('download', 'pleroma_theme.json')
+      e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+      e.style.display = 'none'
+
+      document.body.appendChild(e)
+      e.click()
+      document.body.removeChild(e)
+    },
+    importData () {
+      this.importFailed = false
+      const filePicker = document.createElement('input')
+      filePicker.setAttribute('type', 'file')
+      filePicker.setAttribute('accept', '.json')
+
+      filePicker.addEventListener('change', event => {
+        if (event.target.files[0]) {
+          // eslint-disable-next-line no-undef
+          const reader = new FileReader()
+          reader.onload = ({target}) => {
+            try {
+              const parsed = JSON.parse(target.result)
+              const valid = this.validator(parsed)
+              if (valid) {
+                this.onImport(parsed)
+              } else {
+                this.importFailed = true
+                // this.onImportFailure(valid)
+              }
+            } catch (e) {
+              // This will happen both if there is a JSON syntax error or the theme is missing components
+              this.importFailed = true
+              // this.onImportFailure(e)
+            }
+          }
+          reader.readAsText(event.target.files[0])
+        }
+      })
+
+      document.body.appendChild(filePicker)
+      filePicker.click()
+      document.body.removeChild(filePicker)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.import-export-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: center;
+}
+</style>

src/components/favorite_button/favorite_button.js

@@ -2,6 +2,9 @@ const FavoriteButton = {
   props: ['status', 'loggedIn'],
   data () {
     return {
+      hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
+        ? this.$store.state.instance.hidePostStats
+        : this.$store.state.config.hidePostStats,
       animated: false
     }
   },

src/components/favorite_button/favorite_button.vue

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

src/components/features_panel/features_panel.js

@@ -1,13 +1,13 @@
 const FeaturesPanel = {
   computed: {
     chat: function () {
-      return this.$store.state.config.chatAvailable && (!this.$store.state.chatDisabled)
+      return this.$store.state.instance.chatAvailable && (!this.$store.state.chatDisabled)
     },
-    gopher: function () { return this.$store.state.config.gopherAvailable },
-    whoToFollow: function () { return this.$store.state.config.suggestionsEnabled },
-    mediaProxy: function () { return this.$store.state.config.mediaProxyAvailable },
-    scopeOptions: function () { return this.$store.state.config.scopeOptionsEnabled },
-    textlimit: function () { return this.$store.state.config.textlimit }
+    gopher: function () { return this.$store.state.instance.gopherAvailable },
+    whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
+    mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
+    scopeOptions: function () { return this.$store.state.instance.scopeOptionsEnabled },
+    textlimit: function () { return this.$store.state.instance.textlimit }
   }
 }
 

src/components/font_control/font_control.js

@@ -0,0 +1,58 @@
+import { set } from 'vue'
+
+export default {
+  props: [
+    'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
+  ],
+  data () {
+    return {
+      lValue: this.value,
+      availableOptions: [
+        this.noInherit ? '' : 'inherit',
+        'custom',
+        ...(this.options || []),
+        'serif',
+        'monospace',
+        'sans-serif'
+      ].filter(_ => _)
+    }
+  },
+  beforeUpdate () {
+    this.lValue = this.value
+  },
+  computed: {
+    present () {
+      return typeof this.lValue !== 'undefined'
+    },
+    dValue () {
+      return this.lValue || this.fallback || {}
+    },
+    family: {
+      get () {
+        return this.dValue.family
+      },
+      set (v) {
+        set(this.lValue, 'family', v)
+        this.$emit('input', this.lValue)
+      }
+    },
+    isCustom () {
+      return this.preset === 'custom'
+    },
+    preset: {
+      get () {
+        if (this.family === 'serif' ||
+            this.family === 'sans-serif' ||
+            this.family === 'monospace' ||
+            this.family === 'inherit') {
+          return this.family
+        } else {
+          return 'custom'
+        }
+      },
+      set (v) {
+        this.family = v === 'custom' ? '' : v
+      }
+    }
+  }
+}

src/components/font_control/font_control.vue

@@ -0,0 +1,54 @@
+<template>
+<div class="font-control style-control" :class="{ custom: isCustom }">
+  <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label">
+    {{label}}
+  </label>
+  <input
+    v-if="typeof fallback !== 'undefined'"
+    class="opt exlcude-disabled"
+    type="checkbox"
+    :id="name + '-o'"
+    :checked="present"
+    @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)">
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <label :for="name + '-font-switcher'" class="select" :disabled="!present">
+    <select
+      :disabled="!present"
+      v-model="preset"
+      class="font-switcher"
+      :id="name + '-font-switcher'">
+      <option v-for="option in availableOptions" :value="option">
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
+      </option>
+    </select>
+    <i class="icon-down-open"/>
+  </label>
+  <input
+    v-if="isCustom"
+    class="custom-font"
+    type="text"
+    :id="name"
+    v-model="family">
+</div>
+</template>
+
+<script src="./font_control.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.font-control {
+  input.custom-font {
+    min-width: 10em;
+  }
+  &.custom {
+    .select {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .custom-font {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+</style>

src/components/instance_specific_panel/instance_specific_panel.js

@@ -1,7 +1,10 @@
 const InstanceSpecificPanel = {
   computed: {
     instanceSpecificPanelContent () {
-      return this.$store.state.config.instanceSpecificPanelContent
+      return this.$store.state.instance.instanceSpecificPanelContent
+    },
+    show () {
+      return !this.$store.state.config.hideISP
     }
   }
 }

src/components/instance_specific_panel/instance_specific_panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div 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">

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -1,5 +1,8 @@
 <template>
   <div>
+    <label for="interface-language-switcher">
+      {{ $t('settings.interfaceLanguage') }}
+    </label>
     <label for="interface-language-switcher" class='select'>
       <select id="interface-language-switcher" v-model="language">
         <option v-for="(langCode, i) in languageCodes" :value="langCode">

src/components/login_form/login_form.js

@@ -1,22 +1,40 @@
+import oauthApi from '../../services/new_api/oauth.js'
 const LoginForm = {
   data: () => ({
     user: {},
     authError: false
   }),
   computed: {
+    loginMethod () { return this.$store.state.instance.loginMethod },
     loggingIn () { return this.$store.state.users.loggingIn },
-    registrationOpen () { return this.$store.state.config.registrationOpen }
+    registrationOpen () { return this.$store.state.instance.registrationOpen }
   },
   methods: {
+    oAuthLogin () {
+      oauthApi.login({
+        oauth: this.$store.state.oauth,
+        instance: this.$store.state.instance.server,
+        commit: this.$store.commit
+      })
+    },
     submit () {
-      this.$store.dispatch('loginUser', this.user).then(
-        () => {},
-        (error) => {
-          this.authError = error
-          this.user.username = ''
-          this.user.password = ''
-        }
-      )
+      const data = {
+        oauth: this.$store.state.oauth,
+        instance: this.$store.state.instance.server
+      }
+      oauthApi.getOrCreateApp(data).then((app) => {
+        oauthApi.getTokenWithCredentials(
+          {
+            app,
+            instance: data.instance,
+            username: this.user.username,
+            password: this.user.password})
+          .then((result) => {
+            this.$store.commit('setToken', result.access_token)
+            this.$store.dispatch('loginUser', result.access_token)
+            this.$router.push('/main/friends')
+          })
+      })
     }
   }
 }

src/components/login_form/login_form.vue

@@ -5,7 +5,7 @@
       {{$t('login.login')}}
     </div>
     <div class="panel-body">
-      <form v-on:submit.prevent='submit(user)' class='login-form'>
+      <form v-if="loginMethod == 'password'" v-on:submit.prevent='submit(user)' class='login-form'>
         <div class='form-group'>
           <label for='username'>{{$t('login.username')}}</label>
           <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' v-bind:placeholder="$t('login.placeholder')">
@@ -20,8 +20,17 @@
             <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button>
           </div>
         </div>
-        <div v-if="authError" class='form-group'>
-          <div class='alert error'>{{authError}}</div>
+      </form>
+
+      <form v-if="loginMethod == 'token'" v-on:submit.prevent='oAuthLogin'  class="login-form">
+        <div class="form-group">
+          <p>{{$t('login.description')}}</p>
+        </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>
     </div>

src/components/media_upload/media_upload.vue

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

src/components/nav_panel/nav_panel.js

@@ -1,4 +1,5 @@
 const NavPanel = {
+  props: [ 'activatePanel' ],
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser

src/components/nav_panel/nav_panel.vue

@@ -3,27 +3,32 @@
     <div class="panel panel-default">
       <ul>
         <li v-if='currentUser'>
-          <router-link to='/main/friends'>
+          <router-link @click.native="activatePanel('timeline')" to='/main/friends'>
             {{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             {{ $t("nav.mentions") }}
           </router-link>
         </li>
+        <li v-if='currentUser'>
+          <router-link @click.native="activatePanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
+            {{ $t("nav.dms") }}
+          </router-link>
+        </li>
         <li v-if='currentUser && currentUser.locked'>
-          <router-link to='/friend-requests'>
+          <router-link @click.native="activatePanel('timeline')" to='/friend-requests'>
             {{ $t("nav.friend_requests") }}
           </router-link>
         </li>
         <li>
-          <router-link to='/main/public'>
+          <router-link @click.native="activatePanel('timeline')" to='/main/public'>
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li>
-          <router-link to='/main/all'>
+          <router-link @click.native="activatePanel('timeline')" to='/main/all'>
             {{ $t("nav.twkn") }}
           </router-link>
         </li>

src/components/notification/notification.js

@@ -6,7 +6,8 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/
 const Notification = {
   data () {
     return {
-      userExpanded: false
+      userExpanded: false,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   props: [

src/components/notification/notification.vue

@@ -2,7 +2,7 @@
   <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
   <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
     <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-      <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
+      <StillImage class='avatar-compact' :class="{'better-shadow': betterShadow}" :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
       <div class="usercard notification-usercard" v-if="userExpanded">
@@ -17,7 +17,7 @@
             <small>{{$t('notifications.favorited_you')}}</small>
           </span>
           <span v-if="notification.type === 'repeat'">
-            <i class="fa icon-retweet lit"></i>
+            <i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i>
             <small>{{$t('notifications.repeated_you')}}</small>
           </span>
           <span v-if="notification.type === 'follow'">

src/components/notifications/notifications.js

@@ -52,7 +52,7 @@ const Notifications = {
   },
   methods: {
     markAsSeen () {
-      this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
+      this.$store.dispatch('markNotificationsAsSeen', this.visibleNotifications)
     },
     fetchOlderNotifications () {
       const store = this.$store

src/components/notifications/notifications.scss

@@ -4,31 +4,28 @@
   // a bit of a hack to allow scrolling below notifications
   padding-bottom: 15em;
 
-  .unseen-count {
-    display: inline-block;
-    background-color: $fallback--cRed;
-    background-color: var(--cRed, $fallback--cRed);
-    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
-    border-radius: 99px;
-    min-width: 22px;
-    max-width: 22px;
-    min-height: 22px;
-    max-height: 22px;
-    color: white;
-    font-size: 15px;
-    line-height: 22px;
-    text-align: center;
-    vertical-align: middle
-  }
-
   .loadmore-error {
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
   }
 
-  .unseen {
-    box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
-    padding-left: 0;
+  .notification {
+    position: relative;
+
+    .notification-overlay {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      pointer-events: none;
+    }
+
+    &.unseen {
+      .notification-overlay {
+        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
+      }
+    }
   }
 }
 
@@ -42,21 +39,27 @@
   .broken-favorite {
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
-    background-color: $fallback--cAlertRed;
-    background-color: var(--cAlertRed, $fallback--cAlertRed);
+    color: $fallback--text;
+    color: var(--alertErrorText, $fallback--text);
+    background-color: $fallback--alertError;
+    background-color: var(--alertError, $fallback--alertError);
     padding: 2px .5em
   }
 
   .avatar-compact {
     width: 32px;
     height: 32px;
+    box-shadow: var(--avatarStatusShadow);
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
     overflow: hidden;
     line-height: 0;
 
+    &.better-shadow {
+      box-shadow: var(--avatarStatusShadowInset);
+      filter: var(--avatarStatusShadowFilter)
+    }
+
     &.animated::before {
       display: none;
     }
@@ -90,6 +93,9 @@
         padding: 0.25em 0;
         color: $fallback--faint;
         color: var(--faint, $fallback--faint);
+        a {
+          color: var(--faintLink);
+        }
       }
       padding: 0;
       .media-body {

src/components/notifications/notifications.vue

@@ -4,7 +4,7 @@
       <div class="panel-heading">
         <div class="title">
           {{$t('notifications.notifications')}}
-          <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
+          <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
         </div>
         <div @click.prevent class="loadmore-error alert error" v-if="error">
           {{$t('timeline.error_fetching')}}
@@ -13,6 +13,7 @@
       </div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
+          <div class="notification-overlay"></div>
           <notification :notification="notification"></notification>
         </div>
       </div>

src/components/oauth_callback/oauth_callback.js

@@ -0,0 +1,20 @@
+import oauth from '../../services/new_api/oauth.js'
+
+const oac = {
+  props: ['code'],
+  mounted () {
+    if (this.code) {
+      oauth.getToken({
+        app: this.$store.state.oauth,
+        instance: this.$store.state.instance.server,
+        code: this.code
+      }).then((result) => {
+        this.$store.commit('setToken', result.access_token)
+        this.$store.dispatch('loginUser', result.access_token)
+        this.$router.push('/main/friends')
+      })
+    }
+  }
+}
+
+export default oac

src/components/oauth_callback/oauth_callback.vue

@@ -0,0 +1,5 @@
+<template>
+  <h1>...</h1>
+</template>
+
+<script src="./oauth_callback.js"></script>

src/components/opacity_input/opacity_input.vue

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

src/components/post_status_form/post_status_form.js

@@ -24,7 +24,7 @@ const PostStatusForm = {
     'replyTo',
     'repliedUser',
     'attentions',
-    'messageScope',
+    'copyMessageScope',
     'subject'
   ],
   components: {
@@ -46,6 +46,10 @@ const PostStatusForm = {
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
 
+    const scope = (this.copyMessageScope && this.$store.state.config.copyScope || this.copyMessageScope === 'direct')
+          ? this.copyMessageScope
+          : this.$store.state.users.currentUser.default_scope
+
     return {
       dropFiles: [],
       submitDisabled: false,
@@ -53,12 +57,12 @@ const PostStatusForm = {
       posting: false,
       highlighted: 0,
       newStatus: {
-        spoilerText: this.subject,
+        spoilerText: this.subject || '',
         status: statusText,
         contentType: 'text/plain',
         nsfw: false,
         files: [],
-        visibility: this.messageScope || this.$store.state.users.currentUser.default_scope
+        visibility: scope
       },
       caret: 0
     }
@@ -102,7 +106,7 @@ const PostStatusForm = {
           name: '',
           utf: utf || '',
           // eslint-disable-next-line camelcase
-          img: utf ? '' : this.$store.state.config.server + image_url,
+          img: utf ? '' : this.$store.state.instance.server + image_url,
           highlighted: index === this.highlighted
         }))
       } else {
@@ -120,31 +124,43 @@ const PostStatusForm = {
       return this.$store.state.users.users
     },
     emoji () {
-      return this.$store.state.config.emoji || []
+      return this.$store.state.instance.emoji || []
     },
     customEmoji () {
-      return this.$store.state.config.customEmoji || []
+      return this.$store.state.instance.customEmoji || []
     },
     statusLength () {
       return this.newStatus.status.length
     },
+    spoilerTextLength () {
+      return this.newStatus.spoilerText.length
+    },
     statusLengthLimit () {
-      return this.$store.state.config.textlimit
+      return this.$store.state.instance.textlimit
     },
     hasStatusLengthLimit () {
       return this.statusLengthLimit > 0
     },
     charactersLeft () {
-      return this.statusLengthLimit - this.statusLength
+      return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
     },
     isOverLengthLimit () {
-      return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit)
+      return this.hasStatusLengthLimit && (this.charactersLeft < 0)
     },
     scopeOptionsEnabled () {
-      return this.$store.state.config.scopeOptionsEnabled
+      return this.$store.state.instance.scopeOptionsEnabled
+    },
+    alwaysShowSubject () {
+      if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
+        return this.$store.state.config.alwaysShowSubjectInput
+      } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
+        return this.$store.state.instance.alwaysShowSubjectInput
+      } else {
+        return this.$store.state.instance.scopeOptionsEnabled
+      }
     },
     formattingOptionsEnabled () {
-      return this.$store.state.config.formattingOptionsEnabled
+      return this.$store.state.instance.formattingOptionsEnabled
     }
   },
   methods: {
@@ -223,6 +239,7 @@ const PostStatusForm = {
         if (!data.error) {
           this.newStatus = {
             status: '',
+            spoilerText: '',
             files: [],
             visibility: newStatus.visibility,
             contentType: newStatus.contentType

src/components/post_status_form/post_status_form.vue

@@ -11,7 +11,7 @@
       </i18n>
       <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
       <input
-        v-if="scopeOptionsEnabled"
+        v-if="newStatus.spoilerText || alwaysShowSubject"
         type="text"
         :placeholder="$t('post_status.content_warning')"
         v-model="newStatus.spoilerText"
@@ -153,8 +153,8 @@
       padding-bottom: 0;
       margin-left: $fallback--attachmentRadius;
       margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
-      background-color: $fallback--btn;
-      background-color: var(--btn, $fallback--btn);
+      background-color: $fallback--fg;
+      background-color: var(--btn, $fallback--fg);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
@@ -258,11 +258,13 @@
     position: absolute;
     z-index: 1;
     box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
+    // this doesn't match original but i don't care, making it uniform.
+    box-shadow: var(--popupShadow);
     min-width: 75%;
     background: $fallback--bg;
     background: var(--bg, $fallback--bg);
-    color: $fallback--lightFg;
-    color: var(--lightFg, $fallback--lightFg);
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
   }
 
   .autocomplete {
@@ -291,8 +293,8 @@
     }
 
     &.highlighted {
-      background-color: $fallback--btn;
-      background-color: var(--btn, $fallback--btn);
+      background-color: $fallback--fg;
+      background-color: var(--lightBg, $fallback--fg);
     }
   }
 }

src/components/range_input/range_input.vue

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

src/components/registration/registration.js

@@ -1,41 +1,61 @@
+import { validationMixin } from 'vuelidate'
+import { required, sameAs } from 'vuelidate/lib/validators'
+import { mapActions, mapState } from 'vuex'
+
 const registration = {
+  mixins: [validationMixin],
   data: () => ({
-    user: {},
-    error: false,
-    registering: false
-  }),
-  created () {
-    if ((!this.$store.state.config.registrationOpen && !this.token) || !!this.$store.state.users.currentUser) {
-      this.$router.push('/main/all')
+    user: {
+      email: '',
+      fullname: '',
+      username: '',
+      password: '',
+      confirm: ''
     }
-    // Seems like this doesn't work at first page open for some reason
-    if (this.$store.state.config.registrationOpen && this.token) {
-      this.$router.push('/registration')
+  }),
+  validations: {
+    user: {
+      email: { required },
+      username: { required },
+      fullname: { required },
+      password: { required },
+      confirm: {
+        required,
+        sameAsPassword: sameAs('password')
+      }
+    }
+  },
+  created () {
+    if ((!this.registrationOpen && !this.token) || this.signedIn) {
+      this.$router.push('/main/all')
     }
   },
   computed: {
-    termsofservice () { return this.$store.state.config.tos },
-    token () { return this.$route.params.token }
+    token () { return this.$route.params.token },
+    ...mapState({
+      registrationOpen: (state) => state.instance.registrationOpen,
+      signedIn: (state) => !!state.users.currentUser,
+      isPending: (state) => state.users.signUpPending,
+      serverValidationErrors: (state) => state.users.signUpErrors,
+      termsOfService: (state) => state.instance.tos
+    })
   },
   methods: {
-    submit () {
-      this.registering = true
+    ...mapActions(['signUp']),
+    async submit () {
       this.user.nickname = this.user.username
       this.user.token = this.token
-      this.$store.state.api.backendInteractor.register(this.user).then(
-        (response) => {
-          if (response.ok) {
-            this.$store.dispatch('loginUser', this.user)
-            this.$router.push('/main/all')
-            this.registering = false
-          } else {
-            this.registering = false
-            response.json().then((data) => {
-              this.error = data.error
-            })
-          }
+
+      this.$v.$touch()
+
+      if (!this.$v.$invalid) {
+        try {
+          await this.signUp(this.user)
+          this.$router.push('/main/friends')
+        } catch (error) {
+          console.warn('Registration failed: ' + error)
         }
-      )
+      }
     }
   }
 }

src/components/registration/registration.vue

@@ -7,50 +7,90 @@
       <form v-on:submit.prevent='submit(user)' class='registration-form'>
         <div class='container'>
           <div class='text-fields'>
-            <div class='form-group'>
-              <label for='username'>{{$t('login.username')}}</label>
-              <input :disabled="registering" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
+            <div class='form-group' :class="{ 'form-group--error': $v.user.username.$error }">
+              <label class='form--label' for='sign-up-username'>{{$t('login.username')}}</label>
+              <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' placeholder='e.g. lain'>
             </div>
-            <div class='form-group'>
-              <label for='fullname'>{{$t('registration.fullname')}}</label>
-              <input :disabled="registering" v-model='user.fullname' class='form-control' id='fullname' placeholder='e.g. Lain Iwakura'>
+            <div class="form-error" v-if="$v.user.username.$dirty">
+              <ul>
+                <li v-if="!$v.user.username.required">
+                  <span>{{$t('registration.validations.username_required')}}</span>
+                </li>
+              </ul>
             </div>
-            <div class='form-group'>
-              <label for='email'>{{$t('registration.email')}}</label>
-              <input :disabled="registering" v-model='user.email' class='form-control' id='email' type="email">
+
+            <div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }">
+              <label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label>
+              <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' placeholder='e.g. Lain Iwakura'>
             </div>
-            <div class='form-group'>
-              <label for='bio'>{{$t('registration.bio')}}</label>
-              <input :disabled="registering" v-model='user.bio' class='form-control' id='bio'>
+            <div class="form-error" v-if="$v.user.fullname.$dirty">
+              <ul>
+                <li v-if="!$v.user.fullname.required">
+                  <span>{{$t('registration.validations.fullname_required')}}</span>
+                </li>
+              </ul>
             </div>
-            <div class='form-group'>
-              <label for='password'>{{$t('login.password')}}</label>
-              <input :disabled="registering" v-model='user.password' class='form-control' id='password' type='password'>
+
+            <div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }">
+              <label class='form--label' for='email'>{{$t('registration.email')}}</label>
+              <input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email">
             </div>
-            <div class='form-group'>
-              <label for='password_confirmation'>{{$t('registration.password_confirm')}}</label>
-              <input :disabled="registering" v-model='user.confirm' class='form-control' id='password_confirmation' type='password'>
+            <div class="form-error" v-if="$v.user.email.$dirty">
+              <ul>
+                <li v-if="!$v.user.email.required">
+                  <span>{{$t('registration.validations.email_required')}}</span>
+                </li>
+              </ul>
             </div>
-            <!--
+
             <div class='form-group'>
-              <label for='captcha'>Captcha</label>
-              <img src='/qvittersimplesecurity/captcha.jpg' alt='captcha' class='captcha'>
-              <input :disabled="registering" v-model='user.captcha' placeholder='Enter captcha' type='test' class='form-control' id='captcha'>
+              <label class='form--label' for='bio'>{{$t('registration.bio')}}</label>
+              <input :disabled="isPending" v-model='user.bio' class='form-control' id='bio'>
             </div>
-            -->
+
+            <div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }">
+              <label class='form--label' for='sign-up-password'>{{$t('login.password')}}</label>
+              <input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'>
+            </div>
+            <div class="form-error" v-if="$v.user.password.$dirty">
+              <ul>
+                <li v-if="!$v.user.password.required">
+                  <span>{{$t('registration.validations.password_required')}}</span>
+                </li>
+              </ul>
+            </div>
+
+            <div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }">
+              <label class='form--label' for='sign-up-password-confirmation'>{{$t('registration.password_confirm')}}</label>
+              <input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'>
+            </div>
+            <div class="form-error" v-if="$v.user.confirm.$dirty">
+              <ul>
+                <li v-if="!$v.user.confirm.required">
+                  <span>{{$t('registration.validations.password_confirmation_required')}}</span>
+                </li>
+                <li v-if="!$v.user.confirm.sameAsPassword">
+                  <span>{{$t('registration.validations.password_confirmation_match')}}</span>
+                </li>
+              </ul>
+            </div>
+
             <div class='form-group' v-if='token' >
               <label for='token'>{{$t('registration.token')}}</label>
               <input disabled='true' v-model='token' class='form-control' id='token' type='text'>
             </div>
             <div class='form-group'>
-              <button :disabled="registering" 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 class='terms-of-service' v-html="termsOfService">
           </div>
         </div>
-        <div v-if="error" class='form-group'>
-          <div class='alert error'>{{error}}</div>
+        <div v-if="serverValidationErrors.length" class='form-group'>
+          <div class='alert error'>
+            <span v-for="error in serverValidationErrors">{{error}}</span>
+          </div>
         </div>
       </form>
     </div>
@@ -60,6 +100,7 @@
 <script src="./registration.js"></script>
 <style lang="scss">
 @import '../../_variables.scss';
+$validations-cRed: #f04124;
 
 .registration-form {
   display: flex;
@@ -89,6 +130,55 @@
     flex-direction: column;
     padding: 0.3em 0.0em 0.3em;
     line-height:24px;
+    margin-bottom: 1em;
+  }
+
+  @keyframes shakeError {
+    0% {
+      transform: translateX(0); }
+    15% {
+      transform: translateX(0.375rem); }
+    30% {
+      transform: translateX(-0.375rem); }
+    45% {
+      transform: translateX(0.375rem); }
+    60% {
+      transform: translateX(-0.375rem); }
+    75% {
+      transform: translateX(0.375rem); }
+    90% {
+      transform: translateX(-0.375rem); }
+    100% {
+      transform: translateX(0); } }
+
+  .form-group--error {
+    animation-name: shakeError;
+    animation-duration: .6s;
+    animation-timing-function: ease-in-out;
+  }
+
+  .form-group--error .form--label {
+    color: $validations-cRed;
+    color: var(--cRed, $validations-cRed);
+  }
+
+  .form-error {
+    margin-top: -0.7em;
+    text-align: left;
+
+    span {
+      font-size: 12px;
+    }
+  }
+
+  .form-error ul {
+    list-style: none;
+    padding: 0 0 0 5px;
+    margin-top: 0;
+
+    li::before {
+      content: "• ";
+    }
   }
 
   form textarea {
@@ -102,8 +192,6 @@
   }
 
   .btn {
-    //align-self: flex-start;
-    //width: 10em;
     margin-top: 0.6em;
     height: 28px;
   }

src/components/retweet_button/retweet_button.js

@@ -2,6 +2,9 @@ const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
   data () {
     return {
+      hidePostStatsLocal: typeof this.$store.state.config.hidePostStats === 'undefined'
+        ? this.$store.state.instance.hidePostStats
+        : this.$store.state.config.hidePostStats,
       animated: false
     }
   },

src/components/retweet_button/retweet_button.vue

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

src/components/settings/settings.js

@@ -6,25 +6,46 @@ import { filter, trim } from 'lodash'
 
 const settings = {
   data () {
-    const config = this.$store.state.config
+    const user = this.$store.state.config
+    const instance = this.$store.state.instance
 
     return {
-      hideAttachmentsLocal: config.hideAttachments,
-      hideAttachmentsInConvLocal: config.hideAttachmentsInConv,
-      hideNsfwLocal: config.hideNsfw,
-      notificationVisibilityLocal: config.notificationVisibility,
-      replyVisibilityLocal: config.replyVisibility,
-      loopVideoLocal: config.loopVideo,
-      loopVideoSilentOnlyLocal: config.loopVideoSilentOnly,
-      muteWordsString: config.muteWords.join('\n'),
-      autoLoadLocal: config.autoLoad,
-      streamingLocal: config.streaming,
-      pauseOnUnfocusedLocal: config.pauseOnUnfocused,
-      hoverPreviewLocal: config.hoverPreview,
-      collapseMessageWithSubjectLocal: typeof config.collapseMessageWithSubject === 'undefined'
-        ? config.defaultCollapseMessageWithSubject
-        : config.collapseMessageWithSubject,
-      stopGifs: config.stopGifs,
+      hideAttachmentsLocal: user.hideAttachments,
+      hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
+      hideNsfwLocal: user.hideNsfw,
+      hideISPLocal: user.hideISP,
+      hidePostStatsLocal: typeof user.hidePostStats === 'undefined'
+        ? instance.hidePostStats
+        : user.hidePostStats,
+      hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats),
+      hideUserStatsLocal: typeof user.hideUserStats === 'undefined'
+        ? instance.hideUserStats
+        : user.hideUserStats,
+      hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats),
+      notificationVisibilityLocal: user.notificationVisibility,
+      replyVisibilityLocal: user.replyVisibility,
+      loopVideoLocal: user.loopVideo,
+      loopVideoSilentOnlyLocal: user.loopVideoSilentOnly,
+      muteWordsString: user.muteWords.join('\n'),
+      autoLoadLocal: user.autoLoad,
+      streamingLocal: user.streaming,
+      pauseOnUnfocusedLocal: user.pauseOnUnfocused,
+      hoverPreviewLocal: user.hoverPreview,
+      collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'
+        ? instance.collapseMessageWithSubject
+        : user.collapseMessageWithSubject,
+      collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject),
+      subjectLineBehaviorLocal: typeof user.subjectLineBehavior === 'undefined'
+        ? instance.subjectLineBehavior
+        : user.subjectLineBehavior,
+      subjectLineBehaviorDefault: instance.subjectLineBehavior,
+      alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'
+        ? instance.alwaysShowSubjectInput
+        : user.alwaysShowSubjectInput,
+      alwaysShowSubjectInputDefault: instance.alwaysShowSubjectInput,
+      scopeCopyLocal: user.scopeCopy,
+      scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
+      stopGifs: user.stopGifs,
       loopSilentAvailable:
         // Firefox
         Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -42,6 +63,9 @@ const settings = {
   computed: {
     user () {
       return this.$store.state.users.currentUser
+    },
+    currentSaveStateNotice () {
+      return this.$store.state.interface.settings.currentSaveStateNotice
     }
   },
   watch: {
@@ -51,9 +75,18 @@ const settings = {
     hideAttachmentsInConvLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
     },
+    hidePostStatsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hidePostStats', value })
+    },
+    hideUserStatsLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hideUserStats', value })
+    },
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
+    hideISPLocal (value) {
+      this.$store.dispatch('setOption', { name: 'hideISP', value })
+    },
     'notificationVisibilityLocal.likes' (value) {
       this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
     },
@@ -94,6 +127,15 @@ const settings = {
     collapseMessageWithSubjectLocal (value) {
       this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
     },
+    scopeCopyLocal (value) {
+      this.$store.dispatch('setOption', { name: 'scopeCopy', value })
+    },
+    alwaysShowSubjectInputLocal (value) {
+      this.$store.dispatch('setOption', { name: 'alwaysShowSubjectInput', value })
+    },
+    subjectLineBehaviorLocal (value) {
+      this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })
+    },
     stopGifs (value) {
       this.$store.dispatch('setOption', { name: 'stopGifs', value })
     }

src/components/settings/settings.vue

@@ -1,21 +1,46 @@
 <template>
 <div class="settings panel panel-default">
   <div class="panel-heading">
-    {{$t('settings.settings')}}
+    <div class="title">
+      {{$t('settings.settings')}}
+    </div>
+
+    <transition name="fade">
+      <template v-if="currentSaveStateNotice">
+        <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
+          {{ $t('settings.saving_err') }}
+        </div>
+
+        <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
+          {{ $t('settings.saving_ok') }}
+        </div>
+      </template>
+    </transition>
   </div>
   <div class="panel-body">
+<keep-alive>
     <tab-switcher>
       <div :label="$t('settings.general')" >
         <div class="setting-item">
-          <h2>{{ $t('settings.interfaceLanguage') }}</h2>
-          <interface-language-switcher />
+          <h2>{{ $t('settings.interface') }}</h2>
+          <ul class="setting-list">
+            <li>
+              <interface-language-switcher />
+            </li>
+            <li>
+              <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="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
-              <label for="collapseMessageWithSubject">{{$t('settings.collapse_subject')}}</label>
+              <label for="collapseMessageWithSubject">
+                {{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}
+              </label>
             </li>
             <li>
               <input type="checkbox" id="streaming" v-model="streamingLocal">
@@ -37,6 +62,47 @@
             </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>
+          </ul>
+        </div>
+
         <div class="setting-item">
           <h2>{{$t('settings.attachments')}}</h2>
           <ul class="setting-list">
@@ -122,6 +188,18 @@
               <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">
           <p>{{$t('settings.filtering_explanation')}}</p>
@@ -130,6 +208,7 @@
       </div>
 
     </tab-switcher>
+</keep-alive>
   </div>
 </div>
 </template>
@@ -141,7 +220,7 @@
 @import '../../_variables.scss';
 
 .setting-item {
-  border-bottom: 2px solid var(--btn, $fallback--btn);
+  border-bottom: 2px solid var(--fg, $fallback--fg);
   margin: 1em 1em 1.4em;
   padding-bottom: 1.4em;
 
@@ -190,12 +269,8 @@
 
   .btn {
     min-height: 28px;
-  }
-
-  .submit {
-    margin-top: 1em;
-    min-height: 30px;
-    width: 10em;
+    min-width: 10em;
+    padding: 0 2em;
   }
 }
 .select-multiple {

src/components/shadow_control/shadow_control.js

@@ -0,0 +1,87 @@
+import ColorInput from '../color_input/color_input.vue'
+import OpacityInput from '../opacity_input/opacity_input.vue'
+import { getCssShadow } from '../../services/style_setter/style_setter.js'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+export default {
+  // 'Value' and 'Fallback' can be undefined, but if they are
+  // initially vue won't detect it when they become something else
+  // therefore i'm using "ready" which should be passed as true when
+  // data becomes available
+  props: [
+    'value', 'fallback', 'ready'
+  ],
+  data () {
+    return {
+      selectedId: 0,
+      // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
+      cValue: this.value || this.fallback || []
+    }
+  },
+  components: {
+    ColorInput,
+    OpacityInput
+  },
+  methods: {
+    add () {
+      this.cValue.push(Object.assign({}, this.selected))
+      this.selectedId = this.cValue.length - 1
+    },
+    del () {
+      this.cValue.splice(this.selectedId, 1)
+      this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1
+    },
+    moveUp () {
+      const movable = this.cValue.splice(this.selectedId, 1)[0]
+      this.cValue.splice(this.selectedId - 1, 0, movable)
+      this.selectedId -= 1
+    },
+    moveDn () {
+      const movable = this.cValue.splice(this.selectedId, 1)[0]
+      this.cValue.splice(this.selectedId + 1, 0, movable)
+      this.selectedId += 1
+    }
+  },
+  beforeUpdate () {
+    this.cValue = this.value || this.fallback
+  },
+  computed: {
+    selected () {
+      if (this.ready && this.cValue.length > 0) {
+        return this.cValue[this.selectedId]
+      } else {
+        return {
+          x: 0,
+          y: 0,
+          blur: 0,
+          spread: 0,
+          inset: false,
+          color: '#000000',
+          alpha: 1
+        }
+      }
+    },
+    moveUpValid () {
+      return this.ready && this.selectedId > 0
+    },
+    moveDnValid () {
+      return this.ready && this.selectedId < this.cValue.length - 1
+    },
+    present () {
+      return this.ready &&
+        typeof this.cValue[this.selectedId] !== 'undefined' &&
+        !this.usingFallback
+    },
+    usingFallback () {
+      return typeof this.value === 'undefined'
+    },
+    rgb () {
+      return hex2rgb(this.selected.color)
+    },
+    style () {
+      return this.ready ? {
+        boxShadow: getCssShadow(this.cValue)
+      } : {}
+    }
+  }
+}

src/components/shadow_control/shadow_control.vue

@@ -0,0 +1,243 @@
+<template>
+<div class="shadow-control" :class="{ disabled: !present }">
+  <div class="shadow-preview-container">
+    <div :disabled="!present" class="y-shift-control">
+      <input
+        v-model="selected.y"
+        :disabled="!present"
+        class="input-number"
+        type="number">
+      <div class="wrap">
+        <input
+          v-model="selected.y"
+          :disabled="!present"
+          class="input-range"
+          type="range"
+          max="20"
+          min="-20">
+      </div>
+    </div>
+    <div class="preview-window">
+      <div class="preview-block" :style="style"></div>
+    </div>
+    <div :disabled="!present" class="x-shift-control">
+      <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
+          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>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.shadow-control {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-bottom: 1em;
+
+  .shadow-preview-container,
+  .shadow-tweak {
+    margin: 5px 6px 0 0;
+  }
+  .shadow-preview-container {
+    flex: 0;
+    display: flex;
+    flex-wrap: wrap;
+
+    $side: 15em;
+
+    input[type=number] {
+      width: 5em;
+      min-width: 2em;
+    }
+    .x-shift-control,
+    .y-shift-control {
+      display: flex;
+      flex: 0;
+
+      &[disabled=disabled] *{
+        opacity: .5
+      }
+
+    }
+
+    .x-shift-control {
+      align-items: flex-start;
+    }
+
+    .x-shift-control .wrap,
+    input[type=range] {
+      margin: 0;
+      width: $side;
+      height: 2em;
+    }
+    .y-shift-control {
+      flex-direction: column;
+      align-items: flex-end;
+      .wrap {
+        width: 2em;
+        height: $side;
+      }
+      input[type=range] {
+        transform-origin: 1em 1em;
+        transform: rotate(90deg);
+      }
+    }
+    .preview-window {
+      flex: 1;
+      background-color: #999999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-image:
+      linear-gradient(45deg, #666666 25%, transparent 25%),
+      linear-gradient(-45deg, #666666 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #666666 75%),
+      linear-gradient(-45deg, transparent 75%, #666666 75%);
+      background-size: 20px 20px;
+      background-position:0 0, 0 10px, 10px -10px, -10px 0;
+
+      border-radius: $fallback--inputRadius;
+      border-radius: var(--inputRadius, $fallback--inputRadius);
+
+      .preview-block {
+        width: 33%;
+        height: 33%;
+        background-color: $fallback--bg;
+        background-color: var(--bg, $fallback--bg);
+        border-radius: $fallback--panelRadius;
+        border-radius: var(--panelRadius, $fallback--panelRadius);
+      }
+    }
+  }
+
+  .shadow-tweak {
+    flex: 1;
+    min-width: 280px;
+
+    .id-control {
+      align-items: stretch;
+      .select, .btn {
+        min-width: 1px;
+        margin-right: 5px;
+      }
+      .btn {
+        padding: 0 .4em;
+        margin: 0 .1em;
+      }
+      .select {
+        flex: 1;
+        select {
+          align-self: initial;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/status/status.js

@@ -31,10 +31,18 @@ const Status = {
       preview: null,
       showPreview: false,
       showingTall: false,
-      expandingSubject: !this.$store.state.config.collapseMessageWithSubject
+      expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
+        ? !this.$store.state.instance.collapseMessageWithSubject
+        : !this.$store.state.config.collapseMessageWithSubject,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
     }
   },
   computed: {
+    localCollapseSubjectDefault () {
+      return typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
+        ? this.$store.state.instance.collapseMessageWithSubject
+        : this.$store.state.config.collapseMessageWithSubject
+    },
     muteWords () {
       return this.$store.state.config.muteWords
     },
@@ -46,6 +54,9 @@ const Status = {
       const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
       return highlightClass(user)
     },
+    deleted () {
+      return this.statusoid.deleted
+    },
     repeaterStyle () {
       const user = this.statusoid.user
       const highlight = this.$store.state.config.highlight
@@ -147,13 +158,13 @@ const Status = {
       return this.status.attentions.length > 0
     },
     hideSubjectStatus () {
-      if (this.tallStatus && !this.$store.state.config.collapseMessageWithSubject) {
+      if (this.tallStatus && !this.localCollapseSubjectDefault) {
         return false
       }
       return !this.expandingSubject && this.status.summary
     },
     hideTallStatus () {
-      if (this.status.summary && this.$store.state.config.collapseMessageWithSubject) {
+      if (this.status.summary && this.localCollapseSubjectDefault) {
         return false
       }
       if (this.showingTall) {
@@ -168,16 +179,22 @@ const Status = {
       if (!this.status.nsfw) {
         return false
       }
-      if (this.status.summary && this.$store.state.config.collapseMessageWithSubject) {
+      if (this.status.summary && this.localCollapseSubjectDefault) {
         return false
       }
       return true
     },
     replySubject () {
-      if (this.status.summary && !this.status.summary.match(/^re[: ]/i)) {
+      if (!this.status.summary) return ''
+      const behavior = this.$store.state.config.subjectLineBehavior
+      const startsWithRe = this.status.summary.match(/^re[: ]/i)
+      if (behavior !== 'noop' && startsWithRe || behavior === 'masto') {
+        return this.status.summary
+      } else if (behavior === 'email') {
         return 're: '.concat(this.status.summary)
+      } else if (behavior === 'noop') {
+        return ''
       }
-      return this.status.summary
     },
     attachmentSize () {
       if ((this.$store.state.config.hideAttachments && !this.inConversation) ||

src/components/status/status.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el" v-if="!hideReply" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
+  <div class="status-el" v-if="!hideReply && !deleted" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
     <template v-if="muted && !noReplyLinks">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -9,11 +9,11 @@
     </template>
     <template v-else>
       <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
-        <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
+        <StillImage v-if="retweet" class='avatar' :class='{ "better-shadow": betterShadow }' :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
           <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
           <a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
-          <i class='fa icon-retweet retweeted'></i>
+          <i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i>
           {{$t('timeline.repeated')}}
         </div>
       </div>
@@ -21,7 +21,7 @@
       <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
         <div v-if="!noHeading" class="media-left">
           <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
-            <StillImage class='avatar' :class="{'avatar-compact': compact}"  :src="status.user.profile_image_url_original"/>
+            <StillImage class='avatar' :class="{'avatar-compact': compact, 'better-shadow': betterShadow}"  :src="status.user.profile_image_url_original"/>
           </a>
         </div>
         <div class="status-body">
@@ -41,7 +41,7 @@
                       {{status.in_reply_to_screen_name}}
                     </router-link>
                   </span>
-                  <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)">
+                  <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :title="$t('tool_tip.reply')">
                     <i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
                   </a>
                 </span>
@@ -94,7 +94,7 @@
 
           <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
             <div v-if="loggedIn">
-              <a href="#" v-on:click.prevent="toggleReplying">
+              <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
                 <i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
               </a>
             </div>
@@ -106,7 +106,7 @@
       </div>
       <div class="container" v-if="replying">
         <div class="reply-left"/>
-        <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/>
+        <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"/>
       </div>
     </template>
   </div>
@@ -146,6 +146,7 @@
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
   margin-top: 0.25em;
   margin-left: 0.5em;
   z-index: 50;
@@ -284,8 +285,8 @@
       margin-left: 0.2em;
     }
     a:hover i {
-      color: $fallback--fg;
-      color: var(--fg, $fallback--fg);
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
     }
   }
 
@@ -323,6 +324,8 @@
 
   .status-content {
     margin-right: 0.5em;
+    font-family: var(--postFont, sans-serif);
+
     img, video {
       max-width: 100%;
       max-height: 400px;
@@ -339,6 +342,10 @@
       overflow: auto;
     }
 
+    code, samp, kbd, var, pre {
+      font-family: var(--postCodeFont, monospace);
+    }
+
     p {
       margin: 0;
       margin-top: 0.2em;
@@ -457,18 +464,30 @@
 .status .avatar-compact {
   width: 32px;
   height: 32px;
+  box-shadow: var(--avatarStatusShadow);
   border-radius: $fallback--avatarAltRadius;
   border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+
+  &.better-shadow {
+    box-shadow: var(--avatarStatusShadowInset);
+    filter: var(--avatarStatusShadowFilter)
+  }
 }
 
 .avatar {
   width: 48px;
   height: 48px;
+  box-shadow: var(--avatarStatusShadow);
   border-radius: $fallback--avatarRadius;
   border-radius: var(--avatarRadius, $fallback--avatarRadius);
   overflow: hidden;
   position: relative;
 
+  &.better-shadow {
+    box-shadow: var(--avatarStatusShadowInset);
+    filter: var(--avatarStatusShadowFilter)
+  }
+
   img {
     width: 100%;
     height: 100%;
@@ -532,6 +551,7 @@ a.unmute {
   .status-el:last-child {
     border-bottom-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;;
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-bottom: none;
   }
 }
 

src/components/style_switcher/preview.vue

@@ -0,0 +1,78 @@
+<template>
+<div class="panel dummy">
+  <div class="panel-heading">
+    <div class="title">
+      {{$t('settings.style.preview.header')}}
+      <span class="badge badge-notification">
+        99
+      </span>
+    </div>
+    <span class="faint">
+      {{$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="icon-reply"/>
+          <i style="color: var(--cGreen)" class="icon-retweet"/>
+          <i style="color: var(--cOrange)" class="icon-star"/>
+          <i style="color: var(--cRed)" class="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')}}
+      </button>
+    </div>
+  </div>
+</div>
+</template>

src/components/style_switcher/style_switcher.js

@@ -1,21 +1,101 @@
-import { rgbstr2hex } from '../../services/color_convert/color_convert.js'
+import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
+import { set, delete as del } from 'vue'
+import { generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'
+import ColorInput from '../color_input/color_input.vue'
+import RangeInput from '../range_input/range_input.vue'
+import OpacityInput from '../opacity_input/opacity_input.vue'
+import ShadowControl from '../shadow_control/shadow_control.vue'
+import FontControl from '../font_control/font_control.vue'
+import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
+import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
+import Preview from './preview.vue'
+import ExportImport from '../export_import/export_import.vue'
+
+// List of color values used in v1
+const v1OnlyNames = [
+  'bg',
+  'fg',
+  'text',
+  'link',
+  'cRed',
+  'cGreen',
+  'cBlue',
+  'cOrange'
+].map(_ => _ + 'ColorLocal')
 
 export default {
   data () {
     return {
       availableStyles: [],
       selected: this.$store.state.config.theme,
-      invalidThemeImported: false,
-      bgColorLocal: '',
-      btnColorLocal: '',
+
+      previewShadows: {},
+      previewColors: {},
+      previewRadii: {},
+      previewFonts: {},
+
+      shadowsInvalid: true,
+      colorsInvalid: true,
+      radiiInvalid: true,
+
+      keepColor: false,
+      keepShadows: false,
+      keepOpacity: false,
+      keepRoundness: false,
+      keepFonts: false,
+
       textColorLocal: '',
       linkColorLocal: '',
-      redColorLocal: '',
-      blueColorLocal: '',
-      greenColorLocal: '',
-      orangeColorLocal: '',
+
+      bgColorLocal: '',
+      bgOpacityLocal: undefined,
+
+      fgColorLocal: '',
+      fgTextColorLocal: undefined,
+      fgLinkColorLocal: undefined,
+
+      btnColorLocal: undefined,
+      btnTextColorLocal: undefined,
+      btnOpacityLocal: undefined,
+
+      inputColorLocal: undefined,
+      inputTextColorLocal: undefined,
+      inputOpacityLocal: undefined,
+
+      panelColorLocal: undefined,
+      panelTextColorLocal: undefined,
+      panelLinkColorLocal: undefined,
+      panelFaintColorLocal: undefined,
+      panelOpacityLocal: undefined,
+
+      topBarColorLocal: undefined,
+      topBarTextColorLocal: undefined,
+      topBarLinkColorLocal: undefined,
+
+      alertErrorColorLocal: undefined,
+
+      badgeOpacityLocal: undefined,
+      badgeNotificationColorLocal: undefined,
+
+      borderColorLocal: undefined,
+      borderOpacityLocal: undefined,
+
+      faintColorLocal: undefined,
+      faintOpacityLocal: undefined,
+      faintLinkColorLocal: undefined,
+
+      cRedColorLocal: '',
+      cBlueColorLocal: '',
+      cGreenColorLocal: '',
+      cOrangeColorLocal: '',
+
+      shadowSelected: undefined,
+      shadowsLocal: {},
+      fontsLocal: {},
+
       btnRadiusLocal: '',
       inputRadiusLocal: '',
+      checkboxRadiusLocal: '',
       panelRadiusLocal: '',
       avatarRadiusLocal: '',
       avatarAltRadiusLocal: '',
@@ -26,144 +106,470 @@ export default {
   created () {
     const self = this
 
-    window.fetch('/static/styles.json')
-      .then((data) => data.json())
-      .then((themes) => {
-        self.availableStyles = themes
-      })
+    getThemes().then((themesComplete) => {
+      self.availableStyles = themesComplete
+    })
   },
   mounted () {
-    this.normalizeLocalState(this.$store.state.config.colors, this.$store.state.config.radii)
+    this.normalizeLocalState(this.$store.state.config.customTheme)
+    if (typeof this.shadowSelected === 'undefined') {
+      this.shadowSelected = this.shadowsAvailable[0]
+    }
   },
-  methods: {
-    exportCurrentTheme () {
-      const stringified = JSON.stringify({
-        // To separate from other random JSON files and possible future theme formats
-        _pleroma_theme_version: 1,
-        colors: this.$store.state.config.colors,
-        radii: this.$store.state.config.radii
-      }, null, 2) // Pretty-print and indent with 2 spaces
-
-      // Create an invisible link with a data url and simulate a click
-      const e = document.createElement('a')
-      e.setAttribute('download', 'pleroma_theme.json')
-      e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
-      e.style.display = 'none'
-
-      document.body.appendChild(e)
-      e.click()
-      document.body.removeChild(e)
+  computed: {
+    selectedVersion () {
+      return Array.isArray(this.selected) ? 1 : 2
     },
+    currentColors () {
+      return {
+        bg: this.bgColorLocal,
+        text: this.textColorLocal,
+        link: this.linkColorLocal,
 
-    importTheme () {
-      this.invalidThemeImported = false
-      const filePicker = document.createElement('input')
-      filePicker.setAttribute('type', 'file')
-      filePicker.setAttribute('accept', '.json')
+        fg: this.fgColorLocal,
+        fgText: this.fgTextColorLocal,
+        fgLink: this.fgLinkColorLocal,
 
-      filePicker.addEventListener('change', event => {
-        if (event.target.files[0]) {
-          // eslint-disable-next-line no-undef
-          const reader = new FileReader()
-          reader.onload = ({target}) => {
-            try {
-              const parsed = JSON.parse(target.result)
-              if (parsed._pleroma_theme_version === 1) {
-                this.normalizeLocalState(parsed.colors, parsed.radii)
-              } else {
-                // A theme from the future, spooky
-                this.invalidThemeImported = true
-              }
-            } catch (e) {
-              // This will happen both if there is a JSON syntax error or the theme is missing components
-              this.invalidThemeImported = true
-            }
-          }
-          reader.readAsText(event.target.files[0])
-        }
+        panel: this.panelColorLocal,
+        panelText: this.panelTextColorLocal,
+        panelLink: this.panelLinkColorLocal,
+        panelFaint: this.panelFaintColorLocal,
+
+        input: this.inputColorLocal,
+        inputText: this.inputTextColorLocal,
+
+        topBar: this.topBarColorLocal,
+        topBarText: this.topBarTextColorLocal,
+        topBarLink: this.topBarLinkColorLocal,
+
+        btn: this.btnColorLocal,
+        btnText: this.btnTextColorLocal,
+
+        alertError: this.alertErrorColorLocal,
+        badgeNotification: this.badgeNotificationColorLocal,
+
+        faint: this.faintColorLocal,
+        faintLink: this.faintLinkColorLocal,
+        border: this.borderColorLocal,
+
+        cRed: this.cRedColorLocal,
+        cBlue: this.cBlueColorLocal,
+        cGreen: this.cGreenColorLocal,
+        cOrange: this.cOrangeColorLocal
+      }
+    },
+    currentOpacity () {
+      return {
+        bg: this.bgOpacityLocal,
+        btn: this.btnOpacityLocal,
+        input: this.inputOpacityLocal,
+        panel: this.panelOpacityLocal,
+        topBar: this.topBarOpacityLocal,
+        border: this.borderOpacityLocal,
+        faint: this.faintOpacityLocal
+      }
+    },
+    currentRadii () {
+      return {
+        btn: this.btnRadiusLocal,
+        input: this.inputRadiusLocal,
+        checkbox: this.checkboxRadiusLocal,
+        panel: this.panelRadiusLocal,
+        avatar: this.avatarRadiusLocal,
+        avatarAlt: this.avatarAltRadiusLocal,
+        tooltip: this.tooltipRadiusLocal,
+        attachment: this.attachmentRadiusLocal
+      }
+    },
+    preview () {
+      return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
+    },
+    previewTheme () {
+      if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
+      return this.preview.theme
+    },
+    // This needs optimization maybe
+    previewContrast () {
+      if (!this.previewTheme.colors.bg) return {}
+      const colors = this.previewTheme.colors
+      const opacity = this.previewTheme.opacity
+      if (!colors.bg) return {}
+      const hints = (ratio) => ({
+        text: ratio.toPrecision(3) + ':1',
+        // AA level, AAA level
+        aa: ratio >= 4.5,
+        aaa: ratio >= 7,
+        // same but for 18pt+ texts
+        laa: ratio >= 3,
+        laaa: ratio >= 4.5
       })
 
-      document.body.appendChild(filePicker)
-      filePicker.click()
-      document.body.removeChild(filePicker)
-    },
+      // fgsfds :DDDD
+      const fgs = {
+        text: hex2rgb(colors.text),
+        panelText: hex2rgb(colors.panelText),
+        panelLink: hex2rgb(colors.panelLink),
+        btnText: hex2rgb(colors.btnText),
+        topBarText: hex2rgb(colors.topBarText),
+        inputText: hex2rgb(colors.inputText),
 
+        link: hex2rgb(colors.link),
+        topBarLink: hex2rgb(colors.topBarLink),
+
+        red: hex2rgb(colors.cRed),
+        green: hex2rgb(colors.cGreen),
+        blue: hex2rgb(colors.cBlue),
+        orange: hex2rgb(colors.cOrange)
+      }
+
+      const bgs = {
+        bg: hex2rgb(colors.bg),
+        btn: hex2rgb(colors.btn),
+        panel: hex2rgb(colors.panel),
+        topBar: hex2rgb(colors.topBar),
+        input: hex2rgb(colors.input),
+        alertError: hex2rgb(colors.alertError),
+        badgeNotification: hex2rgb(colors.badgeNotification)
+      }
+
+      /* This is a bit confusing because "bottom layer" used is text color
+       * This is done to get worst case scenario when background below transparent
+       * layer matches text color, making it harder to read the lower alpha is.
+       */
+      const ratios = {
+        bgText: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.text), fgs.text),
+        bgLink: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.link), fgs.link),
+        bgRed: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.red), fgs.red),
+        bgGreen: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.green), fgs.green),
+        bgBlue: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.blue), fgs.blue),
+        bgOrange: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.orange), fgs.orange),
+
+        tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),
+
+        panelText: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),
+        panelLink: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelLink), fgs.panelLink),
+
+        btnText: getContrastRatio(alphaBlend(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
+
+        inputText: getContrastRatio(alphaBlend(bgs.input, opacity.input, fgs.inputText), fgs.inputText),
+
+        topBarText: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),
+        topBarLink: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)
+      }
+
+      return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
+    },
+    previewRules () {
+      if (!this.preview.rules) return ''
+      return [
+        ...Object.values(this.preview.rules),
+        'color: var(--text)',
+        'font-family: var(--interfaceFont, sans-serif)'
+      ].join(';')
+    },
+    shadowsAvailable () {
+      return Object.keys(this.previewTheme.shadows).sort()
+    },
+    currentShadowOverriden: {
+      get () {
+        return !!this.currentShadow
+      },
+      set (val) {
+        if (val) {
+          set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
+        } else {
+          del(this.shadowsLocal, this.shadowSelected)
+        }
+      }
+    },
+    currentShadowFallback () {
+      return this.previewTheme.shadows[this.shadowSelected]
+    },
+    currentShadow: {
+      get () {
+        return this.shadowsLocal[this.shadowSelected]
+      },
+      set (v) {
+        set(this.shadowsLocal, this.shadowSelected, v)
+      }
+    },
+    themeValid () {
+      return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
+    },
+    exportedTheme () {
+      const saveEverything = (
+        !this.keepFonts &&
+        !this.keepShadows &&
+        !this.keepOpacity &&
+        !this.keepRoundness &&
+        !this.keepColor
+      )
+
+      const theme = {}
+
+      if (this.keepFonts || saveEverything) {
+        theme.fonts = this.fontsLocal
+      }
+      if (this.keepShadows || saveEverything) {
+        theme.shadows = this.shadowsLocal
+      }
+      if (this.keepOpacity || saveEverything) {
+        theme.opacity = this.currentOpacity
+      }
+      if (this.keepColor || saveEverything) {
+        theme.colors = this.currentColors
+      }
+      if (this.keepRoundness || saveEverything) {
+        theme.radii = this.currentRadii
+      }
+
+      return {
+        // To separate from other random JSON files and possible future theme formats
+        _pleroma_theme_version: 2, theme
+      }
+    }
+  },
+  components: {
+    ColorInput,
+    OpacityInput,
+    RangeInput,
+    ContrastRatio,
+    ShadowControl,
+    FontControl,
+    TabSwitcher,
+    Preview,
+    ExportImport
+  },
+  methods: {
     setCustomTheme () {
-      if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
-        // reset to picked themes
-      }
-
-      const rgb = (hex) => {
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-        return result ? {
-          r: parseInt(result[1], 16),
-          g: parseInt(result[2], 16),
-          b: parseInt(result[3], 16)
-        } : null
-      }
-      const bgRgb = rgb(this.bgColorLocal)
-      const btnRgb = rgb(this.btnColorLocal)
-      const textRgb = rgb(this.textColorLocal)
-      const linkRgb = rgb(this.linkColorLocal)
-
-      const redRgb = rgb(this.redColorLocal)
-      const blueRgb = rgb(this.blueColorLocal)
-      const greenRgb = rgb(this.greenColorLocal)
-      const orangeRgb = rgb(this.orangeColorLocal)
-
-      if (bgRgb && btnRgb && linkRgb) {
-        this.$store.dispatch('setOption', {
-          name: 'customTheme',
-          value: {
-            fg: btnRgb,
-            bg: bgRgb,
-            text: textRgb,
-            link: linkRgb,
-            cRed: redRgb,
-            cBlue: blueRgb,
-            cGreen: greenRgb,
-            cOrange: orangeRgb,
-            btnRadius: this.btnRadiusLocal,
-            inputRadius: this.inputRadiusLocal,
-            panelRadius: this.panelRadiusLocal,
-            avatarRadius: this.avatarRadiusLocal,
-            avatarAltRadius: this.avatarAltRadiusLocal,
-            tooltipRadius: this.tooltipRadiusLocal,
-            attachmentRadius: this.attachmentRadiusLocal
-          }})
+      this.$store.dispatch('setOption', {
+        name: 'customTheme',
+        value: {
+          shadows: this.shadowsLocal,
+          fonts: this.fontsLocal,
+          opacity: this.currentOpacity,
+          colors: this.currentColors,
+          radii: this.currentRadii
+        }
+      })
+    },
+    onImport (parsed) {
+      if (parsed._pleroma_theme_version === 1) {
+        this.normalizeLocalState(parsed, 1)
+      } else if (parsed._pleroma_theme_version === 2) {
+        this.normalizeLocalState(parsed.theme, 2)
       }
     },
+    importValidator (parsed) {
+      const version = parsed._pleroma_theme_version
+      return version >= 1 || version <= 2
+    },
+    clearAll () {
+      const state = this.$store.state.config.customTheme
+      const version = state.colors ? 2 : 'l1'
+      this.normalizeLocalState(this.$store.state.config.customTheme, version)
+    },
 
-    normalizeLocalState (colors, radii) {
-      this.bgColorLocal = rgbstr2hex(colors.bg)
-      this.btnColorLocal = rgbstr2hex(colors.btn)
-      this.textColorLocal = rgbstr2hex(colors.fg)
-      this.linkColorLocal = rgbstr2hex(colors.link)
+    // Clears all the extra stuff when loading V1 theme
+    clearV1 () {
+      Object.keys(this.$data)
+        .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
+        .filter(_ => !v1OnlyNames.includes(_))
+        .forEach(key => {
+          set(this.$data, key, undefined)
+        })
+    },
 
-      this.redColorLocal = rgbstr2hex(colors.cRed)
-      this.blueColorLocal = rgbstr2hex(colors.cBlue)
-      this.greenColorLocal = rgbstr2hex(colors.cGreen)
-      this.orangeColorLocal = rgbstr2hex(colors.cOrange)
+    clearRoundness () {
+      Object.keys(this.$data)
+        .filter(_ => _.endsWith('RadiusLocal'))
+        .forEach(key => {
+          set(this.$data, key, undefined)
+        })
+    },
 
-      this.btnRadiusLocal = radii.btnRadius || 4
-      this.inputRadiusLocal = radii.inputRadius || 4
-      this.panelRadiusLocal = radii.panelRadius || 10
-      this.avatarRadiusLocal = radii.avatarRadius || 5
-      this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
-      this.tooltipRadiusLocal = radii.tooltipRadius || 2
-      this.attachmentRadiusLocal = radii.attachmentRadius || 5
+    clearOpacity () {
+      Object.keys(this.$data)
+        .filter(_ => _.endsWith('OpacityLocal'))
+        .forEach(key => {
+          set(this.$data, key, undefined)
+        })
+    },
+
+    clearShadows () {
+      this.shadowsLocal = {}
+    },
+
+    clearFonts () {
+      this.fontsLocal = {}
+    },
+
+    /**
+     * This applies stored theme data onto form. Supports three versions of data:
+     * v2 (version = 2) - newer version of themes.
+     * v1 (version = 1) - older version of themes (import from file)
+     * v1l (version = l1) - older version of theme (load from local storage)
+     * v1 and v1l differ because of way themes were stored/exported.
+     * @param {Object} input - input data
+     * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
+     */
+    normalizeLocalState (input, version = 0) {
+      const colors = input.colors || input
+      const radii = input.radii || input
+      const opacity = input.opacity
+      const shadows = input.shadows || {}
+      const fonts = input.fonts || {}
+
+      if (version === 0) {
+        if (input.version) version = input.version
+        // Old v1 naming: fg is text, btn is foreground
+        if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
+          version = 1
+        }
+        // New v2 naming: text is text, fg is foreground
+        if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
+          version = 2
+        }
+      }
+
+      // Stuff that differs between V1 and V2
+      if (version === 1) {
+        this.fgColorLocal = rgb2hex(colors.btn)
+        this.textColorLocal = rgb2hex(colors.fg)
+      }
+
+      if (!this.keepColor) {
+        this.clearV1()
+        const keys = new Set(version !== 1 ? Object.keys(colors) : [])
+        if (version === 1 || version === 'l1') {
+          keys
+            .add('bg')
+            .add('link')
+            .add('cRed')
+            .add('cBlue')
+            .add('cGreen')
+            .add('cOrange')
+        }
+
+        keys.forEach(key => {
+          this[key + 'ColorLocal'] = rgb2hex(colors[key])
+        })
+      }
+
+      if (!this.keepRoundness) {
+        this.clearRoundness()
+        Object.entries(radii).forEach(([k, v]) => {
+          // 'Radius' is kept mostly for v1->v2 localstorage transition
+          const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
+          this[key + 'RadiusLocal'] = v
+        })
+      }
+
+      if (!this.keepShadows) {
+        this.clearShadows()
+        this.shadowsLocal = shadows
+        this.shadowSelected = this.shadowsAvailable[0]
+      }
+
+      if (!this.keepFonts) {
+        this.clearFonts()
+        this.fontsLocal = fonts
+      }
+
+      if (opacity && !this.keepOpacity) {
+        this.clearOpacity()
+        Object.entries(opacity).forEach(([k, v]) => {
+          if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
+          this[k + 'OpacityLocal'] = v
+        })
+      }
     }
   },
   watch: {
+    currentRadii () {
+      try {
+        this.previewRadii = generateRadii({ radii: this.currentRadii })
+        this.radiiInvalid = false
+      } catch (e) {
+        this.radiiInvalid = true
+        console.warn(e)
+      }
+    },
+    shadowsLocal: {
+      handler () {
+        try {
+          this.previewShadows = generateShadows({ shadows: this.shadowsLocal })
+          this.shadowsInvalid = false
+        } catch (e) {
+          this.shadowsInvalid = true
+          console.warn(e)
+        }
+      },
+      deep: true
+    },
+    fontsLocal: {
+      handler () {
+        try {
+          this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+          this.fontsInvalid = false
+        } catch (e) {
+          this.fontsInvalid = true
+          console.warn(e)
+        }
+      },
+      deep: true
+    },
+    currentColors () {
+      try {
+        this.previewColors = generateColors({
+          opacity: this.currentOpacity,
+          colors: this.currentColors
+        })
+        this.colorsInvalid = false
+      } catch (e) {
+        this.colorsInvalid = true
+        console.warn(e)
+      }
+    },
+    currentOpacity () {
+      try {
+        this.previewColors = generateColors({
+          opacity: this.currentOpacity,
+          colors: this.currentColors
+        })
+      } catch (e) {
+        console.warn(e)
+      }
+    },
     selected () {
-      this.bgColorLocal = this.selected[1]
-      this.btnColorLocal = this.selected[2]
-      this.textColorLocal = this.selected[3]
-      this.linkColorLocal = this.selected[4]
-      this.redColorLocal = this.selected[5]
-      this.greenColorLocal = this.selected[6]
-      this.blueColorLocal = this.selected[7]
-      this.orangeColorLocal = this.selected[8]
+      if (this.selectedVersion === 1) {
+        if (!this.keepRoundness) {
+          this.clearRoundness()
+        }
+
+        if (!this.keepShadows) {
+          this.clearShadows()
+        }
+
+        if (!this.keepOpacity) {
+          this.clearOpacity()
+        }
+
+        if (!this.keepColor) {
+          this.clearV1()
+
+          this.bgColorLocal = this.selected[1]
+          this.fgColorLocal = this.selected[2]
+          this.textColorLocal = this.selected[3]
+          this.linkColorLocal = this.selected[4]
+          this.cRedColorLocal = this.selected[5]
+          this.cGreenColorLocal = this.selected[6]
+          this.cBlueColorLocal = this.selected[7]
+          this.cOrangeColorLocal = this.selected[8]
+        }
+      } else if (this.selectedVersion >= 2) {
+        this.normalizeLocalState(this.selected.theme, 2)
+      }
     }
   }
 }

src/components/style_switcher/style_switcher.scss

@@ -0,0 +1,335 @@
+@import '../../_variables.scss';
+.style-switcher {
+  .preset-switcher {
+    margin-right: 1em;
+  }
+
+  .style-control {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 5px;
+
+    .label {
+      flex: 1;
+    }
+
+    &.disabled {
+      input, select {
+        &:not(.exclude-disabled) {
+          opacity: .5
+        }
+      }
+    }
+
+    input, select {
+      min-width: 3em;
+      margin: 0;
+      flex: 0;
+
+      &[type=color] {
+        padding: 1px;
+        cursor: pointer;
+        height: 29px;
+        min-width: 2em;
+        border: none;
+        align-self: stretch;
+      }
+
+      &[type=number] {
+        min-width: 5em;
+      }
+
+      &[type=range] {
+        flex: 1;
+        min-width: 3em;
+      }
+
+      &[type=checkbox] + label {
+        margin: 6px 0;
+      }
+
+      &:not([type=number]):not([type=text]) {
+        align-self: flex-start;
+      }
+    }
+  }
+
+  .tab-switcher {
+    margin: 0 -1em;
+  }
+
+  .reset-container {
+    flex-wrap: wrap;
+  }
+
+  .fonts-container,
+  .reset-container,
+  .apply-container,
+  .radius-container,
+  .color-container,
+  {
+    display: flex;
+  }
+
+  .fonts-container,
+  .radius-container {
+    flex-direction: column;
+  }
+
+  .color-container{
+    > h4 {
+      width: 99%;
+    }
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .fonts-container,
+  .color-container,
+  .shadow-container,
+  .radius-container,
+  .presets-container {
+    margin: 1em 1em 0;
+  }
+
+  .tab-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    width: 100%;
+    min-height: 30px;
+
+    .btn {
+      min-width: 1px;
+      flex: 0 auto;
+      padding: 0 1em;
+    }
+
+    p {
+      flex: 1;
+      margin: 0;
+      margin-right: .5em;
+    }
+
+    margin-bottom: 1em;
+  }
+
+  .shadow-selector {
+    .override {
+      flex: 1;
+      margin-left: .5em;
+    }
+    .select-container {
+      margin-top: -4px;
+      margin-bottom: -3px;
+    }
+  }
+
+  .save-load,
+  .save-load-options {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    flex-wrap: wrap;
+
+    .presets,
+    .import-export {
+      margin-bottom: .5em;
+    }
+
+    .import-export {
+      display: flex;
+    }
+
+    .override {
+      margin-left: .5em;
+    }
+  }
+
+  .save-load-options {
+    flex-wrap: wrap;
+    margin-top: .5em;
+    justify-content: center;
+    .keep-option {
+      margin: 0 .5em .5em;
+      min-width: 25%;
+    }
+  }
+
+  .preview-container {
+    border-top: 1px dashed;
+    border-bottom: 1px dashed;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    margin: 1em -1em 0;
+    padding: 1em;
+    background: var(--body-background-image);
+    background-size: cover;
+    background-position: 50% 50%;
+
+    .dummy {
+      .post {
+        font-family: var(--postFont);
+        display: flex;
+
+        .content {
+          flex: 1;
+
+          h4 {
+            margin-bottom: .25em;
+          }
+
+          .icons {
+            margin-top: .5em;
+            display: flex;
+
+            i {
+              margin-right: 1em;
+            }
+          }
+        }
+      }
+
+      .after-post {
+        margin-top: 1em;
+        display: flex;
+        align-items: center;
+      }
+
+      .avatar, .avatar-alt{
+        background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
+        color: black;
+        font-family: sans-serif;
+        text-align: center;
+        margin-right: 1em;
+      }
+
+      .avatar-alt {
+        flex: 0 auto;
+        margin-left: 28px;
+        font-size: 12px;
+        min-width: 20px;
+        min-height: 20px;
+        line-height: 20px;
+        border-radius: $fallback--avatarAltRadius;
+        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      }
+
+      .avatar {
+        flex: 0 auto;
+        width: 48px;
+        height: 48px;
+        font-size: 14px;
+        line-height: 48px;
+      }
+
+      .actions {
+        display: flex;
+        align-items: baseline;
+
+        .checkbox {
+          display: inline-flex;
+          align-items: baseline;
+          margin-right: 1em;
+          flex: 1;
+        }
+      }
+
+      .separator {
+        margin: 1em;
+        border-bottom: 1px solid;
+        border-color: $fallback--border;
+        border-color: var(--border, $fallback--border);
+      }
+
+      .panel-heading {
+        .badge, .alert, .btn, .faint {
+          margin-left: 1em;
+          white-space: nowrap;
+        }
+        .faint {
+          text-overflow: ellipsis;
+          min-width: 2em;
+          overflow-x: hidden;
+        }
+        .flex-spacer {
+          flex: 1;
+        }
+      }
+      .btn {
+        margin-left: 0;
+        padding: 0 1em;
+        min-width: 3em;
+        min-height: 30px;
+      }
+    }
+  }
+
+  .apply-container {
+    justify-content: center;
+  }
+
+  .radius-item,
+  .color-item {
+    min-width: 20em;
+    margin: 5px 6px 0 0;
+    display:flex;
+    flex-direction: column;
+    flex: 1 1 0;
+
+    &.wide {
+      min-width: 60%
+    }
+
+    &:not(.wide):nth-child(2n+1) {
+      margin-right: 7px;
+
+    }
+
+    .color, .opacity {
+      display:flex;
+      align-items: baseline;
+    }
+  }
+
+  .radius-item {
+    flex-basis: auto;
+  }
+
+  .theme-radius-rn,
+  .theme-color-cl {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+    color: var(--faint, $fallback--faint);
+    align-self: stretch;
+  }
+
+  .theme-color-cl,
+  .theme-radius-in,
+  .theme-color-in {
+    margin-left: 4px;
+  }
+
+  .theme-radius-in {
+    min-width: 1em;
+  }
+
+  .theme-radius-in {
+    max-width: 7em;
+    flex: 1;
+  }
+
+  .theme-radius-lb{
+    max-width: 50em;
+  }
+
+  .theme-preview-content {
+    padding: 20px;
+  }
+
+  .btn {
+    margin-left: .25em;
+    margin-right: .25em;
+  }
+}

src/components/style_switcher/style_switcher.vue

@@ -1,300 +1,276 @@
 <template>
-<div>
+<div class="style-switcher">
   <div class="presets-container">
-    <div>
-      {{$t('settings.presets')}}
-      <label for="style-switcher" class='select'>
-        <select id="style-switcher" v-model="selected" class="style-switcher">
-          <option v-for="style in availableStyles"
-                  :value="style"
-                  :style="{
-                          backgroundColor: style[1],
-                          color: style[3]
-                          }">
-            {{style[0]}}
-          </option>
-        </select>
-        <i class="icon-down-open"/>
-      </label>
+    <div class="save-load">
+      <export-import
+        :exportObject='exportedTheme'
+        :exportLabel='$t("settings.export_theme")'
+        :importLabel='$t("settings.import_theme")'
+        :importFailedText='$t("settings.invalid_theme_imported")'
+        :onImport='onImport'
+        :validator='importValidator'>
+        <template slot="before">
+          <div class="presets">
+            {{$t('settings.presets')}}
+            <label for="preset-switcher" class='select'>
+              <select id="preset-switcher" v-model="selected" class="preset-switcher">
+                <option v-for="style in availableStyles"
+                        :value="style"
+                        :style="{
+                                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="import-export">
-      <button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
-      <button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
-      <p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
+    <div class="save-load-options">
+      <span class="keep-option">
+        <input
+          id="keep-color"
+          type="checkbox"
+          v-model="keepColor">
+        <label for="keep-color">{{$t('settings.style.switcher.keep_color')}}</label>
+      </span>
+      <span class="keep-option">
+        <input
+          id="keep-shadows"
+          type="checkbox"
+          v-model="keepShadows">
+        <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label>
+      </span>
+      <span class="keep-option">
+        <input
+          id="keep-opacity"
+          type="checkbox"
+          v-model="keepOpacity">
+        <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label>
+      </span>
+      <span class="keep-option">
+        <input
+          id="keep-roundness"
+          type="checkbox"
+          v-model="keepRoundness">
+        <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
+      </span>
+      <span class="keep-option">
+        <input
+          id="keep-fonts"
+          type="checkbox"
+          v-model="keepFonts">
+        <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="preview-container">
-    <div :style="{
-                 '--btnRadius': btnRadiusLocal + 'px',
-                 '--inputRadius': inputRadiusLocal + 'px',
-                 '--panelRadius': panelRadiusLocal + 'px',
-                 '--avatarRadius': avatarRadiusLocal + 'px',
-                 '--avatarAltRadius': avatarAltRadiusLocal + 'px',
-                 '--tooltipRadius': tooltipRadiusLocal + 'px',
-                 '--attachmentRadius': attachmentRadiusLocal + 'px'
-                 }">
-      <div class="panel dummy">
-        <div class="panel-heading" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Preview</div>
-        <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
-          <div class="avatar" :style="{
-                                      'border-radius': avatarRadiusLocal + 'px'
-                                      }">
-            ( ͡° ͜ʖ ͡°)
-          </div>
-          <h4>Content</h4>
-          <br>
-          A bunch of more content and
-          <a :style="{ color: linkColorLocal }">a nice lil' link</a>
-          <i :style="{ color: blueColorLocal }" class="icon-reply"/>
-          <i :style="{ color: greenColorLocal }" class="icon-retweet"/>
-          <i :style="{ color: redColorLocal }" class="icon-cancel"/>
-          <i :style="{ color: orangeColorLocal }" class="icon-star"/>
-          <br>
-          <button class="btn" :style="{ 'background-color': btnColorLocal, 'color': textColorLocal }">Button</button>
+    <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>
-  </div>
 
-  <div class="color-container">
-    <p>{{$t('settings.theme_help')}}</p>
-    <div class="color-item">
-      <label for="bgcolor" class="theme-color-lb">{{$t('settings.background')}}</label>
-      <input id="bgcolor" class="theme-color-cl" type="color" v-model="bgColorLocal">
-      <input id="bgcolor-t" class="theme-color-in" type="text" v-model="bgColorLocal">
-    </div>
-    <div class="color-item">
-      <label for="fgcolor" class="theme-color-lb">{{$t('settings.foreground')}}</label>
-      <input id="fgcolor" class="theme-color-cl" type="color" v-model="btnColorLocal">
-      <input id="fgcolor-t" class="theme-color-in" type="text" v-model="btnColorLocal">
-    </div>
-    <div class="color-item">
-      <label for="textcolor" class="theme-color-lb">{{$t('settings.text')}}</label>
-      <input id="textcolor" class="theme-color-cl" type="color" v-model="textColorLocal">
-      <input id="textcolor-t" class="theme-color-in" type="text" v-model="textColorLocal">
-    </div>
-    <div class="color-item">
-      <label for="linkcolor" class="theme-color-lb">{{$t('settings.links')}}</label>
-      <input id="linkcolor" class="theme-color-cl" type="color" v-model="linkColorLocal">
-      <input id="linkcolor-t" class="theme-color-in" type="text" v-model="linkColorLocal">
-    </div>
-    <div class="color-item">
-      <label for="redcolor" class="theme-color-lb">{{$t('settings.cRed')}}</label>
-      <input id="redcolor" class="theme-color-cl" type="color" v-model="redColorLocal">
-      <input id="redcolor-t" class="theme-color-in" type="text" v-model="redColorLocal">
-    </div>
-    <div class="color-item">
-      <label for="bluecolor" class="theme-color-lb">{{$t('settings.cBlue')}}</label>
-      <input id="bluecolor" class="theme-color-cl" type="color" v-model="blueColorLocal">
-      <input id="bluecolor-t" class="theme-color-in" type="text" v-model="blueColorLocal">
-    </div>
-    <div class="color-item">
-      <label for="greencolor" class="theme-color-lb">{{$t('settings.cGreen')}}</label>
-      <input id="greencolor" class="theme-color-cl" type="color" v-model="greenColorLocal">
-      <input id="greencolor-t" class="theme-color-in" type="green" v-model="greenColorLocal">
-    </div>
-    <div class="color-item">
-      <label for="orangecolor" class="theme-color-lb">{{$t('settings.cOrange')}}</label>
-      <input id="orangecolor" class="theme-color-cl" type="color" v-model="orangeColorLocal">
-      <input id="orangecolor-t" class="theme-color-in" type="text" v-model="orangeColorLocal">
-    </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 class="radius-container">
-    <p>{{$t('settings.radii_help')}}</p>
-    <div class="radius-item">
-      <label for="btnradius" class="theme-radius-lb">{{$t('settings.btnRadius')}}</label>
-      <input id="btnradius" class="theme-radius-rn" type="range" v-model="btnRadiusLocal" max="16">
-      <input id="btnradius-t" class="theme-radius-in" type="text" v-model="btnRadiusLocal">
-    </div>
-    <div class="radius-item">
-      <label for="inputradius" class="theme-radius-lb">{{$t('settings.inputRadius')}}</label>
-      <input id="inputradius" class="theme-radius-rn" type="range" v-model="inputRadiusLocal" max="16">
-      <input id="inputradius-t" class="theme-radius-in" type="text" v-model="inputRadiusLocal">
-    </div>
-    <div class="radius-item">
-      <label for="panelradius" class="theme-radius-lb">{{$t('settings.panelRadius')}}</label>
-      <input id="panelradius" class="theme-radius-rn" type="range" v-model="panelRadiusLocal" max="50">
-      <input id="panelradius-t" class="theme-radius-in" type="text" v-model="panelRadiusLocal">
-    </div>
-    <div class="radius-item">
-      <label for="avatarradius" class="theme-radius-lb">{{$t('settings.avatarRadius')}}</label>
-      <input id="avatarradius" class="theme-radius-rn" type="range" v-model="avatarRadiusLocal" max="28">
-      <input id="avatarradius-t" class="theme-radius-in" type="green" v-model="avatarRadiusLocal">
-    </div>
-    <div class="radius-item">
-      <label for="avataraltradius" class="theme-radius-lb">{{$t('settings.avatarAltRadius')}}</label>
-      <input id="avataraltradius" class="theme-radius-rn" type="range" v-model="avatarAltRadiusLocal" max="28">
-      <input id="avataraltradius-t" class="theme-radius-in" type="text" v-model="avatarAltRadiusLocal">
-    </div>
-    <div class="radius-item">
-      <label for="attachmentradius" class="theme-radius-lb">{{$t('settings.attachmentRadius')}}</label>
-      <input id="attachmentrradius" class="theme-radius-rn" type="range" v-model="attachmentRadiusLocal" max="50">
-      <input id="attachmentradius-t" class="theme-radius-in" type="text" v-model="attachmentRadiusLocal">
-    </div>
-    <div class="radius-item">
-      <label for="tooltipradius" class="theme-radius-lb">{{$t('settings.tooltipRadius')}}</label>
-      <input id="tooltipradius" class="theme-radius-rn" type="range" v-model="tooltipRadiusLocal" max="20">
-      <input id="tooltipradius-t" class="theme-radius-in" type="text" v-model="tooltipRadiusLocal">
-    </div>
-  </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" @click="setCustomTheme">{{$t('general.apply')}}</button>
+    <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>
 
-<style lang="scss">
-@import '../../_variables.scss';
-.style-switcher {
-  margin-right: 1em;
-}
-
-.import-warning {
-  color: $fallback--cRed;
-  color: var(--cRed, $fallback--cRed);
-}
-
-.apply-container,
-.radius-container,
-.color-container,
-.presets-container {
-  display: flex;
-
-  p {
-    flex: 2 0 100%;
-    margin-top: 2em;
-    margin-bottom: .5em;
-  }
-}
-
-.radius-container {
-  flex-direction: column;
-}
-
-.color-container {
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.presets-container {
-  justify-content: center;
-  .import-export {
-    display: flex;
-
-    .btn {
-      margin-left: .5em;
-    }
-  }
-}
-
-.preview-container {
-  border-top: 1px dashed;
-  border-bottom: 1px dashed;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  margin: 1em -1em 0;
-  padding: 1em;
-
-  .btn {
-    margin-top: 1em;
-    min-height: 30px;
-    width: 10em;
-  }
-}
-
-.apply-container {
-  justify-content: center;
-}
-
-.radius-item,
-.color-item {
-  min-width: 20em;
-  display:flex;
-  flex: 1 1 0;
-  align-items: baseline;
-  margin: 5px 6px 5px 0;
-
-  label {
-    color: var(--faint, $fallback--faint);
-  }
-}
-
-.radius-item {
-  flex-basis: auto;
-}
-
-.theme-radius-rn,
-.theme-color-cl {
-  border: 0;
-  box-shadow: none;
-  background: transparent;
-  color: var(--faint, $fallback--faint);
-  align-self: stretch;
-}
-
-.theme-color-cl,
-.theme-radius-in,
-.theme-color-in {
-  margin-left: 4px;
-}
-
-.theme-color-in {
-  min-width: 4em;
-}
-
-.theme-radius-in {
-  min-width: 1em;
-}
-
-.theme-radius-in,
-.theme-color-in {
-  max-width: 7em;
-  flex: 1;
-}
-
-.theme-radius-lb,
-.theme-color-lb {
-  flex: 2;
-  min-width: 7em;
-}
-
-.theme-radius-lb{
-  max-width: 50em;
-}
-
-.theme-color-lb {
-  max-width: 10em;
-}
-
-.theme-color-cl {
-  padding: 1px;
-  max-width: 8em;
-  height: 100%;
-  flex: 0;
-  min-width: 2em;
-  cursor: pointer;
-  max-height: 29px;
-}
-
-.theme-preview-content {
-  padding: 20px;
-}
-
-.dummy {
-  .avatar {
-    background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
-    color: black;
-    text-align: center;
-    height: 48px;
-    line-height: 48px;
-    width: 48px;
-    float: left;
-    margin-right: 1em;
-  }
-}
-</style>
+<style src="./style_switcher.scss" lang="scss"></style>

src/components/tab_switcher/tab_switcher.jsx

@@ -25,11 +25,14 @@ export default Vue.component('tab-switcher', {
             }
             return (<button onClick={this.activateTab(index)} class={ classes.join(' ') }>{slot.data.attrs.label}</button>)
           });
-    const contents = (
-      <div>
-        {this.$slots.default.filter(slot => slot.data)[this.active]}
-      </div>
-    );
+    const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => {
+      const active = index === this.active
+      return (
+        <div class={active ? 'active' : 'hidden'}>
+          {slot}
+        </div>
+      )
+    });
     return (
       <div class="tab-switcher">
         <div class="tabs">

src/components/tab_switcher/tab_switcher.scss

@@ -1,13 +1,21 @@
 @import '../../_variables.scss';
 
 .tab-switcher {
+  .contents {
+    .hidden {
+      display: none;
+    }
+  }
   .tabs {
     display: flex;
     position: relative;
     justify-content: center;
     width: 100%;
-    overflow: hidden;
+    overflow-y: hidden;
+    overflow-x: auto;
     padding-top: 5px;
+    height: 32px;
+    box-sizing: border-box;
 
     &::after, &::before {
       display: block;
@@ -17,20 +25,34 @@
 
     .tab, &::after, &::before {
       border-bottom: 1px solid;
-      border-bottom-color: $fallback--btn;
-      border-bottom-color: var(--btn, $fallback--btn);
+      border-bottom-color: $fallback--border;
+      border-bottom-color: var(--border, $fallback--border);
     }
 
     .tab {
+      position: relative;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
-      padding: .3em 1em;
+      padding: 5px 1em 99px;
+      white-space: nowrap;
 
       &:not(.active) {
-        border-bottom: 1px solid;
-        border-bottom-color: $fallback--btn;
-        border-bottom-color: var(--btn, $fallback--btn);
         z-index: 4;
+
+        &:hover {
+          z-index: 6;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 26px;
+          border-bottom: 1px solid;
+          border-bottom-color: $fallback--border;
+          border-bottom-color: var(--border, $fallback--border);
+        }
       }
 
       &.active {

src/components/timeline/timeline.vue

@@ -10,7 +10,7 @@
       <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.show_new')}}{{newStatusCountStr}}
       </button>
-      <div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
+      <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.up_to_date')}}
       </div>
     </div>
@@ -58,15 +58,7 @@
 
 .timeline {
   .loadmore-text {
-    opacity: 0.8;
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
-  }
-
-  .loadmore-error {
-    color: $fallback--fg;
-    color: var(--fg, $fallback--fg);
+    opacity: 1;
   }
 }
 
@@ -79,7 +71,7 @@
   border-color: var(--border, $fallback--border);
   padding: 10px;
   z-index: 1;
-  background-color: $fallback--btn;
-  background-color: var(--btn, $fallback--btn);
+  background-color: $fallback--fg;
+  background-color: var(--panel, $fallback--fg);
 }
 </style>

src/components/user_card/user_card.vue

@@ -19,7 +19,9 @@
           {{ $t('user_card.follows_you') }}
         </span>
       </div>
-      <a :href="user.statusnet_profile_url" target="blank"><div class="user-screen-name">@{{ user.screen_name }}</div></a>
+      <router-link class='user-screen-name' :to="{ name: 'user-profile', params: { id: user.id } }">
+        @{{user.screen_name}}
+      </router-link>
     </div>
     <div class="approval" v-if="showApproval">
       <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>

src/components/user_card_content/user_card_content.js

@@ -2,12 +2,23 @@ import StillImage from '../still-image/still-image.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 export default {
-  props: [ 'user', 'switcher', 'selected', 'hideBio' ],
+  props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ],
+  data () {
+    return {
+      hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined'
+        ? this.$store.state.instance.hideUserStats
+        : this.$store.state.config.hideUserStats,
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter
+    }
+  },
   computed: {
     headingStyle () {
-      const color = this.$store.state.config.colors.bg
+      const color = this.$store.state.config.customTheme.colors
+            ? this.$store.state.config.customTheme.colors.bg  // v2
+            : this.$store.state.config.colors.bg // v1
+
       if (color) {
-        const rgb = hex2rgb(color)
+        const rgb = (typeof color === 'string') ? hex2rgb(color) : color
         const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
         return {
           backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
@@ -91,6 +102,14 @@ export default {
         const store = this.$store
         store.commit('setProfileView', { v })
       }
+    },
+    linkClicked ({target}) {
+      if (target.tagName === 'SPAN') {
+        target = target.parentNode
+      }
+      if (target.tagName === 'A') {
+        window.open(target.href, '_blank')
+      }
     }
   }
 }

src/components/user_card_content/user_card_content.vue

@@ -2,22 +2,22 @@
 <div id="heading" class="profile-panel-background" :style="headingStyle">
   <div class="panel-heading text-center">
     <div class='user-info'>
-      <router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
-        <i class="icon-cog usersettings"></i>
+      <router-link @click.native="activatePanel('timeline')" to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
+        <i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
       </router-link>
       <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
         <i class="icon-link-ext usersettings"></i>
       </a>
       <div class='container'>
         <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
-          <StillImage class="avatar" :src="user.profile_image_url_original"/>
+          <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
         </router-link>
         <div class="name-and-screen-name">
           <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
           <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
           <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
             <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
-            <span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
+            <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
         </div>
       </div>
@@ -41,74 +41,74 @@
         </div>
       </div>
       <div v-if="isOtherUser" class="user-interactions">
-          <div class="follow" v-if="loggedIn">
-            <span v-if="user.following">
-              <!--Following them!-->
-              <button @click="unfollowUser" class="pressed">
-                {{ $t('user_card.following') }}
-              </button>
-            </span>
-            <span v-if="!user.following">
-              <button @click="followUser">
-                {{ $t('user_card.follow') }}
-              </button>
-            </span>
-          </div>
-          <div class='mute' v-if='isOtherUser'>
-            <span v-if='user.muted'>
-              <button @click="toggleMute" class="pressed">
-                {{ $t('user_card.muted') }}
-              </button>
-            </span>
-            <span v-if='!user.muted'>
-              <button @click="toggleMute">
-                {{ $t('user_card.mute') }}
-              </button>
-            </span>
-          </div>
-          <div class="remote-follow" v-if='!loggedIn && user.is_local'>
-            <form method="POST" :action='subscribeUrl'>
-              <input type="hidden" name="nickname" :value="user.screen_name">
-              <input type="hidden" name="profile" value="">
-              <button click="submit" class="remote-button">
-                {{ $t('user_card.remote_follow') }}
-              </button>
-            </form>
-          </div>
-          <div class='block' v-if='isOtherUser && loggedIn'>
-            <span v-if='user.statusnet_blocking'>
-              <button @click="unblockUser" class="pressed">
-                {{ $t('user_card.blocked') }}
-              </button>
-            </span>
-            <span v-if='!user.statusnet_blocking'>
-              <button @click="blockUser">
-                {{ $t('user_card.block') }}
-              </button>
-            </span>
-          </div>
+        <div class="follow" v-if="loggedIn">
+          <span v-if="user.following">
+            <!--Following them!-->
+            <button @click="unfollowUser" class="pressed">
+              {{ $t('user_card.following') }}
+            </button>
+          </span>
+          <span v-if="!user.following">
+            <button @click="followUser">
+              {{ $t('user_card.follow') }}
+            </button>
+          </span>
+        </div>
+        <div class='mute' v-if='isOtherUser'>
+          <span v-if='user.muted'>
+            <button @click="toggleMute" class="pressed">
+              {{ $t('user_card.muted') }}
+            </button>
+          </span>
+          <span v-if='!user.muted'>
+            <button @click="toggleMute">
+              {{ $t('user_card.mute') }}
+            </button>
+          </span>
+        </div>
+        <div class="remote-follow" v-if='!loggedIn && user.is_local'>
+          <form method="POST" :action='subscribeUrl'>
+            <input type="hidden" name="nickname" :value="user.screen_name">
+            <input type="hidden" name="profile" value="">
+            <button click="submit" class="remote-button">
+              {{ $t('user_card.remote_follow') }}
+            </button>
+          </form>
+        </div>
+        <div class='block' v-if='isOtherUser && loggedIn'>
+          <span v-if='user.statusnet_blocking'>
+            <button @click="unblockUser" class="pressed">
+              {{ $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 class="panel-body profile-panel-body">
-      <div class="user-counts" :class="{clickable: switcher}">
-        <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
-          <h5>{{ $t('user_card.statuses') }}</h5>
-          <span>{{user.statuses_count}} <br></span>
-        </div>
-        <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
-          <h5>{{ $t('user_card.followees') }}</h5>
-          <span>{{user.friends_count}}</span>
-        </div>
-        <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
-          <h5>{{ $t('user_card.followers') }}</h5>
-          <span>{{user.followers_count}}</span>
-        </div>
-      </div>
-      <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
-      <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
-    </div>
   </div>
+  <div class="panel-body profile-panel-body">
+    <div v-if="!hideUserStatsLocal || switcher" class="user-counts" :class="{clickable: switcher}">
+      <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
+        <h5>{{ $t('user_card.statuses') }}</h5>
+        <span v-if="!hideUserStatsLocal">{{user.statuses_count}} <br></span>
+      </div>
+      <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
+        <h5>{{ $t('user_card.followees') }}</h5>
+        <span v-if="!hideUserStatsLocal">{{user.friends_count}}</span>
+      </div>
+      <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
+        <h5>{{ $t('user_card.followers') }}</h5>
+        <span v-if="!hideUserStatsLocal">{{user.followers_count}}</span>
+      </div>
+    </div>
+    <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
+    <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
+  </div>
+</div>
 </template>
 
 <script src="./user_card_content.js"></script>
@@ -120,10 +120,12 @@
   background-size: cover;
   border-radius: $fallback--panelRadius;
   border-radius: var(--panelRadius, $fallback--panelRadius);
+  overflow: hidden;
 
   .panel-heading {
     padding: 0.6em 0em;
     text-align: center;
+    box-shadow: none;
   }
 }
 
@@ -138,15 +140,14 @@
 }
 
 .user-info {
-  color: $fallback--lightFg;
-  color: var(--lightFg, $fallback--lightFg);
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
   padding: 0 16px;
 
   .container {
     padding: 16px 10px 6px 10px;
     display: flex;
     max-height: 56px;
-    overflow: hidden;
 
     .avatar {
       border-radius: $fallback--avatarRadius;
@@ -155,8 +156,14 @@
       width: 56px;
       height: 56px;
       box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
+      box-shadow: var(--avatarShadow);
       object-fit: cover;
 
+      &.better-shadow {
+        box-shadow: var(--avatarShadowInset);
+        filter: var(--avatarShadowFilter)
+      }
+
       &.animated::before {
         display: none;
       }
@@ -173,8 +180,8 @@
   }
 
   .usersettings {
-    color: $fallback--lightFg;
-    color: var(--lightFg, $fallback--lightFg);
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
     opacity: .8;
   }
 
@@ -185,6 +192,16 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1 1 0;
+    // This is so that text doesn't get overlapped by avatar's shadow if it has
+    // big one
+    z-index: 1;
+
+    img {
+      width: 26px;
+      height: 26px;
+      vertical-align: middle;
+      object-fit: contain
+    }
   }
 
   .user-name{
@@ -193,8 +210,8 @@
   }
 
   .user-screen-name {
-    color: $fallback--lightFg;
-    color: var(--lightFg, $fallback--lightFg);
+    color: $fallback--lightText;
+    color: var(--lightText, $fallback--lightText);
     display: inline-block;
     font-weight: light;
     font-size: 15px;
@@ -269,8 +286,8 @@
   padding: .5em 1.5em 0em 1.5em;
   text-align: center;
   justify-content: space-between;
-  color: $fallback--lightFg;
-  color: var(--lightFg, $fallback--lightFg);
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
 
   &.clickable {
     .user-count {

src/components/user_finder/user_finder.js

@@ -7,25 +7,10 @@ const UserFinder = {
   }),
   methods: {
     findUser (username) {
-      username = username[0] === '@' ? username.slice(1) : username
-      this.loading = true
-      this.$store.state.api.backendInteractor.externalProfile(username)
-        .then((user) => {
-          this.loading = false
-          this.hidden = true
-          if (!user.error) {
-            this.$store.commit('addNewUsers', [user])
-            this.$router.push({name: 'user-profile', params: {id: user.id}})
-          } else {
-            this.error = true
-          }
-        })
+      this.$router.push({ name: 'user-search', query: { query: username } })
     },
     toggleHidden () {
       this.hidden = !this.hidden
-    },
-    dismissError () {
-      this.error = false
     }
   }
 }

src/components/user_finder/user_finder.vue

@@ -1,11 +1,7 @@
 <template>
   <span class="user-finder-container">
-    <span class="alert error" v-if="error">
-      <i class="icon-cancel user-finder-icon" @click="dismissError"/>
-      {{$t('finder.error_fetching_user')}}
-    </span>
     <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
-    <a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden"/></a>
+    <a href="#" v-if="hidden"  :title="$t('finder.find_user')" ><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
     <span v-else>
       <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
       <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>

src/components/user_panel/user_panel.js

@@ -3,6 +3,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 
 const UserPanel = {
+  props: [ 'activatePanel' ],
   computed: {
     user () { return this.$store.state.users.currentUser }
   },

src/components/user_panel/user_panel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-panel">
     <div v-if='user' class="panel panel-default" style="overflow: visible;">
-      <user-card-content :user="user" :switcher="false" :hideBio="true"></user-card-content>
+      <user-card-content :activatePanel="activatePanel" :user="user" :switcher="false" :hideBio="true"></user-card-content>
       <div class="panel-footer">
         <post-status-form v-if='user'></post-status-form>
       </div>

src/components/user_profile/user_profile.js

@@ -27,6 +27,7 @@ const UserProfile = {
   },
   watch: {
     userId () {
+      this.$store.dispatch('stopFetching', 'user')
       this.$store.commit('clearTimeline', { timeline: 'user' })
       this.$store.dispatch('startFetching', ['user', this.userId])
     }

src/components/user_search/user_search.js

@@ -0,0 +1,33 @@
+import UserCard from '../user_card/user_card.vue'
+import userSearchApi from '../../services/new_api/user_search.js'
+const userSearch = {
+  components: {
+    UserCard
+  },
+  props: [
+    'query'
+  ],
+  data () {
+    return {
+      users: []
+    }
+  },
+  mounted () {
+    this.search(this.query)
+  },
+  watch: {
+    query (newV) {
+      this.search(newV)
+    }
+  },
+  methods: {
+    search (query) {
+      userSearchApi.search({query, store: this.$store})
+        .then((res) => {
+          this.users = res
+        })
+    }
+  }
+}
+
+export default userSearch

src/components/user_search/user_search.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="user-search panel panel-default">
+    <div class="panel-heading">
+      {{$t('nav.user_search')}}
+    </div>
+    <div class="panel-body">
+      <user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card>
+    </div>
+  </div>
+</template>
+
+<script src="./user_search.js"></script>

src/components/user_settings/user_settings.js

@@ -7,6 +7,7 @@ const UserSettings = {
       newname: this.$store.state.users.currentUser.name,
       newbio: this.$store.state.users.currentUser.description,
       newlocked: this.$store.state.users.currentUser.locked,
+      newnorichtext: this.$store.state.users.currentUser.no_rich_text,
       newdefaultScope: this.$store.state.users.currentUser.default_scope,
       followList: null,
       followImportError: false,
@@ -32,10 +33,10 @@ const UserSettings = {
       return this.$store.state.users.currentUser
     },
     pleromaBackend () {
-      return this.$store.state.config.pleromaBackend
+      return this.$store.state.instance.pleromaBackend
     },
     scopeOptionsEnabled () {
-      return this.$store.state.config.scopeOptionsEnabled
+      return this.$store.state.instance.scopeOptionsEnabled
     },
     vis () {
       return {
@@ -53,7 +54,8 @@ const UserSettings = {
       const locked = this.newlocked
       /* eslint-disable camelcase */
       const default_scope = this.newdefaultScope
-      this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked, default_scope}}).then((user) => {
+      const no_rich_text = this.newnorichtext
+      this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked, default_scope, no_rich_text}}).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
@@ -233,6 +235,7 @@ const UserSettings = {
           if (res.status === 'success') {
             this.changedPassword = true
             this.changePasswordError = false
+            this.logout()
           } else {
             this.changedPassword = false
             this.changePasswordError = res.error
@@ -241,6 +244,10 @@ const UserSettings = {
     },
     activateTab (tabName) {
       this.activeTab = tabName
+    },
+    logout () {
+      this.$store.dispatch('logout')
+      this.$router.replace('/')
     }
   }
 }

src/components/user_settings/user_settings.vue

@@ -19,12 +19,16 @@
             <div v-if="scopeOptionsEnabled">
               <label for="default-vis">{{$t('settings.default_vis')}}</label>
               <div id="default-vis" class="visibility-tray">
-                <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct"></i>
-                <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private"></i>
-                <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted"></i>
-                <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public"></i>
+                <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')" ></i>
+                <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
+                <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
+                <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
               </div>
             </div>
+            <p>
+              <input type="checkbox" v-model="newnorichtext" id="account-no-rich-text">
+              <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label>
+            </p>
             <button :disabled='newname.length <= 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
           </div>
           <div class="setting-item">

src/components/who_to_follow_panel/who_to_follow_panel.js

@@ -83,14 +83,14 @@ const WhoToFollowPanel = {
     moreUrl: function () {
       var host = window.location.hostname
       var user = this.user
-      var suggestionsWeb = this.$store.state.config.suggestionsWeb
+      var suggestionsWeb = this.$store.state.instance.suggestionsWeb
       var url
       url = suggestionsWeb.replace(/{{host}}/g, encodeURIComponent(host))
       url = url.replace(/{{user}}/g, encodeURIComponent(user))
       return url
     },
     suggestionsEnabled () {
-      return this.$store.state.config.suggestionsEnabled
+      return this.$store.state.instance.suggestionsEnabled
     }
   },
   watch: {

src/components/who_to_follow_panel/who_to_follow_panel.vue

@@ -11,7 +11,7 @@
           <img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
           <img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
           <img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br>
-          <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
+          <img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
         </p>
       </div>
     </div>

src/i18n/ar.json

@@ -0,0 +1,201 @@
+{
+    "chat": {
+        "title": "الدردشة"
+    },
+    "features_panel": {
+        "chat": "الدردشة",
+        "gopher": "غوفر",
+        "media_proxy": "بروكسي الوسائط",
+        "scope_options": "",
+        "text_limit": "الحد الأقصى للنص",
+        "title": "الميّزات",
+        "who_to_follow": "للمتابعة"
+    },
+    "finder": {
+        "error_fetching_user": "خطأ أثناء جلب صفحة المستخدم",
+        "find_user": "البحث عن مستخدِم"
+    },
+    "general": {
+        "apply": "تطبيق",
+        "submit": "إرسال"
+    },
+    "login": {
+        "login": "تسجيل الدخول",
+        "logout": "الخروج",
+        "password": "الكلمة السرية",
+        "placeholder": "مثال lain",
+        "register": "انشاء حساب",
+        "username": "إسم المستخدم"
+    },
+    "nav": {
+        "chat": "الدردشة المحلية",
+        "friend_requests": "طلبات المتابَعة",
+        "mentions": "الإشارات",
+        "public_tl": "الخيط الزمني العام",
+        "timeline": "الخيط الزمني",
+        "twkn": "كافة الشبكة المعروفة"
+    },
+    "notifications": {
+        "broken_favorite": "منشور مجهول، جارٍ البحث عنه…",
+        "favorited_you": "أعجِب بمنشورك",
+        "followed_you": "يُتابعك",
+        "load_older": "تحميل الإشعارات الأقدم",
+        "notifications": "الإخطارات",
+        "read": "مقروء!",
+        "repeated_you": "شارَك منشورك"
+    },
+    "post_status": {
+        "account_not_locked_warning": "",
+        "account_not_locked_warning_link": "مقفل",
+        "attachments_sensitive": "اعتبر المرفقات كلها كمحتوى حساس",
+        "content_type": {
+            "plain_text": "نص صافٍ"
+        },
+        "content_warning": "الموضوع (اختياري)",
+        "default": "وصلت للتوّ إلى لوس أنجلس.",
+        "direct_warning": "",
+        "posting": "النشر",
+        "scope": {
+            "direct": "",
+            "private": "",
+            "public": "علني - يُنشر على الخيوط الزمنية العمومية",
+            "unlisted": "غير مُدرَج - لا يُنشَر على الخيوط الزمنية العمومية"
+        }
+    },
+    "registration": {
+        "bio": "السيرة الذاتية",
+        "email": "عنوان البريد الإلكتروني",
+        "fullname": "الإسم المعروض",
+        "password_confirm": "تأكيد الكلمة السرية",
+        "registration": "التسجيل",
+        "token": "رمز الدعوة"
+    },
+    "settings": {
+        "attachmentRadius": "المُرفَقات",
+        "attachments": "المُرفَقات",
+        "autoload": "",
+        "avatar": "الصورة الرمزية",
+        "avatarAltRadius": "الصور الرمزية (الإشعارات)",
+        "avatarRadius": "الصور الرمزية",
+        "background": "الخلفية",
+        "bio": "السيرة الذاتية",
+        "btnRadius": "الأزرار",
+        "cBlue": "أزرق (الرد، المتابَعة)",
+        "cGreen": "أخضر (إعادة النشر)",
+        "cOrange": "برتقالي (مفضلة)",
+        "cRed": "أحمر (إلغاء)",
+        "change_password": "تغيير كلمة السر",
+        "change_password_error": "وقع هناك خلل أثناء تعديل كلمتك السرية.",
+        "changed_password": "تم تغيير كلمة المرور بنجاح!",
+        "collapse_subject": "",
+        "confirm_new_password": "تأكيد كلمة السر الجديدة",
+        "current_avatar": "صورتك الرمزية الحالية",
+        "current_password": "كلمة السر الحالية",
+        "current_profile_banner": "الرأسية الحالية لصفحتك الشخصية",
+        "data_import_export_tab": "تصدير واستيراد البيانات",
+        "default_vis": "أسلوب العرض الافتراضي",
+        "delete_account": "حذف الحساب",
+        "delete_account_description": "حذف حسابك و كافة منشوراتك نهائيًا.",
+        "delete_account_error": "",
+        "delete_account_instructions": "يُرجى إدخال كلمتك السرية أدناه لتأكيد عملية حذف الحساب.",
+        "export_theme": "حفظ النموذج",
+        "filtering": "التصفية",
+        "filtering_explanation": "سيتم إخفاء كافة المنشورات التي تحتوي على هذه الكلمات، كلمة واحدة في كل سطر",
+        "follow_export": "تصدير الاشتراكات",
+        "follow_export_button": "تصدير الاشتراكات كملف csv",
+        "follow_export_processing": "التصدير جارٍ، سوف يُطلَب منك تنزيل ملفك بعد حين",
+        "follow_import": "استيراد الاشتراكات",
+        "follow_import_error": "خطأ أثناء استيراد المتابِعين",
+        "follows_imported": "",
+        "foreground": "الأمامية",
+        "general": "الإعدادات العامة",
+        "hide_attachments_in_convo": "إخفاء المرفقات على المحادثات",
+        "hide_attachments_in_tl": "إخفاء المرفقات على الخيط الزمني",
+        "hide_post_stats": "",
+        "hide_user_stats": "",
+        "import_followers_from_a_csv_file": "",
+        "import_theme": "تحميل نموذج",
+        "inputRadius": "",
+        "instance_default": "",
+        "interfaceLanguage": "لغة الواجهة",
+        "invalid_theme_imported": "",
+        "limited_availability": "غير متوفر على متصفحك",
+        "links": "الروابط",
+        "lock_account_description": "",
+        "loop_video": "",
+        "loop_video_silent_only": "",
+        "name": "الاسم",
+        "name_bio": "الاسم والسيرة الذاتية",
+        "new_password": "كلمة السر الجديدة",
+        "no_rich_text_description": "",
+        "notification_visibility": "نوع الإشعارات التي تريد عرضها",
+        "notification_visibility_follows": "يتابع",
+        "notification_visibility_likes": "الإعجابات",
+        "notification_visibility_mentions": "الإشارات",
+        "notification_visibility_repeats": "",
+        "nsfw_clickthrough": "",
+        "panelRadius": "",
+        "pause_on_unfocused": "",
+        "presets": "النماذج",
+        "profile_background": "خلفية الصفحة الشخصية",
+        "profile_banner": "رأسية الصفحة الشخصية",
+        "profile_tab": "الملف الشخصي",
+        "radii_help": "",
+        "replies_in_timeline": "الردود على الخيط الزمني",
+        "reply_link_preview": "",
+        "reply_visibility_all": "عرض كافة الردود",
+        "reply_visibility_following": "",
+        "reply_visibility_self": "",
+        "saving_err": "خطأ أثناء حفظ الإعدادات",
+        "saving_ok": "تم حفظ الإعدادات",
+        "security_tab": "الأمان",
+        "set_new_avatar": "اختيار صورة رمزية جديدة",
+        "set_new_profile_background": "اختيار خلفية جديدة للملف الشخصي",
+        "set_new_profile_banner": "اختيار رأسية جديدة للصفحة الشخصية",
+        "settings": "الإعدادات",
+        "stop_gifs": "",
+        "streaming": "",
+        "text": "النص",
+        "theme": "المظهر",
+        "theme_help": "",
+        "tooltipRadius": "",
+        "user_settings": "إعدادات المستخدم",
+        "values": {
+            "false": "لا",
+            "true": "نعم"
+        }
+    },
+    "timeline": {
+        "collapse": "",
+        "conversation": "محادثة",
+        "error_fetching": "خطأ أثناء جلب التحديثات",
+        "load_older": "تحميل المنشورات القديمة",
+        "no_retweet_hint": "",
+        "repeated": "",
+        "show_new": "عرض الجديد",
+        "up_to_date": "تم تحديثه"
+    },
+    "user_card": {
+        "approve": "قبول",
+        "block": "حظر",
+        "blocked": "تم حظره!",
+        "deny": "رفض",
+        "follow": "اتبع",
+        "followees": "",
+        "followers": "مُتابِعون",
+        "following": "",
+        "follows_you": "يتابعك!",
+        "mute": "كتم",
+        "muted": "تم كتمه",
+        "per_day": "في اليوم",
+        "remote_follow": "مُتابَعة عن بُعد",
+        "statuses": "المنشورات"
+    },
+    "user_profile": {
+        "timeline_title": "الخيط الزمني للمستخدم"
+    },
+    "who_to_follow": {
+        "more": "المزيد",
+        "who_to_follow": "للمتابعة"
+    }
+}

src/i18n/ca.json

@@ -0,0 +1,199 @@
+{
+  "chat": {
+    "title": "Xat"
+  },
+  "features_panel": {
+    "chat": "Xat",
+    "gopher": "Gopher",
+    "media_proxy": "Proxy per multimèdia",
+    "scope_options": "Opcions d'abast i visibilitat",
+    "text_limit": "Límit de text",
+    "title": "Funcionalitats",
+    "who_to_follow": "A qui seguir"
+  },
+  "finder": {
+    "error_fetching_user": "No s'ha pogut carregar l'usuari/a",
+    "find_user": "Find user"
+  },
+  "general": {
+    "apply": "Aplica",
+    "submit": "Desa"
+  },
+  "login": {
+    "login": "Inicia sessió",
+    "logout": "Tanca la sessió",
+    "password": "Contrasenya",
+    "placeholder": "p.ex.: Maria",
+    "register": "Registra't",
+    "username": "Nom d'usuari/a"
+  },
+  "nav": {
+    "chat": "Xat local públic",
+    "friend_requests": "Soŀlicituds de connexió",
+    "mentions": "Mencions",
+    "public_tl": "Flux públic del node",
+    "timeline": "Flux personal",
+    "twkn": "Flux de la xarxa coneguda"
+  },
+  "notifications": {
+    "broken_favorite": "No es coneix aquest estat. S'està cercant.",
+    "favorited_you": "ha marcat un estat teu",
+    "followed_you": "ha començat a seguir-te",
+    "load_older": "Carrega més notificacions",
+    "notifications": "Notificacions",
+    "read": "Read!",
+    "repeated_you": "ha repetit el teu estat"
+  },
+  "post_status": {
+    "account_not_locked_warning": "El teu compte no està {0}. Qualsevol persona pot seguir-te per llegir les teves entrades reservades només a seguidores.",
+    "account_not_locked_warning_link": "bloquejat",
+    "attachments_sensitive": "Marca l'adjunt com a delicat",
+    "content_type": {
+      "plain_text": "Text pla"
+    },
+    "content_warning": "Assumpte (opcional)",
+    "default": "Em sento…",
+    "direct_warning": "Aquesta entrada només serà visible per les usuràries que etiquetis",
+    "posting": "Publicació",
+    "scope": {
+      "direct": "Directa - Publica només per les usuàries etiquetades",
+      "private": "Només seguidors/es - Publica només per comptes que et segueixin",
+      "public": "Pública - Publica als fluxos públics",
+      "unlisted": "Silenciosa - No la mostris en fluxos públics"
+    }
+  },
+  "registration": {
+    "bio": "Presentació",
+    "email": "Correu",
+    "fullname": "Nom per mostrar",
+    "password_confirm": "Confirma la contrasenya",
+    "registration": "Registra't",
+    "token": "Codi d'invitació"
+  },
+  "settings": {
+    "attachmentRadius": "Adjunts",
+    "attachments": "Adjunts",
+    "autoload": "Recarrega automàticament en arribar a sota de tot.",
+    "avatar": "Avatar",
+    "avatarAltRadius": "Avatars en les notificacions",
+    "avatarRadius": "Avatars",
+    "background": "Fons de pantalla",
+    "bio": "Presentació",
+    "btnRadius": "Botons",
+    "cBlue": "Blau (respon, segueix)",
+    "cGreen": "Verd (republica)",
+    "cOrange": "Taronja (marca com a preferit)",
+    "cRed": "Vermell (canceŀla)",
+    "change_password": "Canvia la contrasenya",
+    "change_password_error": "No s'ha pogut canviar la contrasenya",
+    "changed_password": "S'ha canviat la contrasenya",
+    "collapse_subject": "Replega les entrades amb títol",
+    "confirm_new_password": "Confirma la nova contrasenya",
+    "current_avatar": "L'avatar actual",
+    "current_password": "La contrasenya actual",
+    "current_profile_banner": "El fons de perfil actual",
+    "data_import_export_tab": "Importa o exporta dades",
+    "default_vis": "Abast per defecte de les entrades",
+    "delete_account": "Esborra el compte",
+    "delete_account_description": "Esborra permanentment el teu compte i tots els missatges",
+    "delete_account_error": "No s'ha pogut esborrar el compte. Si continua el problema, contacta amb l'administració del node",
+    "delete_account_instructions": "Confirma que vols esborrar el compte escrivint la teva contrasenya aquí sota",
+    "export_theme": "Desa el tema",
+    "filtering": "Filtres",
+    "filtering_explanation": "Es silenciaran totes les entrades que continguin aquestes paraules. Separa-les per línies",
+    "follow_export": "Exporta la llista de contactes",
+    "follow_export_button": "Exporta tots els comptes que segueixes a un fitxer CSV",
+    "follow_export_processing": "S'està processant la petició. Aviat podràs descarregar el fitxer",
+    "follow_import": "Importa els contactes",
+    "follow_import_error": "No s'ha pogut importar els contactes",
+    "follows_imported": "S'han importat els contactes. Trigaran una estoneta en ser processats.",
+    "foreground": "Primer pla",
+    "general": "General",
+    "hide_attachments_in_convo": "Amaga els adjunts en les converses",
+    "hide_attachments_in_tl": "Amaga els adjunts en el flux d'entrades",
+    "import_followers_from_a_csv_file": "Importa els contactes des d'un fitxer CSV",
+    "import_theme": "Carrega un tema",
+    "inputRadius": "Caixes d'entrada de text",
+    "instance_default": "(default: {value})",
+    "interfaceLanguage": "Llengua de la interfície",
+    "invalid_theme_imported": "No s'ha entès l'arxiu carregat perquè no és un tema vàlid de Pleroma. No s'ha fet cap canvi als temes actuals.",
+    "limited_availability": "No està disponible en aquest navegador",
+    "links": "Enllaços",
+    "lock_account_description": "Restringeix el teu compte només a seguidores aprovades.",
+    "loop_video": "Reprodueix els vídeos en bucle",
+    "loop_video_silent_only": "Reprodueix en bucles només els vídeos sense so (com els \"GIF\" de Mastodon)",
+    "name": "Nom",
+    "name_bio": "Nom i presentació",
+    "new_password": "Contrasenya nova",
+    "notification_visibility": "Notifica'm quan algú",
+    "notification_visibility_follows": "Comença a seguir-me",
+    "notification_visibility_likes": "Marca com a preferida una entrada meva",
+    "notification_visibility_mentions": "Em menciona",
+    "notification_visibility_repeats": "Republica una entrada meva",
+    "no_rich_text_description": "Neteja el formatat de text de totes les entrades",
+    "nsfw_clickthrough": "Amaga el contingut NSFW darrer d'una imatge clicable",
+    "panelRadius": "Panells",
+    "pause_on_unfocused": "Pausa la reproducció en continu quan la pestanya perdi el focus",
+    "presets": "Temes",
+    "profile_background": "Fons de pantalla",
+    "profile_banner": "Fons de perfil",
+    "profile_tab": "Perfil",
+    "radii_help": "Configura l'arrodoniment de les vores (en píxels)",
+    "replies_in_timeline": "Replies in timeline",
+    "reply_link_preview": "Mostra el missatge citat en passar el ratolí per sobre de l'enllaç de resposta",
+    "reply_visibility_all": "Mostra totes les respostes",
+    "reply_visibility_following": "Mostra només les respostes a entrades meves o d'usuàries que jo segueixo",
+    "reply_visibility_self": "Mostra només les respostes a entrades meves",
+    "saving_err": "No s'ha pogut desar la configuració",
+    "saving_ok": "S'ha desat la configuració",
+    "security_tab": "Seguretat",
+    "set_new_avatar": "Canvia l'avatar",
+    "set_new_profile_background": "Canvia el fons de pantalla",
+    "set_new_profile_banner": "Canvia el fons del perfil",
+    "settings": "Configuració",
+    "stop_gifs": "Anima els GIF només en passar-hi el ratolí per sobre",
+    "streaming": "Carrega automàticament entrades noves quan estigui a dalt de tot",
+    "text": "Text",
+    "theme": "Tema",
+    "theme_help": "Personalitza els colors del tema. Escriu-los en format RGB hexadecimal (#rrggbb)",
+    "tooltipRadius": "Missatges sobreposats",
+    "user_settings": "Configuració personal",
+    "values": {
+      "false": "no",
+      "true": "sí"
+    }
+  },
+  "timeline": {
+    "collapse": "Replega",
+    "conversation": "Conversa",
+    "error_fetching": "S'ha produït un error en carregar les entrades",
+    "load_older": "Carrega entrades anteriors",
+    "no_retweet_hint": "L'entrada és només per a seguidores o és \"directa\", i per tant no es pot republicar",
+    "repeated": "republicat",
+    "show_new": "Mostra els nous",
+    "up_to_date": "Actualitzat"
+  },
+  "user_card": {
+    "approve": "Aprova",
+    "block": "Bloqueja",
+    "blocked": "Bloquejat!",
+    "deny": "Denega",
+    "follow": "Segueix",
+    "followees": "Segueixo",
+    "followers": "Seguidors/es",
+    "following": "Seguint!",
+    "follows_you": "Et segueix!",
+    "mute": "Silencia",
+    "muted": "Silenciat",
+    "per_day": "per dia",
+    "remote_follow": "Seguiment remot",
+    "statuses": "Estats"
+  },
+  "user_profile": {
+    "timeline_title": "Flux personal"
+  },
+  "who_to_follow": {
+    "more": "More",
+    "who_to_follow": "A qui seguir"
+  }
+}

src/i18n/compare.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+const arg = process.argv[2]
+
+if (typeof arg === 'undefined') {
+  console.log('This is a very simple and tiny tool that checks en.json with any other language and')
+  console.log('outputs all the things present in english but missing in foreign language.')
+  console.log('')
+  console.log('Usage: ./compare.js <lang> ')
+  console.log('       or')
+  console.log('       node ./compare.js <lang>')
+  console.log('')
+  console.log('Where <lang> is name of .json file containing language. For ./fi.json it should be:')
+  console.log('      ./compare.js fi ')
+  console.log('')
+  console.log('Limitations: ')
+  console.log('* This program does not work with languages left over in messages.js')
+  console.log('* This program does not check for extra strings present in foreign language but missing')
+  console.log('  in english.js (for now)')
+  console.log('')
+  console.log('There are no other arguments or options. Make an issue if you encounter a bug or want')
+  console.log('some feature to be implemented. Merge requests are welcome as well.')
+  return
+}
+
+const english = require('./en.json')
+const foreign = require(`./${arg}.json`)
+
+function walker (a, b, path = []) {
+  Object.keys(a).forEach(k => {
+    const aVal = a[k]
+    const bVal = b[k]
+    const aType = typeof aVal
+    const bType = typeof bVal
+    const currentPath = [...path, k]
+    const article = aType[0] === 'o' ? 'an' : 'a'
+
+    if (bType === 'undefined') {
+      console.log(`Foreign language is missing ${article} ${aType} at path ${currentPath.join('.')}`)
+    } else if (aType === 'object') {
+      if (bType !== 'object') {
+        console.log(`Type mismatch! English has ${aType} while foreign has ${bType} at path ${currentPath.join['.']}`)
+      } else {
+        walker(aVal, bVal, currentPath)
+      }
+    }
+  })
+}
+
+walker(english, foreign)

src/i18n/de.json

@@ -0,0 +1,202 @@
+{
+  "chat": {
+    "title": "Chat"
+  },
+  "features_panel": {
+    "chat": "Chat",
+    "gopher": "Gopher",
+    "media_proxy": "Media Proxy",
+    "scope_options": "Scope options",
+    "text_limit": "Textlimit",
+    "title": "Features",
+    "who_to_follow": "Who to follow"
+  },
+  "finder": {
+    "error_fetching_user": "Fehler beim Suchen des Benutzers",
+    "find_user": "Finde Benutzer"
+  },
+  "general": {
+    "apply": "Anwenden",
+    "submit": "Absenden"
+  },
+  "login": {
+    "login": "Anmelden",
+    "description": "Mit OAuth anmelden",
+    "logout": "Abmelden",
+    "password": "Passwort",
+    "placeholder": "z.B. lain",
+    "register": "Registrieren",
+    "username": "Benutzername"
+  },
+  "nav": {
+    "chat": "Lokaler Chat",
+    "friend_requests": "Followanfragen",
+    "mentions": "Erwähnungen",
+    "public_tl": "Lokale Zeitleiste",
+    "timeline": "Zeitleiste",
+    "twkn": "Das gesamte bekannte Netzwerk"
+  },
+  "notifications": {
+    "broken_favorite": "Unbekannte Nachricht, suche danach...",
+    "favorited_you": "favorisierte deine Nachricht",
+    "followed_you": "folgt dir",
+    "load_older": "Ältere Benachrichtigungen laden",
+    "notifications": "Benachrichtigungen",
+    "read": "Gelesen!",
+    "repeated_you": "wiederholte deine Nachricht"
+  },
+  "post_status": {
+    "account_not_locked_warning": "Dein Profil ist nicht {0}. Wer dir folgen will, kann das jederzeit tun und dann auch deine privaten Beiträge sehen.",
+    "account_not_locked_warning_link": "gesperrt",
+    "attachments_sensitive": "Anhänge als heikel markieren",
+    "content_type": {
+      "plain_text": "Nur Text"
+    },
+    "content_warning": "Betreff (optional)",
+    "default": "Sitze gerade im Hofbräuhaus.",
+    "direct_warning": "Dieser Beitrag wird nur für die erwähnten Nutzer sichtbar sein.",
+    "posting": "Veröffentlichen",
+    "scope": {
+      "direct": "Direkt - Beitrag nur an erwähnte Profile",
+      "private": "Nur Follower - Beitrag nur für Follower sichtbar",
+      "public": "Öffentlich - Beitrag an öffentliche Zeitleisten",
+      "unlisted": "Nicht gelistet - Nicht in öffentlichen Zeitleisten anzeigen"
+    }
+  },
+  "registration": {
+    "bio": "Bio",
+    "email": "Email",
+    "fullname": "Angezeigter Name",
+    "password_confirm": "Passwort bestätigen",
+    "registration": "Registrierung",
+    "token": "Einladungsschlüssel"
+  },
+  "settings": {
+    "attachmentRadius": "Anhänge",
+    "attachments": "Anhänge",
+    "autoload": "Aktiviere automatisches Laden von älteren Beiträgen beim scrollen",
+    "avatar": "Avatar",
+    "avatarAltRadius": "Avatare (Benachrichtigungen)",
+    "avatarRadius": "Avatare",
+    "background": "Hintergrund",
+    "bio": "Bio",
+    "btnRadius": "Buttons",
+    "cBlue": "Blau (Antworten, Folgt dir)",
+    "cGreen": "Grün (Retweet)",
+    "cOrange": "Orange (Favorisieren)",
+    "cRed": "Rot (Abbrechen)",
+    "change_password": "Passwort ändern",
+    "change_password_error": "Es gab ein Problem bei der Änderung des Passworts.",
+    "changed_password": "Passwort erfolgreich geändert!",
+    "collapse_subject": "Beiträge mit Betreff einklappen",
+    "confirm_new_password": "Neues Passwort bestätigen",
+    "current_avatar": "Dein derzeitiger Avatar",
+    "current_password": "Aktuelles Passwort",
+    "current_profile_banner": "Der derzeitige Banner deines Profils",
+    "data_import_export_tab": "Datenimport/-export",
+    "default_vis": "Standard-Sichtbarkeitsumfang",
+    "delete_account": "Account löschen",
+    "delete_account_description": "Lösche deinen Account und alle deine Nachrichten unwiderruflich.",
+    "delete_account_error": "Es ist ein Fehler beim Löschen deines Accounts aufgetreten. Tritt dies weiterhin auf, wende dich an den Administrator der Instanz.",
+    "delete_account_instructions": "Tippe dein Passwort unten in das Feld ein, um die Löschung deines Accounts zu bestätigen.",
+    "export_theme": "Farbschema speichern",
+    "filtering": "Filtern",
+    "filtering_explanation": "Alle Beiträge die diese Wörter enthalten werden ausgeblendet. Ein Wort pro Zeile.",
+    "follow_export": "Follower exportieren",
+    "follow_export_button": "Exportiere deine Follows in eine csv-Datei",
+    "follow_export_processing": "In Bearbeitung. Die Liste steht gleich zum herunterladen bereit.",
+    "follow_import": "Followers importieren",
+    "follow_import_error": "Fehler beim importieren der Follower",
+    "follows_imported": "Followers importiert! Die Bearbeitung kann eine Zeit lang dauern.",
+    "foreground": "Vordergrund",
+    "general": "Allgemein",
+    "hide_attachments_in_convo": "Anhänge in Unterhaltungen ausblenden",
+    "hide_attachments_in_tl": "Anhänge in der Zeitleiste ausblenden",
+    "hide_post_stats": "Beitragsstatistiken verbergen (z.B. die Anzahl der Favoriten)",
+    "hide_user_stats": "Benutzerstatistiken verbergen (z.B. die Anzahl der Follower)",
+    "import_followers_from_a_csv_file": "Importiere Follower, denen du folgen möchtest, aus einer CSV-Datei",
+    "import_theme": "Farbschema laden",
+    "inputRadius": "Eingabefelder",
+    "instance_default": "(Standard: {value})",
+    "interfaceLanguage": "Sprache der Oberfläche",
+    "invalid_theme_imported": "Die ausgewählte Datei ist kein unterstütztes Pleroma-Theme. Keine Änderungen wurden vorgenommen.",
+    "limited_availability": "In deinem Browser nicht verfügbar",
+    "links": "Links",
+    "lock_account_description": "Sperre deinen Account, um neue Follower zu genehmigen oder abzulehnen",
+    "loop_video": "Videos wiederholen",
+    "loop_video_silent_only": "Nur Videos ohne Ton wiederholen (z.B. Mastodons \"gifs\")",
+    "name": "Name",
+    "name_bio": "Name & Bio",
+    "new_password": "Neues Passwort",
+    "notification_visibility": "Benachrichtigungstypen, die angezeigt werden sollen",
+    "notification_visibility_follows": "Follows",
+    "notification_visibility_likes": "Favoriten",
+    "notification_visibility_mentions": "Erwähnungen",
+    "notification_visibility_repeats": "Wiederholungen",
+    "no_rich_text_description": "Rich-Text Formatierungen von allen Beiträgen entfernen",
+    "nsfw_clickthrough": "Aktiviere ausblendbares Overlay für Anhänge, die als NSFW markiert sind",
+    "panelRadius": "Panel",
+    "pause_on_unfocused": "Streaming pausieren, wenn das Tab nicht fokussiert ist",
+    "presets": "Voreinstellungen",
+    "profile_background": "Profilhintergrund",
+    "profile_banner": "Profilbanner",
+    "profile_tab": "Profil",
+    "radii_help": "Kantenrundung (in Pixel) der Oberfläche anpassen",
+    "replies_in_timeline": "Antworten in der Zeitleiste",
+    "reply_link_preview": "Antwortlink-Vorschau beim Überfahren mit der Maus aktivieren",
+    "reply_visibility_all": "Alle Antworten zeigen",
+    "reply_visibility_following": "Zeige nur Antworten an mich oder an Benutzer, denen ich folge",
+    "reply_visibility_self": "Nur Antworten an mich anzeigen",
+    "saving_err": "Fehler beim Speichern der Einstellungen",
+    "saving_ok": "Einstellungen gespeichert",
+    "security_tab": "Sicherheit",
+    "set_new_avatar": "Setze einen neuen Avatar",
+    "set_new_profile_background": "Setze einen neuen Hintergrund für dein Profil",
+    "set_new_profile_banner": "Setze einen neuen Banner für dein Profil",
+    "settings": "Einstellungen",
+    "stop_gifs": "Play-on-hover GIFs",
+    "streaming": "Aktiviere automatisches Laden (Streaming) von neuen Beiträgen",
+    "text": "Text",
+    "theme": "Farbschema",
+    "theme_help": "Benutze HTML-Farbcodes (#rrggbb) um dein Farbschema anzupassen",
+    "tooltipRadius": "Tooltips/Warnungen",
+    "user_settings": "Benutzereinstellungen",
+    "values": {
+      "false": "nein",
+      "true": "Ja"
+    }
+  },
+  "timeline": {
+    "collapse": "Einklappen",
+    "conversation": "Unterhaltung",
+    "error_fetching": "Fehler beim Laden",
+    "load_older": "Lade ältere Beiträge",
+    "no_retweet_hint": "Der Beitrag ist als nur-für-Follower oder als Direktnachricht markiert und kann nicht wiederholt werden.",
+    "repeated": "wiederholte",
+    "show_new": "Zeige Neuere",
+    "up_to_date": "Aktuell"
+  },
+  "user_card": {
+    "approve": "Genehmigen",
+    "block": "Blockieren",
+    "blocked": "Blockiert!",
+    "deny": "Ablehnen",
+    "follow": "Folgen",
+    "followees": "Folgt",
+    "followers": "Followers",
+    "following": "Folgst du!",
+    "follows_you": "Folgt dir!",
+    "mute": "Stummschalten",
+    "muted": "Stummgeschaltet",
+    "per_day": "pro Tag",
+    "remote_follow": "Folgen",
+    "statuses": "Beiträge"
+  },
+  "user_profile": {
+    "timeline_title": "Beiträge"
+  },
+  "who_to_follow": {
+    "more": "Mehr",
+    "who_to_follow": "Wem soll ich folgen"
+  }
+}

src/i18n/en.json

@@ -0,0 +1,342 @@
+{
+  "chat": {
+    "title": "Chat"
+  },
+  "features_panel": {
+    "chat": "Chat",
+    "gopher": "Gopher",
+    "media_proxy": "Media proxy",
+    "scope_options": "Scope options",
+    "text_limit": "Text limit",
+    "title": "Features",
+    "who_to_follow": "Who to follow"
+  },
+  "finder": {
+    "error_fetching_user": "Error fetching user",
+    "find_user": "Find user"
+  },
+  "general": {
+    "apply": "Apply",
+    "submit": "Submit"
+  },
+  "login": {
+    "login": "Log in",
+    "description": "Log in with OAuth",
+    "logout": "Log out",
+    "password": "Password",
+    "placeholder": "e.g. lain",
+    "register": "Register",
+    "username": "Username"
+  },
+  "nav": {
+    "chat": "Local Chat",
+    "friend_requests": "Follow Requests",
+    "mentions": "Mentions",
+    "dms": "Direct Messages",
+    "public_tl": "Public Timeline",
+    "timeline": "Timeline",
+    "twkn": "The Whole Known Network",
+    "user_search": "User Search",
+    "preferences": "Preferences"
+  },
+  "notifications": {
+    "broken_favorite": "Unknown status, searching for it...",
+    "favorited_you": "favorited your status",
+    "followed_you": "followed you",
+    "load_older": "Load older notifications",
+    "notifications": "Notifications",
+    "read": "Read!",
+    "repeated_you": "repeated your status"
+  },
+  "post_status": {
+    "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
+    "account_not_locked_warning_link": "locked",
+    "attachments_sensitive": "Mark attachments as sensitive",
+    "content_type": {
+      "plain_text": "Plain text"
+    },
+    "content_warning": "Subject (optional)",
+    "default": "Just landed in L.A.",
+    "direct_warning": "This post will only be visible to all the mentioned users.",
+    "posting": "Posting",
+    "scope": {
+      "direct": "Direct - Post to mentioned users only",
+      "private": "Followers-only - Post to followers only",
+      "public": "Public - Post to public timelines",
+      "unlisted": "Unlisted - Do not post to public timelines"
+    }
+  },
+  "registration": {
+    "bio": "Bio",
+    "email": "Email",
+    "fullname": "Display name",
+    "password_confirm": "Password confirmation",
+    "registration": "Registration",
+    "token": "Invite token",
+    "validations": {
+      "username_required": "cannot be left blank",
+      "fullname_required": "cannot be left blank",
+      "email_required": "cannot be left blank",
+      "password_required": "cannot be left blank",
+      "password_confirmation_required": "cannot be left blank",
+      "password_confirmation_match": "should be the same as password"
+    }
+  },
+  "settings": {
+    "attachmentRadius": "Attachments",
+    "attachments": "Attachments",
+    "autoload": "Enable automatic loading when scrolled to the bottom",
+    "avatar": "Avatar",
+    "avatarAltRadius": "Avatars (Notifications)",
+    "avatarRadius": "Avatars",
+    "background": "Background",
+    "bio": "Bio",
+    "btnRadius": "Buttons",
+    "cBlue": "Blue (Reply, follow)",
+    "cGreen": "Green (Retweet)",
+    "cOrange": "Orange (Favorite)",
+    "cRed": "Red (Cancel)",
+    "change_password": "Change Password",
+    "change_password_error": "There was an issue changing your password.",
+    "changed_password": "Password changed successfully!",
+    "collapse_subject": "Collapse posts with subjects",
+    "composing": "Composing",
+    "confirm_new_password": "Confirm new password",
+    "current_avatar": "Your current avatar",
+    "current_password": "Current password",
+    "current_profile_banner": "Your current profile banner",
+    "data_import_export_tab": "Data Import / Export",
+    "default_vis": "Default visibility scope",
+    "delete_account": "Delete Account",
+    "delete_account_description": "Permanently delete your account and all your messages.",
+    "delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
+    "delete_account_instructions": "Type your password in the input below to confirm account deletion.",
+    "export_theme": "Save preset",
+    "filtering": "Filtering",
+    "filtering_explanation": "All statuses containing these words will be muted, one per line",
+    "follow_export": "Follow export",
+    "follow_export_button": "Export your follows to a csv file",
+    "follow_export_processing": "Processing, you'll soon be asked to download your file",
+    "follow_import": "Follow import",
+    "follow_import_error": "Error importing followers",
+    "follows_imported": "Follows imported! Processing them will take a while.",
+    "foreground": "Foreground",
+    "general": "General",
+    "hide_attachments_in_convo": "Hide attachments in conversations",
+    "hide_attachments_in_tl": "Hide attachments in timeline",
+    "hide_isp": "Hide instance-specific panel",
+    "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
+    "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
+    "import_followers_from_a_csv_file": "Import follows from a csv file",
+    "import_theme": "Load preset",
+    "inputRadius": "Input fields",
+    "checkboxRadius": "Checkboxes",
+    "instance_default": "(default: {value})",
+    "instance_default_simple" : "(default)",
+    "interface": "Interface",
+    "interfaceLanguage": "Interface language",
+    "invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
+    "limited_availability": "Unavailable in your browser",
+    "links": "Links",
+    "lock_account_description": "Restrict your account to approved followers only",
+    "loop_video": "Loop videos",
+    "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
+    "name": "Name",
+    "name_bio": "Name & Bio",
+    "new_password": "New password",
+    "notification_visibility": "Types of notifications to show",
+    "notification_visibility_follows": "Follows",
+    "notification_visibility_likes": "Likes",
+    "notification_visibility_mentions": "Mentions",
+    "notification_visibility_repeats": "Repeats",
+    "no_rich_text_description": "Strip rich text formatting from all posts",
+    "nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
+    "panelRadius": "Panels",
+    "pause_on_unfocused": "Pause streaming when tab is not focused",
+    "presets": "Presets",
+    "profile_background": "Profile Background",
+    "profile_banner": "Profile Banner",
+    "profile_tab": "Profile",
+    "radii_help": "Set up interface edge rounding (in pixels)",
+    "replies_in_timeline": "Replies in timeline",
+    "reply_link_preview": "Enable reply-link preview on mouse hover",
+    "reply_visibility_all": "Show all replies",
+    "reply_visibility_following": "Only show replies directed at me or users I'm following",
+    "reply_visibility_self": "Only show replies directed at me",
+    "saving_err": "Error saving settings",
+    "saving_ok": "Settings saved",
+    "security_tab": "Security",
+    "scope_copy": "Copy scope when replying (DMs are always copied)",
+    "set_new_avatar": "Set new avatar",
+    "set_new_profile_background": "Set new profile background",
+    "set_new_profile_banner": "Set new profile banner",
+    "settings": "Settings",
+    "subject_input_always_show": "Always show subject field",
+    "subject_line_behavior": "Copy subject when replying",
+    "subject_line_email": "Like email: \"re: subject\"",
+    "subject_line_mastodon": "Like mastodon: copy as is",
+    "subject_line_noop": "Do not copy",
+    "stop_gifs": "Play-on-hover GIFs",
+    "streaming": "Enable automatic streaming of new posts when scrolled to the top",
+    "text": "Text",
+    "theme": "Theme",
+    "theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
+    "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
+    "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
+    "tooltipRadius": "Tooltips/alerts",
+    "user_settings": "User Settings",
+    "values": {
+      "false": "no",
+      "true": "yes"
+    },
+    "style": {
+      "switcher": {
+        "keep_color": "Keep colors",
+        "keep_shadows": "Keep shadows",
+        "keep_opacity": "Keep opacity",
+        "keep_roundness": "Keep roundness",
+        "keep_fonts": "Keep fonts",
+        "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
+        "reset": "Reset",
+        "clear_all": "Clear all",
+        "clear_opacity": "Clear opacity"
+      },
+      "common": {
+        "color": "Color",
+        "opacity": "Opacity",
+        "contrast": {
+          "hint": "Contrast ratio is {ratio}, it {level} {context}",
+          "level": {
+            "aa": "meets Level AA guideline (minimal)",
+            "aaa": "meets Level AAA guideline (recommended)",
+            "bad": "doesn't meet any accessibility guidelines"
+          },
+          "context": {
+            "18pt": "for large (18pt+) text",
+            "text": "for text"
+          }
+        }
+      },
+      "common_colors": {
+        "_tab_label": "Common",
+        "main": "Common colors",
+        "foreground_hint": "See \"Advanced\" tab for more detailed control",
+        "rgbo": "Icons, accents, badges"
+      },
+      "advanced_colors": {
+        "_tab_label": "Advanced",
+        "alert": "Alert background",
+        "alert_error": "Error",
+        "badge": "Badge background",
+        "badge_notification": "Notification",
+        "panel_header": "Panel header",
+        "top_bar": "Top bar",
+        "borders": "Borders",
+        "buttons": "Buttons",
+        "inputs": "Input fields",
+        "faint_text": "Faded text"
+      },
+      "radii": {
+        "_tab_label": "Roundness"
+      },
+      "shadows": {
+        "_tab_label": "Shadow and lighting",
+        "component": "Component",
+        "override": "Override",
+        "shadow_id": "Shadow #{value}",
+        "blur": "Blur",
+        "spread": "Spread",
+        "inset": "Inset",
+        "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
+        "filter_hint": {
+          "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
+          "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
+          "avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
+          "spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
+          "inset_classic": "Inset shadows will be using {0}"
+        },
+        "components": {
+          "panel": "Panel",
+          "panelHeader": "Panel header",
+          "topBar": "Top bar",
+          "avatar": "User avatar (in profile view)",
+          "avatarStatus": "User avatar (in post display)",
+          "popup": "Popups and tooltips",
+          "button": "Button",
+          "buttonHover": "Button (hover)",
+          "buttonPressed": "Button (pressed)",
+          "buttonPressedHover": "Button (pressed+hover)",
+          "input": "Input field"
+        }
+      },
+      "fonts": {
+        "_tab_label": "Fonts",
+        "help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
+        "components": {
+          "interface": "Interface",
+          "input": "Input fields",
+          "post": "Post text",
+          "postCode": "Monospaced text in a post (rich text)"
+        },
+        "family": "Font name",
+        "size": "Size (in px)",
+        "weight": "Weight (boldness)",
+        "custom": "Custom"
+      },
+      "preview": {
+        "header": "Preview",
+        "content": "Content",
+        "error": "Example error",
+        "button": "Button",
+        "text": "A bunch of more {0} and {1}",
+        "mono": "content",
+        "input": "Just landed in L.A.",
+        "faint_link": "helpful manual",
+        "fine_print": "Read our {0} to learn nothing useful!",
+        "header_faint": "This is fine",
+        "checkbox": "I have skimmed over terms and conditions",
+        "link": "a nice lil' link"
+      }
+    }
+  },
+  "timeline": {
+    "collapse": "Collapse",
+    "conversation": "Conversation",
+    "error_fetching": "Error fetching updates",
+    "load_older": "Load older statuses",
+    "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
+    "repeated": "repeated",
+    "show_new": "Show new",
+    "up_to_date": "Up-to-date"
+  },
+  "user_card": {
+    "approve": "Approve",
+    "block": "Block",
+    "blocked": "Blocked!",
+    "deny": "Deny",
+    "follow": "Follow",
+    "followees": "Following",
+    "followers": "Followers",
+    "following": "Following!",
+    "follows_you": "Follows you!",
+    "mute": "Mute",
+    "muted": "Muted",
+    "per_day": "per day",
+    "remote_follow": "Remote follow",
+    "statuses": "Statuses"
+  },
+  "user_profile": {
+    "timeline_title": "User Timeline"
+  },
+  "who_to_follow": {
+    "more": "More",
+    "who_to_follow": "Who to follow"
+  },
+  "tool_tip": {
+    "media_upload": "Upload Media",
+    "repeat": "Repeat",
+    "reply": "Reply",
+    "favorite": "Favorite",
+    "user_settings": "User Settings"
+  }
+}

src/i18n/eo.json

@@ -0,0 +1,119 @@
+{
+  "chat": {
+    "title": "Babilejo"
+  },
+  "finder": {
+    "error_fetching_user": "Eraro alportante uzanton",
+    "find_user": "Trovi uzanton"
+  },
+  "general": {
+    "apply": "Apliki",
+    "submit": "Sendi"
+  },
+  "login": {
+    "login": "Ensaluti",
+    "logout": "Elsaluti",
+    "password": "Pasvorto",
+    "placeholder": "ekz. lain",
+    "register": "Registriĝi",
+    "username": "Salutnomo"
+  },
+  "nav": {
+    "chat": "Loka babilejo",
+    "mentions": "Mencioj",
+    "public_tl": "Publika tempolinio",
+    "timeline": "Tempolinio",
+    "twkn": "La tuta konata reto"
+  },
+  "notifications": {
+    "favorited_you": "ŝatis vian staton",
+    "followed_you": "ekabonis vin",
+    "notifications": "Sciigoj",
+    "read": "Legite!",
+    "repeated_you": "ripetis vian staton"
+  },
+  "post_status": {
+    "default": "Ĵus alvenis al la Universala Kongreso!",
+    "posting": "Afiŝante"
+  },
+  "registration": {
+    "bio": "Priskribo",
+    "email": "Retpoŝtadreso",
+    "fullname": "Vidiga nomo",
+    "password_confirm": "Konfirmo de pasvorto",
+    "registration": "Registriĝo"
+  },
+  "settings": {
+    "attachmentRadius": "Kunsendaĵoj",
+    "attachments": "Kunsendaĵoj",
+    "autoload": "Ŝalti memfaran ŝarĝadon ĉe subo de paĝo",
+    "avatar": "Profilbildo",
+    "avatarAltRadius": "Profilbildoj (sciigoj)",
+    "avatarRadius": "Profilbildoj",
+    "background": "Fono",
+    "bio": "Priskribo",
+    "btnRadius": "Butonoj",
+    "cBlue": "Blua (Respondo, abono)",
+    "cGreen": "Verda (Kunhavigo)",
+    "cOrange": "Oranĝa (Ŝato)",
+    "cRed": "Ruĝa (Nuligo)",
+    "current_avatar": "Via nuna profilbildo",
+    "current_profile_banner": "Via nuna profila rubando",
+    "filtering": "Filtrado",
+    "filtering_explanation": "Ĉiuj statoj kun tiuj ĉi vortoj silentiĝos, po unu linie",
+    "follow_import": "Abona enporto",
+    "follow_import_error": "Eraro enportante abonojn",
+    "follows_imported": "Abonoj enportiĝis! Traktado daŭros iom.",
+    "foreground": "Malfono",
+    "hide_attachments_in_convo": "Kaŝi kunsendaĵojn en interparoloj",
+    "hide_attachments_in_tl": "Kaŝi kunsendaĵojn en tempolinio",
+    "import_followers_from_a_csv_file": "Enporti abonojn el CSV-dosiero",
+    "links": "Ligiloj",
+    "name": "Nomo",
+    "name_bio": "Nomo kaj priskribo",
+    "nsfw_clickthrough": "Ŝalti traklakan kaŝon de konsternaj kunsendaĵoj",
+    "panelRadius": "Paneloj",
+    "presets": "Antaŭagordoj",
+    "profile_background": "Profila fono",
+    "profile_banner": "Profila rubando",
+    "radii_help": "Agordi fasadan rondigon de randoj (rastrumere)",
+    "reply_link_preview": "Ŝalti respond-ligilan antaŭvidon dum ŝvebo",
+    "set_new_avatar": "Agordi novan profilbildon",
+    "set_new_profile_background": "Agordi novan profilan fonon",
+    "set_new_profile_banner": "Agordi novan profilan rubandon",
+    "settings": "Agordoj",
+    "stop_gifs": "Movi GIF-bildojn dum ŝvebo",
+    "streaming": "Ŝalti memfaran fluigon de novaj afiŝoj ĉe la supro de la paĝo",
+    "text": "Teksto",
+    "theme": "Etoso",
+    "theme_help": "Uzu deksesumajn kolorkodojn (#rrvvbb) por adapti vian koloran etoson.",
+    "tooltipRadius": "Ŝpruchelpiloj/avertoj",
+    "user_settings": "Uzantaj agordoj"
+  },
+  "timeline": {
+    "collapse": "Maletendi",
+    "conversation": "Interparolo",
+    "error_fetching": "Eraro dum ĝisdatigo",
+    "load_older": "Montri pli malnovajn statojn",
+    "repeated": "ripetata",
+    "show_new": "Montri novajn",
+    "up_to_date": "Ĝisdata"
+  },
+  "user_card": {
+    "block": "Bari",
+    "blocked": "Barita!",
+    "follow": "Aboni",
+    "followees": "Abonatoj",
+    "followers": "Abonantoj",
+    "following": "Abonanta!",
+    "follows_you": "Abonas vin!",
+    "mute": "Silentigi",
+    "muted": "Silentigitaj",
+    "per_day": "tage",
+    "remote_follow": "Fore aboni",
+    "statuses": "Statoj"
+  },
+  "user_profile": {
+    "timeline_title": "Uzanta tempolinio"
+  }
+}

src/i18n/es.json

@@ -0,0 +1,100 @@
+{
+  "chat": {
+    "title": "Chat"
+  },
+  "finder": {
+    "error_fetching_user": "Error al buscar usuario",
+    "find_user": "Encontrar usuario"
+  },
+  "general": {
+    "apply": "Aplicar",
+    "submit": "Enviar"
+  },
+  "login": {
+    "login": "Identificación",
+    "logout": "Salir",
+    "password": "Contraseña",
+    "placeholder": "p.ej. lain",
+    "register": "Registrar",
+    "username": "Usuario"
+  },
+  "nav": {
+    "chat": "Chat Local",
+    "mentions": "Menciones",
+    "public_tl": "Línea Temporal Pública",
+    "timeline": "Línea Temporal",
+    "twkn": "Toda La Red Conocida"
+  },
+  "notifications": {
+    "followed_you": "empezó a seguirte",
+    "notifications": "Notificaciones",
+    "read": "¡Leído!"
+  },
+  "post_status": {
+    "default": "Acabo de aterrizar en L.A.",
+    "posting": "Publicando"
+  },
+  "registration": {
+    "bio": "Biografía",
+    "email": "Correo electrónico",
+    "fullname": "Nombre a mostrar",
+    "password_confirm": "Confirmación de contraseña",
+    "registration": "Registro"
+  },
+  "settings": {
+    "attachments": "Adjuntos",
+    "autoload": "Activar carga automática al llegar al final de la página",
+    "avatar": "Avatar",
+    "background": "Segundo plano",
+    "bio": "Biografía",
+    "current_avatar": "Tu avatar actual",
+    "current_profile_banner": "Cabecera actual",
+    "filtering": "Filtros",
+    "filtering_explanation": "Todos los estados que contengan estas palabras serán silenciados, una por línea",
+    "follow_import": "Importar personas que tú sigues",
+    "follow_import_error": "Error al importal el archivo",
+    "follows_imported": "¡Importado! Procesarlos llevará tiempo.",
+    "foreground": "Primer plano",
+    "hide_attachments_in_convo": "Ocultar adjuntos en las conversaciones",
+    "hide_attachments_in_tl": "Ocultar adjuntos en la línea temporal",
+    "import_followers_from_a_csv_file": "Importar personas que tú sigues apartir de un archivo csv",
+    "links": "Links",
+    "name": "Nombre",
+    "name_bio": "Nombre y Biografía",
+    "nsfw_clickthrough": "Activar el clic para ocultar los adjuntos NSFW",
+    "presets": "Por defecto",
+    "profile_background": "Fondo del Perfil",
+    "profile_banner": "Cabecera del perfil",
+    "reply_link_preview": "Activar la previsualización del enlace de responder al pasar el ratón por encima",
+    "set_new_avatar": "Cambiar avatar",
+    "set_new_profile_background": "Cambiar fondo del perfil",
+    "set_new_profile_banner": "Cambiar cabecera",
+    "settings": "Ajustes",
+    "streaming": "Habilite la transmisión automática de nuevas publicaciones cuando se desplaza hacia la parte superior",
+    "text": "Texto",
+    "theme": "Tema",
+    "theme_help": "Use códigos de color hexadecimales (#rrggbb) para personalizar su tema de colores.",
+    "user_settings": "Ajustes de Usuario"
+  },
+  "timeline": {
+    "conversation": "Conversación",
+    "error_fetching": "Error al cargar las actualizaciones",
+    "load_older": "Cargar actualizaciones anteriores",
+    "show_new": "Mostrar lo nuevo",
+    "up_to_date": "Actualizado"
+  },
+  "user_card": {
+    "block": "Bloquear",
+    "blocked": "¡Bloqueado!",
+    "follow": "Seguir",
+    "followees": "Siguiendo",
+    "followers": "Seguidores",
+    "following": "¡Siguiendo!",
+    "follows_you": "¡Te sigue!",
+    "mute": "Silenciar",
+    "muted": "Silenciado",
+    "per_day": "por día",
+    "remote_follow": "Seguir",
+    "statuses": "Estados"
+  }
+}

src/i18n/et.json

@@ -0,0 +1,83 @@
+{
+  "finder": {
+    "error_fetching_user": "Viga kasutaja leidmisel",
+    "find_user": "Otsi kasutajaid"
+  },
+  "general": {
+    "submit": "Postita"
+  },
+  "login": {
+    "login": "Logi sisse",
+    "logout": "Logi välja",
+    "password": "Parool",
+    "placeholder": "nt lain",
+    "register": "Registreeru",
+    "username": "Kasutajanimi"
+  },
+  "nav": {
+    "mentions": "Mainimised",
+    "public_tl": "Avalik Ajajoon",
+    "timeline": "Ajajoon",
+    "twkn": "Kogu Teadaolev Võrgustik"
+  },
+  "notifications": {
+    "followed_you": "alustas sinu jälgimist",
+    "notifications": "Teavitused",
+    "read": "Loe!"
+  },
+  "post_status": {
+    "default": "Just sõitsin elektrirongiga Tallinnast Pääskülla.",
+    "posting": "Postitan"
+  },
+  "registration": {
+    "bio": "Bio",
+    "email": "E-post",
+    "fullname": "Kuvatav nimi",
+    "password_confirm": "Parooli kinnitamine",
+    "registration": "Registreerimine"
+  },
+  "settings": {
+    "attachments": "Manused",
+    "autoload": "Luba ajajoone automaatne uuendamine kui ajajoon on põhja keritud",
+    "avatar": "Profiilipilt",
+    "bio": "Bio",
+    "current_avatar": "Sinu praegune profiilipilt",
+    "current_profile_banner": "Praegune profiilibänner",
+    "filtering": "Sisu filtreerimine",
+    "filtering_explanation": "Kõiki staatuseid, mis sisaldavad neid sõnu, ei kuvata. Üks sõna reale.",
+    "hide_attachments_in_convo": "Peida manused vastlustes",
+    "hide_attachments_in_tl": "Peida manused ajajoonel",
+    "name": "Nimi",
+    "name_bio": "Nimi ja Bio",
+    "nsfw_clickthrough": "Peida tööks-mittesobivad(NSFW) manuste hiireklõpsu taha",
+    "profile_background": "Profiilitaust",
+    "profile_banner": "Profiilibänner",
+    "reply_link_preview": "Luba algpostituse kuvamine vastustes",
+    "set_new_avatar": "Vali uus profiilipilt",
+    "set_new_profile_background": "Vali uus profiilitaust",
+    "set_new_profile_banner": "Vali uus profiilibänner",
+    "settings": "Sätted",
+    "theme": "Teema",
+    "user_settings": "Kasutaja sätted"
+  },
+  "timeline": {
+    "conversation": "Vestlus",
+    "error_fetching": "Viga uuenduste laadimisel",
+    "load_older": "Kuva vanemaid staatuseid",
+    "show_new": "Näita uusi",
+    "up_to_date": "Uuendatud"
+  },
+  "user_card": {
+    "block": "Blokeeri",
+    "blocked": "Blokeeritud!",
+    "follow": "Jälgi",
+    "followees": "Jälgitavaid",
+    "followers": "Jälgijaid",
+    "following": "Jälgin!",
+    "follows_you": "Jälgib sind!",
+    "mute": "Vaigista",
+    "muted": "Vaigistatud",
+    "per_day": "päevas",
+    "statuses": "Staatuseid"
+  }
+}

src/i18n/fi.json

@@ -0,0 +1,93 @@
+{
+  "finder": {
+    "error_fetching_user": "Virhe hakiessa käyttäjää",
+    "find_user": "Hae käyttäjä"
+  },
+  "general": {
+    "apply": "Aseta",
+    "submit": "Lähetä"
+  },
+  "login": {
+    "login": "Kirjaudu sisään",
+    "logout": "Kirjaudu ulos",
+    "password": "Salasana",
+    "placeholder": "esim. lain",
+    "register": "Rekisteröidy",
+    "username": "Käyttäjänimi"
+  },
+  "nav": {
+    "mentions": "Maininnat",
+    "public_tl": "Julkinen Aikajana",
+    "timeline": "Aikajana",
+    "twkn": "Koko Tunnettu Verkosto"
+  },
+  "notifications": {
+    "favorited_you": "tykkäsi viestistäsi",
+    "followed_you": "seuraa sinua",
+    "notifications": "Ilmoitukset",
+    "read": "Lue!",
+    "repeated_you": "toisti viestisi"
+  },
+  "post_status": {
+    "default": "Tulin juuri saunasta.",
+    "posting": "Lähetetään"
+  },
+  "registration": {
+    "bio": "Kuvaus",
+    "email": "Sähköposti",
+    "fullname": "Koko nimi",
+    "password_confirm": "Salasanan vahvistaminen",
+    "registration": "Rekisteröityminen"
+  },
+  "settings": {
+    "attachments": "Liitteet",
+    "autoload": "Lataa vanhempia viestejä automaattisesti ruudun pohjalla",
+    "avatar": "Profiilikuva",
+    "background": "Tausta",
+    "bio": "Kuvaus",
+    "current_avatar": "Nykyinen profiilikuvasi",
+    "current_profile_banner": "Nykyinen julisteesi",
+    "filtering": "Suodatus",
+    "filtering_explanation": "Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.",
+    "foreground": "Korostus",
+    "hide_attachments_in_convo": "Piilota liitteet keskusteluissa",
+    "hide_attachments_in_tl": "Piilota liitteet aikajanalla",
+    "links": "Linkit",
+    "name": "Nimi",
+    "name_bio": "Nimi ja kuvaus",
+    "nsfw_clickthrough": "Piilota NSFW liitteet klikkauksen taakse.",
+    "presets": "Valmiit teemat",
+    "profile_background": "Taustakuva",
+    "profile_banner": "Juliste",
+    "reply_link_preview": "Keskusteluiden vastauslinkkien esikatselu",
+    "set_new_avatar": "Aseta uusi profiilikuva",
+    "set_new_profile_background": "Aseta uusi taustakuva",
+    "set_new_profile_banner": "Aseta uusi juliste",
+    "settings": "Asetukset",
+    "streaming": "Näytä uudet viestit automaattisesti ollessasi ruudun huipulla",
+    "text": "Teksti",
+    "theme": "Teema",
+    "theme_help": "Käytä heksadesimaalivärejä muokataksesi väriteemaasi.",
+    "user_settings": "Käyttäjän asetukset"
+  },
+  "timeline": {
+    "collapse": "Sulje",
+    "conversation": "Keskustelu",
+    "error_fetching": "Virhe ladatessa viestejä",
+    "load_older": "Lataa vanhempia viestejä",
+    "repeated": "toisti",
+    "show_new": "Näytä uudet",
+    "up_to_date": "Ajantasalla"
+  },
+  "user_card": {
+    "follow": "Seuraa",
+    "followees": "Seuraa",
+    "followers": "Seuraajat",
+    "following": "Seuraat!",
+    "follows_you": "Seuraa sinua!",
+    "mute": "Hiljennä",
+    "muted": "Hiljennetty",
+    "per_day": "päivässä",
+    "statuses": "Viestit"
+  }
+}

src/i18n/fr.json

@@ -0,0 +1,204 @@
+{
+  "chat": {
+    "title": "Chat"
+  },
+  "features_panel": {
+    "chat": "Chat",
+    "gopher": "Gopher",
+    "media_proxy": "Proxy média",
+    "scope_options": "Options de visibilité",
+    "text_limit": "Limite du texte",
+    "title": "Caractéristiques",
+    "who_to_follow": "Qui s'abonner"
+  },
+  "finder": {
+    "error_fetching_user": "Erreur lors de la recherche de l'utilisateur",
+    "find_user": "Chercher un utilisateur"
+  },
+  "general": {
+    "apply": "Appliquer",
+    "submit": "Envoyer"
+  },
+  "login": {
+    "login": "Connexion",
+    "description": "Connexion avec OAuth",
+    "logout": "Déconnexion",
+    "password": "Mot de passe",
+    "placeholder": "p.e. lain",
+    "register": "S'inscrire",
+    "username": "Identifiant"
+  },
+  "nav": {
+    "chat": "Chat local",
+    "friend_requests": "Demandes d'ami",
+    "dms": "Messages adressés",
+    "mentions": "Notifications",
+    "public_tl": "Statuts locaux",
+    "timeline": "Journal",
+    "twkn": "Le réseau connu"
+  },
+  "notifications": {
+    "broken_favorite": "Chargement d'un message inconnu ...",
+    "favorited_you": "a aimé votre statut",
+    "followed_you": "a commencé à vous suivre",
+    "load_older": "Charger les notifications précédentes",
+    "notifications": "Notifications",
+    "read": "Lu !",
+    "repeated_you": "a partagé votre statut"
+  },
+  "post_status": {
+    "account_not_locked_warning": "Votre compte n'est pas {0}. N'importe qui peut vous suivre pour voir vos billets en Abonné·e·s uniquement.",
+    "account_not_locked_warning_link": "verrouillé",
+    "attachments_sensitive": "Marquer le média comme sensible",
+    "content_type": {
+      "plain_text": "Texte brut"
+    },
+    "content_warning": "Sujet (optionnel)",
+    "default": "Écrivez ici votre prochain statut.",
+    "direct_warning": "Ce message sera visible à toutes les personnes mentionnées.",
+    "posting": "Envoi en cours",
+    "scope": {
+      "direct": "Direct - N'envoyer qu'aux personnes mentionnées",
+      "private": "Abonné·e·s uniquement - Seul·e·s vos abonné·e·s verront vos billets",
+      "public": "Publique - Afficher dans les fils publics",
+      "unlisted": "Non-Listé - Ne pas afficher dans les fils publics"
+    }
+  },
+  "registration": {
+    "bio": "Biographie",
+    "email": "Adresse email",
+    "fullname": "Pseudonyme",
+    "password_confirm": "Confirmation du mot de passe",
+    "registration": "Inscription",
+    "token": "Jeton d'invitation"
+  },
+  "settings": {
+    "attachmentRadius": "Pièces jointes",
+    "attachments": "Pièces jointes",
+    "autoload": "Charger la suite automatiquement une fois le bas de la page atteint",
+    "avatar": "Avatar",
+    "avatarAltRadius": "Avatars (Notifications)",
+    "avatarRadius": "Avatars",
+    "background": "Arrière-plan",
+    "bio": "Biographie",
+    "btnRadius": "Boutons",
+    "cBlue": "Bleu (Répondre, suivre)",
+    "cGreen": "Vert (Partager)",
+    "cOrange": "Orange (Aimer)",
+    "cRed": "Rouge (Annuler)",
+    "change_password": "Changez votre mot de passe",
+    "change_password_error": "Il y a eu un problème pour changer votre mot de passe.",
+    "changed_password": "Mot de passe modifié avec succès !",
+    "collapse_subject": "Réduire les messages avec des sujets",
+    "confirm_new_password": "Confirmation du nouveau mot de passe",
+    "current_avatar": "Avatar actuel",
+    "current_password": "Mot de passe actuel",
+    "current_profile_banner": "Bannière de profil actuelle",
+    "data_import_export_tab": "Import / Export des Données",
+    "default_vis": "Portée de visibilité par défaut",
+    "delete_account": "Supprimer le compte",
+    "delete_account_description": "Supprimer définitivement votre compte et tous vos statuts.",
+    "delete_account_error": "Il y a eu un problème lors de la tentative de suppression de votre compte. Si le problème persiste, contactez l'administrateur de cette instance.",
+    "delete_account_instructions": "Indiquez votre mot de passe ci-dessous pour confirmer la suppression de votre compte.",
+    "export_theme": "Enregistrer le thème",
+    "filtering": "Filtre",
+    "filtering_explanation": "Tous les statuts contenant ces mots seront masqués. Un mot par ligne",
+    "follow_export": "Exporter les abonnements",
+    "follow_export_button": "Exporter les abonnements en csv",
+    "follow_export_processing": "Exportation en cours…",
+    "follow_import": "Importer des abonnements",
+    "follow_import_error": "Erreur lors de l'importation des abonnements",
+    "follows_imported": "Abonnements importés ! Le traitement peut prendre un moment.",
+    "foreground": "Premier plan",
+    "general": "Général",
+    "hide_attachments_in_convo": "Masquer les pièces jointes dans les conversations",
+    "hide_attachments_in_tl": "Masquer les pièces jointes dans le journal",
+    "hide_post_stats": "Masquer les statistiques de publication (le nombre de favoris)",
+    "hide_user_stats": "Masquer les statistiques de profil (le nombre d'amis)",
+    "import_followers_from_a_csv_file": "Importer des abonnements depuis un fichier csv",
+    "import_theme": "Charger le thème",
+    "inputRadius": "Champs de texte",
+    "instance_default": "(default: {value})",
+    "instance_default_simple" : "(default)",
+    "interfaceLanguage": "Langue de l'interface",
+    "invalid_theme_imported": "Le fichier sélectionné n'est pas un thème Pleroma pris en charge. Aucun changement n'a été apporté à votre thème.",
+    "limited_availability": "Non disponible dans votre navigateur",
+    "links": "Liens",
+    "lock_account_description": "Limitez votre compte aux abonnés acceptés uniquement",
+    "loop_video": "Vidéos en boucle",
+    "loop_video_silent_only": "Boucle uniquement les vidéos sans le son (les «gifs» de Mastodon)",
+    "name": "Nom",
+    "name_bio": "Nom & Bio",
+    "new_password": "Nouveau mot de passe",
+    "no_rich_text_description": "Ne formatez pas le texte",
+    "notification_visibility": "Types de notifications à afficher",
+    "notification_visibility_follows": "Abonnements",
+    "notification_visibility_likes": "J’aime",
+    "notification_visibility_mentions": "Mentionnés",
+    "notification_visibility_repeats": "Partages",
+    "nsfw_clickthrough": "Masquer les images marquées comme contenu adulte ou sensible",
+    "panelRadius": "Fenêtres",
+    "pause_on_unfocused": "Suspendre le streaming lorsque l'onglet n'est pas centré",
+    "presets": "Thèmes prédéfinis",
+    "profile_background": "Image de fond",
+    "profile_banner": "Bannière de profil",
+    "profile_tab": "Profil",
+    "radii_help": "Vous pouvez ici choisir le niveau d'arrondi des angles de l'interface (en pixels)",
+    "replies_in_timeline": "Réponses au journal",
+    "reply_link_preview": "Afficher un aperçu lors du survol de liens vers une réponse",
+    "reply_visibility_all": "Montrer toutes les réponses",
+    "reply_visibility_following": "Afficher uniquement les réponses adressées à moi ou aux utilisateurs que je suis",
+    "reply_visibility_self": "Afficher uniquement les réponses adressées à moi",
+    "saving_err": "Erreur lors de l'enregistrement des paramètres",
+    "saving_ok": "Paramètres enregistrés",
+    "security_tab": "Sécurité",
+    "set_new_avatar": "Changer d'avatar",
+    "set_new_profile_background": "Changer d'image de fond",
+    "set_new_profile_banner": "Changer de bannière",
+    "settings": "Paramètres",
+    "stop_gifs": "N'animer les GIFS que lors du survol du curseur de la souris",
+    "streaming": "Charger automatiquement les nouveaux statuts lorsque vous êtes au haut de la page",
+    "text": "Texte",
+    "theme": "Thème",
+    "theme_help": "Spécifiez des codes couleur hexadécimaux (#rrvvbb) pour personnaliser les couleurs du thème.",
+    "tooltipRadius": "Info-bulles/alertes",
+    "user_settings": "Paramètres utilisateur",
+    "values": {
+      "false": "non",
+      "true": "oui"
+    }
+  },
+  "timeline": {
+    "collapse": "Fermer",
+    "conversation": "Conversation",
+    "error_fetching": "Erreur en cherchant les mises à jour",
+    "load_older": "Afficher plus",
+    "no_retweet_hint": "Le message est marqué en abonnés-seulement ou direct et ne peut pas être répété",
+    "repeated": "a partagé",
+    "show_new": "Afficher plus",
+    "up_to_date": "À jour"
+  },
+  "user_card": {
+    "approve": "Accepter",
+    "block": "Bloquer",
+    "blocked": "Bloqué !",
+    "deny": "Rejeter",
+    "follow": "Suivre",
+    "followees": "Suivis",
+    "followers": "Vous suivent",
+    "following": "Suivi !",
+    "follows_you": "Vous suit !",
+    "mute": "Masquer",
+    "muted": "Masqué",
+    "per_day": "par jour",
+    "remote_follow": "Suivre d'une autre instance",
+    "statuses": "Statuts"
+  },
+  "user_profile": {
+    "timeline_title": "Journal de l'utilisateur"
+  },
+  "who_to_follow": {
+    "more": "Plus",
+    "who_to_follow": "Qui s'abonner"
+  }
+}

src/i18n/ga.json

@@ -0,0 +1,201 @@
+{
+  "chat": {
+    "title": "Comhrá"
+  },
+  "features_panel": {
+    "chat": "Comhrá",
+    "gopher": "Gófar",
+    "media_proxy": "Seachfhreastalaí meáin",
+    "scope_options": "Rogha scóip",
+    "text_limit": "Teorainn Téacs",
+    "title": "Gnéithe",
+    "who_to_follow": "Daoine le leanúint"
+  },
+  "finder": {
+    "error_fetching_user": "Earráid a aimsiú d'úsáideoir",
+    "find_user": "Aimsigh úsáideoir"
+  },
+  "general": {
+    "apply": "Feidhmigh",
+    "submit": "Deimhnigh"
+  },
+  "login": {
+    "login": "Logáil isteach",
+    "logout": "Logáil amach",
+    "password": "Pasfhocal",
+    "placeholder": "m.sh. Daire",
+    "register": "Clárú",
+    "username": "Ainm Úsáideora"
+  },
+  "nav": {
+    "chat": "Comhrá Áitiúil",
+    "friend_requests": "Iarratas ar Cairdeas",
+    "mentions": "Tagairt",
+    "public_tl": "Amlíne Poiblí",
+    "timeline": "Amlíne",
+    "twkn": "An Líonra Iomlán"
+  },
+  "notifications": {
+    "broken_favorite": "Post anaithnid. Cuardach dó...",
+    "favorited_you": "toghadh le do phost",
+    "followed_you": "lean tú",
+    "load_older": "Luchtaigh fógraí aosta",
+    "notifications": "Fógraí",
+    "read": "Léigh!",
+    "repeated_you": "athphostáil tú"
+  },
+  "post_status": {
+    "account_not_locked_warning": "Níl do chuntas {0}. Is féidir le duine ar bith a leanúint leat chun do phoist leantacha amháin a fheiceáil.",
+    "account_not_locked_warning_link": "faoi glas",
+    "attachments_sensitive": "Marcáil ceangaltán mar íogair",
+    "content_type": {
+      "plain_text": "Gnáth-théacs"
+    },
+    "content_warning": "Teideal (roghnach)",
+    "default": "Lá iontach anseo i nGaillimh",
+    "direct_warning": "Ní bheidh an post seo le feiceáil ach amháin do na húsáideoirí atá luaite.",
+    "posting": "Post nua",
+    "scope": {
+      "direct": "Díreach - Post chuig úsáideoirí luaite amháin",
+      "private": "Leanúna amháin - Post chuig lucht leanúna amháin",
+      "public": "Poiblí - Post chuig amlínte poiblí",
+      "unlisted": "Neamhliostaithe - Ná cuir post chuig amlínte poiblí"
+    }
+  },
+  "registration": {
+    "bio": "Scéal saoil",
+    "email": "Ríomhphost",
+    "fullname": "Ainm taispeána'",
+    "password_confirm": "Deimhnigh do pasfhocal",
+    "registration": "Clárú",
+    "token": "Cód cuireadh"
+  },
+  "settings": {
+    "attachmentRadius": "Ceangaltáin",
+    "attachments": "Ceangaltáin",
+    "autoload": "Cumasaigh luchtú uathoibríoch nuair a scrollaítear go bun",
+    "avatar": "Phictúir phrófíle",
+    "avatarAltRadius": "Phictúirí phrófíle (Fograí)",
+    "avatarRadius": "Phictúirí phrófíle",
+    "background": "Cúlra",
+    "bio": "Scéal saoil",
+    "btnRadius": "Cnaipí",
+    "cBlue": "Gorm (Freagra, lean)",
+    "cGreen": "Glas (Athphóstail)",
+    "cOrange": "Oráiste (Cosúil)",
+    "cRed": "Dearg (Cealaigh)",
+    "change_password": "Athraigh do pasfhocal",
+    "change_password_error": "Bhí fadhb ann ag athrú do pasfhocail",
+    "changed_password": "Athraigh an pasfhocal go rathúil!",
+    "collapse_subject": "Poist a chosc le teidil",
+    "confirm_new_password": "Deimhnigh do pasfhocal nua",
+    "current_avatar": "Phictúir phrófíle",
+    "current_password": "Pasfhocal reatha",
+    "current_profile_banner": "Phictúir ceanntáisc",
+    "data_import_export_tab": "Iompórtáil / Easpórtáil Sonraí",
+    "default_vis": "Scóip infheicthe réamhshocraithe",
+    "delete_account": "Scrios cuntas",
+    "delete_account_description": "Do chuntas agus do chuid teachtaireachtaí go léir a scriosadh go buan.",
+    "delete_account_error": "Bhí fadhb ann a scriosadh do chuntas. Má leanann sé seo, téigh i dteagmháil le do riarthóir.",
+    "delete_account_instructions": "Scríobh do phasfhocal san ionchur thíos chun deimhniú a scriosadh.",
+    "export_theme": "Sábháil Téama",
+    "filtering": "Scagadh",
+    "filtering_explanation": "Beidh gach post ina bhfuil na focail seo i bhfolach, ceann in aghaidh an líne",
+    "follow_export": "Easpórtáil do leanann",
+    "follow_export_button": "Easpórtáil do leanann chuig comhad csv",
+    "follow_export_processing": "Próiseáil. Iarrtar ort go luath an comhad a íoslódáil.",
+    "follow_import": "Iompórtáil do leanann",
+    "follow_import_error": "Earráid agus do leanann a iompórtáil",
+    "follows_imported": "Do leanann iompórtáil! Tógfaidh an próiseas iad le tamall.",
+    "foreground": "Tulra",
+    "general": "Ginearálta",
+    "hide_attachments_in_convo": "Folaigh ceangaltáin i comhráite",
+    "hide_attachments_in_tl": "Folaigh ceangaltáin sa amlíne",
+    "hide_post_stats": "Folaigh staitisticí na bpost (m.sh. líon na n-athrá)",
+    "hide_user_stats": "Folaigh na staitisticí úsáideora (m.sh. líon na leantóiri)",
+    "import_followers_from_a_csv_file": "Iompórtáil leanann ó chomhad csv",
+    "import_theme": "Luchtaigh Téama",
+    "inputRadius": "Limistéar iontrála",
+    "instance_default": "(Réamhshocrú: {value})",
+    "interfaceLanguage": "Teanga comhéadain",
+    "invalid_theme_imported": "Ní téama bailí é an comhad dícheangailte. Níor rinneadh aon athruithe.",
+    "limited_availability": "Níl sé ar fáil i do bhrabhsálaí",
+    "links": "Naisc",
+    "lock_account_description": "Srian a chur ar do chuntas le lucht leanúna ceadaithe amháin",
+    "loop_video": "Lúb físeáin",
+    "loop_video_silent_only": "Lúb físeáin amháin gan fuaim (i.e. Mastodon's \"gifs\")",
+    "name": "Ainm",
+    "name_bio": "Ainm ⁊ Scéal",
+    "new_password": "Pasfhocal nua'",
+    "notification_visibility": "Cineálacha fógraí a thaispeáint",
+    "notification_visibility_follows": "Leana",
+    "notification_visibility_likes": "Thaithin",
+    "notification_visibility_mentions": "Tagairt",
+    "notification_visibility_repeats": "Atphostáil",
+    "no_rich_text_description": "Bain formáidiú téacs saibhir ó gach post",
+    "nsfw_clickthrough": "Cumasaigh an ceangaltán NSFW cliceáil ar an gcnaipe",
+    "panelRadius": "Painéil",
+    "pause_on_unfocused": "Sruthú ar sos nuair a bhíonn an fócas caillte",
+    "presets": "Réamhshocruithe",
+    "profile_background": "Cúlra Próifíl",
+    "profile_banner": "Phictúir Ceanntáisc",
+    "profile_tab": "Próifíl",
+    "radii_help": "Cruinniú imeall comhéadan a chumrú (i bpicteilíní)",
+    "replies_in_timeline": "Freagraí sa amlíne",
+    "reply_link_preview": "Cumasaigh réamhamharc nasc freagartha ar chlár na luiche",
+    "reply_visibility_all": "Taispeáin gach freagra",
+    "reply_visibility_following": "Taispeáin freagraí amháin atá dírithe ar mise nó ar úsáideoirí atá mé ag leanúint",
+    "reply_visibility_self": "Taispeáin freagraí amháin atá dírithe ar mise",
+    "saving_err": "Earráid socruithe a shábháil",
+    "saving_ok": "Socruithe sábháilte",
+    "security_tab": "Slándáil",
+    "set_new_avatar": "Athraigh do phictúir phrófíle",
+    "set_new_profile_background": "Athraigh do cúlra próifíl",
+    "set_new_profile_banner": "Athraigh do phictúir ceanntáisc",
+    "settings": "Socruithe",
+    "stop_gifs": "Seinn GIFs ar an scáileán",
+    "streaming": "Cumasaigh post nua a shruthú uathoibríoch nuair a scrollaítear go barr an leathanaigh",
+    "text": "Téacs",
+    "theme": "Téama",
+    "theme_help": "Úsáid cód daith hex (#rrggbb) chun do schéim a saincheapadh",
+    "tooltipRadius": "Bileoga eolais",
+    "user_settings": "Socruithe úsáideora",
+    "values": {
+      "false": "níl",
+      "true": "tá"
+    }
+  },
+  "timeline": {
+    "collapse": "Folaigh",
+    "conversation": "Cómhra",
+    "error_fetching": "Earráid a thabhairt cothrom le dáta",
+    "load_older": "Luchtaigh níos mó",
+    "no_retweet_hint": "Tá an post seo marcáilte mar lucht leanúna amháin nó díreach agus ní féidir é a athphostáil",
+    "repeated": "athphostáil",
+    "show_new": "Taispeáin nua",
+    "up_to_date": "Nuashonraithe"
+  },
+  "user_card": {
+    "approve": "Údaraigh",
+    "block": "Cosc",
+    "blocked": "Cuireadh coisc!",
+    "deny": "Diúltaigh",
+    "follow": "Lean",
+    "followees": "Leantóirí",
+    "followers": "Á Leanúint",
+    "following": "Á Leanúint",
+    "follows_you": "Leanann tú",
+    "mute": "Cuir i mód ciúin",
+    "muted": "Mód ciúin",
+    "per_day": "laethúil",
+    "remote_follow": "Leaníunt iargúlta",
+    "statuses": "Poist"
+  },
+  "user_profile": {
+    "timeline_title": "Amlíne úsáideora"
+  },
+  "who_to_follow": {
+    "more": "Feach uile",
+    "who_to_follow": "Daoine le leanúint"
+  }
+}

src/i18n/he.json

@@ -0,0 +1,190 @@
+{
+  "chat": {
+    "title": "צ'אט"
+  },
+  "features_panel": {
+    "chat": "צ'אט",
+    "gopher": "גופר",
+    "media_proxy": "מדיה פרוקסי",
+    "scope_options": "אפשרויות טווח",
+    "text_limit": "מגבלת טקסט",
+    "title": "מאפיינים",
+    "who_to_follow": "אחרי מי לעקוב"
+  },
+  "finder": {
+    "error_fetching_user": "שגיאה במציאת משתמש",
+    "find_user": "מציאת משתמש"
+  },
+  "general": {
+    "apply": "החל",
+    "submit": "שלח"
+  },
+  "login": {
+    "login": "התחבר",
+    "logout": "התנתק",
+    "password": "סיסמה",
+    "placeholder": "למשל lain",
+    "register": "הירשם",
+    "username": "שם המשתמש"
+  },
+  "nav": {
+    "chat": "צ'אט מקומי",
+    "friend_requests": "בקשות עקיבה",
+    "mentions": "אזכורים",
+    "public_tl": "ציר הזמן הציבורי",
+    "timeline": "ציר הזמן",
+    "twkn": "כל הרשת הידועה"
+  },
+  "notifications": {
+    "broken_favorite": "סטאטוס לא ידוע, מחפש...",
+    "favorited_you": "אהב את הסטטוס שלך",
+    "followed_you": "עקב אחריך!",
+    "load_older": "טען התראות ישנות",
+    "notifications": "התראות",
+    "read": "קרא!",
+    "repeated_you": "חזר על הסטטוס שלך"
+  },
+  "post_status": {
+    "account_not_locked_warning": "המשתמש שלך אינו {0}. כל אחד יכול לעקוב אחריך ולראות את ההודעות לעוקבים-בלבד שלך.",
+    "account_not_locked_warning_link": "נעול",
+    "attachments_sensitive": "סמן מסמכים מצורפים כלא בטוחים לצפייה",
+    "content_type": {
+      "plain_text": "טקסט פשוט"
+    },
+    "content_warning": "נושא (נתון לבחירה)",
+    "default": "הרגע נחת ב-ל.א.",
+    "direct_warning": "הודעה זו תהיה זמינה רק לאנשים המוזכרים.",
+    "posting": "מפרסם",
+    "scope": {
+      "direct": "ישיר - שלח לאנשים המוזכרים בלבד",
+      "private": "עוקבים-בלבד - שלח לעוקבים בלבד",
+      "public": "ציבורי - שלח לציר הזמן הציבורי",
+      "unlisted": "מחוץ לרשימה - אל תשלח לציר הזמן הציבורי"
+    }
+  },
+  "registration": {
+    "bio": "אודות",
+    "email": "אימייל",
+    "fullname": "שם תצוגה",
+    "password_confirm": "אישור סיסמה",
+    "registration": "הרשמה",
+    "token": "טוקן הזמנה"
+  },
+  "settings": {
+    "attachmentRadius": "צירופים",
+    "attachments": "צירופים",
+    "autoload": "החל טעינה אוטומטית בגלילה לתחתית הדף",
+    "avatar": "תמונת פרופיל",
+    "avatarAltRadius": "תמונות פרופיל (התראות)",
+    "avatarRadius": "תמונות פרופיל",
+    "background": "רקע",
+    "bio": "אודות",
+    "btnRadius": "כפתורים",
+    "cBlue": "כחול (תגובה, עקיבה)",
+    "cGreen": "ירוק (חזרה)",
+    "cOrange": "כתום (לייק)",
+    "cRed": "אדום (ביטול)",
+    "change_password": "שנה סיסמה",
+    "change_password_error": "הייתה בעיה בשינוי סיסמתך.",
+    "changed_password": "סיסמה שונתה בהצלחה!",
+    "collapse_subject": "מזער הודעות עם נושאים",
+    "confirm_new_password": "אשר סיסמה",
+    "current_avatar": "תמונת הפרופיל הנוכחית שלך",
+    "current_password": "סיסמה נוכחית",
+    "current_profile_banner": "כרזת הפרופיל הנוכחית שלך",
+    "data_import_export_tab": "ייבוא או ייצוא מידע",
+    "default_vis": "ברירת מחדל לטווח הנראות",
+    "delete_account": "מחק משתמש",
+    "delete_account_description": "מחק לצמיתות את המשתמש שלך ואת כל הודעותיך.",
+    "delete_account_error": "הייתה בעיה במחיקת המשתמש. אם זה ממשיך, אנא עדכן את מנהל השרת שלך.",
+    "delete_account_instructions": "הכנס את סיסמתך בקלט למטה על מנת לאשר מחיקת משתמש.",
+    "export_theme": "שמור ערכים",
+    "filtering": "סינון",
+    "filtering_explanation": "כל הסטטוסים הכוללים את המילים הללו יושתקו, אחד לשורה",
+    "follow_export": "יצוא עקיבות",
+    "follow_export_button": "ייצא את הנעקבים שלך לקובץ csv",
+    "follow_export_processing": "טוען. בקרוב תתבקש להוריד את הקובץ את הקובץ שלך",
+    "follow_import": "יבוא עקיבות",
+    "follow_import_error": "שגיאה בייבוא נעקבים.",
+    "follows_imported": "נעקבים יובאו! ייקח זמן מה לעבד אותם.",
+    "foreground": "חזית",
+    "hide_attachments_in_convo": "החבא צירופים בשיחות",
+    "hide_attachments_in_tl": "החבא צירופים בציר הזמן",
+    "import_followers_from_a_csv_file": "ייבא את הנעקבים שלך מקובץ csv",
+    "import_theme": "טען ערכים",
+    "inputRadius": "שדות קלט",
+    "interfaceLanguage": "שפת הממשק",
+    "invalid_theme_imported": "הקובץ הנבחר אינו תמה הנתמכת ע\"י פלרומה. שום שינויים לא נעשו לתמה שלך.",
+    "limited_availability": "לא זמין בדפדפן שלך",
+    "links": "לינקים",
+    "lock_account_description": "הגבל את המשתמש לעוקבים מאושרים בלבד",
+    "loop_video": "נגן סרטונים ללא הפסקה",
+    "loop_video_silent_only": "נגן רק סרטונים חסרי קול ללא הפסקה",
+    "name": "שם",
+    "name_bio": "שם ואודות",
+    "new_password": "סיסמה חדשה",
+    "notification_visibility": "סוג ההתראות שתרצו לראות",
+    "notification_visibility_follows": "עקיבות",
+    "notification_visibility_likes": "לייקים",
+    "notification_visibility_mentions": "אזכורים",
+    "notification_visibility_repeats": "חזרות",
+    "nsfw_clickthrough": "החל החבאת צירופים לא בטוחים לצפיה בעת עבודה בעזרת לחיצת עכבר",
+    "panelRadius": "פאנלים",
+    "pause_on_unfocused": "השהה זרימת הודעות כשהחלון לא בפוקוס",
+    "presets": "ערכים קבועים מראש",
+    "profile_background": "רקע הפרופיל",
+    "profile_banner": "כרזת הפרופיל",
+    "profile_tab": "פרופיל",
+    "radii_help": "קבע מראש עיגול פינות לממשק (בפיקסלים)",
+    "replies_in_timeline": "תגובות בציר הזמן",
+    "reply_link_preview": "החל תצוגה מקדימה של לינק-תגובה בעת ריחוף עם העכבר",
+    "reply_visibility_all": "הראה את כל התגובות",
+    "reply_visibility_following": "הראה תגובות שמופנות אליי או לעקובים שלי בלבד",
+    "reply_visibility_self": "הראה תגובות שמופנות אליי בלבד",
+    "security_tab": "ביטחון",
+    "set_new_avatar": "קבע תמונת פרופיל חדשה",
+    "set_new_profile_background": "קבע רקע פרופיל חדש",
+    "set_new_profile_banner": "קבע כרזת פרופיל חדשה",
+    "settings": "הגדרות",
+    "stop_gifs": "נגן-בעת-ריחוף GIFs",
+    "streaming": "החל זרימת הודעות אוטומטית בעת גלילה למעלה הדף",
+    "text": "טקסט",
+    "theme": "תמה",
+    "theme_help": "השתמש בקודי צבע הקס (#אדום-אדום-ירוק-ירוק-כחול-כחול) על מנת להתאים אישית את תמת הצבע שלך.",
+    "tooltipRadius": "טולטיפ \\ התראות",
+    "user_settings": "הגדרות משתמש"
+  },
+  "timeline": {
+    "collapse": "מוטט",
+    "conversation": "שיחה",
+    "error_fetching": "שגיאה בהבאת הודעות",
+    "load_older": "טען סטטוסים חדשים",
+    "no_retweet_hint": "ההודעה מסומנת כ\"לעוקבים-בלבד\" ולא ניתן לחזור עליה",
+    "repeated": "חזר",
+    "show_new": "הראה חדש",
+    "up_to_date": "עדכני"
+  },
+  "user_card": {
+    "approve": "אשר",
+    "block": "חסימה",
+    "blocked": "חסום!",
+    "deny": "דחה",
+    "follow": "עקוב",
+    "followees": "נעקבים",
+    "followers": "עוקבים",
+    "following": "עוקב!",
+    "follows_you": "עוקב אחריך!",
+    "mute": "השתק",
+    "muted": "מושתק",
+    "per_day": "ליום",
+    "remote_follow": "עקיבה מרחוק",
+    "statuses": "סטטוסים"
+  },
+  "user_profile": {
+    "timeline_title": "ציר זמן המשתמש"
+  },
+  "who_to_follow": {
+    "more": "עוד",
+    "who_to_follow": "אחרי מי לעקוב"
+  }
+}

src/i18n/hu.json

@@ -0,0 +1,83 @@
+{
+  "finder": {
+    "error_fetching_user": "Hiba felhasználó beszerzésével",
+    "find_user": "Felhasználó keresése"
+  },
+  "general": {
+    "submit": "Elküld"
+  },
+  "login": {
+    "login": "Bejelentkezés",
+    "logout": "Kijelentkezés",
+    "password": "Jelszó",
+    "placeholder": "e.g. lain",
+    "register": "Feliratkozás",
+    "username": "Felhasználó név"
+  },
+  "nav": {
+    "mentions": "Említéseim",
+    "public_tl": "Publikus Idővonal",
+    "timeline": "Idővonal",
+    "twkn": "Az Egész Ismert Hálózat"
+  },
+  "notifications": {
+    "followed_you": "követ téged",
+    "notifications": "Értesítések",
+    "read": "Olvasva!"
+  },
+  "post_status": {
+    "default": "Most érkeztem L.A.-be",
+    "posting": "Küldés folyamatban"
+  },
+  "registration": {
+    "bio": "Bio",
+    "email": "Email",
+    "fullname": "Teljes név",
+    "password_confirm": "Jelszó megerősítése",
+    "registration": "Feliratkozás"
+  },
+  "settings": {
+    "attachments": "Csatolmányok",
+    "autoload": "Autoatikus betöltés engedélyezése lap aljára görgetéskor",
+    "avatar": "Avatár",
+    "bio": "Bio",
+    "current_avatar": "Jelenlegi avatár",
+    "current_profile_banner": "Jelenlegi profil banner",
+    "filtering": "Szűrés",
+    "filtering_explanation": "Minden tartalom mely ezen szavakat tartalmazza némítva lesz, soronként egy",
+    "hide_attachments_in_convo": "Csatolmányok elrejtése a társalgásokban",
+    "hide_attachments_in_tl": "Csatolmányok elrejtése az idővonalon",
+    "name": "Név",
+    "name_bio": "Név és Bio",
+    "nsfw_clickthrough": "NSFW átkattintási tartalom elrejtésének engedélyezése",
+    "profile_background": "Profil háttérkép",
+    "profile_banner": "Profil Banner",
+    "reply_link_preview": "Válasz-link előzetes mutatása egér rátételkor",
+    "set_new_avatar": "Új avatár",
+    "set_new_profile_background": "Új profil háttér beállítása",
+    "set_new_profile_banner": "Új profil banner",
+    "settings": "Beállítások",
+    "theme": "Téma",
+    "user_settings": "Felhasználói beállítások"
+  },
+  "timeline": {
+    "conversation": "Társalgás",
+    "error_fetching": "Hiba a frissítések beszerzésénél",
+    "load_older": "Régebbi állapotok betöltése",
+    "show_new": "Újak mutatása",
+    "up_to_date": "Naprakész"
+  },
+  "user_card": {
+    "block": "Letilt",
+    "blocked": "Letiltva!",
+    "follow": "Követ",
+    "followees": "Követettek",
+    "followers": "Követők",
+    "following": "Követve!",
+    "follows_you": "Követ téged!",
+    "mute": "Némít",
+    "muted": "Némított",
+    "per_day": "naponta",
+    "statuses": "Állapotok"
+  }
+}

src/i18n/it.json

@@ -0,0 +1,201 @@
+{
+  "general": {
+    "submit": "Invia",
+    "apply": "Applica"
+  },
+  "nav": {
+    "mentions": "Menzioni",
+    "public_tl": "Sequenza temporale pubblica",
+    "timeline": "Sequenza temporale",
+    "twkn": "L'intera rete conosciuta",
+    "chat": "Chat Locale",
+    "friend_requests": "Richieste di Seguirti"
+  },
+  "notifications": {
+    "followed_you": "ti segue",
+    "notifications": "Notifiche",
+    "read": "Leggi!",
+    "broken_favorite": "Stato sconosciuto, lo sto cercando...",
+    "favorited_you": "ha messo mi piace al tuo stato",
+    "load_older": "Carica notifiche più vecchie",
+    "repeated_you": "ha condiviso il tuo stato"
+  },
+  "settings": {
+    "attachments": "Allegati",
+    "autoload": "Abilita caricamento automatico quando si raggiunge fondo pagina",
+    "avatar": "Avatar",
+    "bio": "Introduzione",
+    "current_avatar": "Il tuo avatar attuale",
+    "current_profile_banner": "Il tuo banner attuale",
+    "filtering": "Filtri",
+    "filtering_explanation": "Tutti i post contenenti queste parole saranno silenziati, uno per linea",
+    "hide_attachments_in_convo": "Nascondi gli allegati presenti nelle conversazioni",
+    "hide_attachments_in_tl": "Nascondi gli allegati presenti nella sequenza temporale",
+    "name": "Nome",
+    "name_bio": "Nome & Introduzione",
+    "nsfw_clickthrough": "Abilita il click per visualizzare gli allegati segnati come NSFW",
+    "profile_background": "Sfondo della tua pagina",
+    "profile_banner": "Banner del tuo profilo",
+    "reply_link_preview": "Abilita il link per la risposta al passaggio del mouse",
+    "set_new_avatar": "Scegli un nuovo avatar",
+    "set_new_profile_background": "Scegli un nuovo sfondo per la tua pagina",
+    "set_new_profile_banner": "Scegli un nuovo banner per il tuo profilo",
+    "settings": "Impostazioni",
+    "theme": "Tema",
+    "user_settings": "Impostazioni Utente",
+    "attachmentRadius": "Allegati",
+    "avatarAltRadius": "Avatar (Notifiche)",
+    "avatarRadius": "Avatar",
+    "background": "Sfondo",
+    "btnRadius": "Pulsanti",
+    "cBlue": "Blu (Rispondere, seguire)",
+    "cGreen": "Verde (Condividi)",
+    "cOrange": "Arancio (Mi piace)",
+    "cRed": "Rosso (Annulla)",
+    "change_password": "Cambia Password",
+    "change_password_error": "C'è stato un problema durante il cambiamento della password.",
+    "changed_password": "Password cambiata correttamente!",
+    "collapse_subject": "Riduci post che hanno un oggetto",
+    "confirm_new_password": "Conferma la nuova password",
+    "current_password": "Password attuale",
+    "data_import_export_tab": "Importa / Esporta Dati",
+    "default_vis": "Visibilità predefinita dei post",
+    "delete_account": "Elimina Account",
+    "delete_account_description": "Elimina definitivamente il tuo account e tutti i tuoi messaggi.",
+    "delete_account_error": "C'è stato un problema durante l'eliminazione del tuo account. Se il problema persiste contatta l'amministratore della tua istanza.",
+    "delete_account_instructions": "Digita la tua password nel campo sottostante per confermare l'eliminazione dell'account.",
+    "export_theme": "Salva settaggi",
+    "follow_export": "Esporta la lista di chi segui",
+    "follow_export_button": "Esporta la lista di chi segui in un file csv",
+    "follow_export_processing": "Sto elaborando, presto ti sarà chiesto di scaricare il tuo file",
+    "follow_import": "Importa la lista di chi segui",
+    "follow_import_error": "Errore nell'importazione della lista di chi segui",
+    "follows_imported": "Importazione riuscita! L'elaborazione richiederà un po' di tempo.",
+    "foreground": "In primo piano",
+    "general": "Generale",
+    "hide_post_stats": "Nascondi statistiche dei post (es. il numero di mi piace)",
+    "hide_user_stats": "Nascondi statistiche dell'utente (es. il numero di chi ti segue)",
+    "import_followers_from_a_csv_file": "Importa una lista di chi segui da un file csv",
+    "import_theme": "Carica settaggi",
+    "inputRadius": "Campi di testo",
+    "instance_default": "(predefinito: {value})",
+    "interfaceLanguage": "Linguaggio dell'interfaccia",
+    "invalid_theme_imported": "Il file selezionato non è un file di tema per Pleroma supportato. Il tuo tema non è stato modificato.",
+    "limited_availability": "Non disponibile nel tuo browser",
+    "links": "Collegamenti",
+    "lock_account_description": "Limita il tuo account solo per contatti approvati",
+    "loop_video": "Riproduci video in ciclo continuo",
+    "loop_video_silent_only": "Riproduci solo video senza audio in ciclo continuo (es. le gif di Mastodon)",
+    "new_password": "Nuova password",
+    "notification_visibility": "Tipi di notifiche da mostrare",
+    "notification_visibility_follows": "Nuove persone ti seguono",
+    "notification_visibility_likes": "Mi piace",
+    "notification_visibility_mentions": "Menzioni",
+    "notification_visibility_repeats": "Condivisioni",
+    "no_rich_text_description": "Togli la formattazione del testo da tutti i post",
+    "panelRadius": "Pannelli",
+    "pause_on_unfocused": "Metti in pausa l'aggiornamento continuo quando la scheda non è in primo piano",
+    "presets": "Valori predefiniti",
+    "profile_tab": "Profilo",
+    "radii_help": "Imposta l'arrotondamento dei bordi (in pixel)",
+    "replies_in_timeline": "Risposte nella sequenza temporale",
+    "reply_visibility_all": "Mostra tutte le risposte",
+    "reply_visibility_following": "Mostra solo le risposte dirette a me o agli utenti che seguo",
+    "reply_visibility_self": "Mostra solo risposte dirette a me",
+    "saving_err": "Errore nel salvataggio delle impostazioni",
+    "saving_ok": "Impostazioni salvate",
+    "security_tab": "Sicurezza",
+    "stop_gifs": "Riproduci GIF al passaggio del cursore del mouse",
+    "streaming": "Abilita aggiornamento automatico dei nuovi post quando si è in alto alla pagina",
+    "text": "Testo",
+    "theme_help": "Usa codici colore esadecimali (#rrggbb) per personalizzare il tuo schema di colori.",
+    "tooltipRadius": "Descrizioni/avvisi",
+    "values": {
+      "false": "no",
+      "true": "si"
+    }
+  },
+  "timeline": {
+    "error_fetching": "Errore nel prelievo aggiornamenti",
+    "load_older": "Carica messaggi più vecchi",
+    "show_new": "Mostra nuovi",
+    "up_to_date": "Aggiornato",
+    "collapse": "Riduci",
+    "conversation": "Conversazione",
+    "no_retweet_hint": "La visibilità del post è impostata solo per chi ti segue o messaggio diretto e non può essere condiviso",
+    "repeated": "condiviso"
+  },
+  "user_card": {
+    "follow": "Segui",
+    "followees": "Chi stai seguendo",
+    "followers": "Chi ti segue",
+    "following": "Lo stai seguendo!",
+    "follows_you": "Ti segue!",
+    "mute": "Silenzia",
+    "muted": "Silenziato",
+    "per_day": "al giorno",
+    "statuses": "Messaggi",
+    "approve": "Approva",
+    "block": "Blocca",
+    "blocked": "Bloccato!",
+    "deny": "Nega",
+    "remote_follow": "Segui da remoto"
+  },
+  "chat": {
+    "title": "Chat"
+  },
+  "features_panel": {
+    "chat": "Chat",
+    "gopher": "Gopher",
+    "media_proxy": "Media proxy",
+    "scope_options": "Opzioni di visibilità",
+    "text_limit": "Lunghezza limite",
+    "title": "Caratteristiche",
+    "who_to_follow": "Chi seguire"
+  },
+  "finder": {
+    "error_fetching_user": "Errore nel recupero dell'utente",
+    "find_user": "Trova utente"
+  },
+  "login": {
+    "login": "Accedi",
+    "logout": "Disconnettiti",
+    "password": "Password",
+    "placeholder": "es. lain",
+    "register": "Registrati",
+    "username": "Nome utente"
+  },
+  "post_status": {
+    "account_not_locked_warning": "Il tuo account non è {0}. Chiunque può seguirti e vedere i tuoi post riservati a chi ti segue.",
+    "account_not_locked_warning_link": "bloccato",
+    "attachments_sensitive": "Segna allegati come sensibili",
+    "content_type": {
+      "plain_text": "Testo normale"
+    },
+    "content_warning": "Oggetto (facoltativo)",
+    "default": "Appena atterrato in L.A.",
+    "direct_warning": "Questo post sarà visibile solo dagli utenti menzionati.",
+    "posting": "Pubblica",
+    "scope": {
+      "direct": "Diretto - Pubblicato solo per gli utenti menzionati",
+      "private": "Solo per chi ti segue - Visibile solo da chi ti segue",
+      "public": "Pubblico - Visibile sulla sequenza temporale pubblica",
+      "unlisted": "Non elencato - Non visibile sulla sequenza temporale pubblica"
+    }
+  },
+  "registration": {
+    "bio": "Introduzione",
+    "email": "Email",
+    "fullname": "Nome visualizzato",
+    "password_confirm": "Conferma password",
+    "registration": "Registrazione",
+    "token": "Codice d'invito"
+  },
+  "user_profile": {
+    "timeline_title": "Sequenza Temporale dell'Utente"
+  },
+  "who_to_follow": {
+    "more": "Più",
+    "who_to_follow": "Chi seguire"
+  }
+}

src/i18n/ja.json

@@ -0,0 +1,203 @@
+{
+  "chat": {
+    "title": "チャット"
+  },
+  "features_panel": {
+    "chat": "チャット",
+    "gopher": "Gopher",
+    "media_proxy": "メディアプロクシ",
+    "scope_options": "こうかいはんいせんたく",
+    "text_limit": "もじのかず",
+    "title": "ゆうこうなきのう",
+    "who_to_follow": "おすすめユーザー"
+  },
+  "finder": {
+    "error_fetching_user": "ユーザーけんさくがエラーになりました。",
+    "find_user": "ユーザーをさがす"
+  },
+  "general": {
+    "apply": "てきよう",
+    "submit": "そうしん"
+  },
+  "login": {
+    "login": "ログイン",
+    "description": "OAuthでログイン",
+    "logout": "ログアウト",
+    "password": "パスワード",
+    "placeholder": "れい: lain",
+    "register": "はじめる",
+    "username": "ユーザーめい"
+  },
+  "nav": {
+    "chat": "ローカルチャット",
+    "friend_requests": "フォローリクエスト",
+    "mentions": "メンション",
+    "dms": "ダイレクトメッセージ",
+    "public_tl": "パブリックタイムライン",
+    "timeline": "タイムライン",
+    "twkn": "つながっているすべてのネットワーク"
+  },
+  "notifications": {
+    "broken_favorite": "ステータスがみつかりません。さがしています...",
+    "favorited_you": "あなたのステータスがおきにいりされました",
+    "followed_you": "フォローされました",
+    "load_older": "ふるいつうちをみる",
+    "notifications": "つうち",
+    "read": "よんだ！",
+    "repeated_you": "あなたのステータスがリピートされました"
+  },
+  "post_status": {
+    "account_not_locked_warning": "あなたのアカウントは {0} ではありません。あなたをフォローすれば、だれでも、フォロワーげんていのステータスをよむことができます。",
+    "account_not_locked_warning_link": "ロックされたアカウント",
+    "attachments_sensitive": "ファイルをNSFWにする",
+    "content_type": {
+      "plain_text": "プレーンテキスト"
+    },
+    "content_warning": "せつめい (かかなくてもよい)",
+    "default": "はねだくうこうに、つきました。",
+    "direct_warning": "このステータスは、メンションされたユーザーだけが、よむことができます。",
+    "posting": "とうこう",
+    "scope": {
+      "direct": "ダイレクト: メンションされたユーザーのみにとどきます。",
+      "private": "フォロワーげんてい: フォロワーのみにとどきます。",
+      "public": "パブリック: パブリックタイムラインにとどきます。",
+      "unlisted": "アンリステッド: パブリックタイムラインにとどきません。"
+    }
+  },
+  "registration": {
+    "bio": "プロフィール",
+    "email": "Eメール",
+    "fullname": "スクリーンネーム",
+    "password_confirm": "パスワードのかくにん",
+    "registration": "はじめる",
+    "token": "しょうたいトークン"
+  },
+  "settings": {
+    "attachmentRadius": "ファイル",
+    "attachments": "ファイル",
+    "autoload": "したにスクロールしたとき、じどうてきによみこむ。",
+    "avatar": "アバター",
+    "avatarAltRadius": "つうちのアバター",
+    "avatarRadius": "アバター",
+    "background": "バックグラウンド",
+    "bio": "プロフィール",
+    "btnRadius": "ボタン",
+    "cBlue": "リプライとフォロー",
+    "cGreen": "リピート",
+    "cOrange": "おきにいり",
+    "cRed": "キャンセル",
+    "change_password": "パスワードをかえる",
+    "change_password_error": "パスワードをかえることが、できなかったかもしれません。",
+    "changed_password": "パスワードが、かわりました！",
+    "collapse_subject": "せつめいのあるとうこうをたたむ",
+    "confirm_new_password": "あたらしいパスワードのかくにん",
+    "current_avatar": "いまのアバター",
+    "current_password": "いまのパスワード",
+    "current_profile_banner": "いまのプロフィールバナー",
+    "data_import_export_tab": "インポートとエクスポート",
+    "default_vis": "デフォルトのこうかいはんい",
+    "delete_account": "アカウントをけす",
+    "delete_account_description": "あなたのアカウントとメッセージが、きえます。",
+    "delete_account_error": "アカウントをけすことが、できなかったかもしれません。インスタンスのかんりしゃに、れんらくしてください。",
+    "delete_account_instructions": "ほんとうにアカウントをけしてもいいなら、パスワードをかいてください。",
+    "export_theme": "セーブ",
+    "filtering": "フィルタリング",
+    "filtering_explanation": "これらのことばをふくむすべてのものがミュートされます。1ぎょうに1つのことばをかいてください。",
+    "follow_export": "フォローのエクスポート",
+    "follow_export_button": "エクスポート",
+    "follow_export_processing": "おまちください。まもなくファイルをダウンロードできます。",
+    "follow_import": "フォローインポート",
+    "follow_import_error": "フォローのインポートがエラーになりました。",
+    "follows_imported": "フォローがインポートされました！ すこしじかんがかかるかもしれません。",
+    "foreground": "フォアグラウンド",
+    "general": "ぜんぱん",
+    "hide_attachments_in_convo": "スレッドのファイルをかくす",
+    "hide_attachments_in_tl": "タイムラインのファイルをかくす",
+    "hide_post_stats": "とうこうのとうけいをかくす (れい: おきにいりのかず)",
+    "hide_user_stats": "ユーザーのとうけいをかくす (れい: フォロワーのかず)",
+    "import_followers_from_a_csv_file": "CSVファイルからフォローをインポートする",
+    "import_theme": "ロード",
+    "inputRadius": "インプットフィールド",
+    "instance_default": "(デフォルト: {value})",
+    "interfaceLanguage": "インターフェースのことば",
+    "invalid_theme_imported": "このファイルはPleromaのテーマではありません。テーマはへんこうされませんでした。",
+    "limited_availability": "あなたのブラウザではできません",
+    "links": "リンク",
+    "lock_account_description": "あなたがみとめたひとだけ、あなたのアカウントをフォローできます",
+    "loop_video": "ビデオをくりかえす",
+    "loop_video_silent_only": "おとのないビデオだけくりかえす",
+    "name": "なまえ",
+    "name_bio": "なまえとプロフィール",
+    "new_password": "あたらしいパスワード",
+    "notification_visibility": "ひょうじするつうち",
+    "notification_visibility_follows": "フォロー",
+    "notification_visibility_likes": "おきにいり",
+    "notification_visibility_mentions": "メンション",
+    "notification_visibility_repeats": "リピート",
+    "no_rich_text_description": "リッチテキストをつかわない",
+    "nsfw_clickthrough": "NSFWなファイルをかくす",
+    "panelRadius": "パネル",
+    "pause_on_unfocused": "タブにフォーカスがないときストリーミングをとめる",
+    "presets": "プリセット",
+    "profile_background": "プロフィールのバックグラウンド",
+    "profile_banner": "プロフィールバナー",
+    "profile_tab": "プロフィール",
+    "radii_help": "インターフェースのまるさをせっていする。",
+    "replies_in_timeline": "タイムラインのリプライ",
+    "reply_link_preview": "カーソルをかさねたとき、リプライのプレビューをみる",
+    "reply_visibility_all": "すべてのリプライをみる",
+    "reply_visibility_following": "わたしにあてられたリプライと、フォローしているひとからのリプライをみる",
+    "reply_visibility_self": "わたしにあてられたリプライをみる",
+    "saving_err": "せっていをセーブできませんでした",
+    "saving_ok": "せっていをセーブしました",
+    "security_tab": "セキュリティ",
+    "set_new_avatar": "あたらしいアバターをせっていする",
+    "set_new_profile_background": "あたらしいプロフィールのバックグラウンドをせっていする",
+    "set_new_profile_banner": "あたらしいプロフィールバナーを設定する",
+    "settings": "せってい",
+    "stop_gifs": "カーソルをかさねたとき、GIFをうごかす",
+    "streaming": "うえまでスクロールしたとき、じどうてきにストリーミングする",
+    "text": "もじ",
+    "theme": "テーマ",
+    "theme_help": "カラーテーマをカスタマイズできます",
+    "tooltipRadius": "ツールチップとアラート",
+    "user_settings": "ユーザーせってい",
+    "values": {
+      "false": "いいえ",
+      "true": "はい"
+    }
+  },
+  "timeline": {
+    "collapse": "たたむ",
+    "conversation": "スレッド",
+    "error_fetching": "よみこみがエラーになりました",
+    "load_older": "ふるいステータス",
+    "no_retweet_hint": "とうこうを「フォロワーのみ」または「ダイレクト」にすると、リピートできなくなります",
+    "repeated": "リピート",
+    "show_new": "よみこみ",
+    "up_to_date": "さいしん"
+  },
+  "user_card": {
+    "approve": "うけいれ",
+    "block": "ブロック",
+    "blocked": "ブロックしています！",
+    "deny": "おことわり",
+    "follow": "フォロー",
+    "followees": "フォロー",
+    "followers": "フォロワー",
+    "following": "フォローしています！",
+    "follows_you": "フォローされました！",
+    "mute": "ミュート",
+    "muted": "ミュートしています！",
+    "per_day": "/日",
+    "remote_follow": "リモートフォロー",
+    "statuses": "ステータス"
+  },
+  "user_profile": {
+    "timeline_title": "ユーザータイムライン"
+  },
+  "who_to_follow": {
+    "more": "くわしく",
+    "who_to_follow": "おすすめユーザー"
+  }
+}

src/i18n/nb.json

@@ -0,0 +1,199 @@
+{
+  "chat": {
+    "title": "Nettprat"
+  },
+  "features_panel": {
+    "chat": "Nettprat",
+    "gopher": "Gopher",
+    "media_proxy": "Media proxy",
+    "scope_options": "Velg mottakere",
+    "text_limit": "Tekst-grense",
+    "title": "Egenskaper",
+    "who_to_follow": "Hvem å følge"
+  },
+  "finder": {
+    "error_fetching_user": "Feil ved henting av bruker",
+    "find_user": "Finn bruker"
+  },
+  "general": {
+    "apply": "Bruk",
+    "submit": "Send"
+  },
+  "login": {
+    "login": "Logg inn",
+    "logout": "Logg ut",
+    "password": "Passord",
+    "placeholder": "f. eks lain",
+    "register": "Registrer",
+    "username": "Brukernavn"
+  },
+  "nav": {
+    "chat": "Lokal nettprat",
+    "friend_requests": "Følgeforespørsler",
+    "mentions": "Nevnt",
+    "public_tl": "Offentlig Tidslinje",
+    "timeline": "Tidslinje",
+    "twkn": "Det hele kjente nettverket"
+  },
+  "notifications": {
+    "broken_favorite": "Ukjent status, leter etter den...",
+    "favorited_you": "likte din status",
+    "followed_you": "fulgte deg",
+    "load_older": "Last eldre varsler",
+    "notifications": "Varslinger",
+    "read": "Les!",
+    "repeated_you": "Gjentok din status"
+  },
+  "post_status": {
+    "account_not_locked_warning": "Kontoen din er ikke {0}. Hvem som helst kan følge deg for å se dine statuser til følgere",
+    "account_not_locked_warning_link": "låst",
+    "attachments_sensitive": "Merk vedlegg som sensitive",
+    "content_type": {
+      "plain_text": "Klar tekst"
+    },
+    "content_warning": "Tema (valgfritt)",
+    "default": "Landet akkurat i L.A.",
+    "direct_warning": "Denne statusen vil kun bli sett av nevnte brukere",
+    "posting": "Publiserer",
+    "scope": {
+      "direct": "Direkte, publiser bare til nevnte brukere",
+      "private": "Bare følgere, publiser bare til brukere som følger deg",
+      "public": "Offentlig, publiser til offentlige tidslinjer",
+      "unlisted": "Uoppført, ikke publiser til offentlige tidslinjer"
+    }
+  },
+  "registration": {
+    "bio": "Biografi",
+    "email": "Epost-adresse",
+    "fullname": "Visningsnavn",
+    "password_confirm": "Bekreft passord",
+    "registration": "Registrering",
+    "token": "Invitasjons-bevis"
+  },
+  "settings": {
+    "attachmentRadius": "Vedlegg",
+    "attachments": "Vedlegg",
+    "autoload": "Automatisk lasting når du blar ned til bunnen",
+    "avatar": "Profilbilde",
+    "avatarAltRadius": "Profilbilde (Varslinger)",
+    "avatarRadius": "Profilbilde",
+    "background": "Bakgrunn",
+    "bio": "Biografi",
+    "btnRadius": "Knapper",
+    "cBlue": "Blå (Svar, følg)",
+    "cGreen": "Grønn (Gjenta)",
+    "cOrange": "Oransje (Lik)",
+    "cRed": "Rød (Avbryt)",
+    "change_password": "Endre passord",
+    "change_password_error": "Feil ved endring av passord",
+    "changed_password": "Passord endret",
+    "collapse_subject": "Sammenfold statuser med tema",
+    "confirm_new_password": "Bekreft nytt passord",
+    "current_avatar": "Ditt nåværende profilbilde",
+    "current_password": "Nåværende passord",
+    "current_profile_banner": "Din nåværende profil-banner",
+    "data_import_export_tab": "Data import / eksport",
+    "default_vis": "Standard visnings-omfang",
+    "delete_account": "Slett konto",
+    "delete_account_description": "Slett din konto og alle dine statuser",
+    "delete_account_error": "Det oppsto et problem ved sletting av kontoen din, hvis dette problemet forblir kontakt din administrator",
+    "delete_account_instructions": "Skriv inn ditt passord i feltet nedenfor for å bekrefte sletting av konto",
+    "export_theme": "Lagre tema",
+    "filtering": "Filtrering",
+    "filtering_explanation": "Alle statuser som inneholder disse ordene vil bli dempet, en kombinasjon av tegn per linje",
+    "follow_export": "Eksporter følginger",
+    "follow_export_button": "Eksporter følgingene dine til en .csv fil",
+    "follow_export_processing": "Jobber, du vil snart bli spurt om å laste ned filen din.",
+    "follow_import": "Importer følginger",
+    "follow_import_error": "Feil ved importering av følginger.",
+    "follows_imported": "Følginger importert! Behandling vil ta litt tid.",
+    "foreground": "Forgrunn",
+    "general": "Generell",
+    "hide_attachments_in_convo": "Gjem vedlegg i samtaler",
+    "hide_attachments_in_tl": "Gjem vedlegg på tidslinje",
+    "import_followers_from_a_csv_file": "Importer følginger fra en csv fil",
+    "import_theme": "Last tema",
+    "inputRadius": "Input felt",
+    "instance_default": "(standard: {value})",
+    "interfaceLanguage": "Grensesnitt-språk",
+    "invalid_theme_imported": "Den valgte filen er ikke ett støttet Pleroma-tema, ingen endringer til ditt tema ble gjort",
+    "limited_availability": "Ikke tilgjengelig i din nettleser",
+    "links": "Linker",
+    "lock_account_description": "Begrens din konto til bare godkjente følgere",
+    "loop_video": "Gjenta videoer",
+    "loop_video_silent_only": "Gjenta bare videoer uten lyd, (for eksempel Mastodon sine \"gifs\")",
+    "name": "Navn",
+    "name_bio": "Navn & Biografi",
+    "new_password": "Nytt passord",
+    "notification_visibility": "Typer varsler som skal vises",
+    "notification_visibility_follows": "Følginger",
+    "notification_visibility_likes": "Likes",
+    "notification_visibility_mentions": "Nevnt",
+    "notification_visibility_repeats": "Gjentakelser",
+    "no_rich_text_description": "Fjern all formatering fra statuser",
+    "nsfw_clickthrough": "Krev trykk for å vise statuser som kan være upassende",
+    "panelRadius": "Panel",
+    "pause_on_unfocused": "Stopp henting av poster når vinduet ikke er i fokus",
+    "presets": "Forhåndsdefinerte tema",
+    "profile_background": "Profil-bakgrunn",
+    "profile_banner": "Profil-banner",
+    "profile_tab": "Profil",
+    "radii_help": "Bestem hvor runde hjørnene i brukergrensesnittet skal være (i piksler)",
+    "replies_in_timeline": "Svar på tidslinje",
+    "reply_link_preview": "Vis en forhåndsvisning når du holder musen over svar til en status",
+    "reply_visibility_all": "Vis alle svar",
+    "reply_visibility_following": "Vis bare svar som er til meg eller folk jeg følger",
+    "reply_visibility_self": "Vis bare svar som er til meg",
+    "saving_err": "Feil ved lagring av innstillinger",
+    "saving_ok": "Innstillinger lagret",
+    "security_tab": "Sikkerhet",
+    "set_new_avatar": "Rediger profilbilde",
+    "set_new_profile_background": "Rediger profil-bakgrunn",
+    "set_new_profile_banner": "Sett ny profil-banner",
+    "settings": "Innstillinger",
+    "stop_gifs": "Spill av GIFs når du holder over dem",
+    "streaming": "Automatisk strømming av nye statuser når du har bladd til toppen",
+    "text": "Tekst",
+    "theme": "Tema",
+    "theme_help": "Bruk heksadesimale fargekoder (#rrggbb) til å endre farge-temaet ditt.",
+    "tooltipRadius": "Verktøytips/advarsler",
+    "user_settings": "Brukerinstillinger",
+    "values": {
+      "false": "nei",
+      "true": "ja"
+    }
+  },
+  "timeline": {
+    "collapse": "Sammenfold",
+    "conversation": "Samtale",
+    "error_fetching": "Feil ved henting av oppdateringer",
+    "load_older": "Last eldre statuser",
+    "no_retweet_hint": "Status er markert som bare til følgere eller direkte og kan ikke gjentas",
+    "repeated": "gjentok",
+    "show_new": "Vis nye",
+    "up_to_date": "Oppdatert"
+  },
+  "user_card": {
+    "approve": "Godkjenn",
+    "block": "Blokker",
+    "blocked": "Blokkert!",
+    "deny": "Avslå",
+    "follow": "Følg",
+    "followees": "Følger",
+    "followers": "Følgere",
+    "following": "Følger!",
+    "follows_you": "Følger deg!",
+    "mute": "Demp",
+    "muted": "Dempet",
+    "per_day": "per dag",
+    "remote_follow": "Følg eksternt",
+    "statuses": "Statuser"
+  },
+  "user_profile": {
+    "timeline_title": "Bruker-tidslinje"
+  },
+  "who_to_follow": {
+    "more": "Mer",
+    "who_to_follow": "Hvem å følge"
+  }
+}

src/i18n/oc.json

@@ -0,0 +1,201 @@
+{
+  "chat": {
+    "title": "Messatjariá"
+  },
+  "finder": {
+    "error_fetching_user": "Error pendent la recèrca d’un utilizaire",
+    "find_user": "Cercar un utilizaire"
+  },
+  "general": {
+    "apply": "Aplicar",
+    "submit": "Mandar"
+  },
+  "login": {
+    "login": "Connexion",
+    "logout": "Desconnexion",
+    "password": "Senhal",
+    "placeholder": "e.g. lain",
+    "register": "Se marcar",
+    "username": "Nom d’utilizaire"
+  },
+  "nav": {
+    "chat": "Chat local",
+    "mentions": "Notificacions",
+    "public_tl": "Estatuts locals",
+    "timeline": "Flux d’actualitat",
+    "twkn": "Lo malhum conegut",
+    "friend_requests": "Demandas d'abonament"
+  },
+  "notifications": {
+    "favorited_you": "a aimat vòstre estatut",
+    "followed_you": "vos a seguit",
+    "notifications": "Notficacions",
+    "read": "Legit !",
+    "repeated_you": "a repetit vòstre estatut",
+    "broken_favorite": "Estatut desconegut, sèm a lo cercar...",
+    "load_older": "Cargar las notificaciones mai ancianas"
+  },
+  "post_status": {
+    "content_warning": "Avís de contengut (opcional)",
+    "default": "Escrivètz aquí vòstre estatut.",
+    "posting": "Mandadís",
+    "account_not_locked_warning": "Vòstre compte es pas {0}. Qual que siá pòt vos seguir per veire vòstras publicacions destinadas pas qu'a vòstres seguidors.",
+    "account_not_locked_warning_link": "clavat",
+    "attachments_sensitive": "Marcar las pèças juntas coma sensiblas",
+    "content_type": {
+      "plain_text": "Tèxte brut"
+    },
+    "direct_warning": "Aquesta publicacion serà pas que visibla pels utilizaires mencionats.",
+    "scope": {
+      "direct": "Dirècte - Publicar pels utilizaires mencionats solament",
+      "private": "Seguidors solament - Publicar pels sols seguidors",
+      "public": "Public - Publicar pel flux d’actualitat public",
+      "unlisted": "Pas listat - Publicar pas pel flux public"
+    }
+  },
+  "registration": {
+    "bio": "Biografia",
+    "email": "Adreça de corrièl",
+    "fullname": "Nom complèt",
+    "password_confirm": "Confirmar lo senhal",
+    "registration": "Inscripcion",
+    "token": "Geton de convidat"
+  },
+  "settings": {
+    "attachmentRadius": "Pèças juntas",
+    "attachments": "Pèças juntas",
+    "autoload": "Activar lo cargament automatic un còp arribat al cap de la pagina",
+    "avatar": "Avatar",
+    "avatarAltRadius": "Avatars (Notificacions)",
+    "avatarRadius": "Avatars",
+    "background": "Rèire plan",
+    "bio": "Biografia",
+    "btnRadius": "Botons",
+    "cBlue": "Blau (Respondre, seguir)",
+    "cGreen": "Verd (Repartajar)",
+    "cOrange": "Irange (Aimar)",
+    "cRed": "Roge (Anullar)",
+    "change_password": "Cambiar lo senhal",
+    "change_password_error": "Una error s’es producha en cambiant lo senhal.",
+    "changed_password": "Senhal corrèctament cambiat !",
+    "confirm_new_password": "Confirmatz lo nòu senhal",
+    "current_avatar": "Vòstre avatar actual",
+    "current_password": "Senhal actual",
+    "current_profile_banner": "Bandièra actuala del perfil",
+    "delete_account": "Suprimir lo compte",
+    "delete_account_description": "Suprimir vòstre compte e los messatges per sempre.",
+    "delete_account_error": "Una error s’es producha en suprimir lo compte. S’aquò ten d’arribar mercés de contactar vòstre administrador d’instància.",
+    "delete_account_instructions": "Picatz vòstre senhal dins lo camp tèxte çai-jos per confirmar la supression del compte.",
+    "filtering": "Filtre",
+    "filtering_explanation": "Totes los estatuts amb aqueles mots seràn en silenci, un mot per linha",
+    "follow_export": "Exportar los abonaments",
+    "follow_export_button": "Exportar vòstres abonaments dins un fichièr csv",
+    "follow_export_processing": "Tractament, vos demandarem lèu de telecargar lo fichièr",
+    "follow_import": "Importar los abonaments",
+    "follow_import_error": "Error en important los seguidors",
+    "follows_imported": "Seguidors importats. Lo tractament pòt trigar una estona.",
+    "foreground": "Endavant",
+    "hide_attachments_in_convo": "Rescondre las pèças juntas dins las conversacions",
+    "hide_attachments_in_tl": "Rescondre las pèças juntas",
+    "import_followers_from_a_csv_file": "Importar los seguidors d’un fichièr csv",
+    "inputRadius": "Camps tèxte",
+    "links": "Ligams",
+    "name": "Nom",
+    "name_bio": "Nom & Bio",
+    "new_password": "Nòu senhal",
+    "nsfw_clickthrough": "Activar lo clic per mostrar los imatges marcats coma pels adults o sensibles",
+    "panelRadius": "Panèls",
+    "presets": "Pre-enregistrats",
+    "profile_background": "Imatge de fons",
+    "profile_banner": "Bandièra del perfil",
+    "radii_help": "Configurar los caires arredondits de l’interfàcia (en pixèls)",
+    "reply_link_preview": "Activar l’apercebut en passar la mirga",
+    "set_new_avatar": "Cambiar l’avatar",
+    "set_new_profile_background": "Cambiar l’imatge de fons",
+    "set_new_profile_banner": "Cambiar de bandièra",
+    "settings": "Paramètres",
+    "stop_gifs": "Lançar los GIFs al subrevòl",
+    "streaming": "Activar lo cargament automatic dels novèls estatus en anar amont",
+    "text": "Tèxte",
+    "theme": "Tèma",
+    "theme_help": "Emplegatz los còdis de color hex (#rrggbb) per personalizar vòstre tèma de color.",
+    "tooltipRadius": "Astúcias/Alèrta",
+    "user_settings": "Paramètres utilizaire",
+    "collapse_subject": "Replegar las publicacions amb de subjèctes",
+    "data_import_export_tab": "Importar / Exportar las donadas",
+    "default_vis": "Nivèl de visibilitat per defaut",
+    "export_theme": "Enregistrar la preconfiguracion",
+    "general": "General",
+    "hide_post_stats": "Amagar los estatistics de publicacion (ex. lo ombre de favorits)",
+    "hide_user_stats": "Amagar las estatisticas de l’utilizaire (ex. lo nombre de seguidors)",
+    "import_theme": "Cargar un tèma",
+    "instance_default": "(defaut : {value})",
+    "interfaceLanguage": "Lenga de l’interfàcia",
+    "invalid_theme_imported": "Lo fichièr seleccionat es pas un tèma Pleroma valid. Cap de cambiament es estat fach a vòstre tèma.",
+    "limited_availability": "Pas disponible per vòstre navigador",
+    "lock_account_description": "Limitar vòstre compte als seguidors acceptats solament",
+    "loop_video": "Bocla vidèo",
+    "loop_video_silent_only": "Legir en bocla solament las vidèos sens son (coma los « Gifs » de Mastodon)",
+    "notification_visibility": "Tipes de notificacion de mostrar",
+    "notification_visibility_follows": "Abonaments",
+    "notification_visibility_likes": "Aiman",
+    "notification_visibility_mentions": "Mencions",
+    "notification_visibility_repeats": "Repeticions",
+    "no_rich_text_description": "Netejar lo format tèxte de totas las publicacions",
+    "pause_on_unfocused": "Pausar la difusion quand l’onglet es pas seleccionat",
+    "profile_tab": "Perfil",
+    "replies_in_timeline": "Responsas del flux",
+    "reply_visibility_all": "Mostrar totas las responsas",
+    "reply_visibility_following": "Mostrar pas que las responsas que me son destinada a ieu o un utilizaire que seguissi",
+    "reply_visibility_self": "Mostrar pas que las responsas que me son destinadas",
+    "saving_err": "Error en enregistrant los paramètres",
+    "saving_ok": "Paramètres enregistrats",
+    "security_tab": "Seguretat",
+    "values": {
+      "false": "non",
+      "true": "òc"
+    }
+  },
+  "timeline": {
+    "collapse": "Tampar",
+    "conversation": "Conversacion",
+    "error_fetching": "Error en cercant de mesas a jorn",
+    "load_older": "Ne veire mai",
+    "repeated": "repetit",
+    "show_new": "Ne veire mai",
+    "up_to_date": "A jorn",
+    "no_retweet_hint": "La publicacion marcada coma pels seguidors solament o dirècte pòt pas èsser repetida"
+  },
+  "user_card": {
+    "block": "Blocar",
+    "blocked": "Blocat !",
+    "follow": "Seguir",
+    "followees": "Abonaments",
+    "followers": "Seguidors",
+    "following": "Seguit !",
+    "follows_you": "Vos sèc !",
+    "mute": "Amagar",
+    "muted": "Amagat",
+    "per_day": "per jorn",
+    "remote_follow": "Seguir a distància",
+    "statuses": "Estatuts",
+    "approve": "Validar",
+    "deny": "Refusar"
+  },
+  "user_profile": {
+    "timeline_title": "Flux utilizaire"
+  },
+  "features_panel": {
+    "chat": "Discutida",
+    "gopher": "Gopher",
+    "media_proxy": "Servidor mandatari dels mèdias",
+    "scope_options": "Opcions d'encastres",
+    "text_limit": "Limit de tèxte",
+    "title": "Foncionalitats",
+    "who_to_follow": "Qui seguir"
+  },
+  "who_to_follow": {
+    "more": "Mai",
+    "who_to_follow": "Qui seguir"
+  }
+}

src/i18n/pl.json

@@ -0,0 +1,133 @@
+{
+  "chat": {
+    "title": "Czat"
+  },
+  "finder": {
+    "error_fetching_user": "Błąd przy pobieraniu profilu",
+    "find_user": "Znajdź użytkownika"
+  },
+  "general": {
+    "apply": "Zastosuj",
+    "submit": "Wyślij"
+  },
+  "login": {
+    "login": "Zaloguj",
+    "logout": "Wyloguj",
+    "password": "Hasło",
+    "placeholder": "n.p. lain",
+    "register": "Zarejestruj",
+    "username": "Użytkownik"
+  },
+  "nav": {
+    "chat": "Lokalny czat",
+    "mentions": "Wzmianki",
+    "public_tl": "Publiczna oś czasu",
+    "timeline": "Oś czasu",
+    "twkn": "Cała znana sieć"
+  },
+  "notifications": {
+    "favorited_you": "dodał twój status do ulubionych",
+    "followed_you": "obserwuje cię",
+    "notifications": "Powiadomienia",
+    "read": "Przeczytane!",
+    "repeated_you": "powtórzył twój status"
+  },
+  "post_status": {
+    "default": "Właśnie wróciłem z kościoła",
+    "posting": "Wysyłanie"
+  },
+  "registration": {
+    "bio": "Bio",
+    "email": "Email",
+    "fullname": "Wyświetlana nazwa profilu",
+    "password_confirm": "Potwierdzenie hasła",
+    "registration": "Rejestracja"
+  },
+  "settings": {
+    "attachmentRadius": "Załączniki",
+    "attachments": "Załączniki",
+    "autoload": "Włącz automatyczne ładowanie po przewinięciu do końca strony",
+    "avatar": "Awatar",
+    "avatarAltRadius": "Awatary (powiadomienia)",
+    "avatarRadius": "Awatary",
+    "background": "Tło",
+    "bio": "Bio",
+    "btnRadius": "Przyciski",
+    "cBlue": "Niebieski (odpowiedz, obserwuj)",
+    "cGreen": "Zielony (powtórzenia)",
+    "cOrange": "Pomarańczowy (ulubione)",
+    "cRed": "Czerwony (anuluj)",
+    "change_password": "Zmień hasło",
+    "change_password_error": "Podczas zmiany hasła wystąpił problem.",
+    "changed_password": "Hasło zmienione poprawnie!",
+    "confirm_new_password": "Potwierdź nowe hasło",
+    "current_avatar": "Twój obecny awatar",
+    "current_password": "Obecne hasło",
+    "current_profile_banner": "Twój obecny banner profilu",
+    "delete_account": "Usuń konto",
+    "delete_account_description": "Trwale usuń konto i wszystkie posty.",
+    "delete_account_error": "Wystąpił problem z usuwaniem twojego konta. Jeżeli problem powtarza się, poinformuj administratora swojej instancji.",
+    "delete_account_instructions": "Wprowadź swoje hasło w poniższe pole aby potwierdzić usunięcie konta.",
+    "filtering": "Filtrowanie",
+    "filtering_explanation": "Wszystkie statusy zawierające te słowa będą wyciszone. Jedno słowo na linijkę.",
+    "follow_export": "Eksport obserwowanych",
+    "follow_export_button": "Eksportuj swoją listę obserwowanych do pliku CSV",
+    "follow_export_processing": "Przetwarzanie, wkrótce twój plik zacznie się ściągać.",
+    "follow_import": "Import obserwowanych",
+    "follow_import_error": "Błąd przy importowaniu obserwowanych",
+    "follows_imported": "Obserwowani zaimportowani! Przetwarzanie może trochę potrwać.",
+    "foreground": "Pierwszy plan",
+    "hide_attachments_in_convo": "Ukryj załączniki w rozmowach",
+    "hide_attachments_in_tl": "Ukryj załączniki w osi czasu",
+    "import_followers_from_a_csv_file": "Importuj obserwowanych z pliku CSV",
+    "inputRadius": "Pola tekstowe",
+    "links": "Łącza",
+    "name": "Imię",
+    "name_bio": "Imię i bio",
+    "new_password": "Nowe hasło",
+    "nsfw_clickthrough": "Włącz domyślne ukrywanie załączników o treści nieprzyzwoitej (NSFW)",
+    "panelRadius": "Panele",
+    "presets": "Gotowe motywy",
+    "profile_background": "Tło profilu",
+    "profile_banner": "Banner profilu",
+    "radii_help": "Ustaw zaokrąglenie krawędzi interfejsu (w pikselach)",
+    "reply_link_preview": "Włącz dymek z podglądem postu po najechaniu na znak odpowiedzi",
+    "set_new_avatar": "Ustaw nowy awatar",
+    "set_new_profile_background": "Ustaw nowe tło profilu",
+    "set_new_profile_banner": "Ustaw nowy banner profilu",
+    "settings": "Ustawienia",
+    "stop_gifs": "Odtwarzaj GIFy po najechaniu kursorem",
+    "streaming": "Włącz automatycznie strumieniowanie nowych postów gdy na początku strony",
+    "text": "Tekst",
+    "theme": "Motyw",
+    "theme_help": "Użyj kolorów w notacji szesnastkowej (#rrggbb), by stworzyć swój motyw.",
+    "tooltipRadius": "Etykiety/alerty",
+    "user_settings": "Ustawienia użytkownika"
+  },
+  "timeline": {
+    "collapse": "Zwiń",
+    "conversation": "Rozmowa",
+    "error_fetching": "Błąd pobierania",
+    "load_older": "Załaduj starsze statusy",
+    "repeated": "powtórzono",
+    "show_new": "Pokaż nowe",
+    "up_to_date": "Na bieżąco"
+  },
+  "user_card": {
+    "block": "Zablokuj",
+    "blocked": "Zablokowany!",
+    "follow": "Obserwuj",
+    "followees": "Obserwowani",
+    "followers": "Obserwujący",
+    "following": "Obserwowany!",
+    "follows_you": "Obserwuje cię!",
+    "mute": "Wycisz",
+    "muted": "Wyciszony",
+    "per_day": "dziennie",
+    "remote_follow": "Zdalna obserwacja",
+    "statuses": "Statusy"
+  },
+  "user_profile": {
+    "timeline_title": "Oś czasu użytkownika"
+  }
+}

src/i18n/pt.json

@@ -0,0 +1,117 @@
+{
+  "chat": {
+    "title": "Chat"
+  },
+  "finder": {
+    "error_fetching_user": "Erro procurando usuário",
+    "find_user": "Buscar usuário"
+  },
+  "general": {
+    "apply": "Aplicar",
+    "submit": "Enviar"
+  },
+  "login": {
+    "login": "Entrar",
+    "logout": "Sair",
+    "password": "Senha",
+    "placeholder": "p.e. lain",
+    "register": "Registrar",
+    "username": "Usuário"
+  },
+  "nav": {
+    "chat": "Chat local",
+    "mentions": "Menções",
+    "public_tl": "Linha do tempo pública",
+    "timeline": "Linha do tempo",
+    "twkn": "Toda a rede conhecida"
+  },
+  "notifications": {
+    "favorited_you": "favoritou sua postagem",
+    "followed_you": "seguiu você",
+    "notifications": "Notificações",
+    "read": "Lido!",
+    "repeated_you": "repetiu sua postagem"
+  },
+  "post_status": {
+    "default": "Acabei de chegar no Rio!",
+    "posting": "Publicando"
+  },
+  "registration": {
+    "bio": "Biografia",
+    "email": "Correio eletrônico",
+    "fullname": "Nome para exibição",
+    "password_confirm": "Confirmação de senha",
+    "registration": "Registro"
+  },
+  "settings": {
+    "attachmentRadius": "Anexos",
+    "attachments": "Anexos",
+    "autoload": "Habilitar carregamento automático quando a rolagem chegar ao fim.",
+    "avatar": "Avatar",
+    "avatarAltRadius": "Avatares (Notificações)",
+    "avatarRadius": "Avatares",
+    "background": "Plano de Fundo",
+    "bio": "Biografia",
+    "btnRadius": "Botões",
+    "cBlue": "Azul (Responder, seguir)",
+    "cGreen": "Verde (Repetir)",
+    "cOrange": "Laranja (Favoritar)",
+    "cRed": "Vermelho (Cancelar)",
+    "current_avatar": "Seu avatar atual",
+    "current_profile_banner": "Sua capa de perfil atual",
+    "filtering": "Filtragem",
+    "filtering_explanation": "Todas as postagens contendo estas palavras serão silenciadas, uma por linha.",
+    "follow_import": "Importar seguidas",
+    "follow_import_error": "Erro ao importar seguidores",
+    "follows_imported": "Seguidores importados! O processamento pode demorar um pouco.",
+    "foreground": "Primeiro Plano",
+    "hide_attachments_in_convo": "Ocultar anexos em conversas",
+    "hide_attachments_in_tl": "Ocultar anexos na linha do tempo.",
+    "import_followers_from_a_csv_file": "Importe seguidores a partir de um arquivo CSV",
+    "links": "Links",
+    "name": "Nome",
+    "name_bio": "Nome & Biografia",
+    "nsfw_clickthrough": "Habilitar clique para ocultar anexos NSFW",
+    "panelRadius": "Paineis",
+    "presets": "Predefinições",
+    "profile_background": "Plano de fundo de perfil",
+    "profile_banner": "Capa de perfil",
+    "radii_help": "Arredondar arestas da interface (em píxeis)",
+    "reply_link_preview": "Habilitar a pré-visualização de link de respostas ao passar o mouse.",
+    "set_new_avatar": "Alterar avatar",
+    "set_new_profile_background": "Alterar o plano de fundo de perfil",
+    "set_new_profile_banner": "Alterar capa de perfil",
+    "settings": "Configurações",
+    "stop_gifs": "Reproduzir GIFs ao passar o cursor em cima",
+    "streaming": "Habilitar o fluxo automático de postagens quando ao topo da página",
+    "text": "Texto",
+    "theme": "Tema",
+    "theme_help": "Use cores em código hexadecimal (#rrggbb) para personalizar seu esquema de cores.",
+    "tooltipRadius": "Dicass/alertas",
+    "user_settings": "Configurações de Usuário"
+  },
+  "timeline": {
+    "conversation": "Conversa",
+    "error_fetching": "Erro buscando atualizações",
+    "load_older": "Carregar postagens antigas",
+    "show_new": "Mostrar novas",
+    "up_to_date": "Atualizado"
+  },
+  "user_card": {
+    "block": "Bloquear",
+    "blocked": "Bloqueado!",
+    "follow": "Seguir",
+    "followees": "Seguindo",
+    "followers": "Seguidores",
+    "following": "Seguindo!",
+    "follows_you": "Segue você!",
+    "mute": "Silenciar",
+    "muted": "Silenciado",
+    "per_day": "por dia",
+    "remote_follow": "Seguidor Remoto",
+    "statuses": "Postagens"
+  },
+  "user_profile": {
+    "timeline_title": "Linha do tempo do usuário"
+  }
+}

src/i18n/ro.json

@@ -0,0 +1,83 @@
+{
+  "finder": {
+    "error_fetching_user": "Eroare la preluarea utilizatorului",
+    "find_user": "Găsește utilizator"
+  },
+  "general": {
+    "submit": "trimite"
+  },
+  "login": {
+    "login": "Loghează",
+    "logout": "Deloghează",
+    "password": "Parolă",
+    "placeholder": "d.e. lain",
+    "register": "Înregistrare",
+    "username": "Nume utilizator"
+  },
+  "nav": {
+    "mentions": "Menționări",
+    "public_tl": "Cronologie Publică",
+    "timeline": "Cronologie",
+    "twkn": "Toată Reșeaua Cunoscută"
+  },
+  "notifications": {
+    "followed_you": "te-a urmărit",
+    "notifications": "Notificări",
+    "read": "Citit!"
+  },
+  "post_status": {
+    "default": "Nu de mult am aterizat în L.A.",
+    "posting": "Postează"
+  },
+  "registration": {
+    "bio": "Bio",
+    "email": "Email",
+    "fullname": "Numele întreg",
+    "password_confirm": "Cofirmă parola",
+    "registration": "Îregistrare"
+  },
+  "settings": {
+    "attachments": "Atașamente",
+    "autoload": "Permite încărcarea automată când scrolat la capăt",
+    "avatar": "Avatar",
+    "bio": "Bio",
+    "current_avatar": "Avatarul curent",
+    "current_profile_banner": "Bannerul curent al profilului",
+    "filtering": "Filtru",
+    "filtering_explanation": "Toate stările care conțin aceste cuvinte vor fi puse pe mut, una pe linie",
+    "hide_attachments_in_convo": "Ascunde atașamentele în conversații",
+    "hide_attachments_in_tl": "Ascunde atașamentele în cronologie",
+    "name": "Nume",
+    "name_bio": "Nume și Bio",
+    "nsfw_clickthrough": "Permite ascunderea al atașamentelor NSFW",
+    "profile_background": "Fundalul de profil",
+    "profile_banner": "Banner de profil",
+    "reply_link_preview": "Permite previzualizarea linkului de răspuns la planarea de mouse",
+    "set_new_avatar": "Setează avatar nou",
+    "set_new_profile_background": "Setează fundal nou",
+    "set_new_profile_banner": "Setează banner nou la profil",
+    "settings": "Setări",
+    "theme": "Temă",
+    "user_settings": "Setările utilizatorului"
+  },
+  "timeline": {
+    "conversation": "Conversație",
+    "error_fetching": "Erare la preluarea actualizărilor",
+    "load_older": "Încarcă stări mai vechi",
+    "show_new": "Arată cele noi",
+    "up_to_date": "La zi"
+  },
+  "user_card": {
+    "block": "Blochează",
+    "blocked": "Blocat!",
+    "follow": "Urmărește",
+    "followees": "Urmărește",
+    "followers": "Următori",
+    "following": "Urmărit!",
+    "follows_you": "Te urmărește!",
+    "mute": "Pune pe mut",
+    "muted": "Pus pe mut",
+    "per_day": "pe zi",
+    "statuses": "Stări"
+  }
+}

src/i18n/ru.json

@@ -0,0 +1,294 @@
+{
+  "chat": {
+    "title": "Чат"
+  },
+  "finder": {
+    "error_fetching_user": "Пользователь не найден",
+    "find_user": "Найти пользователя"
+  },
+  "general": {
+    "apply": "Применить",
+    "submit": "Отправить"
+  },
+  "login": {
+    "login": "Войти",
+    "logout": "Выйти",
+    "password": "Пароль",
+    "placeholder": "e.c. lain",
+    "register": "Зарегистрироваться",
+    "username": "Имя пользователя"
+  },
+  "nav": {
+    "chat": "Локальный чат",
+    "mentions": "Упоминания",
+    "public_tl": "Публичная лента",
+    "timeline": "Лента",
+    "twkn": "Федеративная лента"
+  },
+  "notifications": {
+    "broken_favorite": "Неизвестный статус, ищем...",
+    "favorited_you": "нравится ваш статус",
+    "followed_you": "начал(а) читать вас",
+    "load_older": "Загрузить старые уведомления",
+    "notifications": "Уведомления",
+    "read": "Прочесть",
+    "repeated_you": "повторил(а) ваш статус"
+  },
+  "post_status": {
+    "account_not_locked_warning": "Ваш аккаунт не {0}. Кто угодно может зафоловить вас чтобы прочитать посты только для подписчиков",
+    "account_not_locked_warning_link": "залочен",
+    "attachments_sensitive": "Вложения содержат чувствительный контент",
+    "content_warning": "Тема (не обязательно)",
+    "default": "Что нового?",
+    "direct_warning": "Этот пост будет видет только упомянутым пользователям",
+    "posting": "Отправляется",
+    "scope": {
+      "direct": "Личное - этот пост видят только те кто в нём упомянут",
+      "private": "Для подписчиков - этот пост видят только подписчики",
+      "public": "Публичный - этот пост виден всем",
+      "unlisted": "Непубличный - этот пост не виден на публичных лентах"
+    }
+  },
+  "registration": {
+    "bio": "Описание",
+    "email": "Email",
+    "fullname": "Отображаемое имя",
+    "password_confirm": "Подтверждение пароля",
+    "registration": "Регистрация",
+    "token": "Код приглашения",
+    "validations": {
+      "username_required": "не должно быть пустым",
+      "fullname_required": "не должно быть пустым",
+      "email_required": "не должен быть пустым",
+      "password_required": "не должен быть пустым",
+      "password_confirmation_required": "не должно быть пустым",
+      "password_confirmation_match": "должно совпадать с паролем"
+    }
+  },
+  "settings": {
+    "attachmentRadius": "Прикреплённые файлы",
+    "attachments": "Вложения",
+    "autoload": "Включить автоматическую загрузку при прокрутке вниз",
+    "avatar": "Аватар",
+    "avatarAltRadius": "Аватары в уведомлениях",
+    "avatarRadius": "Аватары",
+    "background": "Фон",
+    "bio": "Описание",
+    "btnRadius": "Кнопки",
+    "cBlue": "Ответить, читать",
+    "cGreen": "Повторить",
+    "cOrange": "Нравится",
+    "cRed": "Отменить",
+    "change_password": "Сменить пароль",
+    "change_password_error": "Произошла ошибка при попытке изменить пароль.",
+    "changed_password": "Пароль изменён успешно.",
+    "collapse_subject": "Сворачивать посты с темой",
+    "confirm_new_password": "Подтверждение нового пароля",
+    "current_avatar": "Текущий аватар",
+    "current_password": "Текущий пароль",
+    "current_profile_banner": "Текущий баннер профиля",
+    "data_import_export_tab": "Импорт / Экспорт данных",
+    "delete_account": "Удалить аккаунт",
+    "delete_account_description": "Удалить ваш аккаунт и все ваши сообщения.",
+    "delete_account_error": "Возникла ошибка в процессе удаления вашего аккаунта. Если это повторяется, свяжитесь с администратором вашего сервера.",
+    "delete_account_instructions": "Введите ваш пароль в поле ниже для подтверждения удаления.",
+    "export_theme": "Сохранить Тему",
+    "filtering": "Фильтрация",
+    "filtering_explanation": "Все статусы, содержащие данные слова, будут игнорироваться, по одному в строке",
+    "follow_export": "Экспортировать читаемых",
+    "follow_export_button": "Экспортировать читаемых в файл .csv",
+    "follow_export_processing": "Ведётся обработка, скоро вам будет предложено загрузить файл",
+    "follow_import": "Импортировать читаемых",
+    "follow_import_error": "Ошибка при импортировании читаемых.",
+    "follows_imported": "Список читаемых импортирован. Обработка займёт некоторое время..",
+    "foreground": "Передний план",
+    "general": "Общие",
+    "hide_attachments_in_convo": "Прятать вложения в разговорах",
+    "hide_attachments_in_tl": "Прятать вложения в ленте",
+    "hide_isp": "Скрыть серверную панель",
+    "import_followers_from_a_csv_file": "Импортировать читаемых из файла .csv",
+    "import_theme": "Загрузить Тему",
+    "inputRadius": "Поля ввода",
+    "checkboxRadius": "Чекбоксы",
+    "interface": "Интерфейс",
+    "interfaceLanguage": "Язык интерфейса",
+    "limited_availability": "Не доступно в вашем браузере",
+    "links": "Ссылки",
+    "lock_account_description": "Аккаунт доступен только подтверждённым подписчикам",
+    "loop_video": "Зациливать видео",
+    "loop_video_silent_only": "Зацикливать только беззвучные видео (т.е. \"гифки\" с Mastodon)",
+    "name": "Имя",
+    "name_bio": "Имя и описание",
+    "new_password": "Новый пароль",
+    "notification_visibility": "Показывать уведомления",
+    "notification_visibility_follows": "Подписки",
+    "notification_visibility_likes": "Лайки",
+    "notification_visibility_mentions": "Упоминания",
+    "notification_visibility_repeats": "Повторы",
+    "no_rich_text_description": "Убрать форматирование из всех постов",
+    "nsfw_clickthrough": "Включить скрытие NSFW вложений",
+    "panelRadius": "Панели",
+    "pause_on_unfocused": "Приостановить загрузку когда вкладка не в фокусе",
+    "presets": "Пресеты",
+    "profile_background": "Фон профиля",
+    "profile_banner": "Баннер профиля",
+    "profile_tab": "Профиль",
+    "radii_help": "Скругление углов элементов интерфейса (в пикселях)",
+    "replies_in_timeline": "Ответы в ленте",
+    "reply_link_preview": "Включить предварительный просмотр ответа при наведении мыши",
+    "reply_visibility_all": "Показывать все ответы",
+    "reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан",
+    "reply_visibility_self": "Показывать только ответы мне",
+    "security_tab": "Безопасность",
+    "set_new_avatar": "Загрузить новый аватар",
+    "set_new_profile_background": "Загрузить новый фон профиля",
+    "set_new_profile_banner": "Загрузить новый баннер профиля",
+    "settings": "Настройки",
+    "subject_input_always_show": "Всегда показывать поле ввода темы",
+    "stop_gifs": "Проигрывать GIF анимации только при наведении",
+    "streaming": "Включить автоматическую загрузку новых сообщений при прокрутке вверх",
+    "text": "Текст",
+    "theme": "Тема",
+    "theme_help": "Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.",
+    "theme_help_v2_1": "Вы так же можете перепоределить цвета определенных компонентов нажав соотв. галочку. Используйте кнопку \"Очистить всё\" чтобы снять все переопределения",
+    "theme_help_v2_2": "Под некоторыми полями ввода это идикаторы контрастности, наведите на них мышью чтобы узнать больше. Приспользовании прозрачности контраст расчитывается для наихудшего варианта.",
+    "tooltipRadius": "Всплывающие подсказки/уведомления",
+    "user_settings": "Настройки пользователя",
+    "style": {
+      "switcher": {
+        "keep_color": "Оставить цвета",
+        "keep_shadows": "Оставить тени",
+        "keep_opacity": "Оставить прозрачность",
+        "keep_roundness": "Оставить скругление",
+        "keep_fonts": "Оставить шрифты",
+        "save_load_hint": "Опции \"оставить...\" позволяют сохранить текущие настройки при выборе другой темы или импорта её из файла. Так же они влияют на то какие компоненты будут сохранены при экспорте темы. Когда все галочки сняты все компоненты будут экспортированы.",
+        "reset": "Сбросить",
+        "clear_all": "Очистить всё",
+        "clear_opacity": "Очистить прозрачность"
+      },
+      "common": {
+        "color": "Цвет",
+        "opacity": "Прозрачность",
+        "contrast": {
+          "hint": "Уровень контраста: {ratio}, что {level} {context}",
+          "level": {
+            "aa": "соответствует гайдлайну Level AA (минимальный)",
+            "aaa": "соответствует гайдлайну Level AAA (рекомендуемый)",
+            "bad": "не соответствует каким либо гайдлайнам"
+          },
+          "context": {
+            "18pt": "для крупного (18pt+) текста",
+            "text": "для текста"
+          }
+        }
+      },
+      "common_colors": {
+        "_tab_label": "Общие",
+        "main": "Общие цвета",
+        "foreground_hint": "См. вкладку \"Дополнительно\" для более детального контроля",
+        "rgbo": "Иконки, акценты, ярылки"
+      },
+      "advanced_colors": {
+        "_tab_label": "Дополнительно",
+        "alert": "Фон уведомлений",
+        "alert_error": "Ошибки",
+        "badge": "Фон значков",
+        "badge_notification": "Уведомления",
+        "panel_header": "Заголовок панели",
+        "top_bar": "Верняя полоска",
+        "borders": "Границы",
+        "buttons": "Кнопки",
+        "inputs": "Поля ввода",
+        "faint_text": "Маловажный текст"
+      },
+      "radii": {
+        "_tab_label": "Скругление"
+      },
+      "shadows": {
+        "_tab_label": "Светотень",
+        "component": "Компонент",
+        "override": "Переопределить",
+        "shadow_id": "Тень №{value}",
+        "blur": "Размытие",
+        "spread": "Разброс",
+        "inset": "Внутренняя",
+        "hint": "Для теней вы так же можете использовать --variable в качестве цвета чтобы использовать CSS3-переменные. В таком случае прозрачность работать не будет.",
+        "filter_hint": {
+          "always_drop_shadow": "Внимание, эта тень всегда использует {0} когда браузер поддерживает это",
+          "drop_shadow_syntax": "{0} не поддерживает параметр {1} и ключевое слово {2}",
+          "avatar_inset": "Одновременное использование внутренних и внешних теней на (прозрачных) аватарках может дать не те результаты что вы ожидаете",
+          "spread_zero": "Тени с разбросом > 0 будут выглядеть как если бы разброс установлен в 0",
+          "inset_classic": "Внутренние тени будут использовать {0}"
+        },
+        "components": {
+          "panel": "Панель",
+          "panelHeader": "Заголовок панели",
+          "topBar": "Верхняя полоска",
+          "avatar": "Аватарка (профиль)",
+          "avatarStatus": "Аватарка (в ленте)",
+          "popup": "Всплывающие подсказки",
+          "button": "Кнопки",
+          "buttonHover": "Кнопки (наведен курсор)",
+          "buttonPressed": "Кнопки (нажата)",
+          "buttonPressedHover": "Кнопки (нажата+наведен курсор)",
+          "input": "Поля ввода"
+        }
+      },
+      "fonts": {
+        "_tab_label": "Шрифты",
+        "help": "Выберите тип шрифта для использования в интерфейсе. При выборе варианта \"другой\" надо ввести название шрифта в точности как он называется в системе.",
+        "components": {
+          "interface": "Интерфейс",
+          "input": "Поля ввода",
+          "post": "Текст постов",
+          "postCode": "Моноширинный текст в посте (форматирование)"
+        },
+        "family": "Шрифт",
+        "size": "Размер (в пикселях)",
+        "weight": "Ширина",
+        "custom": "Другой"
+      },
+      "preview": {
+        "header": "Пример",
+        "content": "Контент",
+        "error": "Ошибка стоп 000",
+        "button": "Кнопка",
+        "text": "Еще немного {0} и масенькая {1}",
+        "mono": "контента",
+        "input": "Что нового?",
+        "faint_link": "Его придется убрать",
+        "fine_print": "Если проблемы остались — ваш гуртовщик мыши плохо стоит. {0}.",
+        "header_faint": "Все идет по плану",
+        "checkbox": "Я подтверждаю что не было ни единого разрыва",
+        "link": "ссылка"
+      }
+    }
+  },
+  "timeline": {
+    "collapse": "Свернуть",
+    "conversation": "Разговор",
+    "error_fetching": "Ошибка при обновлении",
+    "load_older": "Загрузить старые статусы",
+    "no_retweet_hint": "Пост помечен как \"только для подписчиков\" или \"личное\" и поэтому не может быть повторён",
+    "repeated": "повторил(а)",
+    "show_new": "Показать новые",
+    "up_to_date": "Обновлено"
+  },
+  "user_card": {
+    "block": "Заблокировать",
+    "blocked": "Заблокирован",
+    "follow": "Читать",
+    "followees": "Читаемые",
+    "followers": "Читатели",
+    "following": "Читаю",
+    "follows_you": "Читает вас",
+    "mute": "Игнорировать",
+    "muted": "Игнорирую",
+    "per_day": "в день",
+    "remote_follow": "Читать удалённо",
+    "statuses": "Статусы"
+  },
+  "user_profile": {
+    "timeline_title": "Лента пользователя"
+  }
+}

src/i18n/zh.json

@@ -0,0 +1,201 @@
+{
+  "chat": {
+    "title": "聊天"
+  },
+  "features_panel": {
+    "chat": "聊天",
+    "gopher": "Gopher",
+    "media_proxy": "媒体代理",
+    "scope_options": "可见范围设置",
+    "text_limit": "文本长度限制",
+    "title": "功能",
+    "who_to_follow": "推荐关注"
+  },
+  "finder": {
+    "error_fetching_user": "获取用户时发生错误",
+    "find_user": "寻找用户"
+  },
+  "general": {
+    "apply": "应用",
+    "submit": "提交"
+  },
+  "login": {
+    "login": "登录",
+    "logout": "登出",
+    "password": "密码",
+    "placeholder": "例如：lain",
+    "register": "注册",
+    "username": "用户名"
+  },
+  "nav": {
+    "chat": "本地聊天",
+    "friend_requests": "关注请求",
+    "mentions": "提及",
+    "public_tl": "公共时间线",
+    "timeline": "时间线",
+    "twkn": "所有已知网络"
+  },
+  "notifications": {
+    "broken_favorite": "未知的状态，正在搜索中...",
+    "favorited_you": "收藏了你的状态",
+    "followed_you": "关注了你",
+    "load_older": "加载更早的通知",
+    "notifications": "通知",
+    "read": "阅读！",
+    "repeated_you": "转发了你的状态"
+  },
+  "post_status": {
+    "account_not_locked_warning": "你的帐号没有 {0}。任何人都可以关注你并浏览你的上锁内容。",
+    "account_not_locked_warning_link": "上锁",
+    "attachments_sensitive": "标记附件为敏感内容",
+    "content_type": {
+      "plain_text": "纯文本"
+    },
+    "content_warning": "主题（可选）",
+    "default": "刚刚抵达上海",
+    "direct_warning": "本条内容只有被提及的用户能够看到。",
+    "posting": "发送",
+    "scope": {
+      "direct": "私信 - 只发送给被提及的用户",
+      "private": "仅关注者 - 只有关注了你的人能看到",
+      "public": "公共 - 发送到公共时间轴",
+      "unlisted": "不公开 - 所有人可见，但不会发送到公共时间轴"
+    }
+  },
+  "registration": {
+    "bio": "简介",
+    "email": "电子邮箱",
+    "fullname": "全名",
+    "password_confirm": "确认密码",
+    "registration": "注册",
+    "token": "邀请码"
+  },
+  "settings": {
+    "attachmentRadius": "附件",
+    "attachments": "附件",
+    "autoload": "启用滚动到底部时的自动加载",
+    "avatar": "头像",
+    "avatarAltRadius": "头像（通知）",
+    "avatarRadius": "头像",
+    "background": "背景",
+    "bio": "简介",
+    "btnRadius": "按钮",
+    "cBlue": "蓝色（回复，关注）",
+    "cGreen": "绿色（转发）",
+    "cOrange": "橙色（收藏）",
+    "cRed": "红色（取消）",
+    "change_password": "修改密码",
+    "change_password_error": "修改密码的时候出了点问题。",
+    "changed_password": "成功修改了密码！",
+    "collapse_subject": "折叠带主题的内容",
+    "confirm_new_password": "确认新密码",
+    "current_avatar": "当前头像",
+    "current_password": "当前密码",
+    "current_profile_banner": "您当前的横幅图片",
+    "data_import_export_tab": "数据导入/导出",
+    "default_vis": "默认可见范围",
+    "delete_account": "删除账户",
+    "delete_account_description": "永久删除你的帐号和所有消息。",
+    "delete_account_error": "删除账户时发生错误，如果一直删除不了，请联系实例管理员。",
+    "delete_account_instructions": "在下面输入你的密码来确认删除账户",
+    "export_theme": "导出预置主题",
+    "filtering": "过滤器",
+    "filtering_explanation": "所有包含以下词汇的内容都会被隐藏，一行一个",
+    "follow_export": "导出关注",
+    "follow_export_button": "将关注导出成 csv 文件",
+    "follow_export_processing": "正在处理，过一会儿就可以下载你的文件了",
+    "follow_import": "导入关注",
+    "follow_import_error": "导入关注时错误",
+    "follows_imported": "关注已导入！尚需要一些时间来处理。",
+    "foreground": "前景",
+    "general": "通用",
+    "hide_attachments_in_convo": "在对话中隐藏附件",
+    "hide_attachments_in_tl": "在时间线上隐藏附件",
+    "hide_post_stats": "隐藏推文相关的统计数据(例如：收藏的次数)",
+    "hide_user_stats": "隐藏用户的统计数据（例如：关注者的数量）",
+    "import_followers_from_a_csv_file": "从 csv 文件中导入关注",
+    "import_theme": "导入预置主题",
+    "inputRadius": "输入框",
+    "instance_default": "(默认：{value})",
+    "interfaceLanguage": "界面语言",
+    "invalid_theme_imported": "您所选择的主题文件不被 Pleroma 支持，因此主题未被修改。",
+    "limited_availability": "在您的浏览器中无法使用",
+    "links": "链接",
+    "lock_account_description": "你需要手动审核关注请求",
+    "loop_video": "循环视频",
+    "loop_video_silent_only": "只循环没有声音的视频（例如：Mastodon 里的“GIF”）",
+    "name": "名字",
+    "name_bio": "名字及简介",
+    "new_password": "新密码",
+    "notification_visibility": "要显示的通知类型",
+    "notification_visibility_follows": "关注",
+    "notification_visibility_likes": "点赞",
+    "notification_visibility_mentions": "提及",
+    "notification_visibility_repeats": "转发",
+    "no_rich_text_description": "不显示富文本格式",
+    "nsfw_clickthrough": "将不和谐附件隐藏，点击才能打开",
+    "panelRadius": "面板",
+    "pause_on_unfocused": "在离开页面时暂停时间线推送",
+    "presets": "预置",
+    "profile_background": "个人资料背景图",
+    "profile_banner": "横幅图片",
+    "profile_tab": "个人资料",
+    "radii_help": "设置界面边缘的圆角 (单位：像素)",
+    "replies_in_timeline": "时间线中的回复",
+    "reply_link_preview": "启用鼠标悬停时预览回复链接",
+    "reply_visibility_all": "显示所有回复",
+    "reply_visibility_following": "只显示发送给我的回复/发送给我关注的用户的回复",
+    "reply_visibility_self": "只显示发送给我的回复",
+    "saving_err": "保存设置时发生错误",
+    "saving_ok": "设置已保存",
+    "security_tab": "安全",
+    "set_new_avatar": "设置新头像",
+    "set_new_profile_background": "设置新的个人资料背景",
+    "set_new_profile_banner": "设置新的横幅图片",
+    "settings": "设置",
+    "stop_gifs": "鼠标悬停时播放GIF",
+    "streaming": "开启滚动到顶部时的自动推送",
+    "text": "文本",
+    "theme": "主题",
+    "theme_help": "使用十六进制代码（#rrggbb）来设置主题颜色。",
+    "tooltipRadius": "提醒",
+    "user_settings": "用户设置",
+    "values": {
+      "false": "否",
+      "true": "是"
+    }
+  },
+  "timeline": {
+    "collapse": "折叠",
+    "conversation": "对话",
+    "error_fetching": "获取更新时发生错误",
+    "load_older": "加载更早的状态",
+    "no_retweet_hint": "这条内容仅关注者可见，或者是私信，因此不能转发。",
+    "repeated": "已转发",
+    "show_new": "显示新内容",
+    "up_to_date": "已是最新"
+  },
+  "user_card": {
+    "approve": "允许",
+    "block": "屏蔽",
+    "blocked": "已屏蔽！",
+    "deny": "拒绝",
+    "follow": "关注",
+    "followees": "正在关注",
+    "followers": "关注者",
+    "following": "正在关注！",
+    "follows_you": "关注了你！",
+    "mute": "隐藏",
+    "muted": "已隐藏",
+    "per_day": "每天",
+    "remote_follow": "跨站关注",
+    "statuses": "状态"
+  },
+  "user_profile": {
+    "timeline_title": "用户时间线"
+  },
+  "who_to_follow": {
+    "more": "更多",
+    "who_to_follow": "推荐关注"
+  }
+}

src/lib/persisted_state.js

@@ -1,7 +1,7 @@
 import merge from 'lodash.merge'
 import objectPath from 'object-path'
 import localforage from 'localforage'
-import { throttle, each } from 'lodash'
+import { each } from 'lodash'
 
 let loaded = false
 
@@ -12,18 +12,20 @@ const defaultReducer = (state, paths) => (
   }, {})
 )
 
+const saveImmedeatelyActions = [
+  'markNotificationsAsSeen',
+  'clearCurrentUser',
+  'setCurrentUser',
+  'setHighlight',
+  'setOption',
+  'setClientData',
+  'setToken'
+]
+
 const defaultStorage = (() => {
   return localforage
 })()
 
-const defaultSetState = (key, state, storage) => {
-  if (!loaded) {
-    console.log('waiting for old state to be loaded...')
-  } else {
-    return storage.setItem(key, state)
-  }
-}
-
 export default function createPersistedState ({
   key = 'vuex-lz',
   paths = [],
@@ -31,13 +33,20 @@ export default function createPersistedState ({
     let value = storage.getItem(key)
     return value
   },
-  setState = throttle(defaultSetState, 60000),
+  setState = (key, state, storage) => {
+    if (!loaded) {
+      console.log('waiting for old state to be loaded...')
+      return Promise.resolve()
+    } else {
+      return storage.setItem(key, state)
+    }
+  },
   reducer = defaultReducer,
   storage = defaultStorage,
   subscriber = store => handler => store.subscribe(handler)
 } = {}) {
-  return store => {
-    getState(key, storage).then((savedState) => {
+  return getState(key, storage).then((savedState) => {
+    return store => {
       try {
         if (typeof savedState === 'object') {
           // build user cache
@@ -60,23 +69,36 @@ export default function createPersistedState ({
             value: store.state.config.customTheme
           })
         }
-        if (store.state.users.lastLoginName) {
-          store.dispatch('loginUser', {username: store.state.users.lastLoginName, password: 'xxx'})
+        if (store.state.oauth.token) {
+          store.dispatch('loginUser', store.state.oauth.token)
         }
         loaded = true
       } catch (e) {
         console.log("Couldn't load state")
+        console.error(e)
         loaded = true
       }
-    })
-
-    subscriber(store)((mutation, state) => {
-      try {
-        setState(key, reducer(state, paths), storage)
-      } catch (e) {
-        console.log("Couldn't persist state:")
-        console.log(e)
-      }
-    })
-  }
+      subscriber(store)((mutation, state) => {
+        try {
+          if (saveImmedeatelyActions.includes(mutation.type)) {
+            setState(key, reducer(state, paths), storage)
+              .then(success => {
+                if (typeof success !== 'undefined') {
+                  if (mutation.type === 'setOption') {
+                    store.dispatch('settingsSaved', { success })
+                  }
+                }
+              }, error => {
+                if (mutation.type === 'setOption') {
+                  store.dispatch('settingsSaved', { error })
+                }
+              })
+          }
+        } catch (e) {
+          console.log("Couldn't persist state:")
+          console.log(e)
+        }
+      })
+    }
+  })
 }

src/main.js

@@ -1,24 +1,15 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
-import App from './App.vue'
-import PublicTimeline from './components/public_timeline/public_timeline.vue'
-import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
-import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
-import TagTimeline from './components/tag_timeline/tag_timeline.vue'
-import ConversationPage from './components/conversation-page/conversation-page.vue'
-import Mentions from './components/mentions/mentions.vue'
-import UserProfile from './components/user_profile/user_profile.vue'
-import Settings from './components/settings/settings.vue'
-import Registration from './components/registration/registration.vue'
-import UserSettings from './components/user_settings/user_settings.vue'
-import FollowRequests from './components/follow_requests/follow_requests.vue'
 
+import interfaceModule from './modules/interface.js'
+import instanceModule from './modules/instance.js'
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
 import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
 import chatModule from './modules/chat.js'
+import oauthModule from './modules/oauth.js'
 
 import VueTimeago from 'vue-timeago'
 import VueI18n from 'vue-i18n'
@@ -29,6 +20,8 @@ import messages from './i18n/messages.js'
 
 import VueChatScroll from 'vue-chat-scroll'
 
+import afterStoreSetup from './boot/after_store.js'
+
 const currentLocale = (window.navigator.language || 'en').split('-')[0]
 
 Vue.use(Vuex)
@@ -43,43 +36,6 @@ Vue.use(VueTimeago, {
 Vue.use(VueI18n)
 Vue.use(VueChatScroll)
 
-const persistedStateOptions = {
-  paths: [
-    'config.collapseMessageWithSubject',
-    'config.hideAttachments',
-    'config.hideAttachmentsInConv',
-    'config.hideNsfw',
-    'config.replyVisibility',
-    'config.notificationVisibility',
-    'config.autoLoad',
-    'config.hoverPreview',
-    'config.streaming',
-    'config.muteWords',
-    'config.customTheme',
-    'config.highlight',
-    'config.loopVideo',
-    'config.loopVideoSilentOnly',
-    'config.pauseOnUnfocused',
-    'config.stopGifs',
-    'config.interfaceLanguage',
-    'users.lastLoginName',
-    'statuses.notifications.maxSavedId'
-  ]
-}
-
-const store = new Vuex.Store({
-  modules: {
-    statuses: statusesModule,
-    users: usersModule,
-    api: apiModule,
-    config: configModule,
-    chat: chatModule
-  },
-  plugins: [createPersistedState(persistedStateOptions)],
-  strict: false // Socket modifies itself, let's ignore this for now.
-  // strict: process.env.NODE_ENV !== 'production'
-})
-
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
   locale: currentLocale,
@@ -87,141 +43,29 @@ const i18n = new VueI18n({
   messages
 })
 
-window.fetch('/api/statusnet/config.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const {name, closed: registrationClosed, textlimit, server} = data.site
-
-    store.dispatch('setOption', { name: 'name', value: name })
-    store.dispatch('setOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
-    store.dispatch('setOption', { name: 'textlimit', value: parseInt(textlimit) })
-    store.dispatch('setOption', { name: 'server', value: server })
-
-    var apiConfig = data.site.pleromafe
-
-    window.fetch('/static/config.json')
-    .then((res) => res.json())
-    .then((data) => {
-      var staticConfig = data
-      // This takes static config and overrides properties that are present in apiConfig
-      var config = Object.assign({}, staticConfig, apiConfig)
-
-      var theme = (config.theme)
-      var background = (config.background)
-      var logo = (config.logo)
-      var logoMask = (typeof config.logoMask === 'undefined' ? true : config.logoMask)
-      var logoMargin = (typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin)
-      var redirectRootNoLogin = (config.redirectRootNoLogin)
-      var redirectRootLogin = (config.redirectRootLogin)
-      var chatDisabled = (config.chatDisabled)
-      var showInstanceSpecificPanel = (config.showInstanceSpecificPanel)
-      var scopeOptionsEnabled = (config.scopeOptionsEnabled)
-      var formattingOptionsEnabled = (config.formattingOptionsEnabled)
-      var defaultCollapseMessageWithSubject = (config.collapseMessageWithSubject)
-
-      store.dispatch('setOption', { name: 'theme', value: theme })
-      store.dispatch('setOption', { name: 'background', value: background })
-      store.dispatch('setOption', { name: 'logo', value: logo })
-      store.dispatch('setOption', { name: 'logoMask', value: logoMask })
-      store.dispatch('setOption', { name: 'logoMargin', value: logoMargin })
-      store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
-      store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
-      store.dispatch('setOption', { name: 'formattingOptionsEnabled', value: formattingOptionsEnabled })
-      store.dispatch('setOption', { name: 'defaultCollapseMessageWithSubject', value: defaultCollapseMessageWithSubject })
-      if (chatDisabled) {
-        store.dispatch('disableChat')
-      }
-
-      const routes = [
-        { name: 'root',
-          path: '/',
-          redirect: to => {
-            return (store.state.users.currentUser ? redirectRootLogin : redirectRootNoLogin) || '/main/all'
-          }},
-        { path: '/main/all', component: PublicAndExternalTimeline },
-        { path: '/main/public', component: PublicTimeline },
-        { path: '/main/friends', component: FriendsTimeline },
-        { path: '/tag/:tag', component: TagTimeline },
-        { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
-        { name: 'user-profile', path: '/users/:id', component: UserProfile },
-        { name: 'mentions', path: '/:username/mentions', component: Mentions },
-        { name: 'settings', path: '/settings', component: Settings },
-        { name: 'registration', path: '/registration', component: Registration },
-        { name: 'registration', path: '/registration/:token', component: Registration },
-        { name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
-        { name: 'user-settings', path: '/user-settings', component: UserSettings }
-      ]
-
-      const router = new VueRouter({
-        mode: 'history',
-        routes,
-        scrollBehavior: (to, from, savedPosition) => {
-          if (to.matched.some(m => m.meta.dontScroll)) {
-            return false
-          }
-          return savedPosition || { x: 0, y: 0 }
-        }
-      })
-
-      /* eslint-disable no-new */
-      new Vue({
-        router,
-        store,
-        i18n,
-        el: '#app',
-        render: h => h(App)
-      })
-    })
+const persistedStateOptions = {
+  paths: [
+    'config',
+    'users.lastLoginName',
+    'oauth'
+  ]
+}
+createPersistedState(persistedStateOptions).then((persistedState) => {
+  const store = new Vuex.Store({
+    modules: {
+      interface: interfaceModule,
+      instance: instanceModule,
+      statuses: statusesModule,
+      users: usersModule,
+      api: apiModule,
+      config: configModule,
+      chat: chatModule,
+      oauth: oauthModule
+    },
+    plugins: [persistedState],
+    strict: false // Socket modifies itself, let's ignore this for now.
+    // strict: process.env.NODE_ENV !== 'production'
   })
 
-window.fetch('/static/terms-of-service.html')
-  .then((res) => res.text())
-  .then((html) => {
-    store.dispatch('setOption', { name: 'tos', value: html })
-  })
-
-window.fetch('/api/pleroma/emoji.json')
-  .then(
-    (res) => res.json()
-      .then(
-        (values) => {
-          const emoji = Object.keys(values).map((key) => {
-            return { shortcode: key, image_url: values[key] }
-          })
-          store.dispatch('setOption', { name: 'customEmoji', value: emoji })
-          store.dispatch('setOption', { name: 'pleromaBackend', value: true })
-        },
-        (failure) => {
-          store.dispatch('setOption', { name: 'pleromaBackend', value: false })
-        }
-      ),
-    (error) => console.log(error)
-  )
-
-window.fetch('/static/emoji.json')
-  .then((res) => res.json())
-  .then((values) => {
-    const emoji = Object.keys(values).map((key) => {
-      return { shortcode: key, image_url: false, 'utf': values[key] }
-    })
-    store.dispatch('setOption', { name: 'emoji', value: emoji })
-  })
-
-window.fetch('/instance/panel.html')
-  .then((res) => res.text())
-  .then((html) => {
-    store.dispatch('setOption', { name: 'instanceSpecificPanelContent', value: html })
-  })
-
-window.fetch('/nodeinfo/2.0.json')
-  .then((res) => res.json())
-  .then((data) => {
-    const metadata = data.metadata
-    store.dispatch('setOption', { name: 'mediaProxyAvailable', value: data.metadata.mediaProxy })
-    store.dispatch('setOption', { name: 'chatAvailable', value: data.metadata.chat })
-    store.dispatch('setOption', { name: 'gopherAvailable', value: data.metadata.gopher })
-
-    const suggestions = metadata.suggestions
-    store.dispatch('setOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
-    store.dispatch('setOption', { name: 'suggestionsWeb', value: suggestions.web })
-  })
+  afterStoreSetup({store, i18n})
+})

src/modules/config.js

@@ -1,12 +1,11 @@
 import { set, delete as del } from 'vue'
-import StyleSetter from '../services/style_setter/style_setter.js'
+import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
 const defaultState = {
-  name: 'Pleroma FE',
   colors: {},
-  collapseMessageWithSubject: false,
+  collapseMessageWithSubject: undefined, // instance default
   hideAttachments: false,
   hideAttachmentsInConv: false,
   hideNsfw: true,
@@ -26,7 +25,10 @@ const defaultState = {
   },
   muteWords: [],
   highlight: {},
-  interfaceLanguage: browserLocale
+  interfaceLanguage: browserLocale,
+  scopeCopy: undefined, // instance default
+  subjectLineBehavior: undefined, // instance default
+  alwaysShowSubjectInput: undefined // instance default
 }
 
 const config = {
@@ -45,23 +47,17 @@ const config = {
     }
   },
   actions: {
-    setPageTitle ({state}, option = '') {
-      document.title = `${option} ${state.name}`
-    },
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', {user, color, type})
     },
     setOption ({ commit, dispatch }, { name, value }) {
       commit('setOption', {name, value})
       switch (name) {
-        case 'name':
-          dispatch('setPageTitle')
-          break
         case 'theme':
-          StyleSetter.setPreset(value, commit)
+          setPreset(value, commit)
           break
         case 'customTheme':
-          StyleSetter.setColors(value, commit)
+          applyTheme(value, commit)
       }
     }
   }

src/modules/errors.js

@@ -0,0 +1,12 @@
+import { capitalize } from 'lodash'
+
+export function humanizeErrors (errors) {
+  return Object.entries(errors).reduce((errs, [k, val]) => {
+    let message = val.reduce((acc, message) => {
+      let key = capitalize(k.replace(/_/g, ' '))
+      return acc + [key, message].join(' ') + '. '
+    }, '')
+    return [...errs, message]
+  }, [])
+}
+

src/modules/instance.js

@@ -0,0 +1,69 @@
+import { set } from 'vue'
+import { setPreset } from '../services/style_setter/style_setter.js'
+
+const defaultState = {
+  // Stuff from static/config.json and apiConfig
+  name: 'Pleroma FE',
+  registrationOpen: true,
+  textlimit: 5000,
+  server: 'http://localhost:4040/',
+  theme: 'pleroma-dark',
+  background: '/static/aurora_borealis.jpg',
+  logo: '/static/logo.png',
+  logoMask: true,
+  logoMargin: '.2em',
+  redirectRootNoLogin: '/main/all',
+  redirectRootLogin: '/main/friends',
+  showInstanceSpecificPanel: false,
+  scopeOptionsEnabled: true,
+  formattingOptionsEnabled: false,
+  alwaysShowSubjectInput: true,
+  collapseMessageWithSubject: false,
+  hidePostStats: false,
+  hideUserStats: false,
+  disableChat: false,
+  scopeCopy: true,
+  subjectLineBehavior: 'email',
+  loginMethod: 'password',
+
+  // Nasty stuff
+  pleromaBackend: true,
+  emoji: [],
+  customEmoji: [],
+
+  // Feature-set, apparently, not everything here is reported...
+  mediaProxyAvailable: false,
+  chatAvailable: false,
+  gopherAvailable: false,
+  suggestionsEnabled: false,
+  suggestionsWeb: '',
+
+  // Html stuff
+  instanceSpecificPanelContent: '',
+  tos: ''
+}
+
+const instance = {
+  state: defaultState,
+  mutations: {
+    setInstanceOption (state, { name, value }) {
+      if (typeof value !== 'undefined') {
+        set(state, name, value)
+      }
+    }
+  },
+  actions: {
+    setInstanceOption ({ commit, dispatch }, { name, value }) {
+      commit('setInstanceOption', {name, value})
+      switch (name) {
+        case 'name':
+          dispatch('setPageTitle')
+          break
+        case 'theme':
+          setPreset(value, commit)
+      }
+    }
+  }
+}
+
+export default instance