Merge branch 'develop' into fix/signup-without-email

CHANGELOG.md

@@ -2,8 +2,31 @@
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
-
 ## [Unreleased]
+### Changed
+- Removed the use of with_move parameters when fetching notifications
+
+## [2.0.3] - 2020-05-02
+### Fixed
+- Show more/less works correctly with auto-collapsed subjects and long posts
+- RTL characters won't look messed up in notifications
+
+### Changed
+- Emoji autocomplete will match any part of the word and not just start, for example :drool will now helpfully suggest :blobcatdrool: and :blobcatdroolreach:
+
+### Add
+- Follow request notification support
+
+## [2.0.2] - 2020-04-08
+### Fixed
+- Favorite/Repeat avatars not showing up on private instances/non-public posts
+- Autocorrect getting triggered in the captcha field
+- Overflow on long domains in follow/move notifications
+
+### Changed
+- Polish translation updated
+
+## [2.0.0] - 2020-02-28
 ### Added
 - Tons of color slots including ones for hover/pressed/toggled buttons
 - Experimental `--variable[,mod]` syntax support for color slots in themes. the `mod` makes color brighter/darker depending on background color (makes darker color brighter/darker depending on background color)
@@ -16,6 +39,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Emoji reactions for statuses
 - MRF keyword policy disclosure
 ### Changed
+- Updated Pleroma default themes
 - theme engine update to 3 (themes v2.1 introduction)
 - massive internal changes in theme engine - slowly away from "generate things separately with spaghetti code" towards "feed all data into single 'generateTheme' function and declare slot inheritance and all in a separate file"
 - Breezy theme updates to make it closer to actual Breeze in some aspects
@@ -25,11 +49,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Notifications column now cleans itself up to optimize performance when tab is left open for a long time
 - 403 messaging
 ### Fixed
+- Fixed loader-spinner not disappearing when a status preview fails to load
 - anon viewers won't get theme data saved to local storage, so admin changing default theme will have an effect for users coming back to instance.
 - Single notifications left unread when hitting read on another device/tab
 - Registration fixed
 - Deactivation of remote accounts from frontend
 - Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying
+- Improved performance of anything that uses popovers (most notably statuses)
 
 ## [1.1.7 and earlier] - 2019-12-14
 ### Added

package.json

@@ -29,7 +29,6 @@
     "portal-vue": "^2.1.4",
     "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
-    "v-tooltip": "^2.0.2",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",

src/components/account_actions/account_actions.js

@@ -1,4 +1,5 @@
 import ProgressButton from '../progress_button/progress_button.vue'
+import Popover from '../popover/popover.vue'
 
 const AccountActions = {
   props: [
@@ -8,7 +9,8 @@ const AccountActions = {
     return { }
   },
   components: {
-    ProgressButton
+    ProgressButton,
+    Popover
   },
   methods: {
     showRepeats () {

src/components/account_actions/account_actions.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="account-actions">
-    <v-popover
+    <Popover
       trigger="click"
-      class="account-tools-popover"
+      placement="bottom"
-      :container="false"
-      placement="bottom-end"
-      :offset="5"
     >
-      <div slot="popover">
+      <div
+        slot="content"
+        class="account-tools-popover"
+      >
         <div class="dropdown-menu">
           <template v-if="user.following">
             <button
@@ -51,10 +51,13 @@
           </button>
         </div>
       </div>
-      <div class="btn btn-default ellipsis-button">
+      <div
+        slot="trigger"
+        class="btn btn-default ellipsis-button"
+      >
         <i class="icon-ellipsis trigger-button" />
       </div>
-    </v-popover>
+    </Popover>
   </div>
 </template>
 
@@ -62,7 +65,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 .account-actions {
   margin: 0 .8em;
 }
@@ -70,6 +72,7 @@
 .account-actions button.dropdown-item {
   margin-left: 0;
 }
+
 .account-actions .trigger-button {
   color: $fallback--lightText;
   color: var(--lightText, $fallback--lightText);

src/components/emoji_input/suggestor.js

@@ -29,17 +29,29 @@ export default data => input => {
 export const suggestEmoji = emojis => input => {
   const noPrefix = input.toLowerCase().substr(1)
   return emojis
-    .filter(({ displayText }) => displayText.toLowerCase().startsWith(noPrefix))
+    .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))
     .sort((a, b) => {
       let aScore = 0
       let bScore = 0
 
-      // Make custom emojis a priority
+      // An exact match always wins
-      aScore += a.imageUrl ? 10 : 0
+      aScore += a.displayText.toLowerCase() === noPrefix ? 200 : 0
-      bScore += b.imageUrl ? 10 : 0
+      bScore += b.displayText.toLowerCase() === noPrefix ? 200 : 0
 
-      // Sort alphabetically
+      // Prioritize custom emoji a lot
-      const alphabetically = a.displayText > b.displayText ? 1 : -1
+      aScore += a.imageUrl ? 100 : 0
+      bScore += b.imageUrl ? 100 : 0
+
+      // Prioritize prefix matches somewhat
+      aScore += a.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
+      bScore += b.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
+
+      // Sort by length
+      aScore -= a.displayText.length
+      bScore -= b.displayText.length
+
+      // Break ties alphabetically
+      const alphabetically = a.displayText > b.displayText ? 0.5 : -0.5
 
       return bScore - aScore + alphabetically
     })

src/components/emoji_reactions/emoji_reactions.js

@@ -1,20 +1,17 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import Popover from '../popover/popover.vue'
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
 const EmojiReactions = {
   name: 'EmojiReactions',
   components: {
-    UserAvatar
+    UserAvatar,
+    Popover
   },
   props: ['status'],
   data: () => ({
-    showAll: false,
+    showAll: false
-    popperOptions: {
-      modifiers: {
-        preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-      }
-    }
   }),
   computed: {
     tooManyReactions () {

src/components/emoji_reactions/emoji_reactions.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="emoji-reactions">
-    <v-popover
+    <Popover
       v-for="(reaction) in emojiReactions"
       :key="reaction.name"
-      :popper-options="popperOptions"
       trigger="hover"
       placement="top"
+      :offset="{ y: 5 }"
     >
-
       <div
-        slot="popover"
+        slot="content"
         class="reacted-users"
       >
         <div v-if="accountsForEmoji[reaction.name].length">
@@ -24,7 +23,12 @@
               :compact="true"
             />
             <div class="reacted-user-names">
-              <span class="reacted-user-name" v-html="account.name_html" />
+              <!-- eslint-disable vue/no-v-html -->
+              <span
+                class="reacted-user-name"
+                v-html="account.name_html"
+              />
+              <!-- eslint-enable vue/no-v-html -->
               <span class="reacted-user-screen-name">{{ account.screen_name }}</span>
             </div>
           </div>
@@ -34,6 +38,7 @@
         </div>
       </div>
       <button
+        slot="trigger"
         class="emoji-reaction btn btn-default"
         :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
@@ -42,17 +47,16 @@
         <span class="reaction-emoji">{{ reaction.name }}</span>
         <span>{{ reaction.count }}</span>
       </button>
-    </v-popover>
+    </Popover>
     <a
-        v-if="tooManyReactions"
+      v-if="tooManyReactions"
-        @click="toggleShowAll"
+      class="emoji-reaction-expand faint"
-        class="emoji-reaction-expand faint"
+      href="javascript:void(0)"
-        href='javascript:void(0)'
+      @click="toggleShowAll"
-      >
+    >
-        {{ showAll ? $t('general.show_less') : showMoreString }}
+      {{ showAll ? $t('general.show_less') : showMoreString }}
-      </a>
+    </a>
   </div>
-
 </template>
 
 <script src="./emoji_reactions.js" ></script>
@@ -78,6 +82,7 @@
     display: flex;
     flex-direction: column;
     margin-left: 0.5em;
+    min-width: 5em;
 
     img {
       width: 1em;

src/components/extra_buttons/extra_buttons.js

@@ -1,5 +1,8 @@
+import Popover from '../popover/popover.vue'
+
 const ExtraButtons = {
   props: [ 'status' ],
+  components: { Popover },
   methods: {
     deleteStatus () {
       const confirmed = window.confirm(this.$t('status.delete_confirm'))

src/components/extra_buttons/extra_buttons.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-popover
+  <Popover
     v-if="canDelete || canMute || canPin"
     trigger="click"
     placement="top"
     class="extra-button-popover"
   >
-    <div slot="popover">
+    <div slot="content">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -47,17 +47,17 @@
         </button>
       </div>
     </div>
-    <div class="button-icon">
+    <i
-      <i class="icon-ellipsis" />
+      slot="trigger"
-    </div>
+      class="icon-ellipsis button-icon"
-  </v-popover>
+    />
+  </Popover>
 </template>
 
 <script src="./extra_buttons.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 
 .icon-ellipsis {
   cursor: pointer;

src/components/follow_request_card/follow_request_card.js

@@ -1,4 +1,5 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 
 const FollowRequestCard = {
   props: ['user'],
@@ -6,13 +7,32 @@ const FollowRequestCard = {
     BasicUserCard
   },
   methods: {
+    findFollowRequestNotificationId () {
+      const notif = notificationsFromStore(this.$store).find(
+        (notif) => notif.from_profile.id === this.user.id && notif.type === 'follow_request'
+      )
+      return notif && notif.id
+    },
     approveUser () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
+
+      const notifId = this.findFollowRequestNotificationId()
+      this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
+      this.$store.dispatch('updateNotification', {
+        id: notifId,
+        updater: notification => {
+          notification.type = 'follow'
+        }
+      })
     },
     denyUser () {
+      const notifId = this.findFollowRequestNotificationId()
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
-      this.$store.dispatch('removeFollowRequest', this.user)
+        .then(() => {
+          this.$store.dispatch('dismissNotificationLocal', { id: notifId })
+          this.$store.dispatch('removeFollowRequest', this.user)
+        })
     }
   }
 }

src/components/moderation_tools/moderation_tools.js

@@ -1,4 +1,5 @@
 import DialogModal from '../dialog_modal/dialog_modal.vue'
+import Popover from '../popover/popover.vue'
 
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -14,7 +15,6 @@ const ModerationTools = {
   ],
   data () {
     return {
-      showDropDown: false,
       tags: {
         FORCE_NSFW,
         STRIP_MEDIA,
@@ -24,11 +24,13 @@ const ModerationTools = {
         SANDBOX,
         QUARANTINE
       },
-      showDeleteUserDialog: false
+      showDeleteUserDialog: false,
+      toggled: false
     }
   },
   components: {
-    DialogModal
+    DialogModal,
+    Popover
   },
   computed: {
     tagsSet () {
@@ -89,6 +91,9 @@ const ModerationTools = {
             window.history.back()
           }
         })
+    },
+    setToggled (value) {
+      this.toggled = value
     }
   }
 }

src/components/moderation_tools/moderation_tools.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
-    <v-popover
+    <Popover
       trigger="click"
       class="moderation-tools-popover"
-      placement="bottom-end"
+      placement="bottom"
-      @show="showDropDown = true"
+      :offset="{ y: 5 }"
-      @hide="showDropDown = false"
+      @show="setToggled(true)"
+      @close="setToggled(false)"
     >
-      <div slot="popover">
+      <div slot="content">
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -122,12 +123,13 @@
         </div>
       </div>
       <button
+        slot="trigger"
         class="btn btn-default btn-block"
-        :class="{ toggled: showDropDown }"
+        :class="{ toggled }"
       >
         {{ $t('user_card.admin_menu.moderation') }}
       </button>
-    </v-popover>
+    </Popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"
@@ -160,7 +162,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 
 .menu-checkbox {
   float: right;

src/components/notification/notification.js

@@ -2,6 +2,7 @@ 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 { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -32,6 +33,24 @@ const Notification = {
     },
     toggleMute () {
       this.unmuted = !this.unmuted
+    },
+    approveUser () {
+      this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
+      this.$store.dispatch('removeFollowRequest', this.user)
+      this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
+      this.$store.dispatch('updateNotification', {
+        id: this.notification.id,
+        updater: notification => {
+          notification.type = 'follow'
+        }
+      })
+    },
+    denyUser () {
+      this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
+        .then(() => {
+          this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
+          this.$store.dispatch('removeFollowRequest', this.user)
+        })
     }
   },
   computed: {
@@ -57,6 +76,9 @@ const Notification = {
     },
     needMute () {
       return this.user.muted
+    },
+    isStatusNotification () {
+      return isStatusNotification(this.notification.type)
     }
   }
 }

src/components/notification/notification.vue

@@ -47,7 +47,7 @@
         <span class="notification-details">
           <div class="name-and-action">
             <!-- eslint-disable vue/no-v-html -->
-            <span
+            <bdi
               v-if="!!notification.from_profile.name_html"
               class="username"
               :title="'@'+notification.from_profile.screen_name"
@@ -74,6 +74,10 @@
               <i class="fa icon-user-plus lit" />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
+            <span v-if="notification.type === 'follow_request'">
+              <i class="fa icon-user lit" />
+              <small>{{ $t('notifications.follow_request') }}</small>
+            </span>
             <span v-if="notification.type === 'move'">
               <i class="fa icon-arrow-curved lit" />
               <small>{{ $t('notifications.migrated_to') }}</small>
@@ -87,18 +91,7 @@
             </span>
           </div>
           <div
-            v-if="notification.type === 'follow' || notification.type === 'move'"
+            v-if="isStatusNotification"
-            class="timeago"
-          >
-            <span class="faint">
-              <Timeago
-                :time="notification.created_at"
-                :auto-update="240"
-              />
-            </span>
-          </div>
-          <div
-            v-else
             class="timeago"
           >
             <router-link
@@ -112,6 +105,17 @@
               />
             </router-link>
           </div>
+          <div
+            v-else
+            class="timeago"
+          >
+            <span class="faint">
+              <Timeago
+                :time="notification.created_at"
+                :auto-update="240"
+              />
+            </span>
+          </div>
           <a
             v-if="needMute"
             href="#"
@@ -119,12 +123,30 @@
           ><i class="button-icon icon-eye-off" /></a>
         </span>
         <div
-          v-if="notification.type === 'follow'"
+          v-if="notification.type === 'follow' || notification.type === 'follow_request'"
           class="follow-text"
         >
-          <router-link :to="userProfileLink">
+          <router-link
+            :to="userProfileLink"
+            class="follow-name"
+          >
             @{{ notification.from_profile.screen_name }}
           </router-link>
+          <div
+            v-if="notification.type === 'follow_request'"
+            style="white-space: nowrap;"
+          >
+            <i
+              class="icon-ok button-icon follow-request-accept"
+              :title="$t('tool_tip.accept_follow_request')"
+              @click="approveUser()"
+            />
+            <i
+              class="icon-cancel button-icon follow-request-reject"
+              :title="$t('tool_tip.reject_follow_request')"
+              @click="denyUser()"
+            />
+          </div>
         </div>
         <div
           v-else-if="notification.type === 'move'"

src/components/notifications/notifications.scss

@@ -79,8 +79,38 @@
     }
   }
 
+  .follow-request-accept {
+    cursor: pointer;
+
+    &:hover {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+  }
+
+  .follow-request-reject {
+    cursor: pointer;
+
+    &:hover {
+      color: $fallback--cRed;
+      color: var(--cRed, $fallback--cRed);
+    }
+  }
+
+
   .follow-text, .move-text {
     padding: 0.5em 0;
+    overflow-wrap: break-word;
+    display: flex;
+    justify-content: space-between;
+
+    .follow-name {
+      display: block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .status-el {
@@ -142,6 +172,11 @@
       color: var(--cGreen, $fallback--cGreen);
     }
 
+    .icon-user.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+
     .icon-user-plus.lit {
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);

src/components/popover/popover.js

@@ -0,0 +1,156 @@
+
+const Popover = {
+  name: 'Popover',
+  props: {
+    // Action to trigger popover: either 'hover' or 'click'
+    trigger: String,
+    // Either 'top' or 'bottom'
+    placement: String,
+    // Takes object with properties 'x' and 'y', values of these can be
+    // 'container' for using offsetParent as boundaries for either axis
+    // or 'viewport'
+    boundTo: Object,
+    // Takes a top/bottom/left/right object, how much space to leave
+    // between boundary and popover element
+    margin: Object,
+    // Takes a x/y object and tells how many pixels to offset from
+    // anchor point on either axis
+    offset: Object,
+    // Additional styles you may want for the popover container
+    popoverClass: String
+  },
+  data () {
+    return {
+      hidden: true,
+      styles: { opacity: 0 },
+      oldSize: { width: 0, height: 0 }
+    }
+  },
+  methods: {
+    updateStyles () {
+      if (this.hidden) {
+        this.styles = {
+          opacity: 0
+        }
+        return
+      }
+
+      // Popover will be anchored around this element, trigger ref is the container, so
+      // its children are what are inside the slot. Expect only one slot="trigger".
+      const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
+      const screenBox = anchorEl.getBoundingClientRect()
+      // Screen position of the origin point for popover
+      const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
+      const content = this.$refs.content
+      // Minor optimization, don't call a slow reflow call if we don't have to
+      const parentBounds = this.boundTo &&
+        (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
+        this.$el.offsetParent.getBoundingClientRect()
+      const margin = this.margin || {}
+
+      // What are the screen bounds for the popover? Viewport vs container
+      // when using viewport, using default margin values to dodge the navbar
+      const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
+        min: parentBounds.left + (margin.left || 0),
+        max: parentBounds.right - (margin.right || 0)
+      } : {
+        min: 0 + (margin.left || 10),
+        max: window.innerWidth - (margin.right || 10)
+      }
+
+      const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
+        min: parentBounds.top + (margin.top || 0),
+        max: parentBounds.bottom - (margin.bottom || 0)
+      } : {
+        min: 0 + (margin.top || 50),
+        max: window.innerHeight - (margin.bottom || 5)
+      }
+
+      let horizOffset = 0
+
+      // If overflowing from left, move it so that it doesn't
+      if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
+        horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
+      }
+
+      // If overflowing from right, move it so that it doesn't
+      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
+        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
+      }
+
+      // Default to whatever user wished with placement prop
+      let usingTop = this.placement !== 'bottom'
+
+      // Handle special cases, first force to displaying on top if there's not space on bottom,
+      // regardless of what placement value was. Then check if there's not space on top, and
+      // force to bottom, again regardless of what placement value was.
+      if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
+      if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
+
+      const yOffset = (this.offset && this.offset.y) || 0
+      const translateY = usingTop
+        ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
+        : yOffset
+
+      const xOffset = (this.offset && this.offset.x) || 0
+      const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
+
+      // Note, separate translateX and translateY avoids blurry text on chromium,
+      // single translate or translate3d resulted in blurry text.
+      this.styles = {
+        opacity: 1,
+        transform: `translateX(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)`
+      }
+    },
+    showPopover () {
+      if (this.hidden) this.$emit('show')
+      this.hidden = false
+      this.$nextTick(this.updateStyles)
+    },
+    hidePopover () {
+      if (!this.hidden) this.$emit('close')
+      this.hidden = true
+      this.styles = { opacity: 0 }
+    },
+    onMouseenter (e) {
+      if (this.trigger === 'hover') this.showPopover()
+    },
+    onMouseleave (e) {
+      if (this.trigger === 'hover') this.hidePopover()
+    },
+    onClick (e) {
+      if (this.trigger === 'click') {
+        if (this.hidden) {
+          this.showPopover()
+        } else {
+          this.hidePopover()
+        }
+      }
+    },
+    onClickOutside (e) {
+      if (this.hidden) return
+      if (this.$el.contains(e.target)) return
+      this.hidePopover()
+    }
+  },
+  updated () {
+    // Monitor changes to content size, update styles only when content sizes have changed,
+    // that should be the only time we need to move the popover box if we don't care about scroll
+    // or resize
+    const content = this.$refs.content
+    if (!content) return
+    if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
+      this.updateStyles()
+      this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
+    }
+  },
+  created () {
+    document.addEventListener('click', this.onClickOutside)
+  },
+  destroyed () {
+    document.removeEventListener('click', this.onClickOutside)
+    this.hidePopover()
+  }
+}
+
+export default Popover

src/components/popover/popover.vue

@@ -0,0 +1,118 @@
+<template>
+  <div
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <div
+      ref="trigger"
+      @click="onClick"
+    >
+      <slot name="trigger" />
+    </div>
+    <div
+      v-if="!hidden"
+      ref="content"
+      :style="styles"
+      class="popover"
+      :class="popoverClass"
+    >
+      <slot
+        name="content"
+        class="popover-inner"
+        :close="hidePopover"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./popover.js" />
+
+<style lang=scss>
+@import '../../_variables.scss';
+
+.popover {
+  z-index: 8;
+  position: absolute;
+  min-width: 0;
+  transition: opacity 0.3s;
+
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
+
+  background-color: $fallback--bg;
+  background-color: var(--popover, $fallback--bg);
+  color: $fallback--text;
+  color: var(--popoverText, $fallback--text);
+  --faint: var(--popoverFaintText, $fallback--faint);
+  --faintLink: var(--popoverFaintLink, $fallback--faint);
+  --lightText: var(--popoverLightText, $fallback--lightText);
+  --postLink: var(--popoverPostLink, $fallback--link);
+  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
+  --icon: var(--popoverIcon, $fallback--icon);
+}
+
+.dropdown-menu {
+  display: block;
+  padding: .5rem 0;
+  font-size: 1rem;
+  text-align: left;
+  list-style: none;
+  max-width: 100vw;
+  z-index: 10;
+  white-space: nowrap;
+
+  .dropdown-divider {
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border, $fallback--border);
+  }
+
+  .dropdown-item {
+    line-height: 21px;
+    margin-right: 5px;
+    overflow: auto;
+    display: block;
+    padding: .25rem 1.0rem .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    text-align: inherit;
+    white-space: nowrap;
+    border: none;
+    border-radius: 0px;
+    background-color: transparent;
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+
+    --btnText: var(--popoverText, $fallback--text);
+
+    &-icon {
+      padding-left: 0.5rem;
+
+      i {
+        margin-right: 0.25rem;
+        color: var(--menuPopoverIcon, $fallback--icon)
+      }
+    }
+
+    &:active, &:hover {
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenuPopover, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuPopoverText, $fallback--link);
+      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
+      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
+      i {
+        color: var(--selectedMenuPopoverIcon, $fallback--icon);
+      }
+    }
+
+  }
+}
+</style>

src/components/popper/popper.scss

@@ -1,164 +0,0 @@
-@import '../../_variables.scss';
-
-.tooltip.popover {
-  z-index: 8;
-
-  .popover-inner {
-    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-    box-shadow: var(--panelShadow);
-    border-radius: $fallback--btnRadius;
-    border-radius: var(--btnRadius, $fallback--btnRadius);
-    background-color: $fallback--bg;
-    background-color: var(--popover, $fallback--bg);
-    color: $fallback--text;
-    color: var(--popoverText, $fallback--text);
-    --faint: var(--popoverFaintText, $fallback--faint);
-    --faintLink: var(--popoverFaintLink, $fallback--faint);
-    --lightText: var(--popoverLightText, $fallback--lightText);
-    --postLink: var(--popoverPostLink, $fallback--link);
-    --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-    --icon: var(--popoverIcon, $fallback--icon);
-  }
-
-  .popover-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: $fallback--bg;
-    border-color: var(--bg, $fallback--bg);
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .popover-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .popover-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: 5px;
-
-    .popover-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -4px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: 5px;
-
-    .popover-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -4px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s, visibility .15s;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity .15s;
-  }
-}
-
-.dropdown-menu {
-  display: block;
-  padding: .5rem 0;
-  font-size: 1rem;
-  text-align: left;
-  list-style: none;
-  max-width: 100vw;
-  z-index: 10;
-
-  .dropdown-divider {
-    height: 0;
-    margin: .5rem 0;
-    overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
-  }
-
-  .dropdown-item {
-    line-height: 21px;
-    margin-right: 5px;
-    overflow: auto;
-    display: block;
-    padding: .25rem 1.0rem .25rem 1.5rem;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: normal;
-    border: none;
-    border-radius: 0px;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-
-    --btnText: var(--popoverText, $fallback--text);
-
-    &-icon {
-      padding-left: 0.5rem;
-
-      i {
-        margin-right: 0.25rem;
-      }
-    }
-
-    &:active, &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      i {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-  }
-}

src/components/react_button/react_button.js

@@ -1,34 +1,25 @@
+import Popover from '../popover/popover.vue'
 import { mapGetters } from 'vuex'
 
 const ReactButton = {
   props: ['status', 'loggedIn'],
   data () {
     return {
-      showTooltip: false,
+      filterWord: ''
-      filterWord: '',
-      popperOptions: {
-        modifiers: {
-          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-        }
-      }
     }
   },
+  components: {
+    Popover
+  },
   methods: {
-    openReactionSelect () {
+    addReaction (event, emoji, close) {
-      this.showTooltip = true
-      this.filterWord = ''
-    },
-    closeReactionSelect () {
-      this.showTooltip = false
-    },
-    addReaction (event, emoji) {
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
       } else {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
-      this.closeReactionSelect()
+      close()
     }
   },
   computed: {

src/components/react_button/react_button.vue

@@ -1,13 +1,14 @@
 <template>
-  <v-popover
+  <Popover
-    :popper-options="popperOptions"
+    trigger="click"
-    :open="showTooltip"
-    trigger="manual"
     placement="top"
+    :offset="{ y: 5 }"
     class="react-button-popover"
-    @hide="closeReactionSelect"
   >
-    <div slot="popover">
+    <div
+      slot="content"
+      slot-scope="{close}"
+    >
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
@@ -19,7 +20,7 @@
           v-for="emoji in commonEmojis"
           :key="emoji"
           class="emoji-button"
-          @click="addReaction($event, emoji)"
+          @click="addReaction($event, emoji, close)"
         >
           {{ emoji }}
         </span>
@@ -28,23 +29,20 @@
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-button"
-          @click="addReaction($event, emoji.replacement)"
+          @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
         </span>
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <div
+    <i
       v-if="loggedIn"
-      @click.prevent="openReactionSelect"
+      slot="trigger"
-    >
+      class="icon-smile button-icon add-reaction-button"
-      <i
+      :title="$t('tool_tip.add_reaction')"
-        class="icon-smile button-icon add-reaction-button"
+    />
-        :title="$t('tool_tip.add_reaction')"
+  </Popover>
-      />
-    </div>
-  </v-popover>
 </template>
 
 <script src="./react_button.js" ></script>

src/components/registration/registration.vue

@@ -187,6 +187,9 @@
                   class="form-control"
                   type="text"
                   autocomplete="off"
+                  autocorrect="off"
+                  autocapitalize="off"
+                  spellcheck="false"
                 >
               </template>
             </div>

src/components/status/status.js

@@ -188,23 +188,22 @@ const Status = {
       }
       return this.status.attentions.length > 0
     },
+
+    // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
+    mightHideBecauseSubject () {
+      return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault)
+    },
+    mightHideBecauseTall () {
+      return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault)
+    },
     hideSubjectStatus () {
-      if (this.tallStatus && !this.localCollapseSubjectDefault) {
+      return this.mightHideBecauseSubject && !this.expandingSubject
-        return false
-      }
-      return !this.expandingSubject && this.status.summary
     },
     hideTallStatus () {
-      if (this.status.summary && this.localCollapseSubjectDefault) {
+      return this.mightHideBecauseTall && !this.showingTall
-        return false
-      }
-      if (this.showingTall) {
-        return false
-      }
-      return this.tallStatus
     },
     showingMore () {
-      return (this.tallStatus && this.showingTall) || (this.status.summary && this.expandingSubject)
+      return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
     },
     nsfwClickthrough () {
       if (!this.status.nsfw) {
@@ -408,14 +407,10 @@ const Status = {
       this.userExpanded = !this.userExpanded
     },
     toggleShowMore () {
-      if (this.showingTall) {
+      if (this.mightHideBecauseTall) {
-        this.showingTall = false
+        this.showingTall = !this.showingTall
-      } else if (this.expandingSubject && this.status.summary) {
+      } else if (this.mightHideBecauseSubject) {
-        this.expandingSubject = false
+        this.expandingSubject = !this.expandingSubject
-      } else if (this.hideTallStatus) {
-        this.showingTall = true
-      } else if (this.hideSubjectStatus && this.status.summary) {
-        this.expandingSubject = true
       }
     },
     generateUserProfileLink (id, name) {

src/components/status/status.vue

@@ -177,6 +177,8 @@
                 <StatusPopover
                   v-if="!isPreview"
                   :status-id="status.in_reply_to_status_id"
+                  class="reply-to-popover"
+                  style="min-width: 0"
                 >
                   <a
                     class="reply-to"
@@ -572,11 +574,10 @@ $status-margin: 0.75em;
       align-items: stretch;
 
       > .reply-to-and-accountname > a {
+        overflow: hidden;
         max-width: 100%;
         text-overflow: ellipsis;
-        overflow: hidden;
         white-space: nowrap;
-        display: inline-block;
         word-break: break-all;
       }
     }
@@ -585,7 +586,6 @@ $status-margin: 0.75em;
       display: flex;
       height: 18px;
       margin-right: 0.5em;
-      overflow: hidden;
       max-width: 100%;
       .icon-reply {
         transform: scaleX(-1);
@@ -596,6 +596,10 @@ $status-margin: 0.75em;
       display: flex;
     }
 
+    .reply-to-popover {
+      min-width: 0;
+    }
+
     .reply-to {
       display: flex;
     }
@@ -603,6 +607,7 @@ $status-margin: 0.75em;
     .reply-to-text {
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
       margin: 0 0.4em 0 0.2em;
     }
 

src/components/status_popover/status_popover.js

@@ -7,11 +7,7 @@ const StatusPopover = {
   ],
   data () {
     return {
-      popperOptions: {
+      error: false
-        modifiers: {
-          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-        }
-      }
     }
   },
   computed: {
@@ -20,12 +16,15 @@ const StatusPopover = {
     }
   },
   components: {
-    Status: () => import('../status/status.vue')
+    Status: () => import('../status/status.vue'),
+    Popover: () => import('../popover/popover.vue')
   },
   methods: {
     enter () {
       if (!this.status) {
         this.$store.dispatch('fetchStatus', this.statusId)
+          .then(data => (this.error = false))
+          .catch(e => (this.error = true))
       }
     }
   }

src/components/status_popover/status_popover.vue

@@ -1,27 +1,36 @@
 <template>
-  <v-popover
+  <Popover
+    trigger="hover"
     popover-class="status-popover"
-    placement="top-start"
+    :bound-to="{ x: 'container' }"
-    :popper-options="popperOptions"
+    @show="enter"
-    @show="enter()"
   >
-    <template slot="popover">
+    <template slot="trigger">
+      <slot />
+    </template>
+    <div
+      slot="content"
+    >
       <Status
         v-if="status"
         :is-preview="true"
         :statusoid="status"
         :compact="true"
       />
+      <div
+        v-else-if="error"
+        class="status-preview-no-content faint"
+      >
+        {{ $t('status.status_unavailable') }}
+      </div>
       <div
         v-else
-        class="status-preview-loading"
+        class="status-preview-no-content"
       >
         <i class="icon-spin4 animate-spin" />
       </div>
-    </template>
+    </div>
-
+  </Popover>
-    <slot />
-  </v-popover>
 </template>
 
 <script src="./status_popover.js" ></script>
@@ -29,50 +38,25 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.tooltip.popover.status-popover {
+.status-popover {
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  margin-left: 0.5em;
 
-  .popover-inner {
+  border-color: $fallback--border;
-    border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
-    border-color: var(--border, $fallback--border);
+  border-style: solid;
-    border-style: solid;
+  border-width: 1px;
-    border-width: 1px;
+  border-radius: $fallback--tooltipRadius;
-    border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
-    box-shadow: var(--popupShadow);
-  }
-
-  .popover-arrow::before {
-    position: absolute;
-    content: '';
-    left: -7px;
-    border: solid 7px transparent;
-    z-index: -1;
-  }
-
-  &[x-placement^="bottom-start"] .popover-arrow::before {
-    top: -2px;
-    border-top-width: 0;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &[x-placement^="top-start"] .popover-arrow::before {
-    bottom: -2px;
-    border-bottom-width: 0;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
-  }
 
   .status-el.status-el {
     border: none;
   }
 
-  .status-preview-loading {
+  .status-preview-no-content {
     padding: 1em;
     text-align: center;
 

src/i18n/en.json

@@ -124,6 +124,7 @@
     "broken_favorite": "Unknown status, searching for it...",
     "favorited_you": "favorited your status",
     "followed_you": "followed you",
+    "follow_request": "wants to follow you",
     "load_older": "Load older notifications",
     "notifications": "Notifications",
     "read": "Read!",
@@ -615,7 +616,8 @@
     "reply_to": "Reply to",
     "replies_list": "Replies:",
     "mute_conversation": "Mute conversation",
-    "unmute_conversation": "Unmute conversation"
+    "unmute_conversation": "Unmute conversation",
+    "status_unavailable": "Status unavailable"
   },
   "user_card": {
     "approve": "Approve",
@@ -696,7 +698,9 @@
     "reply": "Reply",
     "favorite": "Favorite",
     "add_reaction": "Add Reaction",
-    "user_settings": "User Settings"
+    "user_settings": "User Settings",
+    "accept_follow_request": "Accept follow request",
+    "reject_follow_request": "Reject follow request"
   },
   "upload":{
     "error": {

src/i18n/fi.json

@@ -289,7 +289,8 @@
     "reply_to": "Vastaus",
     "replies_list": "Vastaukset:",
     "mute_conversation": "Hiljennä keskustelu",
-    "unmute_conversation": "Poista hiljennys"
+    "unmute_conversation": "Poista hiljennys",
+    "status_unavailable": "Viesti ei saatavissa"
   },
   "user_card": {
     "approve": "Hyväksy",

src/i18n/pl.json

@@ -1,7 +1,47 @@
 {
+  "about": {
+    "mrf": {
+      "federation": "Federacja",
+      "keyword": {
+        "keyword_policies": "Zasady słów kluczowych",
+        "ftl_removal": "Usunięcie z \"Całej znanej sieci\"",
+        "reject": "Odrzucanie",
+        "replace": "Zastąpienie",
+        "is_replaced_by": "→"
+      },
+      "mrf_policies": "Włączone zasady MRF",
+      "mrf_policies_desc": "Zasady MRF zmieniają zachowanie federowania instancji. Następujące zasady są włączone:",
+      "simple": {
+        "simple_policies": "Zasady specyficzne dla instancji",
+        "accept": "Akceptowanie",
+        "accept_desc": "Ta instancja akceptuje tylko posty z wymienionych instancji:",
+        "reject": "Odrzucanie",
+        "reject_desc": "Ta instancja odrzuca posty z wymienionych instancji:",
+        "quarantine": "Kwarantanna",
+        "quarantine_desc": "Ta instancja wysyła tylko publiczne posty do wymienionych instancji:",
+        "ftl_removal": "Usunięcie z \"Całej znanej sieci\"",
+        "ftl_removal_desc": "Ta instancja usuwa te instancje z \"Całej znanej sieci\"",
+        "media_removal": "Usuwanie multimediów",
+        "media_removal_desc": "Ta instancja usuwa multimedia z postów od wymienionych instancji:",
+        "media_nsfw": "Multimedia ustawione jako wrażliwe",
+        "media_nsfw_desc": "Ta instancja wymusza, by multimedia z wymienionych instancji były ustawione jako wrażliwe:"
+      }
+    },
+    "staff": "Obsługa"
+  },
   "chat": {
     "title": "Czat"
   },
+  "domain_mute_card": {
+    "mute": "Wycisz",
+    "mute_progress": "Wyciszam...",
+    "unmute": "Odcisz",
+    "unmute_progress": "Odciszam..."
+  },
+  "exporter": {
+    "export": "Eksportuj",
+    "processing": "Przetwarzam, za chwilę zostaniesz zapytany o ściągnięcie pliku"
+  },
   "features_panel": {
     "chat": "Czat",
     "gopher": "Gopher",
@@ -20,7 +60,15 @@
     "submit": "Wyślij",
     "more": "Więcej",
     "generic_error": "Wystąpił błąd",
-    "optional": "nieobowiązkowe"
+    "optional": "nieobowiązkowe",
+    "show_more": "Pokaż więcej",
+    "show_less": "Pokaż mniej",
+    "dismiss": "Odrzuć",
+    "cancel": "Anuluj",
+    "disable": "Wyłącz",
+    "enable": "Włącz",
+    "confirm": "Potwierdź",
+    "verify": "Zweryfikuj"
   },
   "image_cropper": {
     "crop_picture": "Przytnij obrazek",
@@ -28,6 +76,11 @@
     "save_without_cropping": "Zapisz bez przycinania",
     "cancel": "Anuluj"
   },
+  "importer": {
+    "submit": "Wyślij",
+    "success": "Zaimportowano pomyślnie",
+    "error": "Wystąpił błąd podczas importowania pliku."
+  },
   "login": {
     "login": "Zaloguj",
     "description": "Zaloguj używając OAuth",
@@ -36,7 +89,15 @@
     "placeholder": "n.p. lain",
     "register": "Zarejestruj",
     "username": "Użytkownik",
-    "hint": "Zaloguj się, aby dołączyć do dyskusji"
+    "hint": "Zaloguj się, aby dołączyć do dyskusji",
+    "authentication_code": "Kod weryfikacyjny",
+    "enter_recovery_code": "Wprowadź kod zapasowy",
+    "enter_two_factor_code": "Wprowadź kod weryfikacyjny",
+    "recovery_code": "Kod zapasowy",
+    "heading" : {
+      "totp" : "Weryfikacja dwuetapowa",
+      "recovery" : "Zapasowa weryfikacja dwuetapowa"
+    }
   },
   "media_modal": {
     "previous": "Poprzednie",
@@ -44,15 +105,18 @@
   },
   "nav": {
     "about": "O nas",
+    "administration": "Administracja",
     "back": "Wróć",
     "chat": "Lokalny czat",
     "friend_requests": "Prośby o możliwość obserwacji",
     "mentions": "Wzmianki",
+    "interactions": "Interakcje",
     "dms": "Wiadomości prywatne",
     "public_tl": "Publiczna oś czasu",
     "timeline": "Oś czasu",
     "twkn": "Cała znana sieć",
     "user_search": "Wyszukiwanie użytkowników",
+    "search": "Wyszukiwanie",
     "who_to_follow": "Sugestie obserwacji",
     "preferences": "Preferencje"
   },
@@ -64,7 +128,40 @@
     "notifications": "Powiadomienia",
     "read": "Przeczytane!",
     "repeated_you": "powtórzył(-a) twój status",
-    "no_more_notifications": "Nie masz więcej powiadomień"
+    "no_more_notifications": "Nie masz więcej powiadomień",
+    "migrated_to": "wyemigrował do",
+    "reacted_with": "zareagował z {0}"
+  },
+  "polls": {
+    "add_poll": "Dodaj ankietę",
+    "add_option": "Dodaj opcję",
+    "option": "Opcja",
+    "votes": "głosów",
+    "vote": "Głosuj",
+    "type": "Typ ankiety",
+    "single_choice": "jednokrotnego wyboru",
+    "multiple_choices": "wielokrotnego wyboru",
+    "expiry": "Czas trwania ankiety",
+    "expires_in": "Ankieta kończy się za{0}",
+    "expired": "Ankieta skończyła się {0} temu",
+    "not_enough_options": "Zbyt mało unikalnych opcji w ankiecie"
+  },
+  "emoji": {
+    "stickers": "Naklejki",
+    "emoji": "Emoji",
+    "keep_open": "Zostaw selektor otwarty",
+    "search_emoji": "Wyszukaj emoji",
+    "add_emoji": "Wstaw emoji",
+    "custom": "Niestandardowe emoji",
+    "unicode": "Emoji unicode",
+    "load_all_hint": "Załadowano pierwsze {saneAmount} emoji, Załadowanie wszystkich emoji może spowodować problemy z wydajnością.",
+    "load_all": "Ładuję wszystkie {emojiAmount} emoji"
+  },
+  "interactions": {
+    "favs_repeats": "Powtórzenia i ulubione",
+    "follows": "Nowi obserwujący",
+    "moves": "Użytkownik migruje",
+    "load_older": "Załaduj starsze interakcje"
   },
   "post_status": {
     "new_status": "Dodaj nowy status",
@@ -79,8 +176,14 @@
     },
     "content_warning": "Temat (nieobowiązkowy)",
     "default": "Właśnie wróciłem z kościoła",
-    "direct_warning": "Ten wpis zobaczą tylko osoby, o których wspomniałeś(-aś).",
+    "direct_warning_to_all": "Ten wpis zobaczą wszystkie osoby, o których wspomniałeś(-aś).",
+    "direct_warning_to_first_only": "Ten wpis zobaczą tylko te osoby, o których wspomniałeś(-aś) na początku wiadomości.",
     "posting": "Wysyłanie",
+    "scope_notice": {
+      "public": "Ten post będzie widoczny dla każdego",
+      "private": "Ten post będzie widoczny tylko dla twoich obserwujących",
+      "unlisted": "Ten post nie będzie widoczny na publicznej osi czasu i całej znanej sieci"
+    },
     "scope": {
       "direct": "Bezpośredni – Tylko dla wspomnianych użytkowników",
       "private": "Tylko dla obserwujących – Umieść dla osób, które cię obserwują",
@@ -109,8 +212,40 @@
       "password_confirmation_match": "musi być takie jak hasło"
     }
   },
+  "remote_user_resolver": {
+    "remote_user_resolver": "Wyszukiwarka użytkowników nietutejszych",
+    "searching_for": "Szukam",
+    "error": "Nie znaleziono."
+  },
+  "selectable_list": {
+    "select_all": "Zaznacz wszystko"
+  },
   "settings": {
     "app_name": "Nazwa aplikacji",
+    "security": "Bezpieczeństwo",
+    "enter_current_password_to_confirm": "Wprowadź obecne hasło, by potwierdzić twoją tożsamość",
+    "mfa": {
+      "otp" : "OTP",
+      "setup_otp" : "Ustaw OTP",
+      "wait_pre_setup_otp" : "początkowe ustawianie OTP",
+      "confirm_and_enable" : "Potwierdź i włącz OTP",
+      "title": "Weryfikacja dwuetapowa",
+      "generate_new_recovery_codes" : "Wygeneruj nowe kody zapasowe",
+      "warning_of_generate_new_codes" : "Po tym gdy generujesz nowe kody zapasowe, stare przestaną działać.",
+      "recovery_codes" : "Kody zapasowe.",
+      "waiting_a_recovery_codes": "Otrzymuję kody zapasowe...",
+      "recovery_codes_warning" : "Spisz kody na kartce papieru, albo zapisz je w bezpiecznym miejscu - inaczej nie zobaczysz ich już nigdy. Jeśli stracisz dostęp do twojej aplikacji 2FA i kodów zapasowych, nie będziesz miał dostępu do swojego konta.",
+      "authentication_methods" : "Metody weryfikacji",
+      "scan": {
+        "title": "Skanuj",
+        "desc": "Zeskanuj ten kod QR używając twojej aplikacji 2FA albo wpisz ten klucz:",
+        "secret_code": "Klucz"
+      },
+      "verify": {
+        "desc": "By włączyć weryfikację dwuetapową, wpisz kod z twojej aplikacji 2FA:"
+      }
+    },
+    "allow_following_move": "Zezwalaj na automatyczną obserwację gdy obserwowane konto migruje",
     "attachmentRadius": "Załączniki",
     "attachments": "Załączniki",
     "autoload": "Włącz automatyczne ładowanie po przewinięciu do końca strony",
@@ -119,12 +254,20 @@
     "avatarRadius": "Awatary",
     "background": "Tło",
     "bio": "Bio",
+    "block_export": "Eksport blokad",
+    "block_export_button": "Eksportuj twoje blokady do pliku .csv",
+    "block_import": "Import blokad",
+    "block_import_error": "Wystąpił błąd podczas importowania blokad",
+    "blocks_imported": "Zaimportowano blokady, przetwarzanie może zająć trochę czasu.",
     "blocks_tab": "Bloki",
     "btnRadius": "Przyciski",
     "cBlue": "Niebieski (odpowiedz, obserwuj)",
     "cGreen": "Zielony (powtórzenia)",
     "cOrange": "Pomarańczowy (ulubione)",
     "cRed": "Czerwony (anuluj)",
+    "change_email": "Zmień email",
+    "change_email_error": "Wystąpił problem podczas zmiany emaila.",
+    "changed_email": "Pomyślnie zmieniono email!",
     "change_password": "Zmień hasło",
     "change_password_error": "Podczas zmiany hasła wystąpił problem.",
     "changed_password": "Pomyślnie zmieniono hasło!",
@@ -140,16 +283,20 @@
     "delete_account_description": "Trwale usuń konto i wszystkie posty.",
     "delete_account_error": "Wystąpił problem z usuwaniem twojego konta. Jeżeli problem powtarza się, poinformuj administratora swojej instancji.",
     "delete_account_instructions": "Wprowadź swoje hasło w poniższe pole aby potwierdzić usunięcie konta.",
+    "discoverable": "Zezwól na odkrywanie tego konta w wynikach wyszukiwania i innych usługa.",
+    "domain_mutes": "Domeny",
     "avatar_size_instruction": "Zalecany minimalny rozmiar awatarów to 150x150 pikseli.",
+    "pad_emoji": "Dodaj odstęp z obu stron emoji podczas dodawania selektorem",
+    "emoji_reactions_on_timeline": "Pokaż reakcje emoji na osi czasu",
     "export_theme": "Zapisz motyw",
     "filtering": "Filtrowanie",
     "filtering_explanation": "Wszystkie statusy zawierające te słowa będą wyciszone. Jedno słowo na linijkę.",
     "follow_export": "Eksport obserwowanych",
     "follow_export_button": "Eksportuj swoją listę obserwowanych do pliku CSV",
-    "follow_export_processing": "Przetwarzanie, wkrótce twój plik zacznie się ściągać.",
     "follow_import": "Import obserwowanych",
     "follow_import_error": "Błąd przy importowaniu obserwowanych",
     "follows_imported": "Obserwowani zaimportowani! Przetwarzanie może trochę potrwać.",
+    "accent": "Akcent",
     "foreground": "Pierwszy plan",
     "general": "Ogólne",
     "hide_attachments_in_convo": "Ukrywaj załączniki w rozmowach",
@@ -162,6 +309,7 @@
     "hide_post_stats": "Ukrywaj statysyki postów (np. liczbę polubień)",
     "hide_user_stats": "Ukrywaj statysyki użytkowników (np. liczbę obserwujących)",
     "hide_filtered_statuses": "Ukrywaj filtrowane statusy",
+    "import_blocks_from_a_csv_file": "Importuj blokady z pliku CSV",
     "import_followers_from_a_csv_file": "Importuj obserwowanych z pliku CSV",
     "import_theme": "Załaduj motyw",
     "inputRadius": "Pola tekstowe",
@@ -181,17 +329,22 @@
     "use_contain_fit": "Nie przycinaj załączników na miniaturach",
     "name": "Imię",
     "name_bio": "Imię i bio",
+    "new_email": "Nowy email",
     "new_password": "Nowe hasło",
     "notification_visibility": "Rodzaje powiadomień do wyświetlania",
     "notification_visibility_follows": "Obserwacje",
     "notification_visibility_likes": "Ulubione",
     "notification_visibility_mentions": "Wzmianki",
     "notification_visibility_repeats": "Powtórzenia",
+    "notification_visibility_moves": "Użytkownik migruje",
+    "notification_visibility_emoji_reactions": "Reakcje",
     "no_rich_text_description": "Usuwaj formatowanie ze wszystkich postów",
     "no_blocks": "Bez blokad",
     "no_mutes": "Bez wyciszeń",
     "hide_follows_description": "Nie pokazuj kogo obserwuję",
     "hide_followers_description": "Nie pokazuj kto mnie obserwuje",
+    "hide_follows_count_description": "Nie pokazuj licznika obserwowanych",
+    "hide_followers_count_description": "Nie pokazuj licznika obserwujących",
     "show_admin_badge": "Pokazuj odznakę Administrator na moim profilu",
     "show_moderator_badge": "Pokazuj odznakę Moderator na moim profilu",
     "nsfw_clickthrough": "Włącz domyślne ukrywanie załączników o treści nieprzyzwoitej (NSFW)",
@@ -212,10 +365,14 @@
     "reply_visibility_all": "Pokazuj wszystkie odpowiedzi",
     "reply_visibility_following": "Pokazuj tylko odpowiedzi skierowane do mnie i osób które obserwuję",
     "reply_visibility_self": "Pokazuj tylko odpowiedzi skierowane do mnie",
+    "autohide_floating_post_button": "Ukryj automatycznie przycisk \"Nowy post\" (mobile)",
     "saving_err": "Nie udało się zapisać ustawień",
     "saving_ok": "Zapisano ustawienia",
+    "search_user_to_block": "Wyszukaj kogo chcesz zablokować",
+    "search_user_to_mute": "Wyszukaj kogo chcesz wyciszyć",
     "security_tab": "Bezpieczeństwo",
     "scope_copy": "Kopiuj zakres podczas odpowiadania (DM-y zawsze są kopiowane)",
+    "minimal_scopes_mode": "Zminimalizuj opcje wyboru zakresu postów",
     "set_new_avatar": "Ustaw nowy awatar",
     "set_new_profile_background": "Ustaw nowe tło profilu",
     "set_new_profile_banner": "Ustaw nowy banner profilu",
@@ -228,19 +385,32 @@
     "post_status_content_type": "Post status content type",
     "stop_gifs": "Odtwarzaj GIFy po najechaniu kursorem",
     "streaming": "Włącz automatycznie strumieniowanie nowych postów gdy jesteś na początku strony",
+    "user_mutes": "Users",
+    "useStreamingApi": "Otrzymuj posty i powiadomienia w czasie rzeczywistym",
+    "useStreamingApiWarning": "(Niezalecane, eksperymentalne, pomija posty)",
     "text": "Tekst",
     "theme": "Motyw",
     "theme_help": "Użyj kolorów w notacji szesnastkowej (#rrggbb), by stworzyć swój motyw.",
     "theme_help_v2_1": "Możesz też zastąpić kolory i widoczność poszczególnych komponentów przełączając pola wyboru, użyj „Wyczyść wszystko” aby usunąć wszystkie zastąpienia.",
     "theme_help_v2_2": "Ikony pod niektórych wpisami są wskaźnikami kontrastu pomiędzy tłem a tekstem, po najechaniu na nie otrzymasz szczegółowe informacje. Zapamiętaj, że jeżeli używasz przezroczystości, wskaźniki pokazują najgorszy możliwy przypadek.",
     "tooltipRadius": "Etykiety/alerty",
+    "type_domains_to_mute": "Wpisz domeny, które chcesz wyciszyć",
     "upload_a_photo": "Wyślij zdjęcie",
     "user_settings": "Ustawienia użytkownika",
     "values": {
       "false": "nie",
       "true": "tak"
     },
+    "fun": "Zabawa",
+    "greentext": "Memiczne strzałki",
     "notifications": "Powiadomienia",
+    "notification_setting": "Otrzymuj powiadomienia od:",
+    "notification_setting_follows": "Ludzi których obserwujesz",
+    "notification_setting_non_follows": "Ludzi których nie obserwujesz",
+    "notification_setting_followers": "Ludzi którzy obserwują ciebie",
+    "notification_setting_non_followers": "Ludzi którzy nie obserwują ciebie",
+    "notification_mutes": "By przestać otrzymywać powiadomienia od jednego użytkownika, wycisz go",
+    "notification_blocks": "Blokowanie uzytkownika zatrzymuje wszystkie powiadomienia i odsubskrybowuje go.",
     "enable_web_push_notifications": "Włącz powiadomienia push",
     "style": {
       "switcher": {
@@ -252,7 +422,24 @@
         "save_load_hint": "Opcje „zachowaj” pozwalają na pozostanie przy obecnych opcjach po wybraniu lub załadowaniu motywu, jak i przechowywanie ich podczas eksportowania motywu. Jeżeli wszystkie są odznaczone, eksportowanie motywu spowoduje zapisanie wszystkiego.",
         "reset": "Wyzeruj",
         "clear_all": "Wyczyść wszystko",
-        "clear_opacity": "Wyczyść widoczność"
+        "clear_opacity": "Wyczyść widoczność",
+        "load_theme": "Załaduj motyw",
+        "keep_as_is": "Zostaw po staremu",
+        "use_snapshot": "Stara wersja",
+        "use_source": "Nowa wersja",
+        "help": {
+          "upgraded_from_v2": "PleromaFE zostało zaaktualizowane, motyw może wyglądać nieco inaczej niż sobie zapamiętałeś.",
+          "v2_imported": "Plik który zaimportowałeś został stworzony dla starszego FE. Próbujemy zwiększyć kompatybiliność, lecz wciąż mogą występować rozbieżności.",
+          "future_version_imported": "Plik który zaimportowałeś został stworzony w nowszej wersji FE.",
+          "older_version_imported": "Plik który zaimportowałeś został stworzony w starszej wersji FE.",
+          "snapshot_present": "Migawka motywu jest załadowana, więc wszystkie wartości zostały nadpisane. Zamiast tego, możesz załadować właściwe dane motywu",
+          "snapshot_missing": "Nie znaleziono migawki motywu w pliku, więc motyw może wyglądać inaczej niż pierwotnie zaplanowano.",
+          "fe_upgraded": "Silnik motywów PleromaFE został zaaktualizowany.",
+          "fe_downgraded": "Wersja PleromaFE została cofnięta.",
+          "migration_snapshot_ok": "Żeby być bezpiecznym, migawka motywu została załadowana. Możesz spróbować załadować dane motywu.",
+          "migration_napshot_gone": "Z jakiegoś powodu migawka zniknęła, niektóre rzeczy mogą wyglądać inaczej niż sobie zapamiętałeś.",
+          "snapshot_source_mismatch": "Konflikt wersji: najprawdopodobniej FE zostało cofnięte do poprzedniej wersji i zaaktualizowane ponownie, jeśli zmieniłeś motyw używając starszej wersji FE, najprawdopodobniej chcesz używać starszej wersji, w przeciwnym razie użyj nowej wersji."
+        }
       },
       "common": {
         "color": "Kolor",
@@ -280,14 +467,28 @@
         "_tab_label": "Zaawansowane",
         "alert": "Tło alertu",
         "alert_error": "Błąd",
+        "alert_warning": "Ostrzeżenie",
+        "alert_neutral": "Neutralne",
+        "post": "Posty/Bio użytkowników",
         "badge": "Tło odznaki",
+        "popover": "Etykiety, menu, popovery",
         "badge_notification": "Powiadomienie",
         "panel_header": "Nagłówek panelu",
         "top_bar": "Górny pasek",
         "borders": "Granice",
         "buttons": "Przyciski",
         "inputs": "Pola wejścia",
-        "faint_text": "Zanikający tekst"
+        "faint_text": "Zanikający tekst",
+        "underlay": "Podkład",
+        "poll": "Wykres ankiety",
+        "icons": "Ikony",
+        "highlight": "Podświetlone elementy",
+        "pressed": "Naciśnięte",
+        "selectedPost": "Wybrany post",
+        "selectedMenu": "Wybrany element menu",
+        "disabled": "Wyłączone",
+        "toggled": "Przełączone",
+        "tabs": "Karty"
       },
       "radii": {
         "_tab_label": "Zaokrąglenie"
@@ -300,7 +501,7 @@
         "blur": "Rozmycie",
         "spread": "Szerokość",
         "inset": "Inset",
-        "hint": "Możesz też używać --zmiennych jako kolorów, aby wykorzystać zmienne CSS3. Pamiętaj, że ustawienie widoczności nie będzie wtedy działać.",
+        "hintV3": "Dla cieni możesz również użyć notacji {0} by użyć inny slot koloru.",
         "filter_hint": {
           "always_drop_shadow": "Ostrzeżenie, ten cień zawsze używa {0} jeżeli to obsługiwane przez przeglądarkę.",
           "drop_shadow_syntax": "{0} nie obsługuje parametru {1} i słowa kluczowego {2}.",
@@ -357,6 +558,40 @@
       "frontend_version": "Wersja front-endu"
     }
   },
+  "time": {
+    "day": "{0} dzień",
+    "days": "{0} dni",
+    "day_short": "{0}d",
+    "days_short": "{0}d",
+    "hour": "{0} godzina",
+    "hours": "{0} godzin",
+    "hour_short": "{0} godz.",
+    "hours_short": "{0} godz.",
+    "in_future": "za {0}",
+    "in_past": "{0} temu",
+    "minute": "{0} minuta",
+    "minutes": "{0} minut",
+    "minute_short": "{0}min",
+    "minutes_short": "{0}min",
+    "month": "{0} miesiąc",
+    "months": "{0} miesięcy",
+    "month_short": "{0} mies.",
+    "months_short": "{0} mies.",
+    "now": "teraz",
+    "now_short": "teraz",
+    "second": "{0} sekunda",
+    "seconds": "{0} sekund",
+    "second_short": "{0}s",
+    "seconds_short": "{0}s",
+    "week": "{0} tydzień",
+    "weeks": "{0} tygodni",
+    "week_short": "{0} tydz.",
+    "weeks_short": "{0} tyg.",
+    "year": "{0} rok",
+    "years": "{0} lata",
+    "year_short": "{0} r.",
+    "years_short": "{0} lata"
+  },
   "timeline": {
     "collapse": "Zwiń",
     "conversation": "Rozmowa",
@@ -370,8 +605,17 @@
     "no_statuses": "Brak statusów"
   },
   "status": {
+    "favorites": "Ulubione",
+    "repeats": "Powtórzenia",
+    "delete": "Usuń status",
+    "pin": "Przypnij na profilu",
+    "unpin": "Odepnij z profilu",
+    "pinned": "Przypnięte",
+    "delete_confirm": "Czy naprawdę chcesz usunąć ten status?",
     "reply_to": "Odpowiedź dla",
-    "replies_list": "Odpowiedzi:"
+    "replies_list": "Odpowiedzi:",
+    "mute_conversation": "Wycisz konwersację",
+    "unmute_conversation": "Odcisz konwersację"
   },
   "user_card": {
     "approve": "Przyjmij",
@@ -388,25 +632,60 @@
     "followers": "Obserwujący",
     "following": "Obserwowany!",
     "follows_you": "Obserwuje cię!",
+    "hidden": "Ukryte",
     "its_you": "To ty!",
     "media": "Media",
+    "mention": "Wspomnienie",
     "mute": "Wycisz",
     "muted": "Wyciszony(-a)",
     "per_day": "dziennie",
     "remote_follow": "Zdalna obserwacja",
+    "report": "Raportuj",
     "statuses": "Statusy",
+    "subscribe": "Subskrybuj",
+    "unsubscribe": "Odsubskrybuj",
     "unblock": "Odblokuj",
     "unblock_progress": "Odblokowuję…",
     "block_progress": "Blokuję…",
     "unmute": "Cofnij wyciszenie",
     "unmute_progress": "Cofam wyciszenie…",
-    "mute_progress": "Wyciszam…"
+    "mute_progress": "Wyciszam…",
+    "hide_repeats": "Ukryj powtórzenia",
+    "show_repeats": "Pokaż powtórzenia",
+    "admin_menu": {
+      "moderation": "Moderacja",
+      "grant_admin": "Przyznaj admina",
+      "revoke_admin": "Odwołaj admina",
+      "grant_moderator": "Przyznaj moderatora",
+      "revoke_moderator": "Odwołaj moderatora",
+      "activate_account": "Aktywuj konto",
+      "deactivate_account": "Dezaktywuj konto",
+      "delete_account": "Usuń konto",
+      "force_nsfw": "Oznacz wszystkie posty jako NSFW",
+      "strip_media": "Usuń multimedia z postów",
+      "force_unlisted": "Wymuś posty na niepubliczne",
+      "sandbox": "Wymuś by posty były tylko dla obserwujących",
+      "disable_remote_subscription": "Zakaż obserwowania użytkownika ze zdalnych instancji",
+      "disable_any_subscription": "Zakaż całkowicie obserwowania użytkownika",
+      "quarantine": "Zakaż federowania postów od tego użytkownika",
+      "delete_user": "Usuń użytkownika",
+      "delete_user_confirmation": "Czy jesteś absolutnie pewny? Ta operacja nie może być cofnięta."
+    }
   },
   "user_profile": {
     "timeline_title": "Oś czasu użytkownika",
     "profile_does_not_exist": "Przepraszamy, ten profil nie istnieje.",
     "profile_loading_error": "Przepraszamy, wystąpił błąd podczas ładowania tego profilu."
   },
+  "user_reporting": {
+    "title": "Raportowanie {0}",
+    "add_comment_description": "Raport zostanie wysłany do moderatorów instancji. Możesz dodać powód dlaczego raportujesz to konto poniżej:",
+    "additional_comments": "Dodatkowe komentarze",
+    "forward_description": "To konto jest z innego serwera. Wysłać również tam kopię raportu?",
+    "forward_to": "Przekaż do{0}",
+    "submit": "Wyślij",
+    "generic_error": "Wystąpił błąd podczas przetwarzania twojej prośby."
+  },
   "who_to_follow": {
     "more": "Więcej",
     "who_to_follow": "Propozycje obserwacji"
@@ -416,6 +695,7 @@
     "repeat": "Powtórz",
     "reply": "Odpowiedz",
     "favorite": "Dodaj do ulubionych",
+    "add_reaction": "Dodaj reakcję",
     "user_settings": "Ustawienia użytkownika"
   },
   "upload":{
@@ -431,5 +711,25 @@
       "GiB": "GiB",
       "TiB": "TiB"
     }
+  },
+  "search": {
+    "people": "Ludzie",
+    "hashtags": "Hasztagi",
+    "person_talking": "{count} osoba rozmawia o tym",
+    "people_talking": "{count} osób rozmawia o tym",
+    "no_results": "Brak wyników"
+  },
+  "password_reset": {
+    "forgot_password": "Zapomniałeś hasła?",
+    "password_reset": "Reset hasła",
+    "instruction": "Wprowadź swój adres email lub nazwę użytkownika. Wyślemy ci link z którym możesz zresetować hasło.",
+    "placeholder": "Twój email lub nazwa użytkownika",
+    "check_email": "Sprawdź pocztę, aby uzyskać link do zresetowania hasła.",
+    "return_home": "Wróć do strony głównej",
+    "not_found": "Nie mogliśmy znaleźć tego emaila lub nazwy użytkownika.",
+    "too_many_requests": "Przekroczyłeś limit prób, spróbuj ponownie później.",
+    "password_reset_disabled": "Resetowanie hasła jest wyłączone. Proszę skontaktuj się z administratorem tej instancji.",
+    "password_reset_required": "Musisz zresetować hasło, by się zalogować.",
+    "password_reset_required_but_mailer_is_disabled": "Musisz zresetować hasło, ale resetowanie hasła jest wyłączone. Proszę skontaktuj się z administratorem tej instancji."
   }
 }

src/main.js

@@ -31,7 +31,6 @@ import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
-import VTooltip from 'v-tooltip'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -44,13 +43,6 @@ Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
-Vue.use(VTooltip, {
-  popover: {
-    defaultTrigger: 'hover click',
-    defaultContainer: false,
-    defaultOffset: 5
-  }
-})
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary

src/modules/config.js

@@ -34,7 +34,8 @@ export const defaultState = {
     likes: true,
     repeats: true,
     moves: true,
-    emojiReactions: false
+    emojiReactions: false,
+    followRequest: true
   },
   webPushNotifications: false,
   muteWords: [],
@@ -102,6 +103,7 @@ const config = {
           setPreset(value)
           break
         case 'customTheme':
+        case 'customThemeSource':
           applyTheme(value)
       }
     }

src/modules/instance.js

@@ -1,5 +1,6 @@
 import { set } from 'vue'
 import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
+import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import { instanceDefaultProperties } from './config.js'
 
 const defaultState = {
@@ -159,7 +160,14 @@ const instance = {
           // No need to apply theme if there's user theme already
           const { customTheme } = rootState.config
           if (customTheme) return
-          applyTheme(themeData.theme)
+
+          // New theme presets don't have 'theme' property, they use 'source'
+          const themeSource = themeData.source
+          if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
+            applyTheme(themeSource)
+          } else {
+            applyTheme(themeData.theme)
+          }
         })
     },
     fetchEmoji ({ dispatch, state }) {

src/modules/statuses.js

@@ -13,6 +13,7 @@ import {
   omitBy
 } from 'lodash'
 import { set } from 'vue'
+import { isStatusNotification } from '../services/notification_utils/notification_utils.js'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
 
@@ -321,7 +322,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
 const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters }) => {
   each(notifications, (notification) => {
-    if (notification.type !== 'follow' && notification.type !== 'move') {
+    if (isStatusNotification(notification.type)) {
       notification.action = addStatusToGlobalStorage(state, notification.action).item
       notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
     }
@@ -361,13 +362,16 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
           case 'move':
             i18nString = 'migrated_to'
             break
+          case 'follow_request':
+            i18nString = 'follow_request'
+            break
         }
 
         if (notification.type === 'pleroma:emoji_reaction') {
           notifObj.body = rootGetters.i18n.t('notifications.reacted_with', [notification.emoji])
         } else if (i18nString) {
           notifObj.body = rootGetters.i18n.t('notifications.' + i18nString)
-        } else {
+        } else if (isStatusNotification(notification.type)) {
           notifObj.body = notification.status.text
         }
 
@@ -521,6 +525,17 @@ export const mutations = {
       notification.seen = true
     })
   },
+  markSingleNotificationAsSeen (state, { id }) {
+    const notification = find(state.notifications.data, n => n.id === id)
+    if (notification) notification.seen = true
+  },
+  dismissNotification (state, { id }) {
+    state.notifications.data = state.notifications.data.filter(n => n.id !== id)
+  },
+  updateNotification (state, { id, updater }) {
+    const notification = find(state.notifications.data, n => n.id === id)
+    notification && updater(notification)
+  },
   queueFlush (state, { timeline, id }) {
     state.timelines[timeline].flushMarker = id
   },
@@ -616,7 +631,7 @@ const statuses = {
       commit('setNotificationsSilence', { value })
     },
     fetchStatus ({ rootState, dispatch }, id) {
-      rootState.api.backendInteractor.fetchStatus({ id })
+      return rootState.api.backendInteractor.fetchStatus({ id })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
     deleteStatus ({ rootState, commit }, status) {
@@ -680,6 +695,24 @@ const statuses = {
         credentials: rootState.users.currentUser.credentials
       })
     },
+    markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
+      commit('markSingleNotificationAsSeen', { id })
+      apiService.markNotificationsAsSeen({
+        single: true,
+        id,
+        credentials: rootState.users.currentUser.credentials
+      })
+    },
+    dismissNotificationLocal ({ rootState, commit }, { id }) {
+      commit('dismissNotification', { id })
+    },
+    dismissNotification ({ rootState, commit }, { id }) {
+      commit('dismissNotification', { id })
+      rootState.api.backendInteractor.dismissNotification({ id })
+    },
+    updateNotification ({ rootState, commit }, { id, updater }) {
+      commit('updateNotification', { id, updater })
+    },
     fetchFavsAndRepeats ({ rootState, commit }, id) {
       Promise.all([
         rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),

src/services/api/api.service.js

@@ -4,7 +4,6 @@ import 'whatwg-fetch'
 import { RegistrationError, StatusCodeError } from '../errors/errors'
 
 /* eslint-env browser */
-const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
 const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
 const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
 const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
@@ -17,6 +16,7 @@ const DEACTIVATE_USER_URL = '/api/pleroma/admin/users/deactivate'
 const ADMIN_USERS_URL = '/api/pleroma/admin/users'
 const SUGGESTIONS_URL = '/api/v1/suggestions'
 const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'
+const NOTIFICATION_READ_URL = '/api/v1/pleroma/notifications/read'
 
 const MFA_SETTINGS_URL = '/api/pleroma/accounts/mfa'
 const MFA_BACKUP_CODES_URL = '/api/pleroma/accounts/mfa/backup_codes'
@@ -29,6 +29,7 @@ const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
 const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
 const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
 const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
+const MASTODON_DISMISS_NOTIFICATION_URL = id => `/api/v1/notifications/${id}/dismiss`
 const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
 const MASTODON_UNFAVORITE_URL = id => `/api/v1/statuses/${id}/unfavourite`
 const MASTODON_RETWEET_URL = id => `/api/v1/statuses/${id}/reblog`
@@ -495,8 +496,7 @@ const fetchTimeline = ({
   until = false,
   userId = false,
   tag = false,
-  withMuted = false,
+  withMuted = false
-  withMove = false
 }) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
@@ -536,11 +536,8 @@ const fetchTimeline = ({
   if (timeline === 'public' || timeline === 'publicAndExternal') {
     params.push(['only_media', false])
   }
-  if (timeline === 'notifications') {
-    params.push(['with_move', withMove])
-  }
 
-  params.push(['count', 20])
+  params.push(['limit', 20])
   params.push(['with_muted', withMuted])
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
@@ -844,12 +841,16 @@ const suggestions = ({ credentials }) => {
   }).then((data) => data.json())
 }
 
-const markNotificationsAsSeen = ({ id, credentials }) => {
+const markNotificationsAsSeen = ({ id, credentials, single = false }) => {
   const body = new FormData()
 
-  body.append('latest_id', id)
+  if (single) {
+    body.append('id', id)
+  } else {
+    body.append('max_id', id)
+  }
 
-  return fetch(QVITTER_USER_NOTIFICATIONS_READ_URL, {
+  return fetch(NOTIFICATION_READ_URL, {
     body,
     headers: authHeaders(credentials),
     method: 'POST'
@@ -880,12 +881,20 @@ const fetchPoll = ({ pollId, credentials }) => {
   )
 }
 
-const fetchFavoritedByUsers = ({ id }) => {
+const fetchFavoritedByUsers = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_STATUS_FAVORITEDBY_URL(id) }).then((users) => users.map(parseUser))
+  return promisedRequest({
+    url: MASTODON_STATUS_FAVORITEDBY_URL(id),
+    method: 'GET',
+    credentials
+  }).then((users) => users.map(parseUser))
 }
 
-const fetchRebloggedByUsers = ({ id }) => {
+const fetchRebloggedByUsers = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_STATUS_REBLOGGEDBY_URL(id) }).then((users) => users.map(parseUser))
+  return promisedRequest({
+    url: MASTODON_STATUS_REBLOGGEDBY_URL(id),
+    method: 'GET',
+    credentials
+  }).then((users) => users.map(parseUser))
 }
 
 const fetchEmojiReactions = ({ id, credentials }) => {
@@ -1002,6 +1011,15 @@ const unmuteDomain = ({ domain, credentials }) => {
   })
 }
 
+const dismissNotification = ({ credentials, id }) => {
+  return promisedRequest({
+    url: MASTODON_DISMISS_NOTIFICATION_URL(id),
+    method: 'POST',
+    payload: { id },
+    credentials
+  })
+}
+
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
   return Object.entries({
     ...(credentials
@@ -1157,6 +1175,7 @@ const apiService = {
   denyUser,
   suggestions,
   markNotificationsAsSeen,
+  dismissNotification,
   vote,
   fetchPoll,
   fetchFavoritedByUsers,

src/services/entity_normalizer/entity_normalizer.service.js

@@ -1,4 +1,5 @@
 import escape from 'escape-html'
+import { isStatusNotification } from '../notification_utils/notification_utils.js'
 
 const qvitterStatusType = (status) => {
   if (status.is_post_verb) {
@@ -346,9 +347,7 @@ export const parseNotification = (data) => {
   if (masto) {
     output.type = mastoDict[data.type] || data.type
     output.seen = data.pleroma.is_seen
-    output.status = output.type === 'follow' || output.type === 'move'
+    output.status = isStatusNotification(output.type) ? parseStatus(data.status) : null
-      ? null
-      : parseStatus(data.status)
     output.action = output.status // TODO: Refactor, this is unneeded
     output.target = output.type !== 'move'
       ? null

src/services/notification_utils/notification_utils.js

@@ -1,4 +1,4 @@
-import { filter, sortBy } from 'lodash'
+import { filter, sortBy, includes } from 'lodash'
 
 export const notificationsFromStore = store => store.state.statuses.notifications.data
 
@@ -7,10 +7,15 @@ export const visibleTypes = store => ([
   store.state.config.notificationVisibility.mentions && 'mention',
   store.state.config.notificationVisibility.repeats && 'repeat',
   store.state.config.notificationVisibility.follows && 'follow',
+  store.state.config.notificationVisibility.followRequest && 'follow_request',
   store.state.config.notificationVisibility.moves && 'move',
   store.state.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction'
 ].filter(_ => _))
 
+const statusNotifications = ['like', 'mention', 'repeat', 'pleroma:emoji_reaction']
+
+export const isStatusNotification = (type) => includes(statusNotifications, type)
+
 const sortById = (a, b) => {
   const seqA = Number(a.id)
   const seqB = Number(b.id)

src/services/notifications_fetcher/notifications_fetcher.service.js

@@ -11,12 +11,9 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.notifications
   const hideMutedPosts = getters.mergedConfig.hideMutedPosts
-  const allowFollowingMove = rootState.users.currentUser.allow_following_move
 
   args['withMuted'] = !hideMutedPosts
 
-  args['withMove'] = !allowFollowingMove
-
   args['timeline'] = 'notifications'
   if (older) {
     if (timelineData.minId !== Number.POSITIVE_INFINITY) {

src/services/theme_data/theme_data.service.js

@@ -350,16 +350,47 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
   if (!outputColor) {
     throw new Error('Couldn\'t generate color for ' + key)
   }
-  const opacitySlot = getOpacitySlot(key)
+
+  const opacitySlot = value.opacity || getOpacitySlot(key)
   const ownOpacitySlot = value.opacity
-  if (opacitySlot && (outputColor.a === undefined || ownOpacitySlot)) {
+
+  if (ownOpacitySlot === null) {
+    outputColor.a = 1
+  } else if (sourceColor === 'transparent') {
+    outputColor.a = 0
+  } else {
+    const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
+
     const dependencySlot = deps[0]
-    if (dependencySlot && colors[dependencySlot] === 'transparent') {
+    const dependencyColor = dependencySlot && colors[dependencySlot]
-      outputColor.a = 0
+
+    if (!ownOpacitySlot && dependencyColor && !value.textColor && ownOpacitySlot !== null) {
+      // Inheriting color from dependency (weird, i know)
+      // except if it's a text color or opacity slot is set to 'null'
+      outputColor.a = dependencyColor.a
+    } else if (!dependencyColor && !opacitySlot) {
+      // Remove any alpha channel if no dependency and no opacitySlot found
+      delete outputColor.a
     } else {
-      outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1
+      // Otherwise try to assign opacity
+      if (dependencyColor && dependencyColor.a === 0) {
+        // transparent dependency shall make dependents transparent too
+        outputColor.a = 0
+      } else {
+        // Otherwise check if opacity is overriden and use that or default value instead
+        outputColor.a = Number(
+          opacityOverriden
+            ? sourceOpacity[opacitySlot]
+            : (OPACITIES[opacitySlot] || {}).defaultValue
+        )
+      }
     }
   }
+
+  if (Number.isNaN(outputColor.a) || outputColor.a === undefined) {
+    outputColor.a = 1
+  }
+
   if (opacitySlot) {
     return {
       colors: { ...colors, [key]: outputColor },

static/fontello.json

@@ -345,6 +345,18 @@
       "css": "link",
       "code": 59427,
       "src": "fontawesome"
+    },
+    {
+      "uid": "8b80d36d4ef43889db10bc1f0dc9a862",
+      "css": "user",
+      "code": 59428,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "12f4ece88e46abd864e40b35e05b11cd",
+      "css": "ok",
+      "code": 59431,
+      "src": "fontawesome"
     }
   ]
-}
+}

static/styles.json

@@ -1,6 +1,6 @@
 {
-  "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+  "pleroma-dark": "/static/themes/pleroma-dark.json",
-  "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#dbe0e8", "#304055", "#f86f0f", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
+  "pleroma-light": "/static/themes/pleroma-light.json",
   "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"],
   "classic-dark": [ "Classic Dark", "#161c20", "#282e32", "#b9b9b9", "#baaa9c", "#d31014", "#0fa00f", "#0095ff", "#ffa500" ],
   "bird": [ "Bird", "#f8fafd", "#e6ecf0", "#14171a", "#0084b8", "#e0245e", "#17bf63", "#1b95e0", "#fab81e"],

static/themes/pleroma-dark.json

@@ -0,0 +1,191 @@
+{
+  "_pleroma_theme_version": 2,
+  "name": "Pleroma Dark",
+  "source": {
+    "themeEngineVersion": 3,
+    "fonts": {},
+    "shadows": {
+      "buttonHover": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": "1",
+          "spread": "2",
+          "color": "#b9b9ba",
+          "alpha": "0.4",
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": -1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.2,
+          "inset": true
+        }
+      ],
+      "buttonPressed": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": 4,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 1,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": -1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": 0,
+          "blur": "2",
+          "spread": 0,
+          "inset": false,
+          "color": "#000000",
+          "alpha": 1
+        }
+      ],
+      "panelHeader": [
+        {
+          "x": 0,
+          "y": "1",
+          "blur": "3",
+          "spread": 0,
+          "inset": false,
+          "color": "#000000",
+          "alpha": "0.4"
+        },
+        {
+          "x": "0",
+          "y": "1",
+          "blur": "0",
+          "spread": 0,
+          "inset": true,
+          "color": "#ffffff",
+          "alpha": "0.2"
+        }
+      ],
+      "panel": [
+        {
+          "x": "0",
+          "y": "0",
+          "blur": "3",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.5"
+        },
+        {
+          "x": "0",
+          "y": "4",
+          "blur": "6",
+          "spread": "3",
+          "inset": false,
+          "color": "#000000",
+          "alpha": "0.3"
+        }
+      ],
+      "button": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": 2,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 1
+        },
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": -1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.2,
+          "inset": true
+        }
+      ],
+      "topBar": [
+        {
+          "x": 0,
+          "y": "1",
+          "blur": 4,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.4"
+        },
+        {
+          "x": 0,
+          "y": "2",
+          "blur": "7",
+          "spread": 0,
+          "inset": false,
+          "color": "#000000",
+          "alpha": "0.3"
+        }
+      ]
+    },
+    "opacity": {
+      "underlay": "0.6"
+    },
+    "colors": {
+      "bg": "#0f161e",
+      "fg": "#151e2b",
+      "text": "#b9b9ba",
+      "underlay": "#090e14",
+      "accent": "#e2b188",
+      "cBlue": "#81beea",
+      "cRed": "#d31014",
+      "cGreen": "#5dc94a",
+      "cOrange": "#ffc459",
+      "border": "--fg,3",
+      "topBarText": "--text,-9.75",
+      "topBarLink": "--topBarText",
+      "btnToggled": "--accent,-24.2",
+      "alertErrorText": "--text,21.2",
+      "badgeNotification": "#e15932",
+      "badgeNotificationText": "#ffffff"
+    },
+    "radii": {
+      "btn": "3",
+      "input": "3",
+      "panel": "3",
+      "avatar": "3",
+      "attachment": "3"
+    }
+  }
+}

static/themes/pleroma-light.json

@@ -0,0 +1,219 @@
+{
+  "_pleroma_theme_version": 2,
+  "name": "Pleroma Light",
+  "source": {
+    "themeEngineVersion": 3,
+    "fonts": {},
+    "shadows": {
+      "button": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": 2,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.2"
+        },
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": "0.5",
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": -1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.2,
+          "inset": true
+        }
+      ],
+      "buttonHover": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": "2",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.2"
+        },
+        {
+          "x": 0,
+          "y": "0",
+          "blur": "1",
+          "spread": "2",
+          "color": "#ffc39f",
+          "alpha": "1",
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": -1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.2,
+          "inset": true
+        }
+      ],
+      "input": [
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": -1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": 0,
+          "blur": "2",
+          "inset": true,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.15"
+        }
+      ],
+      "panel": [
+        {
+          "x": "0",
+          "y": 1,
+          "blur": "3",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.5"
+        },
+        {
+          "x": "0",
+          "y": "3",
+          "blur": "6",
+          "spread": "1",
+          "inset": false,
+          "color": "#000000",
+          "alpha": "0.2"
+        }
+      ],
+      "panelHeader": [
+        {
+          "x": 0,
+          "y": "1",
+          "blur": 0,
+          "spread": 0,
+          "inset": true,
+          "color": "#ffffff",
+          "alpha": "0.5"
+        },
+        {
+          "x": 0,
+          "y": "1",
+          "blur": "3",
+          "spread": 0,
+          "inset": false,
+          "color": "#000000",
+          "alpha": "0.3"
+        }
+      ],
+      "buttonPressed": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": 4,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.2"
+        },
+        {
+          "x": 0,
+          "y": 1,
+          "blur": "1",
+          "spread": "2",
+          "color": "#000000",
+          "alpha": "0.3",
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": -1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": 0.2,
+          "inset": true
+        }
+      ],
+      "popup": [
+        {
+          "x": "1",
+          "y": "2",
+          "blur": "2",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.2"
+        },
+        {
+          "x": "1",
+          "y": "3",
+          "blur": "7",
+          "spread": "0",
+          "inset": false,
+          "color": "#000000",
+          "alpha": "0.2"
+        }
+      ],
+      "avatarStatus": [
+        {
+          "x": 0,
+          "y": "1",
+          "blur": "4",
+          "spread": "0",
+          "inset": false,
+          "color": "#000000",
+          "alpha": "0.2"
+        }
+      ]
+    },
+    "opacity": {
+      "underlay": "0.4"
+    },
+    "colors": {
+      "bg": "#f2f6f9",
+      "fg": "#d6dfed",
+      "text": "#304055",
+      "underlay": "#5d6086",
+      "accent": "#f55b1b",
+      "cBlue": "#0095ff",
+      "cRed": "#d31014",
+      "cGreen": "#0fa00f",
+      "cOrange": "#ffa500",
+      "border": "#d8e6f9",
+      "topBarText": "#304055",
+      "topBarLink": "--topBarText",
+      "btnToggled": "--accent,-24.2",
+      "input": "#dee3ed",
+      "badgeNotification": "#e83802"
+    },
+    "radii": {
+      "btn": "3",
+      "input": "3",
+      "panel": "3",
+      "avatar": "3",
+      "attachment": "3"
+    }
+  }
+}

yarn.lock

@@ -5941,11 +5941,6 @@ pngjs@^3.3.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"
 
-popper.js@^1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
-  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
-
 portal-vue@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"
@@ -7823,15 +7818,6 @@ v-click-outside@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.3.tgz#b7297abe833a439dc0895e6418a494381e64b5e7"
 
-v-tooltip@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.0.2.tgz#8610d9eece2cc44fd66c12ef2f12eec6435cab9b"
-  integrity sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==
-  dependencies:
-    lodash "^4.17.11"
-    popper.js "^1.15.0"
-    vue-resize "^0.4.5"
-
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -7906,11 +7892,6 @@ vue-loader@^14.0.0:
     vue-style-loader "^4.0.1"
     vue-template-es2015-compiler "^1.6.0"
 
-vue-resize@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
-  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
-
 vue-router@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"