Merge branch 'develop' into fedi-absturztau-be

This patch removes Ruffle completely, significantly speeding up the
loading of the frontend, making it a little more responsive,
and reducing its compressed size.

README.md

@@ -6,6 +6,19 @@ This is a fork of Akkoma-FE from the Pleroma project, with support for new Akkom
 - MFM support via [marked-mfm](https://akkoma.dev/sfr/marked-mfm)
 - Custom emoji reactions
 
+# Changes in this Fork
+
+* script tag in index.html for [pleroma-mod-loader](https://git.pleroma.social/absturztaube/pleroma-mod-loader)
+* ability to move notifications to a seperate column
+* insert zero width space when padding of emojis is disabled
+* add custom language "English (Nyan)"
+* pointing version links to my gitlab repos
+* optional compact styles provided by craftplacer
+* tags as buttons bellow a post
+* [pinch and pan media](https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1403)
+* swap of react and favorite button in status
+* adding __vueComponent__ to DOM nodes to make new mods work
+
 # For Translators
 
 The [Weblate UI](https://translate.akkoma.dev/projects/akkoma/pleroma-fe/) is recommended for adding or modifying translations for Akkoma-FE. 

build/dev-server.js

@@ -21,7 +21,6 @@ var compiler = webpack(webpackConfig)
 
 var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: webpackConfig.output.publicPath,
-  writeToDisk: true,
   stats: {
     colors: true,
     chunks: false

index.html

@@ -18,5 +18,6 @@
     <div id="app"></div>
     <div id="modal"></div>
     <!-- built files will be auto injected -->
+    <script type="text/javascript" src="/instance/pleroma-mod-loader.js"></script>
   </body>
 </html>

src/boot/after_store.js

@@ -18,6 +18,8 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import { applyTheme } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 
+import DomNodeToComponent from '../modules/domNodeToComponent.js'
+
 let staticInitialResults = null
 
 const parsedInitialResults = () => {
@@ -422,6 +424,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   app.use(vClickOutside)
   app.use(VBodyScrollLock)
+  app.use(DomNodeToComponent)
 
   app.component('FAIcon', FontAwesomeIcon)
   app.component('FALayers', FontAwesomeLayers)

src/components/attachment/attachment.js

@@ -1,5 +1,4 @@
 import StillImage from '../still-image/still-image.vue'
-import Flash from '../flash/flash.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
@@ -62,7 +61,6 @@ const Attachment = {
     }
   },
   components: {
-    Flash,
     StillImage,
     VideoAttachment,
     Blurhash

src/components/chat/chat_layout.js

@@ -0,0 +1,108 @@
+const ChatLayout = {
+  methods: {
+    setChatLayout () {
+      let body = document.querySelector('body')
+      if (body) {
+        body.style.overscrollBehavior = 'none'
+      }
+      if (this.isMobileLayout) {
+        this.setMobileChatLayout()
+      }
+    },
+    unsetChatLayout () {
+      this.unsetMobileChatLayout()
+      let body = document.querySelector('body')
+      if (body) {
+        body.style.overscrollBehavior = 'unset'
+      }
+    },
+    setMobileChatLayout () {
+      // This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
+      // This layout prevents empty spaces from being visible at the bottom
+      // of the chat on iOS Safari (`safe-area-inset`) when
+      // - the on-screen keyboard appears and the user starts typing
+      // - the user selects the text inside the input area
+      // - the user selects and deletes the text that is multiple lines long
+      // TODO: unify the chat layout with the global layout.
+
+      let html = document.querySelector('html')
+      if (html) {
+        html.style.overflow = 'hidden'
+        html.style.height = '100%'
+      }
+
+      let body = document.querySelector('body')
+      if (body) {
+        body.style.height = '100%'
+      }
+
+      let app = document.getElementById('app')
+      if (app) {
+        app.style.height = '100%'
+        app.style.overflow = 'hidden'
+        app.style.minHeight = 'auto'
+      }
+
+      let appBgWrapper = window.document.getElementById('app_bg_wrapper')
+      if (appBgWrapper) {
+        appBgWrapper.style.overflow = 'hidden'
+      }
+
+      let main = document.getElementsByClassName('main')[0]
+      if (main) {
+        main.style.overflow = 'hidden'
+        main.style.height = '100%'
+      }
+
+      let content = document.getElementById('content')
+      if (content) {
+        content.style.paddingTop = '0'
+        content.style.height = '100%'
+        content.style.overflow = 'visible'
+      }
+
+      this.$nextTick(() => {
+        this.updateSize()
+      })
+    },
+    unsetMobileChatLayout () {
+      let html = document.querySelector('html')
+      if (html) {
+        html.style.overflow = 'visible'
+        html.style.height = 'unset'
+      }
+
+      let body = document.querySelector('body')
+      if (body) {
+        body.style.height = 'unset'
+      }
+
+      let app = document.getElementById('app')
+      if (app) {
+        app.style.height = '100%'
+        app.style.overflow = 'visible'
+        app.style.minHeight = '100vh'
+      }
+
+      let appBgWrapper = document.getElementById('app_bg_wrapper')
+      if (appBgWrapper) {
+        appBgWrapper.style.overflow = 'visible'
+      }
+
+      let main = document.getElementsByClassName('main')[0]
+      if (main) {
+        main.style.overflow = 'visible'
+        main.style.height = 'unset'
+      }
+
+      let content = document.getElementById('content')
+      if (content) {
+        content.style.paddingTop = '60px'
+        content.style.height = 'unset'
+        content.style.overflow = 'unset'
+      }
+    }
+  }
+}
+
+export default ChatLayout

src/components/chat_avatar/chat_avatar.js

@@ -0,0 +1,34 @@
+import StillImage from '../still-image/still-image.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { mapState } from 'vuex'
+
+const ChatAvatar = {
+  props: ['users', 'fallbackUser', 'width', 'height'],
+  components: {
+    StillImage
+  },
+  methods: {
+    getUserProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name)
+    }
+  },
+  computed: {
+    firstUser () {
+      return this.users[0] || this.fallbackUser
+    },
+    secondUser () {
+      return this.users[1]
+    },
+    thirdUser () {
+      return this.users[2]
+    },
+    fourthUser () {
+      return this.users[3]
+    },
+    ...mapState({
+      betterShadow: state => state.interface.browserSupport.cssFilter
+    })
+  }
+}
+
+export default ChatAvatar

src/components/chat_avatar/chat_avatar.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    v-if="firstUser && secondUser"
+    class="direct-conversation-multi-user-avatar"
+    :style="{ 'width': width, 'height': height }"
+  >
+    <StillImage
+      v-if="fourthUser"
+      class="avatar avatar-fourth direct-conversation-avatar"
+      :alt="fourthUser.screen_name"
+      :title="fourthUser.screen_name"
+      :src="fourthUser.profile_image_url_original"
+      error-src="/images/avi.png"
+      :class="{ 'better-shadow': betterShadow }"
+    />
+    <StillImage
+      v-if="thirdUser"
+      class="avatar avatar-third direct-conversation-avatar"
+      :alt="thirdUser.screen_name"
+      :title="thirdUser.screen_name"
+      :src="thirdUser.profile_image_url_original"
+      error-src="/images/avi.png"
+      :class="{ 'better-shadow': betterShadow }"
+    />
+    <StillImage
+      class="avatar avatar-second direct-conversation-avatar"
+      :alt="secondUser.screen_name"
+      :title="secondUser.screen_name"
+      :src="secondUser.profile_image_url_original"
+      error-src="/images/avi.png"
+      :class="{ 'better-shadow': betterShadow }"
+      :style="{ 'height': fourthUser ? '50%' : '100%' }"
+    />
+    <StillImage
+      class="avatar avatar-first direct-conversation-avatar"
+      :alt="firstUser.screen_name"
+      :title="firstUser.screen_name"
+      :src="firstUser.profile_image_url_original"
+      error-src="/images/avi.png"
+      :class="{ 'better-shadow': betterShadow }"
+      :style="{ 'height': thirdUser ? '50%' : '100%' }"
+    />
+  </div>
+  <router-link
+    v-else
+    :to="getUserProfileLink(firstUser)"
+  >
+    <StillImage
+      :style="{ 'width': width, 'height': height }"
+      class="avatar direct-conversation-avatar single-user"
+      :alt="firstUser.screen_name"
+      :title="firstUser.screen_name"
+      :src="firstUser.profile_image_url_original"
+      error-src="/images/avi.png"
+      :class="{ 'better-shadow': betterShadow }"
+    />
+  </router-link>
+</template>
+
+<script src="./chat_avatar.js"></script>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.direct-conversation-multi-user-avatar {
+  position: relative;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  .avatar.still-image {
+    width: 50%;
+    height: 50%;
+    border-radius: 0;
+    img, canvas {
+      object-fit: cover;
+    }
+
+    &.avatar-first {
+      float: right;
+      position: absolute;
+      bottom: 0;
+    }
+
+    &.avatar-second {
+      float: right;
+    }
+
+    &.avatar-third {
+      float: right;
+      position: absolute;
+    }
+
+    &.avatar-fourth {
+      float: right;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+  }
+}
+
+.direct-conversation-avatar {
+  display: inline-block;
+  vertical-align: middle;
+
+  &.single-user {
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+  }
+
+  .avatar.still-image {
+    width: 48px;
+    height: 48px;
+
+    box-shadow: var(--avatarStatusShadow);
+    border-radius: 0;
+
+    &.better-shadow {
+      box-shadow: var(--avatarStatusShadowInset);
+      filter: var(--avatarStatusShadowFilter)
+    }
+
+    &.animated::before {
+      display: none;
+    }
+  }
+}
+</style>

src/components/chat_message_date/chat_message_date.vue

@@ -18,7 +18,7 @@ export default {
       if (this.date.getTime() === today.getTime()) {
         return this.$t('display_date.today')
       } else {
-        return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
+        return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale.split('_')[0]), { day: 'numeric', month: 'long' })
       }
     }
   }

src/components/emoji_input/emoji_input.js

@@ -249,8 +249,8 @@ const EmojiInput = {
        * them, masto seem to be rendering :emoji::emoji: correctly now so why not
        */
       const isSpaceRegex = /\s/
-      const spaceBefore = (surroundingSpace && !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0) ? ' ' : ''
-      const spaceAfter = (surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji) ? ' ' : ''
+      const spaceBefore = (surroundingSpace && !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0) ? ' ' : '​'
+      const spaceAfter = (surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji) ? ' ' : '​'
 
       const newValue = [
         before,

src/components/flash/flash.js

@@ -1,53 +0,0 @@
-import RuffleService from '../../services/ruffle_service/ruffle_service.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faStop,
-  faExclamationTriangle
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faStop,
-  faExclamationTriangle
-)
-
-const Flash = {
-  props: [ 'src' ],
-  data () {
-    return {
-      player: false, // can be true, "hidden", false. hidden = element exists
-      loaded: false,
-      ruffleInstance: null
-    }
-  },
-  methods: {
-    openPlayer () {
-      if (this.player) return // prevent double-loading, or re-loading on failure
-      this.player = 'hidden'
-      RuffleService.getRuffle().then((ruffle) => {
-        const player = ruffle.newest().createPlayer()
-        player.config = {
-          letterbox: 'on'
-        }
-        const container = this.$refs.container
-        container.appendChild(player)
-        player.style.width = '100%'
-        player.style.height = '100%'
-        player.load(this.src).then(() => {
-          this.player = true
-        }).catch((e) => {
-          console.error('Error loading ruffle', e)
-          this.player = 'error'
-        })
-        this.ruffleInstance = player
-        this.$emit('playerOpened')
-      })
-    },
-    closePlayer () {
-      this.ruffleInstance && this.ruffleInstance.remove()
-      this.player = false
-      this.$emit('playerClosed')
-    }
-  }
-}
-
-export default Flash

src/components/flash/flash.vue

@@ -1,84 +0,0 @@
-<template>
-  <div class="Flash">
-    <div
-      v-if="player === true || player === 'hidden'"
-      ref="container"
-      class="player"
-      :class="{ hidden: player === 'hidden' }"
-    />
-    <button
-      v-if="player !== true"
-      class="button-unstyled placeholder"
-      @click="openPlayer"
-    >
-      <span
-        v-if="player === 'hidden'"
-        class="label"
-      >
-        {{ $t('general.loading') }}
-      </span>
-      <span
-        v-if="player === 'error'"
-        class="label"
-      >
-        {{ $t('general.flash_fail') }}
-      </span>
-      <span
-        v-else
-        class="label"
-      >
-        <p>
-          {{ $t('general.flash_content') }}
-        </p>
-        <p>
-          <FAIcon icon="exclamation-triangle" />
-          {{ $t('general.flash_security') }}
-        </p>
-      </span>
-    </button>
-  </div>
-</template>
-
-<script src="./flash.js"></script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-.Flash {
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .player {
-    height: 100%;
-    width: 100%;
-  }
-
-  .placeholder {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg);
-    color: var(--link);
-  }
-
-  .hider {
-    top: 0;
-  }
-
-  .label {
-    text-align: center;
-    flex: 1 1 0;
-    line-height: 1.2;
-    white-space: normal;
-    word-wrap: normal;
-  }
-
-  .hidden {
-    display: none;
-    visibility: 'hidden';
-  }
-}
-</style>

src/components/media_modal/media_modal.js

@@ -4,7 +4,6 @@ import Modal from '../modal/modal.vue'
 import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
 import SwipeClick from '../swipe_click/swipe_click.vue'
 import GestureService from '../../services/gesture_service/gesture_service'
-import Flash from 'src/components/flash/flash.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -27,8 +26,7 @@ const MediaModal = {
     VideoAttachment,
     PinchZoom,
     SwipeClick,
-    Modal,
-    Flash
+    Modal
   },
   data () {
     return {

src/components/media_modal/media_modal.vue

@@ -48,13 +48,6 @@
       :title="currentMedia.description"
       controls
     />
-    <Flash
-      v-if="type === 'flash'"
-      class="modal-image"
-      :src="currentMedia.url"
-      :alt="currentMedia.description"
-      :title="currentMedia.description"
-    />
     <button
       v-if="canNavigate"
       :title="$t('media_modal.previous')"

src/components/nav_panel/nav_panel.js

@@ -47,6 +47,9 @@ const NavPanel = {
     }
   },
   computed: {
+    compactNavPanel () {
+      return this.$store.getters.mergedConfig.compactNavPanel || false
+    },
     ...mapState({
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,

src/components/nav_panel/nav_panel.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="NavPanel">
+  <div
+    class="NavPanel"
+    :class="{ compact: compactNavPanel }"
+  >
     <div class="panel panel-default">
       <ul>
         <li v-if="currentUser || !privateMode">
@@ -211,5 +214,83 @@
     right: 0.6rem;
     top: 1.25em;
   }
+
+  &.compact {
+    .panel {
+      overflow: visible;
+
+      ul > li:hover > a:not(.router-link-active) > .button-icon {
+        color: var(--selectedMenuText,#b9b9ba);
+      }
+
+      ul > li > .router-link-active > .button-icon {
+        color: var(--selectedMenuLightText);
+      }
+
+      ul {
+        display: flex;
+        height: 100%;
+        padding: 0;
+      }
+
+      li {
+        width: -moz-available;
+        width: -webkit-fill-available;
+        border-bottom: none;
+
+        a {
+          border-radius: 0 !important;
+        }
+      }
+
+      .timelines-chevron {
+        display: none;
+      }
+
+      .timelines-background {
+        position: absolute;
+        z-index: 10000;
+      }
+
+      a, button {
+        font-size: 0;
+        height: 100%;
+        display: flex;
+        position: relative;
+        padding-top: 7px;
+        padding-bottom: 7px;
+      }
+
+      .button-icon, svg.svg-inline--fa {
+        margin: auto;
+        font-size: 20px;
+        color: var(--link,#d8a070);
+      }
+
+      .badge {
+        position: absolute;
+        right: 0;
+        background-color: red;
+        background-color: var(--badgeNotification,red);
+        color: #fff;
+        color: var(--badgeNotificationText,#fff);
+
+        // remove layout
+        padding: 0;
+        margin: 0;
+        box-shadow: black 0 1px 5px;
+        display: inline-block;
+        border-radius: 99px;
+        min-width: 22px;
+        line-height: 22px;
+        min-height: 22px;
+        max-height: 22px;
+        font-size: 14px;
+        font-weight: normal;
+        font-style: normal;
+        font-family: inherit;
+      }
+    }
+  }
 }
 </style>

src/components/notification/notification.js

@@ -1,9 +1,9 @@
-import StatusContent from '../status_content/status_content.vue'
 import { mapState } from 'vuex'
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
+import StatusContent from '../status_content/status_content.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'

src/components/post_status_form/post_status_form.js

@@ -489,6 +489,7 @@ const PostStatusForm = {
       }
     },
     addMediaFile (fileInfo) {
+      this.$emit('resize')
       this.newStatus.files.push(fileInfo)
 
       if (this.$store.getters.mergedConfig.sensitiveIfSubject && this.newStatus.spoilerText !== '') {
@@ -497,6 +498,7 @@ const PostStatusForm = {
       this.$emit('resize', { delayed: true })
     },
     removeMediaFile (fileInfo) {
+      this.$emit('resize')
       let index = this.newStatus.files.indexOf(fileInfo)
       this.newStatus.files.splice(index, 1)
       this.$emit('resize')

src/components/post_status_form/post_status_form.vue

@@ -616,4 +616,5 @@
     border: 2px dashed var(--text, $fallback--text);
   }
 }
+
 </style>

src/components/settings_modal/tabs/general_tab.vue

@@ -102,11 +102,41 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="showThirdColumn">
+            {{ $t('settings.show_third_column') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
         <li v-if="instanceWallpaperUsed">
           <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="compactNavPanel">
+            {{ $t('settings.compact_nav_panel') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="compactUserPanel">
+            {{ $t('settings.compact_user_panel') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="instanceShoutboxPresent">
+          <BooleanSetting path="hideShoutbox">
+            {{ $t('settings.hide_shoutbox') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('nav.timeline') }}</h2>
+      <ul class="setting-list">
         <li>
           <BooleanSetting
             path="hideSiteFavicon"

src/components/settings_modal/tabs/security_tab/security_tab.js

@@ -48,7 +48,7 @@ const SecurityTab = {
         return {
           id: oauthToken.id,
           appName: oauthToken.app_name,
-          validUntil: new Date(oauthToken.valid_until).toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale))
+          validUntil: new Date(oauthToken.valid_until).toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale.split('_')[0]))
         }
       })
     }

src/components/settings_modal/tabs/version_tab.js

@@ -1,7 +1,7 @@
 import { extractCommit } from 'src/services/version/version.service'
 
-const pleromaFeCommitUrl = 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/'
-const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commit/'
+const pleromaFeCommitUrl = 'https://akkoma.dev/puniko/pleroma-fe/commit/'
+const pleromaBeCommitUrl = 'https://akkoma.dev/puniko/akkoma/commits/'
 
 const VersionTab = {
   data () {

src/components/status/status.vue

@@ -466,12 +466,16 @@
               :logged-in="loggedIn"
               :status="status"
             />
+            <ReactButton
+              v-if="swapReacts && loggedIn"
+              :status="status"
+            />
             <favorite-button
               :logged-in="loggedIn"
               :status="status"
             />
             <ReactButton
-              v-if="loggedIn"
+              v-if="!swapReacts && loggedIn"
               :status="status"
             />
             <extra-buttons

src/components/timeago/timeago.vue

@@ -34,7 +34,7 @@ export default {
   },
   computed: {
     localeDateString () {
-      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale).split('_')[0]
       return typeof this.time === 'string'
         ? new Date(Date.parse(this.time)).toLocaleString(browserLocale)
         : this.time.toLocaleString(browserLocale)

src/components/user_panel/user_panel.js

@@ -6,6 +6,9 @@ import { mapState } from 'vuex'
 const UserPanel = {
   computed: {
     signedIn () { return this.user },
+    compactUserPanel () {
+      return this.$store.getters.mergedConfig.compactUserPanel || false
+    },
     ...mapState({ user: state => state.users.currentUser })
   },
   components: {

src/components/user_panel/user_panel.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="user-panel">
+  <div
+    class="user-panel"
+    :class="{ compact: compactUserPanel }"
+  >
     <div
       v-if="signedIn"
       key="user-panel-signed"
@@ -26,4 +29,22 @@
   overflow: visible;
   z-index: 10;
 }
+
+.user-panel.compact {
+  .background-image {
+    mask: unset; -webkit-mask: unset;
+    background-position: center;
+  }
+
+  .user-info .Avatar { width: 24px; height: 24px; }
+
+  .user-summary { margin-left: 1em; font-weight: bold; }
+
+  .user-info .container { padding-top: 6px; padding-bottom: 0; }
+
+  .bottom-line { display: none; }
+
+  .form-group .visibility-notice { margin: 0; }
+}
+
 </style>

src/i18n/en_nyan.json

@@ -0,0 +1,775 @@
+{
+  "about": {
+    "mrf": {
+      "federation": "Federation",
+      "keyword": {
+        "keyword_policies": "Keyword Policies",
+        "ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
+        "reject": "Reject",
+        "replace": "Replace",
+        "is_replaced_by": "→"
+      },
+      "mrf_policies": "Enabled MRF Policies",
+      "mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance.  The following policies are enabled:",
+      "simple": {
+        "simple_policies": "Instance-specific Policies",
+        "accept": "Accept",
+        "accept_desc": "This instance only accepts messages from the following instances:",
+        "reject": "Reject",
+        "reject_desc": "This instance will not accept messages from the following instances:",
+        "quarantine": "Quarantine",
+        "quarantine_desc": "This instance will send only public posts to the following instances:",
+        "ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
+        "ftl_removal_desc": "This instance removes these instances from \"The Whole Known Network\" timeline:",
+        "media_removal": "Media Removal",
+        "media_removal_desc": "This instance removes media from posts on the following instances:",
+        "media_nsfw": "Media Force-set As Sensitive",
+        "media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
+      }
+    },
+    "staff": "Staff"
+  },
+  "chat": {
+    "title": "Chat"
+  },
+  "domain_mute_card": {
+    "mute": "Mute",
+    "mute_progress": "Muting...",
+    "unmute": "Unmute",
+    "unmute_progress": "Unmuting..."
+  },
+  "exporter": {
+    "export": "Export",
+    "processing": "Processing, you'll soon be asked to download your file"
+  },
+  "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": "Nyan",
+    "more": "More",
+    "generic_error": "An error occured",
+    "optional": "optional",
+    "show_more": "Show more",
+    "show_less": "Show less",
+    "dismiss": "Dismiss",
+    "cancel": "Cancel",
+    "disable": "Disable",
+    "enable": "Enable",
+    "confirm": "Confirm",
+    "verify": "Verify"
+  },
+  "image_cropper": {
+    "crop_picture": "Crop picture",
+    "save": "Save",
+    "save_without_cropping": "Save without cropping",
+    "cancel": "Cancel"
+  },
+  "importer": {
+    "submit": "Submit",
+    "success": "Imported successfully.",
+    "error": "An error occured while importing this file."
+  },
+  "login": {
+    "login": "Log in",
+    "description": "Log in with OAuth",
+    "logout": "Log out",
+    "password": "Password",
+    "placeholder": "e.g. lain",
+    "register": "Register",
+    "username": "Username",
+    "hint": "Log in to join the discussion",
+    "authentication_code": "Authentication code",
+    "enter_recovery_code": "Enter a recovery code",
+    "enter_two_factor_code": "Enter a two-factor code",
+    "recovery_code": "Recovery code",
+    "heading" : {
+      "totp" : "Two-factor authentication",
+      "recovery" : "Two-factor recovery"
+    }
+  },
+  "media_modal": {
+    "previous": "Previous",
+    "next": "Next"
+  },
+  "nav": {
+    "about": "About",
+    "administration": "Administration",
+    "back": "Back",
+    "chat": "Local Chat",
+    "friend_requests": "Follow Requests",
+    "mentions": "Mentions",
+    "interactions": "Interactions",
+    "dms": "Direct Messages",
+    "public_tl": "Public Timeline",
+    "timeline": "Timeline",
+    "twkn": "The Whole Known Network",
+    "user_search": "User Search",
+    "search": "Search",
+    "who_to_follow": "Who to follow",
+    "preferences": "Preferences",
+    "chats": "Chats"
+  },
+  "notifications": {
+    "broken_favorite": "Unknown status, searching for it...",
+    "favorited_you": "patted your status",
+    "followed_you": "snuggled you",
+    "follow_request": "wants to snuggle you",
+    "load_older": "Load older notifications",
+    "notifications": "Notifications",
+    "read": "Read!",
+    "repeated_you": "renyaned your status",
+    "no_more_notifications": "No more notifications",
+    "migrated_to": "migrated to",
+    "reacted_with": "reacted with {0}"
+  },
+  "polls": {
+    "add_poll": "Add Poll",
+    "add_option": "Add Option",
+    "option": "Option",
+    "votes": "votes",
+    "vote": "Vote",
+    "type": "Poll type",
+    "single_choice": "Single choice",
+    "multiple_choices": "Multiple choices",
+    "expiry": "Poll age",
+    "expires_in": "Poll ends in {0}",
+    "expired": "Poll ended {0} ago",
+    "not_enough_options": "Too few unique options in poll"
+  },
+  "emoji": {
+    "stickers": "Stickers",
+    "emoji": "Emoji",
+    "keep_open": "Keep picker open",
+    "search_emoji": "Search for an emoji",
+    "add_emoji": "Insert emoji",
+    "custom": "Custom emoji",
+    "unicode": "Unicode emoji",
+    "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.",
+    "load_all": "Loading all {emojiAmount} emoji"
+  },
+  "interactions": {
+    "favs_repeats": "Renyans and Pats",
+    "follows": "New Snuggles",
+    "moves": "User migrates",
+    "load_older": "Load older interactions"
+  },
+  "post_status": {
+    "new_status": "Nyan new status",
+    "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only nyans.",
+    "account_not_locked_warning_link": "locked",
+    "attachments_sensitive": "Mark attachments as sensitive",
+    "content_type": {
+      "text/plain": "Plain text",
+      "text/html": "HTML",
+      "text/markdown": "Markdown",
+      "text/bbcode": "BBCode"
+    },
+    "content_warning": "Subject (optional)",
+    "default": "A nyanbox to nyan",
+    "direct_warning_to_all": "This nyan will be visible to all the mentioned users.",
+    "direct_warning_to_first_only": "This nyan will only be visible to the mentioned users at the beginning of the message.",
+    "posting": "Nyaning",
+    "scope_notice": {
+      "public": "This nyan will be visible to everyone",
+      "private": "This nyan will be visible to your followers only",
+      "unlisted": "This nyan will not be visible in Public Timeline and The Whole Known Network"
+    },
+    "scope": {
+      "direct": "Direct - Nyan to mentioned users only",
+      "private": "Followers-only - Nyan to followers only",
+      "public": "Public - Nyan to public timelines",
+      "unlisted": "Unlisted - Do not nyan to public timelines"
+    }
+  },
+  "registration": {
+    "bio": "Bio",
+    "email": "Email",
+    "fullname": "Display name",
+    "password_confirm": "Password confirmation",
+    "registration": "Registration",
+    "token": "Invite token",
+    "captcha": "CAPTCHA",
+    "new_captcha": "Click the image to get a new captcha",
+    "username_placeholder": "e.g. lain",
+    "fullname_placeholder": "e.g. Lain Iwakura",
+    "bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.",
+    "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"
+    }
+  },
+  "remote_user_resolver": {
+    "remote_user_resolver": "Remote user resolver",
+    "searching_for": "Searching for",
+    "error": "Not found."
+  },
+  "selectable_list": {
+    "select_all": "Select all"
+  },
+  "settings": {
+    "app_name": "App name",
+    "security": "Security",
+    "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
+    "mfa": {
+      "otp" : "OTP",
+      "setup_otp" : "Setup OTP",
+      "wait_pre_setup_otp" : "presetting OTP",
+      "confirm_and_enable" : "Confirm & enable OTP",
+      "title": "Two-factor Authentication",
+      "generate_new_recovery_codes" : "Generate new recovery codes",
+      "warning_of_generate_new_codes" : "When you generate new recovery codes, your old codes won’t work anymore.",
+      "recovery_codes" : "Recovery codes.",
+      "waiting_a_recovery_codes": "Receiving backup codes...",
+      "recovery_codes_warning" : "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.",
+      "authentication_methods" : "Authentication methods",
+      "scan": {
+        "title": "Scan",
+        "desc": "Using your two-factor app, scan this QR code or enter text key:",
+        "secret_code": "Key"
+      },
+      "verify": {
+        "desc": "To enable two-factor authentication, enter the code from your two-factor app:"
+      }
+    },
+    "allow_following_move": "Allow auto-follow when following account moves",
+    "attachmentRadius": "Attachments",
+    "attachments": "Attachments",
+    "autoload": "Enable automatic loading when scrolled to the bottom",
+    "avatar": "Avatar",
+    "avatarAltRadius": "Avatars (Notifications)",
+    "avatarRadius": "Avatars",
+    "background": "Background",
+    "bio": "Bio",
+    "block_export": "Block export",
+    "block_export_button": "Export your blocks to a csv file",
+    "block_import": "Block import",
+    "block_import_error": "Error importing blocks",
+    "blocks_imported": "Blocks imported! Processing them will take a while.",
+    "blocks_tab": "Blocks",
+    "btnRadius": "Buttons",
+    "cBlue": "Blue (Reply, follow)",
+    "cGreen": "Green (Retweet)",
+    "cOrange": "Orange (Favorite)",
+    "cRed": "Red (Cancel)",
+    "change_email": "Change Email",
+    "change_email_error": "There was an issue changing your email.",
+    "changed_email": "Email changed successfully!",
+    "change_password": "Change Password",
+    "change_password_error": "There was an issue changing your password.",
+    "changed_password": "Password changed successfully!",
+    "chatMessageRadius": "Chat message",
+    "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 data and deactivate your account.",
+    "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.",
+    "discoverable": "Allow discovery of this account in search results and other services",
+    "domain_mutes": "Domains",
+    "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
+    "pad_emoji": "Pad emoji with spaces when adding from picker",
+    "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
+    "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_import": "Follow import",
+    "follow_import_error": "Error importing followers",
+    "follows_imported": "Follows imported! Processing them will take a while.",
+    "accent": "Accent",
+    "foreground": "Foreground",
+    "general": "General",
+    "hide_attachments_in_convo": "Hide attachments in conversations",
+    "hide_attachments_in_tl": "Hide attachments in timeline",
+    "hide_muted_posts": "Hide posts of muted users",
+    "max_thumbnails": "Maximum amount of thumbnails per post",
+    "hide_isp": "Hide instance-specific panel",
+    "preload_images": "Preload images",
+    "use_one_click_nsfw": "Open NSFW attachments with just one click",
+    "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
+    "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
+    "hide_filtered_statuses": "Hide filtered statuses",
+    "import_blocks_from_a_csv_file": "Import blocks from a csv file",
+    "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\")",
+    "mutes_tab": "Mutes",
+    "play_videos_in_modal": "Play videos in a popup frame",
+    "use_contain_fit": "Don't crop the attachment in thumbnails",
+    "name": "Name",
+    "name_bio": "Name & Bio",
+    "new_email": "New Email",
+    "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",
+    "notification_visibility_moves": "User Migrates",
+    "notification_visibility_emoji_reactions": "Reactions",
+    "no_rich_text_description": "Strip rich text formatting from all posts",
+    "no_blocks": "No blocks",
+    "no_mutes": "No mutes",
+    "hide_follows_description": "Don't show who I'm following",
+    "hide_followers_description": "Don't show who's following me",
+    "hide_follows_count_description": "Don't show follow count",
+    "hide_followers_count_description": "Don't show follower count",
+    "show_admin_badge": "Show Admin badge in my profile",
+    "show_moderator_badge": "Show Moderator badge in my profile",
+    "nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
+    "oauth_tokens": "OAuth tokens",
+    "token": "Token",
+    "refresh_token": "Refresh Token",
+    "valid_until": "Valid Until",
+    "revoke_token": "Revoke",
+    "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",
+    "autohide_floating_post_button": "Automatically hide New Post button (mobile)",
+    "saving_err": "Error saving settings",
+    "saving_ok": "Settings saved",
+    "search_user_to_block": "Search whom you want to block",
+    "search_user_to_mute": "Search whom you want to mute",
+    "security_tab": "Security",
+    "scope_copy": "Copy scope when replying (DMs are always copied)",
+    "minimal_scopes_mode": "Minimize post scope selection options",
+    "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",
+    "post_status_content_type": "Post status content type",
+    "stop_gifs": "Play-on-hover GIFs",
+    "streaming": "Enable automatic streaming of new posts when scrolled to the top",
+    "user_mutes": "Users",
+    "useStreamingApi": "Receive posts and notifications real-time",
+    "useStreamingApiWarning": "(Not recommended, experimental, known to skip posts)",
+    "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",
+    "type_domains_to_mute": "Type in domains to mute",
+    "upload_a_photo": "Upload a photo",
+    "user_settings": "User Settings",
+    "values": {
+      "false": "no",
+      "true": "yes"
+    },
+    "fun": "Fun",
+    "greentext": "Meme arrows",
+    "notifications": "Notifications",
+    "notification_setting_filters": "Filters",
+    "notification_setting": "Receive notifications from:",
+    "notification_setting_follows": "Users you follow",
+    "notification_setting_non_follows": "Users you do not follow",
+    "notification_setting_followers": "Users who follow you",
+    "notification_setting_non_followers": "Users who do not follow you",
+    "notification_setting_privacy": "Privacy",
+    "notification_setting_privacy_option": "Hide the sender and contents of push notifications",
+    "notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
+    "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
+    "enable_web_push_notifications": "Enable web push notifications",
+    "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",
+        "load_theme": "Load theme",
+        "keep_as_is": "Keep as is",
+        "use_snapshot": "Old version",
+        "use_source": "New version",
+        "help": {
+          "upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
+          "v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsistencies.",
+          "future_version_imported": "File you imported was made in newer version of FE.",
+          "older_version_imported": "File you imported was made in older version of FE.",
+          "snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
+          "snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
+          "fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
+          "fe_downgraded": "PleromaFE's version rolled back.",
+          "migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
+          "migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember.",
+          "snapshot_source_mismatch": "Versions conflict: most likely FE was rolled back and updated again, if you changed theme using older version of FE you most likely want to use old version, otherwise use new version."
+        }
+      },
+      "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",
+        "alert_warning": "Warning",
+        "alert_neutral": "Neutral",
+        "post": "Posts/User bios",
+        "badge": "Badge background",
+        "popover": "Tooltips, menus, popovers",
+        "badge_notification": "Notification",
+        "panel_header": "Panel header",
+        "top_bar": "Top bar",
+        "borders": "Borders",
+        "buttons": "Buttons",
+        "inputs": "Input fields",
+        "faint_text": "Faded text",
+        "underlay": "Underlay",
+        "poll": "Poll graph",
+        "icons": "Icons",
+        "highlight": "Highlighted elements",
+        "pressed": "Pressed",
+        "selectedPost": "Selected post",
+        "selectedMenu": "Selected menu item",
+        "disabled": "Disabled",
+        "toggled": "Toggled",
+        "tabs": "Tabs",
+        "chat": {
+          "incoming_background": "Incoming background",
+          "incoming_text": "Incoming text",
+          "incoming_link": "Incoming link",
+          "incoming_border": "Incoming border",
+          "outgoing_background": "Outgoing background",
+          "outgoing_text": "Outgoing text",
+          "outgoing_link": "Outgoing link",
+          "outgoing_border": "Outgoing border"
+        }
+      },
+      "radii": {
+        "_tab_label": "Roundness"
+      },
+      "shadows": {
+        "_tab_label": "Shadow and lighting",
+        "component": "Component",
+        "override": "Override",
+        "shadow_id": "Shadow #{value}",
+        "blur": "Blur",
+        "spread": "Spread",
+        "inset": "Inset",
+        "hintV3": "For shadows you can also use the {0} notation to use other color slot.",
+        "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"
+      }
+    },
+    "version": {
+      "title": "Version",
+      "backend_version": "Backend Version",
+      "frontend_version": "Frontend Version"
+    }
+  },
+  "time": {
+    "day": "{0} day",
+    "days": "{0} days",
+    "day_short": "{0}d",
+    "days_short": "{0}d",
+    "hour": "{0} hour",
+    "hours": "{0} hours",
+    "hour_short": "{0}h",
+    "hours_short": "{0}h",
+    "in_future": "in {0}",
+    "in_past": "{0} ago",
+    "minute": "{0} minute",
+    "minutes": "{0} minutes",
+    "minute_short": "{0}min",
+    "minutes_short": "{0}min",
+    "month": "{0} month",
+    "months": "{0} months",
+    "month_short": "{0}mo",
+    "months_short": "{0}mo",
+    "now": "just now",
+    "now_short": "now",
+    "second": "{0} second",
+    "seconds": "{0} seconds",
+    "second_short": "{0}s",
+    "seconds_short": "{0}s",
+    "week": "{0} week",
+    "weeks": "{0} weeks",
+    "week_short": "{0}w",
+    "weeks_short": "{0}w",
+    "year": "{0} year",
+    "years": "{0} years",
+    "year_short": "{0}y",
+    "years_short": "{0}y"
+  },
+  "timeline": {
+    "collapse": "Collapse",
+    "conversation": "Conversation",
+    "error_fetching": "Error fetching updates",
+    "load_older": "Load older nyans",
+    "no_retweet_hint": "Nyan is marked as followers-only or direct and cannot be renyaned",
+    "repeated": "renyaned",
+    "show_new": "Show new",
+    "up_to_date": "Up-to-date",
+    "no_more_statuses": "No more statuses",
+    "no_statuses": "No statuses"
+  },
+  "status": {
+    "favorites": "Favorites",
+    "repeats": "Repeats",
+    "delete": "Delete status",
+    "pin": "Pin on profile",
+    "unpin": "Unpin from profile",
+    "pinned": "Pinned",
+    "delete_confirm": "Do you really want to delete this status?",
+    "reply_to": "Reply to",
+    "replies_list": "Replies:",
+    "mute_conversation": "Mute conversation",
+    "unmute_conversation": "Unmute conversation",
+    "status_unavailable": "Status unavailable",
+    "copy_link": "Copy link to status"
+  },
+  "user_card": {
+    "approve": "Approve",
+    "block": "Block",
+    "blocked": "Blocked!",
+    "deny": "Deny",
+    "favorites": "Favorites",
+    "follow": "Follow",
+    "follow_sent": "Request sent!",
+    "follow_progress": "Requesting…",
+    "follow_again": "Send request again?",
+    "follow_unfollow": "Unfollow",
+    "followees": "Following",
+    "followers": "Followers",
+    "following": "Following!",
+    "follows_you": "Follows you!",
+    "hidden": "Hidden",
+    "its_you": "It's you!",
+    "media": "Media",
+    "mention": "Mention",
+    "message": "Message",
+    "mute": "Mute",
+    "muted": "Muted",
+    "per_day": "per day",
+    "remote_follow": "Remote follow",
+    "report": "Report",
+    "statuses": "Statuses",
+    "subscribe": "Subscribe",
+    "unsubscribe": "Unsubscribe",
+    "unblock": "Unblock",
+    "unblock_progress": "Unblocking...",
+    "block_progress": "Blocking...",
+    "unmute": "Unmute",
+    "unmute_progress": "Unmuting...",
+    "mute_progress": "Muting...",
+    "hide_repeats": "Hide repeats",
+    "show_repeats": "Show repeats",
+    "admin_menu": {
+      "moderation": "Moderation",
+      "grant_admin": "Grant Admin",
+      "revoke_admin": "Revoke Admin",
+      "grant_moderator": "Grant Moderator",
+      "revoke_moderator": "Revoke Moderator",
+      "activate_account": "Activate account",
+      "deactivate_account": "Deactivate account",
+      "delete_account": "Delete account",
+      "force_nsfw": "Mark all posts as NSFW",
+      "strip_media": "Remove media from posts",
+      "force_unlisted": "Force posts to be unlisted",
+      "sandbox": "Force posts to be followers-only",
+      "disable_remote_subscription": "Disallow following user from remote instances",
+      "disable_any_subscription": "Disallow following user at all",
+      "quarantine": "Disallow user posts from federating",
+      "delete_user": "Delete user",
+      "delete_user_confirmation": "Are you absolutely sure? This action cannot be undone."
+    }
+  },
+  "user_profile": {
+    "timeline_title": "User Timeline",
+    "profile_does_not_exist": "Sorry, this profile does not exist.",
+    "profile_loading_error": "Sorry, there was an error loading this profile."
+  },
+  "user_reporting": {
+    "title": "Reporting {0}",
+    "add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:",
+    "additional_comments": "Additional comments",
+    "forward_description": "The account is from another server. Send a copy of the report there as well?",
+    "forward_to": "Forward to {0}",
+    "submit": "Submit",
+    "generic_error": "An error occurred while processing your request."
+  },
+  "who_to_follow": {
+    "more": "More",
+    "who_to_follow": "Who to follow"
+  },
+  "tool_tip": {
+    "media_upload": "Upload Media",
+    "repeat": "Renyan",
+    "reply": "Reply",
+    "favorite": "Pat",
+    "add_reaction": "Add Reaction",
+    "user_settings": "User Settings",
+    "accept_follow_request": "Accept snuggle request",    
+    "reject_follow_request": "Reject snuggle request"
+  },
+  "upload":{
+    "error": {
+      "base": "Upload failed.",
+      "file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "Try again later"
+    },
+    "file_size_units": {
+      "B": "B",
+      "KiB": "KiB",
+      "MiB": "MiB",
+      "GiB": "GiB",
+      "TiB": "TiB"
+    }
+  },
+  "search": {
+    "people": "People",
+    "hashtags": "Hashtags",
+    "person_talking": "{count} person talking",
+    "people_talking": "{count} people talking",
+    "no_results": "No results"
+  },
+  "password_reset": {
+    "forgot_password": "Forgot password?",
+    "password_reset": "Password reset",
+    "instruction": "Enter your email address or username. We will send you a link to reset your password.",
+    "placeholder": "Your email or username",
+    "check_email": "Check your email for a link to reset your password.",
+    "return_home": "Return to the home page",
+    "not_found": "We couldn't find that email or username.",
+    "too_many_requests": "You have reached the limit of attempts, try again later.",
+    "password_reset_disabled": "Password reset is disabled. Please contact your instance administrator.",
+    "password_reset_required": "You must reset your password to log in.",
+    "password_reset_required_but_mailer_is_disabled": "You must reset your password, but password reset is disabled. Please contact your instance administrator."
+  },
+  "chats": {
+    "message_user": "Message {nickname}",
+    "write_message": "Write a message",
+    "delete": "Delete",
+    "chats": "Chats",
+    "new": "New Chat",
+    "empty_message_error": "Cannot post empty message",
+    "more": "More",
+    "delete_confirm": "Do you really want to delete this message?"
+  },
+  "file_type": {
+    "audio": "Audio",
+    "video": "Video",
+    "image": "Image",
+    "file": "File"
+  },
+  "display_date": {
+    "today": "Today"
+  }
+}

src/i18n/messages.js

@@ -8,6 +8,7 @@
 // There's only problem that apostrophe character ' gets replaced by \\ so you have to fix it manually, sorry.
 
 const loaders = {
+  en_nyan: () => import('./en_nyan.json'),
   ar: () => import('./ar.json'),
   ca: () => import('./ca.json'),
   cs: () => import('./cs.json'),

src/modules/config.js

@@ -27,6 +27,9 @@ export const defaultState = {
   colors: {},
   theme: undefined,
   customTheme: undefined,
+  showThirdColumn: false,
+  compactNavPanel: false,
+  compactUserPanel: false,
   customThemeSource: undefined,
   hideISP: false,
   hideInstanceWallpaper: false,
@@ -38,6 +41,7 @@ export const defaultState = {
   muteBotStatuses: undefined, // instance default
   collapseMessageWithSubject: true, // instance default
   padEmoji: true,
+  swapReacts: true,
   showNavShortcuts: undefined, // instance default
   showPanelNavShortcuts: undefined, // instance default
   showWiderShortcuts: undefined, // instance default

src/modules/domNodeToComponent.js

@@ -0,0 +1,9 @@
+export default {
+  install: (Vue, options) => {
+    Vue.mixin({
+      mounted () {
+        this.$el.__vueComponent__ = this
+      }
+    })
+  }
+}

src/modules/statuses.js

@@ -717,6 +717,14 @@ const statuses = {
       commit('dismissNotification', { id })
       rootState.api.backendInteractor.dismissNotification({ id })
     },
+    markMultipleNotificationsAsSeen ({ rootState, commit }, { finder }) {
+      const notifications = rootState.statuses.notifications.data.filter(finder)
+
+      notifications.forEach(n => {
+        commit('markSingleNotificationAsSeen', { id: n.id })
+        rootState.api.backendInteractor.markNotificationsAsSeen({ id: n.id, single: true })
+      })
+    },
     updateNotification ({ rootState, commit }, { id, updater }) {
       commit('updateNotification', { id, updater })
     },

src/services/file_type/file_type.service.js

@@ -2,10 +2,6 @@
 // or the entire service could be just mimetype service that only operates
 // on mimetypes and not files. Currently the naming is confusing.
 const fileType = mimetype => {
-  if (mimetype.match(/flash/)) {
-    return 'flash'
-  }
-
   if (mimetype.match(/text\/html/)) {
     return 'html'
   }

src/services/locale/locale.service.js

@@ -3,6 +3,7 @@ import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
 
 const specialLanguageCodes = {
+  'en_nyan': 'en-NYAN',
   'ja_easy': 'ja',
   'zh_Hant': 'zh-HANT',
   'zh': 'zh-Hans'
@@ -14,6 +15,7 @@ const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_
 
 const getLanguageName = (code) => {
   const specialLanguageNames = {
+    'en_nyan': 'English (Nyan)',
     'ja_easy': 'やさしいにほんご',
     'zh': '简体中文',
     'zh_Hant': '繁體中文'

src/services/ruffle_service/ruffle_service.js

@@ -1,40 +0,0 @@
-const createRuffleService = () => {
-  let ruffleInstance = null
-
-  const getRuffle = () => new Promise((resolve, reject) => {
-    if (ruffleInstance) {
-      resolve(ruffleInstance)
-      return
-    }
-    // Ruffle needs these to be set before it's loaded
-    // https://github.com/ruffle-rs/ruffle/issues/3952
-    window.RufflePlayer = {}
-    window.RufflePlayer.config = {
-      polyfills: false,
-      publicPath: '/static/ruffle'
-    }
-
-    // Currently it's seems like a better way of loading ruffle
-    // because it needs the wasm publically accessible, but it needs path to it
-    // and filename of wasm seems to be pseudo-randomly generated (is it a hash?)
-    const script = document.createElement('script')
-    // see webpack config, using CopyPlugin to copy it from node_modules
-    // provided via ruffle-mirror
-    script.src = '/static/ruffle/ruffle.js'
-    script.type = 'text/javascript'
-    script.onerror = (e) => { reject(e) }
-    script.onabort = (e) => { reject(e) }
-    script.oncancel = (e) => { reject(e) }
-    script.onload = () => {
-      ruffleInstance = window.RufflePlayer
-      resolve(ruffleInstance)
-    }
-    document.body.appendChild(script)
-  })
-
-  return { getRuffle }
-}
-
-const RuffleService = createRuffleService()
-
-export default RuffleService

static/themes/breezy-dark.json

@@ -115,7 +115,8 @@
       "cOrange": "#f67400",
       "btnPressed": "--accent",
       "selectedMenu": "--accent",
-      "selectedMenuPopover": "--accent"
+      "selectedMenuPopover": "--accent",
+      "chatMessageIncomingBorder": "#3d4349"
     },
     "radii": {
       "btn": "2",