Make media modal be aware of multi-touch actions

Originally the media viewer would think every touch is a swipe (one-finger touch event), so we would encounter the case where a two-finger scale event would incorrectly change the current media. This is now fixed.
2021-10-29 00:43:35 +00:00 · 2021-10-29 00:43:35 +00:00 · 0f2a8c69a9
commit 0f2a8c69a9
parent 0b5102104d
53 changed files with 2876 additions and 123 deletions
--- a/README.md
+++ b/README.md
@ -4,6 +4,18 @@

 ![screenshot](/uploads/796c5ecf985ed1e2b0943ee0df131ed0/DJVqSJ0.png)

+# 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
+
 # For Translators

 To translate Pleroma-FE, add your language to [src/i18n/messages.js](https://git.pleroma.social/pleroma/pleroma-fe/blob/develop/src/i18n/messages.js). Pleroma-FE will set your language by your browser locale, but you can temporarily force it in the code by changing the locale in main.js.
--- a/package.json
+++ b/package.json
@ -22,6 +22,7 @@
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/vue-fontawesome": "^2.0.0",
+    "@kazvmoe-infra/pinch-zoom-element": "https://lily.kazv.moe/infra/pinch-zoom-element.git",
    "body-scroll-lock": "^2.6.4",
    "chromatism": "^3.0.0",
    "cropperjs": "^1.4.3",
--- a/src/App.js
+++ b/src/App.js
@ -89,7 +89,7 @@ export default {
        'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
      }
    },
-    notifsAlign () {
+    thirdColumnAlign () {
      return {
        'order': this.$store.getters.mergedConfig.sidebarRight ? 0 : 99
      }
--- a/src/App.vue
+++ b/src/App.vue
@ -26,9 +26,9 @@
              <div v-if="!isMobileLayout">
                <nav-panel />
                <instance-specific-panel v-if="showInstanceSpecificPanel" />
-                <features-panel v-if="!currentUser && showFeaturesPanel" />
                <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
                <notifications v-if="currentUser && !thirdColumnEnabled" />
+                <features-panel v-if="!currentUser && !thirdColumnEnabled" />
              </div>
            </div>
          </div>
@ -52,8 +52,8 @@
      </div>
      <div
        v-if="thirdColumnEnabled"
+        :style="thirdColumnAlign"
        class="sidebar-flexer mobile-hidden"
-        :style="notifsAlign"
      >
        <div class="sidebar-bounds">
          <div class="sidebar-scroller">
@ -66,7 +66,6 @@
          </div>
        </div>
      </div>
-
      <media-modal />
    </div>
    <shout-panel
--- a/src/_variables.scss
+++ b/src/_variables.scss
@ -30,3 +30,5 @@ $fallback--attachmentRadius: 10px;
 $fallback--chatMessageRadius: 10px;

 $fallback--buttonShadow: 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;
+
+$status-margin: 0.75em;
--- a/src/components/chat/chat_layout.js
+++ b/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
--- a/src/components/chat_avatar/chat_avatar.js
+++ b/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
--- a/src/components/chat_avatar/chat_avatar.vue
+++ b/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>
--- a/src/components/chat_message_date/chat_message_date.vue
+++ b/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' })
      }
    }
  }
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@ -1,5 +1,19 @@
 import { reduce, filter, findIndex, clone, get } from 'lodash'
 import Status from '../status/status.vue'
+import ThreadTree from '../thread_tree/thread_tree.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAngleDoubleDown,
+  faAngleDoubleLeft,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAngleDoubleDown,
+  faAngleDoubleLeft,
+  faChevronLeft
+)

 const sortById = (a, b) => {
  const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@ -35,7 +49,10 @@ const conversation = {
  data () {
    return {
      highlight: null,
-      expanded: false
+      expanded: false,
+      threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
+      statusContentPropertiesObject: {},
+      inlineDivePosition: null
    }
  },
  props: [
@ -53,12 +70,47 @@ const conversation = {
    }
  },
  computed: {
-    hideStatus () {
-      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
-        return this.virtualHidden && this.$refs.statusComponent[0].suspendable
-      } else {
-        return this.virtualHidden
+    maxDepthToShowByDefault () {
+      // maxDepthInThread = max number of depths that is *visible*
+      // since our depth starts with 0 and "showing" means "showing children"
+      // there is a -2 here
+      const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
+      return maxDepth >= 1 ? maxDepth : 1
+    },
+    displayStyle () {
+      return this.$store.getters.mergedConfig.conversationDisplay
+    },
+    isTreeView () {
+      return this.displayStyle === 'tree' || this.displayStyle === 'simple_tree'
+    },
+    treeViewIsSimple () {
+      return this.displayStyle === 'simple_tree'
+    },
+    isLinearView () {
+      return this.displayStyle === 'linear'
+    },
+    otherRepliesButtonPosition () {
+      return this.$store.getters.mergedConfig.conversationOtherRepliesButton
+    },
+    showOtherRepliesButtonBelowStatus () {
+      return this.otherRepliesButtonPosition === 'below'
+    },
+    showOtherRepliesButtonInsideStatus () {
+      return this.otherRepliesButtonPosition === 'inside'
+    },
+    suspendable () {
+      if (this.isTreeView) {
+        return Object.entries(this.statusContentProperties)
+          .every(([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
      }
+      if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
+        return this.$refs.statusComponent.every(s => s.suspendable)
+      } else {
+        return true
+      }
+    },
+    hideStatus () {
+      return this.virtualHidden && this.suspendable
    },
    status () {
      return this.$store.state.statuses.allStatusesObject[this.statusId]
@ -90,6 +142,123 @@ const conversation = {

      return sortAndFilterConversation(conversation, this.status)
    },
+    conversationDive () {
+    },
+    statusMap () {
+      return this.conversation.reduce((res, s) => {
+        res[s.id] = s
+        return res
+      }, {})
+    },
+    threadTree () {
+      const reverseLookupTable = this.conversation.reduce((table, status, index) => {
+        table[status.id] = index
+        return table
+      }, {})
+
+      const threads = this.conversation.reduce((a, cur) => {
+        const id = cur.id
+        a.forest[id] = this.getReplies(id)
+          .map(s => s.id)
+
+        return a
+      }, {
+        forest: {}
+      })
+
+      const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => {
+        if (processed[id]) {
+          return []
+        }
+
+        processed[id] = true
+        return [{
+          status: this.conversation[reverseLookupTable[id]],
+          id,
+          depth
+        }, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
+      }).reduce((a, b) => a.concat(b), [])
+
+      const linearized = walk(threads.forest, this.topLevel.map(k => k.id))
+
+      return linearized
+    },
+    replyIds () {
+      return this.conversation.map(k => k.id)
+        .reduce((res, id) => {
+          res[id] = (this.replies[id] || []).map(k => k.id)
+          return res
+        }, {})
+    },
+    totalReplyCount () {
+      const sizes = {}
+      const subTreeSizeFor = (id) => {
+        if (sizes[id]) {
+          return sizes[id]
+        }
+        sizes[id] = 1 + this.replyIds[id].map(cid => subTreeSizeFor(cid)).reduce((a, b) => a + b, 0)
+        return sizes[id]
+      }
+      this.conversation.map(k => k.id).map(subTreeSizeFor)
+      return Object.keys(sizes).reduce((res, id) => {
+        res[id] = sizes[id] - 1 // exclude itself
+        return res
+      }, {})
+    },
+    totalReplyDepth () {
+      const depths = {}
+      const subTreeDepthFor = (id) => {
+        if (depths[id]) {
+          return depths[id]
+        }
+        depths[id] = 1 + this.replyIds[id].map(cid => subTreeDepthFor(cid)).reduce((a, b) => a > b ? a : b, 0)
+        return depths[id]
+      }
+      this.conversation.map(k => k.id).map(subTreeDepthFor)
+      return Object.keys(depths).reduce((res, id) => {
+        res[id] = depths[id] - 1 // exclude itself
+        return res
+      }, {})
+    },
+    depths () {
+      return this.threadTree.reduce((a, k) => {
+        a[k.id] = k.depth
+        return a
+      }, {})
+    },
+    topLevel () {
+      const topLevel = this.conversation.reduce((tl, cur) =>
+        tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
+      return topLevel
+    },
+    otherTopLevelCount () {
+      return this.topLevel.length - 1
+    },
+    showingTopLevel () {
+      if (this.canDive && this.diveRoot) {
+        return [this.statusMap[this.diveRoot]]
+      }
+      return this.topLevel
+    },
+    diveRoot () {
+      const statusId = this.inlineDivePosition || this.statusId
+      const isTopLevel = !this.parentOf(statusId)
+      return isTopLevel ? null : statusId
+    },
+    diveDepth () {
+      return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
+    },
+    diveMode () {
+      return this.canDive && !!this.diveRoot
+    },
+    shouldShowAllConversationButton () {
+      // The "show all conversation" button tells the user that there exist
+      // other toplevel statuses, so do not show it if there is only a single root
+      return this.isTreeView && this.isExpanded && this.diveMode && this.topLevel.length > 1
+    },
+    shouldShowAncestors () {
+      return this.isTreeView && this.isExpanded && this.ancestorsOf(this.diveRoot).length
+    },
    replies () {
      let i = 1
      // eslint-disable-next-line camelcase
@ -109,15 +278,71 @@ const conversation = {
      }, {})
    },
    isExpanded () {
-      return this.expanded || this.isPage
+      return !!(this.expanded || this.isPage)
    },
    hiddenStyle () {
      const height = (this.status && this.status.virtualHeight) || '120px'
      return this.virtualHidden ? { height } : {}
+    },
+    threadDisplayStatus () {
+      return this.conversation.reduce((a, k) => {
+        const id = k.id
+        const depth = this.depths[id]
+        const status = (() => {
+          if (this.threadDisplayStatusObject[id]) {
+            return this.threadDisplayStatusObject[id]
+          }
+          if ((depth - this.diveDepth) <= this.maxDepthToShowByDefault) {
+            return 'showing'
+          } else {
+            return 'hidden'
+          }
+        })()
+
+        a[id] = status
+        return a
+      }, {})
+    },
+    statusContentProperties () {
+      return this.conversation.reduce((a, k) => {
+        const id = k.id
+        const props = (() => {
+          const def = {
+            showingTall: false,
+            expandingSubject: false,
+            showingLongSubject: false,
+            isReplying: false,
+            mediaPlaying: []
+          }
+
+          if (this.statusContentPropertiesObject[id]) {
+            return {
+              ...def,
+              ...this.statusContentPropertiesObject[id]
+            }
+          }
+          return def
+        })()
+
+        a[id] = props
+        return a
+      }, {})
+    },
+    canDive () {
+      return this.isTreeView && this.isExpanded
+    },
+    focused () {
+      return (id) => {
+        return (this.isExpanded) && id === this.highlight
+      }
+    },
+    maybeHighlight () {
+      return this.isExpanded ? this.highlight : null
    }
  },
  components: {
-    Status
+    Status,
+    ThreadTree
  },
  watch: {
    statusId (newVal, oldVal) {
@ -132,6 +357,8 @@ const conversation = {
    expanded (value) {
      if (value) {
        this.fetchConversation()
+      } else {
+        this.resetDisplayState()
      }
    },
    virtualHidden (value) {
@ -161,8 +388,8 @@ const conversation = {
    getReplies (id) {
      return this.replies[id] || []
    },
-    focused (id) {
-      return (this.isExpanded) && id === this.statusId
+    getHighlight () {
+      return this.isExpanded ? this.highlight : null
    },
    setHighlight (id) {
      if (!id) return
@ -170,15 +397,139 @@ const conversation = {
      this.$store.dispatch('fetchFavsAndRepeats', id)
      this.$store.dispatch('fetchEmojiReactionsBy', id)
    },
-    getHighlight () {
-      return this.isExpanded ? this.highlight : null
-    },
    toggleExpanded () {
      this.expanded = !this.expanded
    },
    getConversationId (statusId) {
      const status = this.$store.state.statuses.allStatusesObject[statusId]
      return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
+    },
+    setThreadDisplay (id, nextStatus) {
+      this.threadDisplayStatusObject = {
+        ...this.threadDisplayStatusObject,
+        [id]: nextStatus
+      }
+    },
+    toggleThreadDisplay (id) {
+      const curStatus = this.threadDisplayStatus[id]
+      const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
+      this.setThreadDisplay(id, nextStatus)
+    },
+    setThreadDisplayRecursively (id, nextStatus) {
+      this.setThreadDisplay(id, nextStatus)
+      this.getReplies(id).map(k => k.id).map(id => this.setThreadDisplayRecursively(id, nextStatus))
+    },
+    showThreadRecursively (id) {
+      this.setThreadDisplayRecursively(id, 'showing')
+    },
+    setStatusContentProperty (id, name, value) {
+      this.statusContentPropertiesObject = {
+        ...this.statusContentPropertiesObject,
+        [id]: {
+          ...this.statusContentPropertiesObject[id],
+          [name]: value
+        }
+      }
+    },
+    toggleStatusContentProperty (id, name) {
+      this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
+    },
+    leastVisibleAncestor (id) {
+      let cur = id
+      let parent = this.parentOf(cur)
+      while (cur) {
+        // if the parent is showing it means cur is visible
+        if (this.threadDisplayStatus[parent] === 'showing') {
+          return cur
+        }
+        parent = this.parentOf(parent)
+        cur = this.parentOf(cur)
+      }
+      // nothing found, fall back to toplevel
+      return this.topLevel[0] ? this.topLevel[0].id : undefined
+    },
+    diveIntoStatus (id, preventScroll) {
+      this.tryScrollTo(id)
+    },
+    diveToTopLevel () {
+      this.tryScrollTo(this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id)
+    },
+    // only used when we are not on a page
+    undive () {
+      this.inlineDivePosition = null
+      this.setHighlight(this.statusId)
+    },
+    tryScrollTo (id) {
+      if (!id) {
+        return
+      }
+      if (this.isPage) {
+        // set statusId
+        this.$router.push({ name: 'conversation', params: { id } })
+      } else {
+        this.inlineDivePosition = id
+      }
+      // Because the conversation can be unmounted when out of sight
+      // and mounted again when it comes into sight,
+      // the `mounted` or `created` function in `status` should not
+      // contain scrolling calls, as we do not want the page to jump
+      // when we scroll with an expanded conversation.
+      //
+      // Now the method is to rely solely on the `highlight` watcher
+      // in `status` components.
+      // In linear views, all statuses are rendered at all times, but
+      // in tree views, it is possible that a change in active status
+      // removes and adds status components (e.g. an originally child
+      // status becomes an ancestor status, and thus they will be
+      // different).
+      // Here, let the components be rendered first, in order to trigger
+      // the `highlight` watcher.
+      this.$nextTick(() => {
+        this.setHighlight(id)
+      })
+    },
+    goToCurrent () {
+      this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
+    },
+    statusById (id) {
+      return this.statusMap[id]
+    },
+    parentOf (id) {
+      const status = this.statusById(id)
+      if (!status) {
+        return undefined
+      }
+      const { in_reply_to_status_id: parentId } = status
+      if (!this.statusMap[parentId]) {
+        return undefined
+      }
+      return parentId
+    },
+    parentOrSelf (id) {
+      return this.parentOf(id) || id
+    },
+    // Ancestors of some status, from top to bottom
+    ancestorsOf (id) {
+      const ancestors = []
+      let cur = this.parentOf(id)
+      while (cur) {
+        ancestors.unshift(this.statusMap[cur])
+        cur = this.parentOf(cur)
+      }
+      return ancestors
+    },
+    topLevelAncestorOrSelfId (id) {
+      let cur = id
+      let parent = this.parentOf(id)
+      while (parent) {
+        cur = this.parentOf(cur)
+        parent = this.parentOf(parent)
+      }
+      return cur
+    },
+    resetDisplayState () {
+      this.undive()
+      this.threadDisplayStatusObject = {}
    }
  }
 }
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@ -18,24 +18,168 @@
        {{ $t('timeline.collapse') }}
      </button>
    </div>
-    <status
-      v-for="status in conversation"
-      :key="status.id"
-      ref="statusComponent"
-      :inline-expanded="collapsable && isExpanded"
-      :statusoid="status"
-      :expandable="!isExpanded"
-      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-      :focused="focused(status.id)"
-      :in-conversation="isExpanded"
-      :highlight="getHighlight()"
-      :replies="getReplies(status.id)"
-      :in-profile="inProfile"
-      :profile-user-id="profileUserId"
-      class="conversation-status status-fadein panel-body"
-      @goto="setHighlight"
-      @toggleExpanded="toggleExpanded"
-    />
+    <div class="conversation-body panel-body">
+      <div
+        v-if="shouldShowAllConversationButton"
+        class="conversation-dive-to-top-level-box"
+      >
+        <i18n
+          path="status.show_all_conversation_with_icon"
+          tag="button"
+          class="button-unstyled -link"
+          @click.prevent="diveToTopLevel"
+        >
+          <FAIcon
+            place="icon"
+            icon="angle-double-left"
+          />
+          <span place="text">
+            {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
+          </span>
+        </i18n>
+      </div>
+      <div
+        v-if="isTreeView"
+        class="thread-body"
+      >
+        <div
+          v-if="shouldShowAncestors"
+          class="thread-ancestors"
+        >
+          <div
+            v-for="status in ancestorsOf(diveRoot)"
+            :key="status.id"
+            class="thread-ancestor"
+            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1}"
+          >
+            <status
+              ref="statusComponent"
+              :inline-expanded="collapsable && isExpanded"
+              :statusoid="status"
+              :expandable="!isExpanded"
+              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+              :focused="focused(status.id)"
+              :in-conversation="isExpanded"
+              :highlight="getHighlight()"
+              :replies="getReplies(status.id)"
+              :in-profile="inProfile"
+              :profile-user-id="profileUserId"
+              class="conversation-status status-fadein panel-body"
+
+              :simple-tree="treeViewIsSimple"
+              :toggle-thread-display="toggleThreadDisplay"
+              :thread-display-status="threadDisplayStatus"
+              :show-thread-recursively="showThreadRecursively"
+              :total-reply-count="totalReplyCount"
+              :total-reply-depth="totalReplyDepth"
+              :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
+              :dive="() => diveIntoStatus(status.id)"
+
+              :controlled-showing-tall="statusContentProperties[status.id].showingTall"
+              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
+              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
+              :controlled-replying="statusContentProperties[status.id].replying"
+              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
+              :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
+              :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
+              :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
+              :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
+              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
+
+              @goto="setHighlight"
+              @toggleExpanded="toggleExpanded"
+            />
+            <div
+              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
+              class="thread-ancestor-dive-box"
+            >
+              <div
+                class="thread-ancestor-dive-box-inner"
+              >
+                <i18n
+                  tag="button"
+                  path="status.ancestor_follow_with_icon"
+                  class="button-unstyled -link thread-tree-show-replies-button"
+                  @click.prevent="diveIntoStatus(status.id)"
+                >
+                  <FAIcon
+                    place="icon"
+                    icon="angle-double-right"
+                  />
+                  <span place="text">
+                    {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
+                  </span>
+                </i18n>
+              </div>
+            </div>
+          </div>
+        </div>
+        <thread-tree
+          v-for="status in showingTopLevel"
+          :key="status.id"
+          ref="statusComponent"
+          :depth="0"
+
+          :status="status"
+          :in-profile="inProfile"
+          :conversation="conversation"
+          :collapsable="collapsable"
+          :is-expanded="isExpanded"
+          :pinned-status-ids-object="pinnedStatusIdsObject"
+          :profile-user-id="profileUserId"
+
+          :focused="focused"
+          :get-replies="getReplies"
+          :highlight="maybeHighlight"
+          :set-highlight="setHighlight"
+          :toggle-expanded="toggleExpanded"
+
+          :simple="treeViewIsSimple"
+          :toggle-thread-display="toggleThreadDisplay"
+          :thread-display-status="threadDisplayStatus"
+          :show-thread-recursively="showThreadRecursively"
+          :total-reply-count="totalReplyCount"
+          :total-reply-depth="totalReplyDepth"
+          :status-content-properties="statusContentProperties"
+          :set-status-content-property="setStatusContentProperty"
+          :toggle-status-content-property="toggleStatusContentProperty"
+          :dive="canDive ? diveIntoStatus : undefined"
+        />
+      </div>
+      <div
+        v-if="isLinearView"
+        class="thread-body"
+      >
+        <status
+          v-for="status in conversation"
+          :key="status.id"
+          ref="statusComponent"
+          :inline-expanded="collapsable && isExpanded"
+          :statusoid="status"
+          :expandable="!isExpanded"
+          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+          :focused="focused(status.id)"
+          :in-conversation="isExpanded"
+          :highlight="getHighlight()"
+          :replies="getReplies(status.id)"
+          :in-profile="inProfile"
+          :profile-user-id="profileUserId"
+          class="conversation-status status-fadein panel-body"
+
+          :toggle-thread-display="toggleThreadDisplay"
+          :thread-display-status="threadDisplayStatus"
+          :show-thread-recursively="showThreadRecursively"
+          :total-reply-count="totalReplyCount"
+          :total-reply-depth="totalReplyDepth"
+          :status-content-properties="statusContentProperties"
+          :set-status-content-property="setStatusContentProperty"
+          :toggle-status-content-property="toggleStatusContentProperty"
+
+          @goto="setHighlight"
+          @toggleExpanded="toggleExpanded"
+        />
+      </div>
+    </div>
  </div>
  <div
    v-else
@ -49,6 +193,46 @@
@import '../../_variables.scss';

 .Conversation {
+  .conversation-dive-to-top-level-box {
+    padding: $status-margin;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: var(--border, $fallback--border);
+    border-radius: 0;
+    /* Make the button stretch along the whole row */
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .thread-ancestors {
+    margin-left: $status-margin;
+    border-left: 2px solid var(--border, $fallback--border);
+  }
+
+  .thread-ancestor .StatusContent {
+    --link: var(--faintLink);
+    --text: var(--faint);
+    color: var(--text);
+  }
+  .thread-ancestor-dive-box {
+    padding-left: $status-margin;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: var(--border, $fallback--border);
+    border-radius: 0;
+    /* Make the button stretch along the whole row */
+    &, &-inner {
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+    }
+  }
+  .thread-ancestor-dive-box-inner {
+    padding: $status-margin;
+    //border-left: 2px solid var(--border, $fallback--border);
+  }
+
  .conversation-status {
    border-bottom-width: 1px;
    border-bottom-style: solid;
@ -56,12 +240,33 @@
    border-radius: 0;
  }

-  &.-expanded {
-    .conversation-status:last-child {
-      border-bottom: none;
-      border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-      border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    }
+  .thread-ancestor-has-other-replies .conversation-status,
+  .thread-ancestor:last-child .conversation-status,
+  .thread-ancestor:last-child .thread-ancestor-dive-box,
+  &.-expanded .thread-tree .conversation-status {
+    border-bottom: none;
  }
+
+  .thread-ancestors + .thread-tree > .conversation-status {
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: var(--border, $fallback--border);
+  }
+
+  /* expanded conversation in timeline */
+  &.status-fadein.-expanded .thread-body {
+    border-left-width: 4px;
+    border-left-style: solid;
+    border-left-color: $fallback--cRed;
+    border-left-color: var(--cRed, $fallback--cRed);
+    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-bottom: 1px solid var(--border, $fallback--border);
+  }
+  /* &.-expanded { */
+  /*   .conversation-status:last-child { */
+  /*     border-bottom: none; */
+  /*   } */
+  /* } */
 }
 </style>
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@ -248,8 +248,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,
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@ -45,13 +45,14 @@ export default {
  methods: {
    getLanguageName (code) {
      const specialLanguageNames = {
+        'en_nyan': 'English (Nyan)',
        'ja_easy': 'やさしいにほんご',
        'zh': '简体中文',
        'zh_Hant': '繁體中文'
      }
      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
      const browserLocale = localeService.internalToBrowserLocale(code)
-      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+      return languageName.charAt(0).toLocaleUpperCase(browserLocale.split('_')[0]) + languageName.slice(1)
    }
  }
 }
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@ -1,8 +1,10 @@
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
-import fileTypeService from '../../services/file_type/file_type.service.js'
+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 fileTypeService from '../../services/file_type/file_type.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faChevronLeft,
@ -18,6 +20,8 @@ const MediaModal = {
  components: {
    StillImage,
    VideoAttachment,
+    PinchZoom,
+    SwipeClick,
    Modal
  },
  computed: {
@ -40,29 +44,25 @@ const MediaModal = {
      return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
    }
  },
-  created () {
-    this.mediaSwipeGestureRight = GestureService.swipeGesture(
-      GestureService.DIRECTION_RIGHT,
-      this.goPrev,
-      50
-    )
-    this.mediaSwipeGestureLeft = GestureService.swipeGesture(
-      GestureService.DIRECTION_LEFT,
-      this.goNext,
-      50
-    )
+  data () {
+    return {
+      swipeDirection: GestureService.DIRECTION_LEFT,
+      swipeThreshold: () => {
+        const considerableMoveRatio = 1 / 4
+        return window.innerWidth * considerableMoveRatio
+      },
+      pinchZoomMinScale: 1,
+      pinchZoomScaleResetLimit: 1.2
+    }
  },
  methods: {
-    mediaTouchStart (e) {
-      GestureService.beginSwipe(e, this.mediaSwipeGestureRight)
-      GestureService.beginSwipe(e, this.mediaSwipeGestureLeft)
-    },
-    mediaTouchMove (e) {
-      GestureService.updateSwipe(e, this.mediaSwipeGestureRight)
-      GestureService.updateSwipe(e, this.mediaSwipeGestureLeft)
-    },
    hide () {
-      this.$store.dispatch('closeMediaViewer')
+      // HACK: Closing immediately via a touch will cause the click
+      // to be processed on the content below the overlay
+      const transitionTime = 100 // ms
+      setTimeout(() => {
+        this.$store.dispatch('closeMediaViewer')
+      }, transitionTime)
    },
    goPrev () {
      if (this.canNavigate) {
@ -76,6 +76,18 @@ const MediaModal = {
        this.$store.dispatch('setCurrent', this.media[nextIndex])
      }
    },
+    handleSwipePreview (offsets) {
+      this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
+    },
+    handleSwipeEnd (sign) {
+      console.log('handleSwipeEnd:', sign)
+      this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
+      if (sign > 0) {
+        this.goNext()
+      } else if (sign < 0) {
+        this.goPrev()
+      }
+    },
    handleKeyupEvent (e) {
      if (this.showing && e.keyCode === 27) { // escape
        this.hide()
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@ -4,16 +4,33 @@
    class="media-modal-view"
    @backdropClicked="hide"
  >
-    <img
-      v-if="type === 'image'"
-      class="modal-image"
-      :src="currentMedia.url"
-      :alt="currentMedia.description"
-      :title="currentMedia.description"
-      @touchstart.stop="mediaTouchStart"
-      @touchmove.stop="mediaTouchMove"
-      @click="hide"
+    <SwipeClick
+      class="modal-image-container"
+      :direction="swipeDirection"
+      :threshold="swipeThreshold"
+      @preview-requested="handleSwipePreview"
+      @swipe-finished="handleSwipeEnd"
+      @swipeless-clicked="hide"
    >
+      <PinchZoom
+        ref="pinchZoom"
+        class="modal-image-container-inner"
+        selector=".modal-image"
+        reach-min-scale-strategy="reset"
+        stop-propagate-handled="stop-propgate-handled"
+        :allow-pan-min-scale="pinchZoomMinScale"
+        :min-scale="pinchZoomMinScale"
+        :reset-to-min-scale-limit="pinchZoomScaleResetLimit"
+      >
+        <img
+          v-if="type === 'image'"
+          class="modal-image"
+          :src="currentMedia.url"
+          :alt="currentMedia.description"
+          :title="currentMedia.description"
+        >
+      </PinchZoom>
+    </SwipeClick>
    <VideoAttachment
      v-if="type === 'video'"
      class="modal-image"
@ -71,6 +88,7 @@
      opacity: 1;
    }
  }
+  overflow: hidden;
 }

@keyframes media-fadein {
@ -82,9 +100,34 @@
  }
 }

-.modal-image {
+.modal-image-container {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  flex-direction: column;
  max-width: 90%;
-  max-height: 90%;
+  max-height: 95%;
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  justify-content: center;
+
+  &-inner {
+    width: 100%;
+    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.modal-image {
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 0;
+  min-height: 0;
  box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
  image-orientation: from-image; // NOTE: only FF supports this
  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@ -32,6 +32,25 @@
@import '../../_variables.scss';

 .media-upload {
-  cursor: pointer;
+  &.disabled {
+    .new-icon {
+      cursor: not-allowed;
+    }
+
+    &:hover {
+      i, label {
+        color: $fallback--faint;
+        color: var(--faint, $fallback--faint);
+      }
+    }
+  }
+
+  .label {
+    display: inline-block;
+  }
+
+  .new-icon {
+    cursor: pointer;
+  }
 }
 </style>
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@ -48,6 +48,9 @@ const NavPanel = {
    }
  },
  computed: {
+    compactNavPanel () {
+      return this.$store.getters.mergedConfig.compactNavPanel || false
+    },
    ...mapState({
      currentUser: state => state.users.currentUser,
      followRequestCount: state => state.api.followRequests.length,
--- a/src/components/nav_panel/nav_panel.vue
+++ b/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">
@ -199,5 +202,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>
--- a/src/components/notification/notification.js
+++ b/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 { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@ -108,6 +108,9 @@
                </i18n>
              </small>
            </span>
+            <span v-if="notification.type === 'pleroma:chat_mention'">
+              <i class="fa icon-chat lit" />
+            </span>
          </div>
          <div
            v-if="isStatusNotification"
--- a/src/components/pinch_zoom/pinch_zoom.js
+++ b/src/components/pinch_zoom/pinch_zoom.js
@ -0,0 +1,13 @@
+import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
+
+export default {
+  methods: {
+    setTransform ({ scale, x, y }) {
+      this.$el.setTransform({ scale, x, y })
+    }
+  },
+  created () {
+    // Make lint happy
+    (() => PinchZoom)()
+  }
+}
--- a/src/components/pinch_zoom/pinch_zoom.vue
+++ b/src/components/pinch_zoom/pinch_zoom.vue
@ -0,0 +1,11 @@
+<template>
+  <pinch-zoom
+    class="pinch-zoom-parent"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot />
+  </pinch-zoom>
+</template>
+
+<script src="./pinch_zoom.js"></script>
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -380,10 +380,12 @@ const PostStatusForm = {
      }
    },
    addMediaFile (fileInfo) {
+      this.$emit('resize')
      this.newStatus.files.push(fileInfo)
      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')
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -623,4 +623,11 @@ img.media-upload, .media-upload-container > video {
  max-height: 200px;
  max-width: 100%;
 }
+
+// todo: unify with attachment.vue (otherwise images the uploaded images are not minified unless a status with an attachment was displayed before)
+img.media-upload {
+  line-height: 0;
+  max-height: 200px;
+  max-width: 100%;
+}
 </style>
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -20,6 +20,16 @@ const GeneralTab = {
        value: mode,
        label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
      })),
+      conversationDisplayOptions: ['tree', 'simple_tree', 'linear'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_display_${mode}`)
+      })),
+      conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_other_replies_button_${mode}`)
+      })),
      loopSilentAvailable:
      // Firefox
      Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -11,6 +11,11 @@
            {{ $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') }}
@ -26,6 +31,16 @@
            {{ $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') }}
@ -83,6 +98,42 @@
            {{ $t('settings.virtual_scrolling') }}
          </BooleanSetting>
        </li>
+        <li>
+          <ChoiceSetting
+            id="conversationDisplay"
+            path="conversationDisplay"
+            :options="conversationDisplayOptions"
+          >
+            {{ $t('settings.conversation_display') }}
+          </ChoiceSetting>
+        </li>
+        <ul
+          v-if="conversationDisplay !== 'linear'"
+          class="setting-list suboptions"
+        >
+          <li>
+            <label for="maxDepthInThread">
+              {{ $t('settings.max_depth_in_thread') }}
+            </label>
+            <input
+              id="maxDepthInThread"
+              path.number="maxDepthInThread"
+              class="number-input"
+              type="number"
+              min="3"
+              step="1"
+            >
+          </li>
+          <li>
+            <ChoiceSetting
+              id="conversationOtherRepliesButton"
+              path="conversationOtherRepliesButton"
+              :options="conversationOtherRepliesButtonOptions"
+            >
+              {{ $t('settings.conversation_other_replies_button') }}
+            </ChoiceSetting>
+          </li>
+        </ul>
      </ul>
    </div>

@ -142,6 +193,11 @@
            {{ $t('settings.pad_emoji') }}
          </BooleanSetting>
        </li>
+        <li>
+          <BooleanSetting path="swapReacts">
+            {{ $t('settings.swap_reacts') }}
+          </BooleanSetting>
+        </li>
      </ul>
    </div>

--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
@ -38,7 +38,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]))
        }
      })
    }
--- a/src/components/settings_modal/tabs/version_tab.js
+++ b/src/components/settings_modal/tabs/version_tab.js
@ -1,7 +1,7 @@
 import { extractCommit } from 'src/services/version/version.service'

-const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
-const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
+const pleromaFeCommitUrl = 'https://git.freecumextremist.com/NotSam/pleroma-fe/commit/'
+const pleromaBeCommitUrl = 'https://git.freecumextremist.com/NotSam/pleroma/commit/'

 const VersionTab = {
  data () {
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@ -35,7 +35,10 @@ import {
  faStar,
  faEyeSlash,
  faEye,
-  faThumbtack
+  faThumbtack,
+  faChevronUp,
+  faChevronDown,
+  faAngleDoubleRight
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
@ -52,9 +55,47 @@ library.add(
  faEllipsisH,
  faEyeSlash,
  faEye,
-  faThumbtack
+  faThumbtack,
+  faChevronUp,
+  faChevronDown,
+  faAngleDoubleRight
 )

+const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
+
+const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
+  const camelized = camelCase(name)
+  const toggle = `controlledToggle${camelized}`
+  const controlledName = `controlled${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  res[name] = function () {
+    return this[toggle] ? this[controlledName] : this[uncontrolledName]
+  }
+  return res
+}, {})
+
+const controlledOrUncontrolledToggle = (obj, name) => {
+  const camelized = camelCase(name)
+  const toggle = `controlledToggle${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  if (obj[toggle]) {
+    obj[toggle]()
+  } else {
+    obj[uncontrolledName] = !obj[uncontrolledName]
+  }
+}
+
+const controlledOrUncontrolledSet = (obj, name, val) => {
+  const camelized = camelCase(name)
+  const set = `controlledSet${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  if (obj[set]) {
+    obj[set](val)
+  } else {
+    obj[uncontrolledName] = val
+  }
+}
+
 const Status = {
  name: 'Status',
  components: {
@ -89,20 +130,41 @@ const Status = {
    'inlineExpanded',
    'showPinned',
    'inProfile',
-    'profileUserId'
+    'profileUserId',
+
+    'simpleTree',
+    'controlledThreadDisplayStatus',
+    'controlledToggleThreadDisplay',
+    'showOtherRepliesAsButton',
+
+    'controlledShowingTall',
+    'controlledToggleShowingTall',
+    'controlledExpandingSubject',
+    'controlledToggleExpandingSubject',
+    'controlledShowingLongSubject',
+    'controlledToggleShowingLongSubject',
+    'controlledReplying',
+    'controlledToggleReplying',
+    'controlledMediaPlaying',
+    'controlledSetMediaPlaying',
+    'dive'
  ],
  data () {
    return {
-      replying: false,
+      uncontrolledReplying: false,
      unmuted: false,
      userExpanded: false,
-      mediaPlaying: [],
+      uncontrolledMediaPlaying: [],
      suspendable: true,
      error: null,
      headTailLinks: null
    }
  },
  computed: {
+    swapReacts () {
+      return this.mergedConfig.swapReacts
+    },
+    ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']),
    muteWords () {
      return this.mergedConfig.muteWords
    },
@ -286,6 +348,12 @@ const Status = {
    },
    isSuspendable () {
      return !this.replying && this.mediaPlaying.length === 0
+    },
+    inThreadForest () {
+      return !!this.controlledThreadDisplayStatus
+    },
+    threadShowing () {
+      return this.controlledThreadDisplayStatus === 'showing'
    }
  },
  methods: {
@ -308,7 +376,7 @@ const Status = {
      this.error = undefined
    },
    toggleReplying () {
-      this.replying = !this.replying
+      controlledOrUncontrolledToggle(this, 'replying')
    },
    gotoOriginal (id) {
      if (this.inConversation) {
@ -328,17 +396,19 @@ const Status = {
      return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
    },
    addMediaPlaying (id) {
-      this.mediaPlaying.push(id)
+      controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.concat(id))
    },
    removeMediaPlaying (id) {
-      this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id)
+      controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.filter(mediaId => mediaId !== id))
    },
    setHeadTailLinks (headTailLinks) {
      this.headTailLinks = headTailLinks
-    }
-  },
-  watch: {
-    'highlight': function (id) {
+    },
+    toggleThreadDisplay () {
+      this.controlledToggleThreadDisplay()
+    },
+    scrollIfHighlighted (highlightId) {
+      const id = highlightId
      if (this.status.id === id) {
        let rect = this.$el.getBoundingClientRect()
        if (rect.top < 100) {
@ -352,6 +422,11 @@ const Status = {
          window.scrollBy(0, rect.bottom - window.innerHeight + 50)
        }
      }
+    }
+  },
+  watch: {
+    'highlight': function (id) {
+      this.scrollIfHighlighted(id)
    },
    'status.repeat_num': function (num) {
      // refetch repeats when repeat_num is changed in any way
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@ -1,7 +1,5 @@
@import '../../_variables.scss';

-$status-margin: 0.75em;
-
 .Status {
  min-width: 0;
  white-space: normal;
@ -26,13 +24,6 @@ $status-margin: 0.75em;
    --icon: var(--selectedPostIcon, $fallback--icon);
  }

-  &.-conversation {
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-left-color: $fallback--cRed;
-    border-left-color: var(--cRed, $fallback--cRed);
-  }
-
  .gravestone {
    padding: $status-margin;
    color: $fallback--faint;
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@ -219,6 +219,31 @@
                    class="fa-scale-110"
                  />
                </button>
+                <button
+                  v-if="inThreadForest && replies && replies.length && !simpleTree"
+                  class="button-unstyled"
+                  :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
+                  :aria-expanded="threadShowing ? 'true' : 'false'"
+                  @click.prevent="toggleThreadDisplay"
+                >
+                  <FAIcon
+                    fixed-width
+                    class="fa-scale-110"
+                    :icon="threadShowing ? 'chevron-up' : 'chevron-down'"
+                  />
+                </button>
+                <button
+                  v-if="dive && !simpleTree"
+                  class="button-unstyled"
+                  :title="$t('status.show_only_conversation_under_this')"
+                  @click.prevent="dive"
+                >
+                  <FAIcon
+                    fixed-width
+                    class="fa-scale-110"
+                    :icon="'angle-double-right'"
+                  />
+                </button>
              </span>
            </div>
            <div
@ -306,6 +331,12 @@
            :no-heading="noHeading"
            :highlight="highlight"
            :focused="isFocused"
+            :controlled-showing-tall="controlledShowingTall"
+            :controlled-expanding-subject="controlledExpandingSubject"
+            :controlled-showing-long-subject="controlledShowingLongSubject"
+            :controlled-toggle-showing-tall="controlledToggleShowingTall"
+            :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
+            :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
            @mediaplay="addMediaPlaying($event)"
            @mediapause="removeMediaPlaying($event)"
            @parseReady="setHeadTailLinks"
@ -315,7 +346,20 @@
            v-if="inConversation && !isPreview && replies && replies.length"
            class="replies"
          >
-            <span class="faint">{{ $t('status.replies_list') }}</span>
+            <button
+              v-if="showOtherRepliesAsButton && replies.length > 1"
+              class="button-unstyled -link faint"
+              :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
+              @click.prevent="dive"
+            >
+              {{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
+            </button>
+            <span
+              v-else
+              class="faint"
+            >
+              {{ $t('status.replies_list') }}
+            </span>
            <StatusPopover
              v-for="reply in replies"
              :key="reply.id"
@ -386,12 +430,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
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@ -25,14 +25,16 @@ const StatusContent = {
    'focused',
    'noHeading',
    'fullContent',
-    'singleLine'
+    'singleLine',
+    'showingTall',
+    'expandingSubject',
+    'showingLongSubject',
+    'toggleShowingTall',
+    'toggleExpandingSubject',
+    'toggleShowingLongSubject'
  ],
  data () {
    return {
-      showingTall: this.fullContent || (this.inConversation && this.focused),
-      showingLongSubject: false,
-      // not as computed because it sets the initial state which will be changed later
-      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
      postLength: this.status.text.length,
      parseReadyDone: false
    }
@ -113,9 +115,9 @@ const StatusContent = {
    },
    toggleShowMore () {
      if (this.mightHideBecauseTall) {
-        this.showingTall = !this.showingTall
+        this.toggleShowingTall()
      } else if (this.mightHideBecauseSubject) {
-        this.expandingSubject = !this.expandingSubject
+        this.toggleExpandingSubject()
      }
    },
    generateTagLink (tag) {
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@ -24,6 +24,30 @@ library.add(
  faPollH
 )

+const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
+
+const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
+  const camelized = camelCase(name)
+  const toggle = `controlledToggle${camelized}`
+  const controlledName = `controlled${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  res[name] = function () {
+    return this[toggle] ? this[controlledName] : this[uncontrolledName]
+  }
+  return res
+}, {})
+
+const controlledOrUncontrolledToggle = (obj, name) => {
+  const camelized = camelCase(name)
+  const toggle = `controlledToggle${camelized}`
+  const uncontrolledName = `uncontrolled${camelized}`
+  if (obj[toggle]) {
+    obj[toggle]()
+  } else {
+    obj[uncontrolledName] = !obj[uncontrolledName]
+  }
+}
+
 const StatusContent = {
  name: 'StatusContent',
  props: [
@ -31,9 +55,22 @@ const StatusContent = {
    'focused',
    'noHeading',
    'fullContent',
-    'singleLine'
+    'singleLine',
+    'controlledShowingTall',
+    'controlledExpandingSubject',
+    'controlledToggleShowingTall',
+    'controlledToggleExpandingSubject'
  ],
+  data () {
+    return {
+      uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),
+      uncontrolledShowingLongSubject: false,
+      // not as computed because it sets the initial state which will be changed later
+      uncontrolledExpandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+    }
+  },
  computed: {
+    ...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
    hideAttachments () {
      return (this.mergedConfig.hideAttachments && !this.inConversation) ||
        (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
@ -91,6 +128,15 @@ const StatusContent = {
    StatusBody
  },
  methods: {
+    toggleShowingTall () {
+      controlledOrUncontrolledToggle(this, 'showingTall')
+    },
+    toggleExpandingSubject () {
+      controlledOrUncontrolledToggle(this, 'expandingSubject')
+    },
+    toggleShowingLongSubject () {
+      controlledOrUncontrolledToggle(this, 'showingLongSubject')
+    },
    setMedia () {
      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
      return () => this.$store.dispatch('setMedia', attachments)
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@ -4,6 +4,12 @@
    <StatusBody
      :status="status"
      :single-line="singleLine"
+      :showing-tall="showingTall"
+      :expanding-subject="expandingSubject"
+      :showing-long-subject="showingLongSubject"
+      :toggle-showing-tall="toggleShowingTall"
+      :toggle-expanding-subject="toggleExpandingSubject"
+      :toggle-showing-long-subject="toggleShowingLongSubject"
      @parseReady="$emit('parseReady', $event)"
    >
      <div v-if="status.poll && status.poll.options">
@ -36,7 +42,6 @@
          :set-media="setMedia()"
        />
      </div>
-
      <div
        v-if="status.card && !noHeading"
        class="link-preview media-body"
@ -61,5 +66,161 @@ $status-margin: 0.75em;
 .StatusContent {
  flex: 1;
  min-width: 0;
+
+  .status-tag {
+    padding: 2px;
+    margin: 2px;
+  }
+
+  .status-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  .tall-status {
+    position: relative;
+    height: 220px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    z-index: 1;
+    .status-content {
+      min-height: 0;
+      mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+            linear-gradient(to top, white, white);
+      /* Autoprefixed seem to ignore this one, and also syntax is different */
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
+  }
+
+  .tall-status-hider {
+    display: inline-block;
+    word-break: break-all;
+    position: absolute;
+    height: 70px;
+    margin-top: 150px;
+    width: 100%;
+    text-align: center;
+    line-height: 110px;
+    z-index: 2;
+  }
+
+  .status-unhider, .cw-status-hider {
+    width: 100%;
+    text-align: center;
+    display: inline-block;
+    word-break: break-all;
+
+    svg {
+      color: inherit;
+    }
+  }
+
+  img, video {
+    max-width: 100%;
+    max-height: 400px;
+    vertical-align: middle;
+    object-fit: contain;
+
+    &.emoji {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  .summary-wrapper {
+    margin-bottom: 0.5em;
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    border-color: var(--border, $fallback--border);
+    flex-grow: 0;
+  }
+
+  .summary {
+    font-style: italic;
+    padding-bottom: 0.5em;
+  }
+
+  .tall-subject {
+    position: relative;
+    .summary {
+      max-height: 2em;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .tall-subject-hider {
+    display: inline-block;
+    word-break: break-all;
+    // position: absolute;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 0.5em;
+  }
+
+  .status-content {
+    font-family: var(--postFont, sans-serif);
+    line-height: 1.4em;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+
+    blockquote {
+      margin: 0.2em 0 0.2em 2em;
+      font-style: italic;
+    }
+
+    pre {
+      overflow: auto;
+    }
+
+    code, samp, kbd, var, pre {
+      font-family: var(--postCodeFont, monospace);
+    }
+
+    p {
+      margin: 0 0 1em 0;
+    }
+
+    p:last-child {
+      margin: 0 0 0 0;
+    }
+
+    h1 {
+      font-size: 1.1em;
+      line-height: 1.2em;
+      margin: 1.4em 0;
+    }
+
+    h2 {
+      font-size: 1.1em;
+      margin: 1.0em 0;
+    }
+
+    h3 {
+      font-size: 1em;
+      margin: 1.2em 0;
+    }
+
+    h4 {
+      margin: 1.1em 0;
+    }
+
+    &.single-line {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      height: 1.4em;
+    }
+  }
+}
+
+.greentext {
+  color: $fallback--cGreen;
+  color: var(--postGreentext, $fallback--cGreen);
 }
 </style>
--- a/src/components/swipe_click/swipe_click.js
+++ b/src/components/swipe_click/swipe_click.js
@ -0,0 +1,84 @@
+import GestureService from '../../services/gesture_service/gesture_service'
+
+/**
+ * props:
+ *   direction: a vector that indicates the direction of the intended swipe
+ *   threshold: the minimum distance in pixels the swipe has moved on `direction'
+ *              for swipe-finished() to have a non-zero sign
+ *   perpendicularTolerance: see gesture_service
+ *
+ * Events:
+ *   preview-requested(offsets)
+ *     Emitted when the pointer has moved.
+ *     offsets: the offsets from the start of the swipe to the current cursor position
+ *
+ *   swipe-canceled()
+ *     Emitted when the swipe has been canceled due to a pointercancel event.
+ *
+ *   swipe-finished(sign: 0|-1|1)
+ *     Emitted when the swipe has finished.
+ *     sign: if the swipe does not meet the threshold, 0
+ *           if the swipe meets the threshold in the positive direction, 1
+ *           if the swipe meets the threshold in the negative direction, -1
+ *
+ *   swipeless-clicked()
+ *     Emitted when there is a click without swipe.
+ *     This and swipe-finished() cannot be emitted for the same pointerup event.
+ */
+const SwipeClick = {
+  props: {
+    direction: {
+      type: Array
+    },
+    threshold: {
+      type: Function,
+      default: () => 30
+    },
+    perpendicularTolerance: {
+      type: Number,
+      default: 1.0
+    }
+  },
+  methods: {
+    handlePointerDown (event) {
+      this.$gesture.start(event)
+    },
+    handlePointerMove (event) {
+      this.$gesture.move(event)
+    },
+    handlePointerUp (event) {
+      this.$gesture.end(event)
+    },
+    handlePointerCancel (event) {
+      this.$gesture.cancel(event)
+    },
+    handleNativeClick (event) {
+      this.$gesture.click(event)
+    },
+    preview (offsets) {
+      this.$emit('preview-requested', offsets)
+    },
+    end (sign) {
+      this.$emit('swipe-finished', sign)
+    },
+    click () {
+      this.$emit('swipeless-clicked')
+    },
+    cancel () {
+      this.$emit('swipe-canceled')
+    }
+  },
+  created () {
+    this.$gesture = new GestureService.SwipeAndClickGesture({
+      direction: this.direction,
+      threshold: this.threshold,
+      perpendicularTolerance: this.perpendicularTolerance,
+      swipePreviewCallback: this.preview,
+      swipeEndCallback: this.end,
+      swipeCancelCallback: this.cancel,
+      swipelessClickCallback: this.click
+    })
+  }
+}
+
+export default SwipeClick
--- a/src/components/swipe_click/swipe_click.vue
+++ b/src/components/swipe_click/swipe_click.vue
@ -0,0 +1,14 @@
+<template>
+  <div
+    v-bind="$attrs"
+    @pointerdown="handlePointerDown"
+    @pointermove="handlePointerMove"
+    @pointerup="handlePointerUp"
+    @pointercancel="handlePointerCancel"
+    @click="handleNativeClick"
+  >
+    <slot />
+  </div>
+</template>
+
+<script src="./swipe_click.js"></script>
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@ -0,0 +1,90 @@
+import Status from '../status/status.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAngleDoubleDown,
+  faAngleDoubleRight
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAngleDoubleDown,
+  faAngleDoubleRight
+)
+
+const ThreadTree = {
+  components: {
+    Status
+  },
+  name: 'ThreadTree',
+  props: {
+    depth: Number,
+    status: Object,
+    inProfile: Boolean,
+    conversation: Array,
+    collapsable: Boolean,
+    isExpanded: Boolean,
+    pinnedStatusIdsObject: Object,
+    profileUserId: String,
+
+    focused: Function,
+    highlight: String,
+    getReplies: Function,
+    setHighlight: Function,
+    toggleExpanded: Function,
+
+    simple: Boolean,
+    // to control display of the whole thread forest
+    toggleThreadDisplay: Function,
+    threadDisplayStatus: Object,
+    showThreadRecursively: Function,
+    totalReplyCount: Object,
+    totalReplyDepth: Object,
+    statusContentProperties: Object,
+    setStatusContentProperty: Function,
+    toggleStatusContentProperty: Function,
+    dive: Function
+  },
+  computed: {
+    suspendable () {
+      const selfSuspendable = this.$refs.statusComponent ? this.$refs.statusComponent.suspendable : true
+      if (this.$refs.childComponent) {
+        return selfSuspendable && this.$refs.childComponent.every(s => s.suspendable)
+      }
+      return selfSuspendable
+    },
+    reverseLookupTable () {
+      return this.conversation.reduce((table, status, index) => {
+        table[status.id] = index
+        return table
+      }, {})
+    },
+    currentReplies () {
+      return this.getReplies(this.status.id).map(({ id }) => this.statusById(id))
+    },
+    threadShowing () {
+      return this.threadDisplayStatus[this.status.id] === 'showing'
+    },
+    currentProp () {
+      return this.statusContentProperties[this.status.id]
+    }
+  },
+  methods: {
+    statusById (id) {
+      return this.conversation[this.reverseLookupTable[id]]
+    },
+    collapseThread () {
+    },
+    showThread () {
+    },
+    showAllSubthreads () {
+    },
+    toggleCurrentProp (name) {
+      this.toggleStatusContentProperty(this.status.id, name)
+    },
+    setCurrentProp (name, newVal) {
+      this.setStatusContentProperty(this.status.id, name)
+    }
+  }
+}
+
+export default ThreadTree
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@ -0,0 +1,128 @@
+<template>
+  <div class="thread-tree panel-body">
+    <status
+      :key="status.id"
+      ref="statusComponent"
+      :inline-expanded="collapsable && isExpanded"
+      :statusoid="status"
+      :expandable="!isExpanded"
+      :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+      :focused="focused(status.id)"
+      :in-conversation="isExpanded"
+      :highlight="highlight"
+      :replies="getReplies(status.id)"
+      :in-profile="inProfile"
+      :profile-user-id="profileUserId"
+      class="conversation-status conversation-status-treeview status-fadein panel-body"
+
+      :simple-tree="simple"
+      :controlled-thread-display-status="threadDisplayStatus[status.id]"
+      :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
+
+      :controlled-showing-tall="currentProp.showingTall"
+      :controlled-expanding-subject="currentProp.expandingSubject"
+      :controlled-showing-long-subject="currentProp.showingLongSubject"
+      :controlled-replying="currentProp.replying"
+      :controlled-media-playing="currentProp.mediaPlaying"
+      :controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
+      :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
+      :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
+      :controlled-toggle-replying="() => toggleCurrentProp('replying')"
+      :controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
+      :dive="dive ? () => dive(status.id) : undefined"
+
+      @goto="setHighlight"
+      @toggleExpanded="toggleExpanded"
+    />
+    <div
+      v-if="currentReplies.length && threadShowing"
+      class="thread-tree-replies"
+    >
+      <thread-tree
+        v-for="replyStatus in currentReplies"
+        :key="replyStatus.id"
+        ref="childComponent"
+        :depth="depth + 1"
+        :status="replyStatus"
+
+        :in-profile="inProfile"
+        :conversation="conversation"
+        :collapsable="collapsable"
+        :is-expanded="isExpanded"
+        :pinned-status-ids-object="pinnedStatusIdsObject"
+        :profile-user-id="profileUserId"
+
+        :focused="focused"
+        :get-replies="getReplies"
+        :highlight="highlight"
+        :set-highlight="setHighlight"
+        :toggle-expanded="toggleExpanded"
+
+        :simple="simple"
+        :toggle-thread-display="toggleThreadDisplay"
+        :thread-display-status="threadDisplayStatus"
+        :show-thread-recursively="showThreadRecursively"
+        :total-reply-count="totalReplyCount"
+        :total-reply-depth="totalReplyDepth"
+        :status-content-properties="statusContentProperties"
+        :set-status-content-property="setStatusContentProperty"
+        :toggle-status-content-property="toggleStatusContentProperty"
+        :dive="dive"
+      />
+    </div>
+    <div
+      v-if="currentReplies.length && !threadShowing"
+      class="thread-tree-replies thread-tree-replies-hidden"
+    >
+      <i18n
+        v-if="simple"
+        tag="button"
+        path="status.thread_follow_with_icon"
+        class="button-unstyled -link thread-tree-show-replies-button"
+        @click.prevent="dive(status.id)"
+      >
+        <FAIcon
+          place="icon"
+          icon="angle-double-right"
+        />
+        <span place="text">
+          {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
+        </span>
+      </i18n>
+      <i18n
+        v-else
+        tag="button"
+        path="status.thread_show_full_with_icon"
+        class="button-unstyled -link thread-tree-show-replies-button"
+        @click.prevent="showThreadRecursively(status.id)"
+      >
+        <FAIcon
+          place="icon"
+          icon="angle-double-down"
+        />
+        <span place="text">
+          {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
+        </span>
+      </i18n>
+    </div>
+  </div>
+</template>
+
+<script src="./thread_tree.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+.thread-tree-replies {
+  margin-left: $status-margin;
+  border-left: 2px solid var(--border, $fallback--border);
+}
+
+.thread-tree-replies-hidden {
+  padding: $status-margin;
+  //border-top: 1px solid var(--border, $fallback--border);
+  /* Make the button stretch along the whole row */
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+}
+</style>
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@ -22,7 +22,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)
--- a/src/components/user_panel/user_panel.js
+++ b/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: {
--- a/src/components/user_panel/user_panel.vue
+++ b/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"
@ -25,4 +28,22 @@
 .user-panel .signed-in {
  overflow: visible;
 }
+
+.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>
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -333,6 +333,7 @@
    "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",
+    "swap_reacts": "Swap Reactions with Favorite Button",
    "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
    "export_theme": "Save preset",
    "filtering": "Filtering",
@ -353,6 +354,9 @@
    "hide_all_muted_posts": "Hide muted posts",
    "max_thumbnails": "Maximum amount of thumbnails per post",
    "hide_isp": "Hide instance-specific panel",
+    "show_third_column": "Move Notifications to a seperate column",
+    "compact_nav_panel": "Compact navigation panel",
+    "compact_user_panel": "Compact user panel",
    "hide_shoutbox": "Hide instance frothbox",
    "right_sidebar": "Show sidebar on the right side",
    "always_show_post_button": "Always show floating New Post button",
@ -461,6 +465,14 @@
    "subject_line_email": "Like email: \"re: subject\"",
    "subject_line_mastodon": "Like mastodon: copy as is",
    "subject_line_noop": "Do not copy",
+    "conversation_display": "Conversation display style",
+    "conversation_display_tree": "Tree-style",
+    "conversation_display_simple_tree": "Simplified tree-style",
+    "conversation_display_linear": "Linear-style",
+    "conversation_other_replies_button": "Show the \"other replies\" button",
+    "conversation_other_replies_button_below": "Below statuses",
+    "conversation_other_replies_button_inside": "Inside statuses",
+    "max_depth_in_thread": "Maximum number of levels in thread to display by default",
    "post_status_content_type": "Post status content type",
    "sensitive_by_default": "Mark posts as sensitive by default",
    "stop_gifs": "Play-on-hover GIFs",
@ -707,6 +719,7 @@
    "reply_to": "Reply to",
    "mentions": "Mentions",
    "replies_list": "Replies:",
+    "replies_list_with_others": "Replies (+{numReplies} other): | Replies (+{numReplies} others):",
    "mute_conversation": "Mute conversation",
    "unmute_conversation": "Unmute conversation",
    "status_unavailable": "Status unavailable",
@ -722,7 +735,18 @@
    "nsfw": "NSFW",
    "expand": "Expand",
    "you": "(You)",
-    "plus_more": "+{number} more"
+    "plus_more": "+{number} more",
+    "thread_hide": "Hide this thread",
+    "thread_show": "Show this thread",
+    "thread_show_full": "Show everything under this thread ({numStatus} status in total, max depth {depth}) | Show everything under this thread ({numStatus} statuses in total, max depth {depth})",
+    "thread_show_full_with_icon": "{icon} {text}",
+    "thread_follow": "See the remaining part of this thread ({numStatus} status in total) | See the remaining part of this thread ({numStatus} statuses in total)",
+    "thread_follow_with_icon": "{icon} {text}",
+    "ancestor_follow": "See {numReplies} other reply under this status | See {numReplies} other replies under this status",
+    "ancestor_follow_with_icon": "{icon} {text}",
+    "show_all_conversation_with_icon": "{icon} {text}",
+    "show_all_conversation": "Show full conversation ({numStatus} other status) | Show full conversation ({numStatus} other statuses)",
+    "show_only_conversation_under_this": "Only show replies to this status"
  },
  "user_card": {
    "approve": "Approve",
--- a/src/i18n/en_nyan.json
+++ b/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"
+  }
+}
--- a/src/i18n/messages.js
+++ b/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'),
--- a/src/main.js
+++ b/src/main.js
@ -45,6 +45,8 @@ Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)

+Vue.config.ignoredElements = ['pinch-zoom']
+
 Vue.component('FAIcon', FontAwesomeIcon)
 Vue.component('FALayers', FontAwesomeLayers)

--- a/src/modules/config.js
+++ b/src/modules/config.js
@ -11,13 +11,17 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0]
 */
 export const multiChoiceProperties = [
  'postContentType',
-  'subjectLineBehavior'
+  'subjectLineBehavior',
+  'conversationDisplay', // tree | linear
+  'conversationOtherRepliesButton' // below | inside
 ]

 export const defaultState = {
  colors: {},
  theme: undefined,
  customTheme: undefined,
+  compactNavPanel: false,
+  compactUserPanel: false,
  customThemeSource: undefined,
  hideISP: false,
  hideInstanceWallpaper: false,
@ -26,6 +30,7 @@ export const defaultState = {
  hideMutedPosts: undefined, // instance default
  collapseMessageWithSubject: undefined, // instance default
  padEmoji: true,
+  swapReacts: true,
  hideAttachments: false,
  hideAttachmentsInConv: false,
  maxThumbnails: 16,
@ -72,7 +77,10 @@ export const defaultState = {
  hidePostStats: undefined, // instance default
  hideUserStats: undefined, // instance default
  virtualScrolling: undefined, // instance default
-  sensitiveByDefault: undefined // instance default
+  sensitiveByDefault: undefined, // instance default
+  conversationDisplay: undefined, // instance default
+  conversationOtherRepliesButton: undefined, // instance default
+  maxDepthInThread: 18
 }

 // caching the instance default properties
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@ -43,6 +43,9 @@ const defaultState = {
  theme: 'pleroma-dark',
  virtualScrolling: true,
  sensitiveByDefault: false,
+  conversationDisplay: 'simple_tree',
+  conversationOtherRepliesButton: 'below',
+  maxDepthInThread: 6,

  // Nasty stuff
  customEmoji: [],
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@ -698,6 +698,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 })
    },
--- a/src/modules/users.js
+++ b/src/modules/users.js
@ -234,6 +234,12 @@ export const mutations = {
  signUpFailure (state, errors) {
    state.signUpPending = false
    state.signUpErrors = errors
+  },
+  updateUnreadChatCount (state, { userId, unreadChatCount }) {
+    const user = state.usersObject[userId]
+    if (user) {
+      user.unread_chat_count = unreadChatCount
+    }
  }
 }

--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@ -379,6 +379,7 @@ export const parseNotification = (data) => {
    output.type = mastoDict[data.type] || data.type
    output.seen = data.pleroma.is_seen
    output.status = isStatusNotification(output.type) ? parseStatus(data.status) : null
+    output.chatMessage = output.type === 'pleroma:chat_mention' ? parseChatMessage(data.chat_message) : null
    output.action = output.status // TODO: Refactor, this is unneeded
    output.target = output.type !== 'move'
      ? null
--- a/src/services/gesture_service/gesture_service.js
+++ b/src/services/gesture_service/gesture_service.js
@ -4,9 +4,15 @@ const DIRECTION_RIGHT = [1, 0]
 const DIRECTION_UP = [0, -1]
 const DIRECTION_DOWN = [0, 1]

+const BUTTON_LEFT = 0
+
 const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]

-const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY])
+const touchCoord = touch => [touch.screenX, touch.screenY]
+
+const touchEventCoord = e => touchCoord(e.touches[0])
+
+const pointerEventCoord = e => [e.clientX, e.clientY]

 const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1])

@ -19,6 +25,9 @@ const project = (v1, v2) => {
  return [scalar * v2[0], scalar * v2[1]]
 }

+// const debug = console.log
+const debug = () => {}
+
 // direction: either use the constants above or an arbitrary 2d vector.
 // threshold: how many Px to move from touch origin before checking if the
 //    callback should be called.
@ -61,6 +70,143 @@ const updateSwipe = (event, gesture) => {
  gesture._swiping = false
 }

+class SwipeAndClickGesture {
+  // swipePreviewCallback(offsets: Array[Number])
+  //   offsets: the offset vector which the underlying component should move, from the starting position
+  // swipeEndCallback(sign: 0|-1|1)
+  //   sign: if the swipe does not meet the threshold, 0
+  //         if the swipe meets the threshold in the positive direction, 1
+  //         if the swipe meets the threshold in the negative direction, -1
+  constructor ({
+    direction,
+    // swipeStartCallback
+    swipePreviewCallback,
+    swipeEndCallback,
+    swipeCancelCallback,
+    swipelessClickCallback,
+    threshold = 30, perpendicularTolerance = 1.0
+  }) {
+    const nop = () => { debug('Warning: Not implemented') }
+    this.direction = direction
+    this.swipePreviewCallback = swipePreviewCallback || nop
+    this.swipeEndCallback = swipeEndCallback || nop
+    this.swipeCancelCallback = swipeCancelCallback || nop
+    this.swipelessClickCallback = swipelessClickCallback || nop
+    this.threshold = typeof threshold === 'function' ? threshold : () => threshold
+    this.perpendicularTolerance = perpendicularTolerance
+    this._reset()
+  }
+
+  _reset () {
+    this._startPos = [0, 0]
+    this._pointerId = -1
+    this._swiping = false
+    this._swiped = false
+    this._preventNextClick = false
+  }
+
+  start (event) {
+    debug('start() called', event)
+
+    // Only handle left click
+    if (event.button !== BUTTON_LEFT) {
+      return
+    }
+
+    this._startPos = pointerEventCoord(event)
+    this._pointerId = event.pointerId
+    debug('start pos:', this._startPos)
+    this._swiping = true
+    this._swiped = false
+  }
+
+  move (event) {
+    if (this._swiping && this._pointerId === event.pointerId) {
+      this._swiped = true
+
+      const coord = pointerEventCoord(event)
+      const delta = deltaCoord(this._startPos, coord)
+
+      this.swipePreviewCallback(delta)
+    }
+  }
+
+  cancel (event) {
+    debug('cancel called')
+    if (!this._swiping || this._pointerId !== event.pointerId) {
+      return
+    }
+
+    this.swipeCancelCallback()
+  }
+
+  end (event) {
+    if (!this._swiping) {
+      debug('not swiping')
+      return
+    }
+
+    if (this._pointerId !== event.pointerId) {
+      debug('pointer id does not match')
+      return
+    }
+
+    this._swiping = false
+
+    debug('end: is swipe event')
+
+    debug('button = ', event.button)
+
+    // movement too small
+    const coord = pointerEventCoord(event)
+    const delta = deltaCoord(this._startPos, coord)
+
+    const sign = (() => {
+      debug(
+        'threshold = ', this.threshold(),
+        'vector len =', vectorLength(delta))
+      if (vectorLength(delta) < this.threshold()) {
+        return 0
+      }
+      // movement is opposite from direction
+      const isPositive = dotProduct(delta, this.direction) > 0
+
+      // movement perpendicular to direction is too much
+      const towardsDir = project(delta, this.direction)
+      const perpendicularDir = perpendicular(this.direction)
+      const towardsPerpendicular = project(delta, perpendicularDir)
+      if (
+        vectorLength(towardsDir) * this.perpendicularTolerance <
+          vectorLength(towardsPerpendicular)
+      ) {
+        return 0
+      }
+
+      return isPositive ? 1 : -1
+    })()
+
+    const swiped = this._swiped
+    if (this._swiped) {
+      this.swipeEndCallback(sign)
+    }
+    this._reset()
+    // Only a mouse will fire click event when
+    // the end point is far from the starting point
+    // so for other kinds of pointers do not check
+    // whether we have swiped
+    if (swiped && event.pointerType === 'mouse') {
+      this._preventNextClick = true
+    }
+  }
+
+  click (event) {
+    if (!this._preventNextClick) {
+      this.swipelessClickCallback()
+    }
+    this._reset()
+  }
+}
+
 const GestureService = {
  DIRECTION_LEFT,
  DIRECTION_RIGHT,
@ -68,7 +214,8 @@ const GestureService = {
  DIRECTION_DOWN,
  swipeGesture,
  beginSwipe,
-  updateSwipe
+  updateSwipe,
+  SwipeAndClickGesture
 }

 export default GestureService
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@ -115,7 +115,8 @@
      "cOrange": "#f67400",
      "btnPressed": "--accent",
      "selectedMenu": "--accent",
-      "selectedMenuPopover": "--accent"
+      "selectedMenuPopover": "--accent",
+      "chatMessageIncomingBorder": "#3d4349"
    },
    "radii": {
      "btn": "2",
--- a/yarn.lock
+++ b/yarn.lock
@ -915,6 +915,12 @@
  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz#63da3e459147cebb0a8d58eed81d6071db9f5973"
  integrity sha512-N3VKw7KzRfOm8hShUVldpinlm13HpvLBQgT63QS+aCrIRLwjoEUXY5Rcmttbfb6HkzZaeqjLqd/aZCQ53UjQpg==

+"@kazvmoe-infra/pinch-zoom-element@https://lily.kazv.moe/infra/pinch-zoom-element.git":
+  version "1.1.1"
+  resolved "https://lily.kazv.moe/infra/pinch-zoom-element.git#b5d2e9fb41231e1bff12058bbfc55df05cfdc1eb"
+  dependencies:
+    pointer-tracker "^2.0.3"
+
 "@nodelib/fs.scandir@2.1.3":
  version "2.1.3"
  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
@ -7004,6 +7010,11 @@ pngjs@^3.3.0:
  version "3.3.3"
  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"

+pointer-tracker@^2.0.3:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/pointer-tracker/-/pointer-tracker-2.4.0.tgz#78721c2d2201486db11ec1094377f03023b621b3"
+  integrity sha512-pWI2tpaM/XNtc9mUTv42Rmjf6mkHvE8LT5DDEq0G7baPNhxNM9E3CepubPplSoSLk9E5bwQrAMyDcPVmJyTW4g==
+
 portal-vue@^2.1.4:
  version "2.1.4"
  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"