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

2020-11-15 19:45:52 +00:00 · 2020-11-15 19:45:52 +00:00 · 7e1b1ec990
commit 7e1b1ec990
parent 804e25084d fa2884a805
50 changed files with 1054 additions and 621 deletions
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@ -6,12 +6,13 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
-import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
+import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
  faChevronDown,
  faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
+import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'

 library.add(
  faChevronDown,
@ -21,6 +22,8 @@ library.add(
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
 const SAFE_RESIZE_TIME_OFFSET = 100
+const MARK_AS_READ_DELAY = 1500
+const MAX_RETRIES = 10

 const Chat = {
  components: {
@ -34,7 +37,8 @@ const Chat = {
      hoveredMessageChainId: undefined,
      lastScrollPosition: {},
      scrollableContainerHeight: '100%',
-      errorLoadingChat: false
+      errorLoadingChat: false,
+      messageRetriers: {}
    }
  },
  created () {
@ -104,7 +108,7 @@ const Chat = {
      const bottomedOutBeforeUpdate = this.bottomedOut(BOTTOMED_OUT_OFFSET)
      this.$nextTick(() => {
        if (bottomedOutBeforeUpdate) {
-          this.scrollDown({ forceRead: !document.hidden })
+          this.scrollDown()
        }
      })
    },
@ -210,7 +214,7 @@ const Chat = {
      this.$nextTick(() => {
        scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
      })
-      if (forceRead || this.newMessageCount > 0) {
+      if (forceRead) {
        this.readChat()
      }
    },
@ -218,7 +222,10 @@ const Chat = {
      if (!(this.currentChatMessageService && this.currentChatMessageService.maxId)) { return }
      if (document.hidden) { return }
      const lastReadId = this.currentChatMessageService.maxId
-      this.$store.dispatch('readChat', { id: this.currentChat.id, lastReadId })
+      this.$store.dispatch('readChat', {
+        id: this.currentChat.id,
+        lastReadId
+      })
    },
    bottomedOut (offset) {
      return isBottomedOut(this.$refs.scrollable, offset)
@ -235,12 +242,18 @@ const Chat = {
      } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
        this.jumpToBottomButtonVisible = false
        if (this.newMessageCount > 0) {
-          this.readChat()
+          // Use a delay before marking as read to prevent situation where new messages
+          // arrive just as you're leaving the view and messages that you didn't actually
+          // get to see get marked as read.
+          window.setTimeout(() => {
+            // Don't mark as read if the element doesn't exist, user has left chat view
+            if (this.$el) this.readChat()
+          }, MARK_AS_READ_DELAY)
        }
      } else {
        this.jumpToBottomButtonVisible = true
      }
-    }, 100),
+    }, 200),
    handleScrollUp (positionBeforeLoading) {
      const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
      this.$refs.scrollable.scrollTo({
@ -274,6 +287,14 @@ const Chat = {
              if (isFirstFetch) {
                this.updateScrollableContainerHeight()
              }
+
+              // In vertical screens, the first batch of fetched messages may not always take the
+              // full height of the scrollable container.
+              // If this is the case, we want to fetch the messages until the scrollable container
+              // is fully populated so that the user has the ability to scroll up and load the history.
+              if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
+                this.fetchChat({ maxId: this.currentChatMessageService.minId })
+              }
            })
          })
        })
@ -302,42 +323,74 @@ const Chat = {
      })
      this.fetchChat({ isFirstFetch: true })
    },
-    sendMessage ({ status, media }) {
+    handleAttachmentPosting () {
+      this.$nextTick(() => {
+        this.handleResize()
+        // When the posting form size changes because of a media attachment, we need an extra resize
+        // to account for the potential delay in the DOM update.
+        setTimeout(() => {
+          this.updateScrollableContainerHeight()
+        }, SAFE_RESIZE_TIME_OFFSET)
+        this.scrollDown({ forceRead: true })
+      })
+    },
+    sendMessage ({ status, media, idempotencyKey }) {
      const params = {
        id: this.currentChat.id,
-        content: status
+        content: status,
+        idempotencyKey
      }

      if (media[0]) {
        params.mediaId = media[0].id
      }

-      return this.backendInteractor.sendChatMessage(params)
+      const fakeMessage = buildFakeMessage({
+        attachments: media,
+        chatId: this.currentChat.id,
+        content: status,
+        userId: this.currentUser.id,
+        idempotencyKey
+      })
+
+      this.$store.dispatch('addChatMessages', {
+        chatId: this.currentChat.id,
+        messages: [fakeMessage]
+      }).then(() => {
+        this.handleAttachmentPosting()
+      })
+
+      return this.doSendMessage({ params, fakeMessage, retriesLeft: MAX_RETRIES })
+    },
+    doSendMessage ({ params, fakeMessage, retriesLeft = MAX_RETRIES }) {
+      if (retriesLeft <= 0) return
+
+      this.backendInteractor.sendChatMessage(params)
        .then(data => {
          this.$store.dispatch('addChatMessages', {
            chatId: this.currentChat.id,
-            messages: [data],
-            updateMaxId: false
-          }).then(() => {
-            this.$nextTick(() => {
-              this.handleResize()
-              // When the posting form size changes because of a media attachment, we need an extra resize
-              // to account for the potential delay in the DOM update.
-              setTimeout(() => {
-                this.updateScrollableContainerHeight()
-              }, SAFE_RESIZE_TIME_OFFSET)
-              this.scrollDown({ forceRead: true })
-            })
+            updateMaxId: false,
+            messages: [{ ...data, fakeId: fakeMessage.id }]
          })

          return data
        })
        .catch(error => {
          console.error('Error sending message', error)
-          return {
-            error: this.$t('chats.error_sending_message')
+          this.$store.dispatch('handleMessageError', {
+            chatId: this.currentChat.id,
+            fakeId: fakeMessage.id,
+            isRetry: retriesLeft !== MAX_RETRIES
+          })
+          if ((error.statusCode >= 500 && error.statusCode < 600) || error.message === 'Failed to fetch') {
+            this.messageRetriers[fakeMessage.id] = setTimeout(() => {
+              this.doSendMessage({ params, fakeMessage, retriesLeft: retriesLeft - 1 })
+            }, 1000 * (2 ** (MAX_RETRIES - retriesLeft)))
          }
+          return {}
        })
+
+      return Promise.resolve(fakeMessage)
    },
    goBack () {
      this.$router.push({ name: 'chats', params: { username: this.currentUser.screen_name } })
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@ -25,7 +25,7 @@
    min-height: 100%;
    margin: 0 0 0 0;
    border-radius: 10px 10px 0 0;
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0 ;
+    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;

    &::after {
      border-radius: 0;
@ -58,8 +58,10 @@

  .go-back-button {
    cursor: pointer;
-    margin-right: 1.7em;
-    margin-left: 0.3em;
+    width: 28px;
+    text-align: center;
+    padding: 0.6em;
+    margin: -0.6em 0.6em -0.6em -0.6em;
  }

  .jump-to-bottom-button {
@ -74,7 +76,7 @@
    display: flex;
    justify-content: center;
    align-items: center;
-    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), 0px 2px 4px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: 0.35s all;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
@ -136,11 +138,21 @@
    }

    .chat-view-heading {
+      box-sizing: border-box;
      position: static;
      z-index: 9999;
      top: 0;
      margin-top: 0;
      border-radius: 0;
+
+      /* This practically overlays the panel heading color over panel background
+       * color. This is needed because we allow transparent panel background and
+       * it doesn't work well in this "disjointed panel header" case
+       */
+      background:
+        linear-gradient(to top, var(--panel), var(--panel)),
+        linear-gradient(to top, var(--bg), var(--bg));
+      height: 50px;
    }

    .scrollable-message-list {
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@ -80,6 +80,7 @@
              :disable-sensitivity-checkbox="true"
              :disable-submit="errorLoadingChat || !currentChat"
              :disable-preview="true"
+              :optimistic-posting="true"
              :post-handler="sendMessage"
              :submit-on-enter="!mobileLayout"
              :preserve-focus="!mobileLayout"
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@ -24,3 +24,10 @@ export const isBottomedOut = (el, offset = 0) => {
 export const scrollableContainerHeight = (inner, header, footer) => {
  return inner.offsetHeight - header.clientHeight - footer.clientHeight
 }
+
+// Returns whether or not the scrollbar is visible.
+export const isScrollable = (el) => {
+  if (!el) return
+
+  return el.scrollHeight > el.clientHeight
+}
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@ -21,6 +21,12 @@
          />
        </span>
        <span class="heading-right" />
+        <div class="time-wrapper">
+          <Timeago
+            :time="chat.updated_at"
+            :auto-update="60"
+          />
+        </div>
      </div>
      <div class="chat-preview">
        <StatusContent
@ -35,12 +41,6 @@
        </div>
      </div>
    </div>
-    <div class="time-wrapper">
-      <Timeago
-        :time="chat.updated_at"
-        :auto-update="60"
-      />
-    </div>
  </div>
 </template>

--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@ -101,6 +101,19 @@
    }
  }

+  .pending {
+    .status-content.media-body, .created-at {
+      color: var(--faint);
+    }
+  }
+
+  .error {
+    .status-content.media-body, .created-at {
+      color: $fallback--cRed;
+      color: var(--badgeNotification, $fallback--cRed);
+    }
+  }
+
  .incoming {
    a {
      color: var(--chatMessageIncomingLink, $fallback--link);
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@ -32,7 +32,7 @@
        >
          <div
            class="media status"
-            :class="{ 'without-attachment': !hasAttachment }"
+            :class="{ 'without-attachment': !hasAttachment, 'pending': chatViewItem.data.pending, 'error': chatViewItem.data.error }"
            style="position: relative"
            @mouseenter="hovered = true"
            @mouseleave="hovered = false"
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@ -23,7 +23,9 @@

  .go-back-button {
    cursor: pointer;
-    margin-right: 1.7em;
-    margin-left: 0.3em;
+    width: 28px;
+    text-align: center;
+    padding: 0.6em;
+    margin: -0.6em 0.6em -0.6em -0.6em;
  }
 }
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@ -0,0 +1,89 @@
+import SearchBar from 'components/search_bar/search_bar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+)
+
+export default {
+  components: {
+    SearchBar
+  },
+  data: () => ({
+    searchBarHidden: true,
+    supportsMask: window.CSS && window.CSS.supports && (
+      window.CSS.supports('mask-size', 'contain') ||
+        window.CSS.supports('-webkit-mask-size', 'contain') ||
+        window.CSS.supports('-moz-mask-size', 'contain') ||
+        window.CSS.supports('-ms-mask-size', 'contain') ||
+        window.CSS.supports('-o-mask-size', 'contain')
+    )
+  }),
+  computed: {
+    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
+    logoStyle () {
+      return {
+        'visibility': this.enableMask ? 'hidden' : 'visible'
+      }
+    },
+    logoMaskStyle () {
+      return this.enableMask ? {
+        'mask-image': `url(${this.$store.state.instance.logo})`
+      } : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      }
+    },
+    logoBgStyle () {
+      return Object.assign({
+        'margin': `${this.$store.state.instance.logoMargin} 0`,
+        opacity: this.searchBarHidden ? 1 : 0
+      }, this.enableMask ? {} : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      })
+    },
+    logo () { return this.$store.state.instance.logo },
+    sitename () { return this.$store.state.instance.name },
+    hideSitename () { return this.$store.state.instance.hideSitename },
+    logoLeft () { return this.$store.state.instance.logoLeft },
+    currentUser () { return this.$store.state.users.currentUser },
+    privateMode () { return this.$store.state.instance.private }
+  },
+  methods: {
+    scrollToTop () {
+      window.scrollTo(0, 0)
+    },
+    logout () {
+      this.$router.replace('/main/public')
+      this.$store.dispatch('logout')
+    },
+    onSearchBarToggled (hidden) {
+      this.searchBarHidden = hidden
+    },
+    openSettingsModal () {
+      this.$store.dispatch('openSettingsModal')
+    }
+  }
+}
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@ -0,0 +1,112 @@
+@import '../../_variables.scss';
+
+.DesktopNav {
+  height: 50px;
+  width: 100%;
+  position: fixed;
+
+  .inner-nav {
+    display: grid;
+    grid-template-rows: 50px;
+    grid-template-columns: 2fr auto 2fr;
+    grid-template-areas: "sitename logo actions";
+    box-sizing: border-box;
+    padding: 0 1.2em;
+    margin: auto;
+    max-width: 980px;
+  }
+
+  &.-logoLeft {
+    grid-template-columns: auto 2fr 2fr;
+    grid-template-areas: "logo sitename actions";
+  }
+
+  button {
+    &, svg {
+      color: $fallback--text;
+      color: var(--btnTopBarText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnPressedTopBar, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnPressedTopBarText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnDisabledTopBarText, $fallback--text);
+    }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnToggledTopBarText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btnToggledTopBar, $fallback--fg)
+    }
+  }
+
+  .logo {
+    grid-area: logo;
+    position: relative;
+    transition: opacity;
+    transition-timing-function: ease-out;
+    transition-duration: 100ms;
+
+    @media all and (min-width: 800px) {
+      opacity: 1 !important;
+    }
+
+    .mask {
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      background-color: $fallback--fg;
+      background-color: var(--topBarText, $fallback--fg);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+
+    img {
+      display: inline-block;
+      height: 50px;
+    }
+  }
+
+  .nav-icon {
+    margin-left: 0.2em;
+    width: 2em;
+    text-align: center;
+  }
+
+  a, a svg {
+    color: $fallback--link;
+    color: var(--topBarLink, $fallback--link);
+  }
+
+  .sitename {
+    grid-area: sitename;
+  }
+
+  .actions {
+    grid-area: actions;
+  }
+
+  .item {
+    flex: 1;
+    line-height: 50px;
+    height: 50px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+
+    &.right {
+      justify-content: flex-end;
+      text-align: right;
+    }
+  }
+}
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@ -0,0 +1,79 @@
+<template>
+  <nav
+    id="nav"
+    class="DesktopNav"
+    :class="{ '-logoLeft': logoLeft }"
+    @click="scrollToTop()"
+  >
+    <div class="inner-nav">
+      <div class="item sitename">
+        <router-link
+          v-if="!hideSitename"
+          class="site-name"
+          :to="{ name: 'root' }"
+          active-class="home"
+        >
+          {{ sitename }}
+        </router-link>
+      </div>
+      <router-link
+        class="logo"
+        :to="{ name: 'root' }"
+        :style="logoBgStyle"
+      >
+        <div
+          class="mask"
+          :style="logoMaskStyle"
+        />
+        <img
+          :src="logo"
+          :style="logoStyle"
+        >
+      </router-link>
+      <div class="item right actions">
+        <search-bar
+          v-if="currentUser || !privateMode"
+          @toggled="onSearchBarToggled"
+          @click.stop.native
+        />
+        <a
+          href="#"
+          class="nav-icon"
+          @click.stop="openSettingsModal"
+        >
+          <FAIcon
+            fixed-width
+            class="fa-scale-110 fa-old-padding"
+            icon="cog"
+            :title="$t('nav.preferences')"
+          />
+        </a>
+        <a
+          v-if="currentUser && currentUser.role === 'admin'"
+          href="/pleroma/admin/#/login-pleroma"
+          class="nav-icon"
+          target="_blank"
+        ><FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding"
+          icon="tachometer-alt"
+          :title="$t('nav.administration')"
+        /></a>
+        <a
+          v-if="currentUser"
+          href="#"
+          class="nav-icon"
+          @click.prevent="logout"
+        ><FAIcon
+          fixed-width
+          class="fa-scale-110 fa-old-padding"
+          icon="sign-out-alt"
+          :title="$t('login.logout')"
+        /></a>
+      </div>
+    </div>
+  </nav>
+</template>
+<script src="./desktop_nav.js"></script>
+
+<style src="./desktop_nav.scss" lang="scss"></style>
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@ -16,7 +16,6 @@
          @click.prevent="muteConversation"
        >
          <FAIcon
-            size="md"
            fixed-width
            icon="eye-slash"
          /><span>{{ $t("status.mute_conversation") }}</span>
@ -27,7 +26,6 @@
          @click.prevent="unmuteConversation"
        >
          <FAIcon
-            size="md"
            fixed-width
            icon="eye-slash"
          /><span>{{ $t("status.unmute_conversation") }}</span>
@ -39,7 +37,6 @@
          @click="close"
        >
          <FAIcon
-            size="md"
            fixed-width
            icon="thumbtack"
          /><span>{{ $t("status.pin") }}</span>
@ -51,7 +48,6 @@
          @click="close"
        >
          <FAIcon
-            size="md"
            fixed-width
            icon="thumbtack"
          /><span>{{ $t("status.unpin") }}</span>
@ -63,7 +59,6 @@
          @click="close"
        >
          <FAIcon
-            size="md"
            fixed-width
            :icon="['far', 'bookmark']"
          /><span>{{ $t("status.bookmark") }}</span>
@ -75,7 +70,6 @@
          @click="close"
        >
          <FAIcon
-            size="md"
            fixed-width
            icon="bookmark"
          /><span>{{ $t("status.unbookmark") }}</span>
@ -87,7 +81,6 @@
          @click="close"
        >
          <FAIcon
-            size="md"
            fixed-width
            icon="times"
          /><span>{{ $t("status.delete") }}</span>
@ -98,7 +91,6 @@
          @click="close"
        >
          <FAIcon
-            size="md"
            fixed-width
            icon="share-alt"
          /><span>{{ $t("status.copy_link") }}</span>
@ -109,7 +101,6 @@
      <FAIcon
        class="ExtraButtons fa-scale-110 fa-old-padding"
        icon="ellipsis-h"
-        size="md"
      />
    </span>
  </Popover>
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -1,55 +1,53 @@
 <template>
-  <div>
+  <div
+    class="MobileNav"
+  >
    <nav
      id="nav"
-      class="nav-bar container"
+      class="mobile-nav"
      :class="{ 'mobile-hidden': isChat }"
+      @click="scrollToTop()"
    >
-      <div
-        class="mobile-inner-nav"
-        @click="scrollToTop()"
-      >
-        <div class="item">
-          <a
-            href="#"
-            class="mobile-nav-button"
-            @click.stop.prevent="toggleMobileSidebar()"
-          >
-            <FAIcon
-              class="fa-scale-110 fa-old-padding"
-              icon="bars"
-            />
-            <div
-              v-if="unreadChatCount"
-              class="alert-dot"
-            />
-          </a>
-          <router-link
-            v-if="!hideSitename"
-            class="site-name"
-            :to="{ name: 'root' }"
-            active-class="home"
-          >
-            {{ sitename }}
-          </router-link>
-        </div>
-        <div class="item right">
-          <a
-            v-if="currentUser"
-            class="mobile-nav-button"
-            href="#"
-            @click.stop.prevent="openMobileNotifications()"
-          >
-            <FAIcon
-              class="fa-scale-110 fa-old-padding"
-              icon="bell"
-            />
-            <div
-              v-if="unseenNotificationsCount"
-              class="alert-dot"
-            />
-          </a>
-        </div>
+      <div class="item">
+        <a
+          href="#"
+          class="mobile-nav-button"
+          @click.stop.prevent="toggleMobileSidebar()"
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="bars"
+          />
+          <div
+            v-if="unreadChatCount"
+            class="alert-dot"
+          />
+        </a>
+        <router-link
+          v-if="!hideSitename"
+          class="site-name"
+          :to="{ name: 'root' }"
+          active-class="home"
+        >
+          {{ sitename }}
+        </router-link>
+      </div>
+      <div class="item right">
+        <a
+          v-if="currentUser"
+          class="mobile-nav-button"
+          href="#"
+          @click.stop.prevent="openMobileNotifications()"
+        >
+          <FAIcon
+            class="fa-scale-110 fa-old-padding"
+            icon="bell"
+          />
+          <div
+            v-if="unseenNotificationsCount"
+            class="alert-dot"
+          />
+        </a>
      </div>
    </nav>
    <div
@ -93,100 +91,124 @@
 <style lang="scss">
@import '../../_variables.scss';

-.mobile-inner-nav {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.mobile-nav-button {
-  text-align: center;
-  margin: 0 1em;
-  position: relative;
-  cursor: pointer;
-}
-
-.alert-dot {
-  border-radius: 100%;
-  height: 8px;
-  width: 8px;
-  position: absolute;
-  left: calc(50% - 4px);
-  top: calc(50% - 4px);
-  margin-left: 6px;
-  margin-top: -6px;
-  background-color: $fallback--cRed;
-  background-color: var(--badgeNotification, $fallback--cRed);
-}
-
-.mobile-notifications-drawer {
-  width: 100%;
-  height: 100vh;
-  overflow-x: hidden;
-  position: fixed;
-  top: 0;
-  left: 0;
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-  box-shadow: var(--panelShadow);
-  transition-property: transform;
-  transition-duration: 0.25s;
-  transform: translateX(0);
-  z-index: 1001;
-  -webkit-overflow-scrolling: touch;
-
-  &.closed {
-    transform: translateX(100%);
+.MobileNav {
+  .mobile-nav {
+    display: grid;
+    line-height: 50px;
+    height: 50px;
+    grid-template-rows: 50px;
+    grid-template-columns: 2fr auto;
+    width: 100%;
+    position: fixed;
+    box-sizing: border-box;
  }
-}

-.mobile-notifications-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 1;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  position: absolute;
-  color: var(--topBarText);
-  background-color: $fallback--fg;
-  background-color: var(--topBar, $fallback--fg);
-  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
-  box-shadow: var(--topBarShadow);
-
-  .title {
-    font-size: 1.3em;
-    margin-left: 0.6em;
+  .mobile-inner-nav {
+    width: 100%;
+    display: flex;
+    align-items: center;
  }
-}

-.mobile-notifications {
-  margin-top: 50px;
-  width: 100vw;
-  height: calc(100vh - 50px);
-  overflow-x: hidden;
-  overflow-y: scroll;
+  .mobile-nav-button {
+    display: inline-block;
+    text-align: center;
+    padding: 0 1em;
+    position: relative;
+    cursor: pointer;
+  }

-  color: $fallback--text;
-  color: var(--text, $fallback--text);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+  .site-name {
+    padding: 0 .3em;
+    display: inline-block;
+  }

-  .notifications {
-    padding: 0;
-    border-radius: 0;
-    box-shadow: none;
-    .panel {
-      border-radius: 0;
-      margin: 0;
-      box-shadow: none;
+  .item {
+    /* moslty just to get rid of extra whitespaces */
+    display: flex;
+  }
+
+  .alert-dot {
+    border-radius: 100%;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
+    background-color: $fallback--cRed;
+    background-color: var(--badgeNotification, $fallback--cRed);
+  }
+
+  .mobile-notifications-drawer {
+    width: 100%;
+    height: 100vh;
+    overflow-x: hidden;
+    position: fixed;
+    top: 0;
+    left: 0;
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: var(--panelShadow);
+    transition-property: transform;
+    transition-duration: 0.25s;
+    transform: translateX(0);
+    z-index: 1001;
+    -webkit-overflow-scrolling: touch;
+
+    &.closed {
+      transform: translateX(100%);
    }
-    .panel:after {
-      border-radius: 0;
+  }
+
+  .mobile-notifications-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 1;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    position: absolute;
+    color: var(--topBarText);
+    background-color: $fallback--fg;
+    background-color: var(--topBar, $fallback--fg);
+    box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+    box-shadow: var(--topBarShadow);
+
+    .title {
+      font-size: 1.3em;
+      margin-left: 0.6em;
    }
-    .panel .panel-heading {
+  }
+
+  .mobile-notifications {
+    margin-top: 50px;
+    width: 100vw;
+    height: calc(100vh - 50px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+
+    .notifications {
+      padding: 0;
      border-radius: 0;
      box-shadow: none;
+      .panel {
+        border-radius: 0;
+        margin: 0;
+        box-shadow: none;
+      }
+      .panel:after {
+        border-radius: 0;
+      }
+      .panel .panel-heading {
+        border-radius: 0;
+        box-shadow: none;
+      }
    }
  }
 }
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@ -27,7 +27,7 @@
          <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
            <div
              v-if="unreadChatCount"
-              class="badge badge-notification unread-chat-count"
+              class="badge badge-notification"
            >
              {{ unreadChatCount }}
            </div>
@ -47,7 +47,7 @@
            />{{ $t("nav.friend_requests") }}
            <span
              v-if="followRequestCount > 0"
-              class="badge follow-request-count"
+              class="badge badge-notification"
            >
              {{ followRequestCount }}
            </span>
@ -84,13 +84,8 @@
    padding: 0;
  }

-  .follow-request-count {
-    vertical-align: baseline;
-    background-color: $fallback--bg;
-    background-color: var(--input, $fallback--faint);
-  }
-
  li {
+    position: relative;
    border-bottom: 1px solid;
    border-color: $fallback--border;
    border-color: var(--border, $fallback--border);
@ -154,5 +149,11 @@
  .fa-scale-110 {
    margin-right: 0.8em;
  }
+
+  .badge {
+    position: absolute;
+    right: 0.6rem;
+    top: 1.25em;
+  }
 }
 </style>
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@ -18,6 +18,8 @@ import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 library.add(
  faCircleNotch
 )
+
+export default {}
 </script>

 <style lang="scss">
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@ -75,7 +75,8 @@ const PostStatusForm = {
    'autoFocus',
    'fileLimit',
    'submitOnEnter',
-    'emojiPickerPlacement'
+    'emojiPickerPlacement',
+    'optimisticPosting'
  ],
  components: {
    MediaUpload,
@ -272,7 +273,7 @@ const PostStatusForm = {
      if (this.preview) this.previewStatus()
    },
    async postStatus (event, newStatus, opts = {}) {
-      if (this.posting) { return }
+      if (this.posting && !this.optimisticPosting) { return }
      if (this.disableSubmit) { return }
      if (this.emojiInputShown) { return }
      if (this.submitOnEnter) {
@ -280,6 +281,8 @@ const PostStatusForm = {
        event.preventDefault()
      }

+      if (this.optimisticPosting && (this.emptyStatus || this.isOverLengthLimit)) { return }
+
      if (this.emptyStatus) {
        this.error = this.$t('post_status.empty_status_error')
        return
@ -528,7 +531,7 @@ const PostStatusForm = {
            !(isFormBiggerThanScroller &&
              this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
      const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
-      const targetScroll = currentScroll + totalDelta
+      const targetScroll = Math.round(currentScroll + totalDelta)

      if (scrollerRef === window) {
        scrollerRef.scroll(0, targetScroll)
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@ -85,11 +85,16 @@
            {{ $t('post_status.preview') }}
            <FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
          </a>
-          <FAIcon
+          <div
            v-show="previewLoading"
-            spin
-            icon="circle-notch"
-          />
+            class="preview-spinner"
+          >
+            <FAIcon
+              class="fa-old-padding"
+              spin
+              icon="circle-notch"
+            />
+          </div>
        </div>
        <div
          v-if="showPreview"
@ -124,7 +129,7 @@
            v-model="newStatus.spoilerText"
            type="text"
            :placeholder="$t('post_status.content_warning')"
-            :disabled="posting"
+            :disabled="posting && !optimisticPosting"
            size="1"
            class="form-post-subject"
          >
@ -150,7 +155,7 @@
            :placeholder="placeholder || $t('post_status.default')"
            rows="1"
            cols="1"
-            :disabled="posting"
+            :disabled="posting && !optimisticPosting"
            class="form-post-body"
            :class="{ 'scrollable-form': !!maxHeight }"
            @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@ -383,12 +388,12 @@
  }

  .preview-heading {
-    padding-left: 0.5em;
    display: flex;
-    width: 100%;
+    padding-left: 0.5em;
  }

  .preview-toggle {
+    flex: 1;
    cursor: pointer;
    user-select: none;

--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@ -4,6 +4,7 @@
    placement="top"
    :offset="{ y: 5 }"
    class="react-button-popover"
+    :bound-to="{ x: 'container' }"
  >
    <div
      slot="content"
@ -12,6 +13,7 @@
      <div class="reaction-picker-filter">
        <input
          v-model="filterWord"
+          size="1"
          :placeholder="$t('emoji.search_emoji')"
        >
      </div>
@ -36,12 +38,13 @@
        <div class="reaction-bottom-fader" />
      </div>
    </div>
-    <FAIcon
-      slot="trigger"
-      class="fa-scale-110 fa-old-padding add-reaction-button"
-      :icon="['far', 'smile-beam']"
-      :title="$t('tool_tip.add_reaction')"
-    />
+    <span slot="trigger">
+      <FAIcon
+        class="fa-scale-110 fa-old-padding add-reaction-button"
+        :icon="['far', 'smile-beam']"
+        :title="$t('tool_tip.add_reaction')"
+      />
+    </span>
  </Popover>
 </template>

--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@ -1,46 +1,47 @@
 <template>
-  <div>
-    <div class="search-bar-container">
-      <a
-        v-if="hidden"
-        href="#"
-        class="nav-icon"
-        :title="$t('nav.search')"
-      ><FAIcon
-        fixed-width
-        class="fa-scale-110 fa-old-padding"
-        icon="search"
-        @click.prevent.stop="toggleHidden"
-      /></a>
-      <template v-else>
-        <input
-          id="search-bar-input"
-          ref="searchInput"
-          v-model="searchTerm"
-          class="search-bar-input"
-          :placeholder="$t('nav.search')"
-          type="text"
-          @keyup.enter="find(searchTerm)"
-        >
-        <button
-          class="btn search-button"
-          @click="find(searchTerm)"
-        >
-          <FAIcon
-            fixed-width
-            icon="search"
-          />
-        </button>
-        <span>
-          <FAIcon
-            fixed-width
-            icon="times"
-            class="cancel-icon fa-scale-110 fa-old-padding"
-            @click.prevent.stop="toggleHidden"
-          />
-        </span>
-      </template>
-    </div>
+  <div
+    class="SearchBar"
+    :class="{ '-expanded': !hidden }"
+  >
+    <a
+      v-if="hidden"
+      href="#"
+      class="nav-icon"
+      :title="$t('nav.search')"
+    ><FAIcon
+      fixed-width
+      class="fa-scale-110 fa-old-padding"
+      icon="search"
+      @click.prevent.stop="toggleHidden"
+    /></a>
+    <template v-else>
+      <input
+        id="search-bar-input"
+        ref="searchInput"
+        v-model="searchTerm"
+        class="search-bar-input"
+        :placeholder="$t('nav.search')"
+        type="text"
+        @keyup.enter="find(searchTerm)"
+      >
+      <button
+        class="btn search-button"
+        @click="find(searchTerm)"
+      >
+        <FAIcon
+          fixed-width
+          icon="search"
+        />
+      </button>
+      <span>
+        <FAIcon
+          fixed-width
+          icon="times"
+          class="cancel-icon fa-scale-110 fa-old-padding"
+          @click.prevent.stop="toggleHidden"
+        />
+      </span>
+    </template>
  </div>
 </template>

@ -49,21 +50,23 @@
 <style lang="scss">
@import '../../_variables.scss';

-.search-bar-container {
-  max-width: 100%;
+.SearchBar {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
  justify-content: flex-end;

+  &.-expanded {
+    width: 100%;
+  }
+
  .search-bar-input,
  .search-button {
    height: 29px;
  }

  .search-bar-input {
-    // TODO: do this properly without a rough guesstimate of 2 icons + paddings
-    max-width: calc(100% - 30px - 30px - 20px);
+    flex: 1 0 auto;
  }

  .cancel-icon {
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@ -126,6 +126,8 @@ library.add(
  faRetweet,
  faReply
 )
+
+export default {}
 </script>

 <style lang="scss">
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -70,7 +70,7 @@
            /> {{ $t("nav.chats") }}
            <span
              v-if="unreadChatCount"
-              class="badge badge-notification unread-chat-count"
+              class="badge badge-notification"
            >
              {{ unreadChatCount }}
            </span>
@ -99,7 +99,7 @@
            /> {{ $t("nav.friend_requests") }}
            <span
              v-if="followRequestCount > 0"
-              class="badge follow-request-count"
+              class="badge badge-notification"
            >
              {{ followRequestCount }}
            </span>
@ -272,12 +272,11 @@
  --lightText: var(--popoverLightText, $fallback--lightText);
  --icon: var(--popoverIcon, $fallback--icon);

-  .follow-request-count {
-    vertical-align: baseline;
-    background-color: $fallback--bg;
-    background-color: var(--input, $fallback--faint);
+  .badge {
+    position: absolute;
+    right: 0.7rem;
+    top: 1em;
  }
-
 }

 .side-drawer-logo-wrapper {
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@ -7,8 +7,9 @@ $status-margin: 0.75em;
  min-width: 0;

  &:hover {
-    --still-image-img: visible;
-    --still-image-canvas: hidden;
+    --_still-image-img-visibility: visible;
+    --_still-image-canvas-visibility: hidden;
+    --_still-image-label-visibility: hidden;
  }

  &.-focused {
@ -58,6 +59,15 @@ $status-margin: 0.75em;
    justify-content: flex-end;
  }

+  ._misclick-prevention & {
+    pointer-events: none;
+
+    .attachments {
+      pointer-events: initial;
+      cursor: initial;
+    }
+  }
+
  .left-side {
    margin-right: $status-margin;
  }
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@ -42,7 +42,7 @@
    width: 100%;
    height: 100%;
    object-fit: contain;
-    visibility: var(--still-image-canvas, visible);
+    visibility: var(--_still-image-canvas-visibility, visible);
  }

  img {
@ -66,16 +66,19 @@
      border-radius: $fallback--tooltipRadius;
      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
      z-index: 2;
-      visibility: var(--still-image-label-visibility, visible);
+      visibility: var(--_still-image-label-visibility, visible);
    }

    &:hover canvas {
      display: none;
    }

-    &:hover::before,
+    &:hover::before {
+      visibility: var(--_still-image-label-visibility, hidden);
+    }
+
    img {
-      visibility: var(--still-image-img, hidden);
+      visibility: var(--_still-image-img-visibility, hidden);
    }

    &:hover img {
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@ -4,8 +4,7 @@
  display: flex;

  .tab-icon {
-    width: 100%;
-    margin: 0.2em 0;
+    margin: 0.2em auto;
    display: block;
  }

--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@ -2,7 +2,7 @@ import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
-import { throttle, keyBy } from 'lodash'
+import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

@ -40,7 +40,8 @@ const Timeline = {
      paused: false,
      unfocused: false,
      bottomedOut: false,
-      virtualScrollIndex: 0
+      virtualScrollIndex: 0,
+      blockingClicks: false
    }
  },
  components: {
@ -70,8 +71,10 @@ const Timeline = {
      }
    },
    classes () {
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
+      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
      return {
-        root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
+        root: rootClasses,
        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
@ -130,6 +133,15 @@ const Timeline = {
    this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
  },
  methods: {
+    stopBlockingClicks: debounce(function () {
+      this.blockingClicks = false
+    }, 1000),
+    blockClicksTemporarily () {
+      if (!this.blockingClicks) {
+        this.blockingClicks = true
+      }
+      this.stopBlockingClicks()
+    },
    handleShortKey (e) {
      // Ignore when input fields are focused
      if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
@ -141,6 +153,7 @@ const Timeline = {
        this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
        this.fetchOlderStatuses()
      } else {
+        this.blockClicksTemporarily()
        this.$store.commit('showNewStatuses', { timeline: this.timelineName })
        this.paused = false
      }
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@ -1,5 +1,5 @@
 <template>
-  <div :class="[classes.root, 'timeline']">
+  <div :class="[classes.root, 'Timeline']">
    <div :class="classes.header">
      <TimelineMenu v-if="!embedded" />
      <div
@ -107,10 +107,14 @@
 <style lang="scss">
@import '../../_variables.scss';

-.timeline {
+.Timeline {
  .loadmore-text {
    opacity: 1;
  }
+
+  &.-blocked {
+    cursor: progress;
+  }
 }

 .timeline-heading {
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@ -20,11 +20,14 @@
@import '../../_variables.scss';

 .Avatar {
-  --still-image-label-visibility: hidden;
+  --_avatarShadowBox: var(--avatarStatusShadow);
+  --_avatarShadowFilter: var(--avatarStatusShadowFilter);
+  --_avatarShadowInset: var(--avatarStatusShadowInset);
+  --_still-image-label-visibility: hidden;

  width: 48px;
  height: 48px;
-  box-shadow: var(--avatarStatusShadow);
+  box-shadow: var(--_avatarShadowBox);
  border-radius: $fallback--avatarRadius;
  border-radius: var(--avatarRadius, $fallback--avatarRadius);

@ -34,8 +37,8 @@
  }

  &.better-shadow {
-    box-shadow: var(--avatarStatusShadowInset);
-    filter: var(--avatarStatusShadowFilter)
+    box-shadow: var(--_avatarShadowInset);
+    filter: var(--_avatarShadowFilter);
  }

  &.animated::before {
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -282,6 +282,11 @@
 .user-card {
  position: relative;

+  &:hover .Avatar {
+    --_still-image-img-visibility: visible;
+    --_still-image-canvas-visibility: hidden;
+  }
+
  .panel-heading {
    padding: .5em 0;
    text-align: center;
@ -382,20 +387,17 @@
    max-height: 56px;

    .Avatar {
+      --_avatarShadowBox: var(--avatarShadow);
+      --_avatarShadowFilter: var(--avatarShadowFilter);
+      --_avatarShadowInset: var(--avatarShadowInset);
+
      flex: 1 0 100%;
      width: 56px;
      height: 56px;
-      box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
-      box-shadow: var(--avatarShadow);
      object-fit: cover;
    }
  }

-  &:hover .Avatar {
-    --still-image-img: visible;
-    --still-image-canvas: hidden;
-  }
-
  &-avatar-link {
    position: relative;
    cursor: pointer;
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@ -20,14 +20,13 @@
          :key="index"
          class="user-profile-field"
        >
+          <!-- eslint-disable vue/no-v-html -->
          <dt
            :title="user.fields_text[index].name"
            class="user-profile-field-name"
            @click.prevent="linkClicked"
-          >
-            {{ field.name }}
-          </dt>
-          <!-- eslint-disable vue/no-v-html -->
+            v-html="field.name"
+          />
          <dd
            :title="user.fields_text[index].value"
            class="user-profile-field-value"