Merge branch 'develop' into 'master'

Update MASTER for 2.4.2

See merge request pleroma/pleroma-fe!1421

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": ["@babel/preset-env", "@vue/babel-preset-jsx"],
-  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-transform-vue-jsx"],
+  "plugins": ["@babel/plugin-transform-runtime", "lodash"],
   "comments": false
 }

.mailmap

@@ -0,0 +1 @@
+rinpatch <rin@patch.cx> <rinpatch@sdf.org>

CHANGELOG.md

@@ -3,6 +3,105 @@ 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/).
 
+## [2.4.2] - 2022-01-09
+### Added 
+- Added Apply and Reset buttons to the bottom of theme tab to minimize UI travel
+- Implemented user option to always show floating New Post button (normally mobile-only)
+- Display reasons for instance specific policies 
+- Added functionality to cancel follow request
+
+### Fixed
+- Fixed link to external profile not working on user profiles
+- Fixed mobile shoutbox display 
+- Fixed favicon badge not working in Chrome
+- Escape html more properly in subject/display name 
+
+
+## [2.4.0] - 2021-08-08
+### Added
+- Added a quick settings to timeline header for easier access
+- Added option to mark posts as sensitive by default
+- Added quick filters for notifications
+- Implemented user option to change sidebar position to the right side
+- Implemented user option to hide floating shout panel
+- Implemented "edit profile" button if viewing own profile which opens profile settings
+
+### Fixed
+- Fixed follow request count showing in the wrong location in mobile view
+
+
+## [2.3.0] - 2021-03-01
+### Fixed
+- Button to remove uploaded media in post status form is now properly placed and sized.
+- Fixed shoutbox not working in mobile layout
+- Fixed missing highlighted border in expanded conversations again
+- Fixed some UI jumpiness when opening images particularly in chat view
+- Fixed chat unread badge looking weird
+- Fixed punycode names not working properly
+- Fixed notifications crashing on an invalid notification
+
+### Changed
+- Display 'people voted' instead of 'votes' for multi-choice polls
+- Changed the "Timelines" link in side panel to toggle show all timeline options inside the panel
+- Renamed "Timeline" to "Home Timeline" to be more clear
+- Optimized chat to not get horrible performance after keeping the same chat open for a long time
+- When opening emoji picker or react picker, it automatically focuses the search field
+- Language picker now uses native language names
+
+### Added
+- Added reason field for registration when approval is required
+- Group staff members by role in the About page
+
+
+## [2.2.3] - 2021-01-18
+### Added
+- Added Report button to status ellipsis menu for easier reporting
+
+### Fixed
+- Follows/Followers tabs on user profiles now display the content properly.
+- Handle punycode in screen names
+- Fixed local dev mode having non-functional websockets in some cases
+- Show notices for websocket events (errors, abnormal closures, reconnections)
+- Fix not being able to re-enable websocket until page refresh
+- Fix annoying issue where timeline might have few posts when streaming is enabled
+
+### Changed
+- Don't filter own posts when they hit your wordfilter
+
+
+## [2.2.2] - 2020-12-22
+### Added
+- Mouseover titles for emojis in reaction picker
+- Support to input emoji into the search box in reaction picker
+- Added some missing unicode emoji
+- Added the upload limit to the Features panel in the About page
+- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
+
+### Fixed
+- Fixed the occasional bug where screen would scroll 1px when typing into a reply form
+- Fixed timeline errors locking timelines
+- Fixed missing highlighted border in expanded conversations
+- Fixed custom emoji not working in profile field names
+- Fixed pinned statuses not appearing in user profiles
+- Fixed some elements not being keyboard navigation friendly
+- Fixed error handling when updating various profile images
+- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session
+- Fixed custom emoji not showing in poll options before voting
+- Fixed link color not applied to instance name in topbar
+
+### Changed
+- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
+- Made reply/fav/repeat etc buttons easier to hit
+- Adjusted timeline menu clickable area to match the visible button
+- Moved external source link from status heading to the ellipsis menu
+- Disabled horizontal textarea resize
+- Wallpaper is now top-aligned, horizontally centered.
+
+
+## [2.2.1] - 2020-11-11
+### Fixed
+- Fixed regression in react popup alignment and overflowing
+
 
 ## [2.2.0] - 2020-11-06
 ### Added
@@ -11,6 +110,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Import/export a muted users
 - Proper handling of deletes when using websocket streaming
 - Added optimistic chat message sending, so you can start writing next message before the previous one has been sent
+- Added a small red badge to the favicon when there's unread notifications
+- Added the NSFW alert to link previews
 
 ### Fixed
 - Fixed clicking NSFW hider through status popover
@@ -32,7 +133,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ## [2.1.2] - 2020-09-17
 ### Fixed
 - Fixed chats list not updating its order when new messages come in
-- Fixed chat messages sometimes getting lost when you receive a message at the same time 
+- Fixed chat messages sometimes getting lost when you receive a message at the same time
 
 
 ## [2.1.1] - 2020-09-08

CONTRIBUTORS.md

@@ -3,6 +3,7 @@ Contributors of this project.
 - Constance Variable (lambadalambda@social.heldscal.la): Code
 - Coco Snuss (cocosnuss@social.heldscal.la): Code
 - wakarimasen (wakarimasen@shitposter.club): NSFW hiding image
+- eris (eris@disqordia.space): Code
 - dtluna (dtluna@social.heldscal.la): Code
 - sonyam (sonyam@social.heldscal.la): Background images
 - hakui (hakui@freezepeach.xyz): CSS and styling

build/dev-server.js

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

build/webpack.base.conf.js

@@ -3,6 +3,7 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
+var CopyPlugin = require('copy-webpack-plugin');
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -93,6 +94,19 @@ module.exports = {
     new ServiceWorkerWebpackPlugin({
       entry: path.join(__dirname, '..', 'src/sw.js'),
       filename: 'sw-pleroma.js'
+    }),
+    // This copies Ruffle's WASM to a directory so that JS side can access it
+    new CopyPlugin({
+      patterns: [
+        {
+          from: "node_modules/ruffle-mirror/*",
+          to: "static/ruffle",
+          flatten: true
+        },
+      ],
+      options: {
+        concurrency: 100,
+      },
     })
   ]
 }

config/index.js

@@ -3,6 +3,11 @@ const path = require('path')
 let settings = {}
 try {
   settings = require('./local.json')
+  if (settings.target && settings.target.endsWith('/')) {
+    // replacing trailing slash since it can conflict with some apis
+    // and that's how actual BE reports its url
+    settings.target = settings.target.replace(/\/$/, '')
+  }
   console.log('Using local dev server settings (/config/local.json):')
   console.log(JSON.stringify(settings, null, 2))
 } catch (e) {

index.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <title>Pleroma</title>
     <!--server-generated-meta-->
     <link rel="icon" type="image/png" href="/favicon.png">
   </head>

package.json

@@ -31,9 +31,10 @@
     "parse-link-header": "^1.0.1",
     "phoenix": "^1.3.0",
     "portal-vue": "^2.1.4",
+    "punycode.js": "^2.1.0",
+    "ruffle-mirror": "^2021.4.10",
     "v-click-outside": "^2.1.1",
     "vue": "^2.6.11",
-    "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.6.11",
@@ -46,8 +47,8 @@
     "@babel/preset-env": "^7.7.6",
     "@babel/register": "^7.7.4",
     "@ungap/event-target": "^0.1.0",
-    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
-    "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
+    "@vue/babel-preset-jsx": "^1.2.4",
     "@vue/test-utils": "^1.0.0-beta.26",
     "autoprefixer": "^6.4.0",
     "babel-eslint": "^7.0.0",
@@ -55,8 +56,9 @@
     "babel-plugin-lodash": "^3.3.4",
     "chai": "^3.5.0",
     "chalk": "^1.1.3",
-    "chromedriver": "^2.21.2",
+    "chromedriver": "^87.0.1",
     "connect-history-api-fallback": "^1.1.0",
+    "copy-webpack-plugin": "^6.4.1",
     "cross-spawn": "^4.0.2",
     "css-loader": "^0.28.0",
     "custom-event-polyfill": "^1.0.7",
@@ -102,7 +104,7 @@
     "selenium-server": "2.53.1",
     "semver": "^5.3.0",
     "serviceworker-webpack-plugin": "^1.0.0",
-    "shelljs": "^0.7.4",
+    "shelljs": "^0.8.4",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
     "stylelint": "^13.6.1",
@@ -111,7 +113,7 @@
     "url-loader": "^1.1.2",
     "vue-loader": "^14.0.0",
     "vue-style-loader": "^4.0.0",
-    "webpack": "^4.0.0",
+    "webpack": "^4.44.0",
     "webpack-dev-middleware": "^3.6.0",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-merge": "^0.14.1"

src/App.js

@@ -4,7 +4,7 @@ import Notifications from './components/notifications/notifications.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
-import ChatPanel from './components/chat_panel/chat_panel.vue'
+import ShoutPanel from './components/shout_panel/shout_panel.vue'
 import SettingsModal from './components/settings_modal/settings_modal.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
@@ -15,6 +15,7 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
 import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'app',
@@ -25,7 +26,7 @@ export default {
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
-    ChatPanel,
+    ShoutPanel,
     MediaModal,
     SideDrawer,
     MobilePostStatusButton,
@@ -50,20 +51,21 @@ export default {
   },
   computed: {
     currentUser () { return this.$store.state.users.currentUser },
-    background () {
+    userBackground () { return this.currentUser.background_image },
-      return this.currentUser.background_image || this.$store.state.instance.background
+    instanceBackground () {
+      return this.mergedConfig.hideInstanceWallpaper
+        ? null
+        : this.$store.state.instance.background
     },
+    background () { return this.userBackground || this.instanceBackground },
     bgStyle () {
-      return {
+      if (this.background) {
-        'background-image': `url(${this.background})`
+        return {
+          '--body-background-image': `url(${this.background})`
+        }
       }
     },
-    bgAppStyle () {
+    shout () { return this.$store.state.shout.channel.state === 'joined' },
-      return {
-        '--body-background-image': `url(${this.background})`
-      }
-    },
-    chat () { return this.$store.state.chat.channel.state === 'joined' },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
     showInstanceSpecificPanel () {
       return this.$store.state.instance.showInstanceSpecificPanel &&
@@ -71,13 +73,20 @@ export default {
         this.$store.state.instance.instanceSpecificPanelContent
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    shoutboxPosition () {
+      return this.$store.getters.mergedConfig.showNewPostButton || false
+    },
+    hideShoutbox () {
+      return this.$store.getters.mergedConfig.hideShoutbox
+    },
     isMobileLayout () { return this.$store.state.interface.mobileLayout },
     privateMode () { return this.$store.state.instance.private },
     sidebarAlign () {
       return {
-        'order': this.$store.state.instance.sidebarRight ? 99 : 0
+        'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
       }
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   },
   methods: {
     updateMobileState () {

src/App.scss

@@ -14,7 +14,9 @@
   right: -20px;
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: 0 50%;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-position: 50% 50px;
 }
 
 i[class^='icon-'] {
@@ -33,6 +35,7 @@ h4 {
   max-width: 980px;
   align-content: flex-start;
 }
+
 .underlay {
   background-color: rgba(0,0,0,0.15);
   background-color: var(--underlay, rgba(0,0,0,0.15));
@@ -69,7 +72,7 @@ a {
   color: var(--link, $fallback--link);
 }
 
-button {
+.button-default {
   user-select: none;
   color: $fallback--text;
   color: var(--btnText, $fallback--text);
@@ -85,7 +88,12 @@ button {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
-  i[class*=icon-], .svg-inline--fa {
+  &.-sublime {
+    background: transparent;
+  }
+
+  i[class*=icon-],
+  .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
   }
@@ -107,7 +115,8 @@ button {
     background-color: $fallback--fg;
     background-color: var(--btnPressed, $fallback--fg);
 
-    svg, i {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnPressedText, $fallback--text);
     }
@@ -120,7 +129,8 @@ button {
     background-color: $fallback--fg;
     background-color: var(--btnDisabled, $fallback--fg);
 
-    svg, i {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnDisabledText, $fallback--text);
     }
@@ -134,7 +144,8 @@ button {
     box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
 
-    svg, i {
+    svg,
+    i {
       color: $fallback--text;
       color: var(--btnToggledText, $fallback--text);
     }
@@ -149,7 +160,38 @@ button {
   }
 }
 
-input, textarea, .select, .input {
+.button-unstyled {
+  background: none;
+  border: none;
+  outline: none;
+  display: inline;
+  text-align: initial;
+  font-size: 100%;
+  font-family: inherit;
+  padding: 0;
+  line-height: unset;
+  cursor: pointer;
+  box-sizing: content-box;
+  color: inherit;
+
+  &.-link {
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
+  }
+
+  &.-fullwidth {
+    width: 100%;
+  }
+
+  &.-hover-highlight {
+    &:hover svg {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+}
+
+input, textarea, .input {
 
   &.unstyled {
     border-radius: 0;
@@ -179,47 +221,11 @@ input, textarea, .select, .input {
   hyphens: none;
   padding: 8px .5em;
 
-  &.select {
+  &:disabled, &[disabled=disabled], &.disabled {
-    padding: 0;
-  }
-
-  &:disabled, &[disabled=disabled] {
     cursor: not-allowed;
     opacity: 0.5;
   }
 
-  .select-down-icon {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 5px;
-    height: 100%;
-    color: $fallback--text;
-    color: var(--inputText, $fallback--text);
-    line-height: 28px;
-    z-index: 0;
-    pointer-events: none;
-  }
-
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background: transparent;
-    border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
-    margin: 0;
-    padding: 0 2em 0 .2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
-    font-size: 14px;
-    width: 100%;
-    z-index: 1;
-    height: 28px;
-    line-height: 16px;
-  }
-
   &[type=range] {
     background: none;
     border: none;
@@ -303,6 +309,10 @@ input, textarea, .select, .input {
       box-sizing: border-box;
     }
   }
+
+  &.resize-height {
+    resize: vertical;
+  }
 }
 
 option {
@@ -442,6 +452,7 @@ main-router {
     color: $fallback--faint;
     color: var(--panelFaint, $fallback--faint);
   }
+
   .faint-link {
     color: $fallback--faint;
     color: var(--faintLink, $fallback--faint);
@@ -453,11 +464,8 @@ main-router {
     overflow-x: hidden;
   }
 
-  button {
+  .button-default,
-    flex-shrink: 0;
+  .alert {
-  }
-
-  button, .alert {
     // height: 100%;
     line-height: 21px;
     min-height: 0;
@@ -468,8 +476,11 @@ main-router {
     align-self: stretch;
   }
 
-  button {
+  .button-default {
-    &, i[class*=icon-] {
+    flex-shrink: 0;
+
+    &,
+    i[class*=icon-] {
       color: $fallback--text;
       color: var(--btnPanelText, $fallback--text);
     }
@@ -492,7 +503,8 @@ main-router {
     }
   }
 
-  a {
+  a,
+  .-link {
     color: $fallback--link;
     color: var(--panelLink, $fallback--link)
   }
@@ -503,19 +515,31 @@ main-router {
   border-radius: var(--panelRadius, $fallback--panelRadius);
 }
 
-.panel-footer {
+/* TODO Should remove timeline-footer from here when we refactor panels into
+ * separate component and utilize slots
+ */
+.panel-footer, .timeline-footer {
+  display: flex;
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-
+  flex: none;
+  padding: 0.6em 0.6em;
+  text-align: left;
+  line-height: 28px;
+  align-items: baseline;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: var(--border, $fallback--border);
 
   .faint {
     color: $fallback--faint;
     color: var(--panelFaint, $fallback--faint);
   }
 
-  a {
+  a,
+  .-link {
     color: $fallback--link;
-    color: var(--panelLink, $fallback--link)
+    color: var(--panelLink, $fallback--link);
   }
 }
 
@@ -542,6 +566,7 @@ nav {
   color: var(--faint, $fallback--faint);
   box-shadow: 0px 0px 4px rgba(0,0,0,.6);
   box-shadow: var(--topBarShadow);
+  box-sizing: border-box;
 }
 
 .fade-enter-active, .fade-leave-active {
@@ -661,6 +686,15 @@ nav {
       color: var(--alertWarningPanelText, $fallback--text);
     }
   }
+
+  &.success {
+    background-color: var(--alertSuccess, $fallback--alertWarning);
+    color: var(--alertSuccessText, $fallback--text);
+
+    .panel-heading & {
+      color: var(--alertSuccessPanelText, $fallback--text);
+    }
+  }
 }
 
 .faint {
@@ -764,13 +798,6 @@ nav {
   }
 }
 
-.select-multiple {
-  display: flex;
-  .option-list {
-    margin: 0;
-    padding-left: .5em;
-  }
-}
 .setting-list,
 .option-list{
   list-style-type: none;
@@ -797,7 +824,7 @@ nav {
   }
 }
 
-.btn.btn-default {
+.btn.button-default {
   min-height: 28px;
 }
 
@@ -817,16 +844,10 @@ nav {
 }
 
 .new-status-notification {
-  position:relative;
+  position: relative;
-  margin-top: -1px;
   font-size: 1.1em;
-  border-width: 1px 0 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-  padding: 10px;
   z-index: 1;
-  background-color: $fallback--fg;
+  flex: 1;
-  background-color: var(--panel, $fallback--fg);
 }
 
 .chat-layout {
@@ -834,6 +855,11 @@ nav {
   overflow: hidden;
   height: 100%;
 
+  // Get rid of scrollbar on body as scrolling happens on different element
+  body {
+    overflow: hidden;
+  }
+
   // Ensures the fixed position of the mobile browser bars on scroll up / down events.
   // Prevents the mobile browser bars from overlapping or hiding the message posting form.
   @media all and (max-width: 800px) {

src/App.vue

@@ -1,12 +1,11 @@
 <template>
   <div
     id="app"
-    :style="bgAppStyle"
+    :style="bgStyle"
   >
     <div
       id="app_bg_wrapper"
       class="app-bg-wrapper"
-      :style="bgStyle"
     />
     <MobileNav v-if="isMobileLayout" />
     <DesktopNav v-else />
@@ -50,10 +49,11 @@
       </div>
       <media-modal />
     </div>
-    <chat-panel
+    <shout-panel
-      v-if="currentUser && chat"
+      v-if="currentUser && shout && !hideShoutbox"
       :floating="true"
-      class="floating-chat mobile-hidden"
+      class="floating-shout mobile-hidden"
+      :class="{ 'left': shoutboxPosition }"
     />
     <MobilePostStatusButton />
     <UserReportingModal />

src/boot/after_store.js

@@ -7,6 +7,7 @@ import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import { applyTheme } from '../services/style_setter/style_setter.js'
+import FaviconService from '../services/favicon_service/favicon_service.js'
 
 let staticInitialResults = null
 
@@ -50,6 +51,7 @@ const getInstanceConfig = async ({ store }) => {
       const vapidPublicKey = data.pleroma.vapid_public_key
 
       store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
+      store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
 
       if (vapidPublicKey) {
         store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
@@ -238,7 +240,7 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
       store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
       store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
-      store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
+      store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
       store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
@@ -326,6 +328,8 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const width = windowWidth()
   store.dispatch('setMobileLayout', width <= 800)
 
+  FaviconService.initFaviconService()
+
   const overrides = window.___pleromafe_dev_overrides || {}
   const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
   store.dispatch('setInstanceOption', { name: 'server', value: server })

src/boot/routes.js

@@ -16,7 +16,7 @@ import FollowRequests from 'components/follow_requests/follow_requests.vue'
 import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
 import Notifications from 'components/notifications/notifications.vue'
 import AuthForm from 'components/auth_form/auth_form.js'
-import ChatPanel from 'components/chat_panel/chat_panel.vue'
+import ShoutPanel from 'components/shout_panel/shout_panel.vue'
 import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
 import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
@@ -64,7 +64,7 @@ export default (store) => {
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
     { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
     { name: 'login', path: '/login', component: AuthForm },
-    { name: 'chat-panel', path: '/chat-panel', component: ChatPanel, props: () => ({ floating: false }) },
+    { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
     { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
     { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
     { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },

src/components/account_actions/account_actions.js

@@ -35,7 +35,7 @@ const AccountActions = {
       this.$store.dispatch('unblockUser', this.user.id)
     },
     reportUser () {
-      this.$store.dispatch('openUserReportingModal', this.user.id)
+      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
     },
     openChat () {
       this.$router.push({

src/components/account_actions/account_actions.vue

@@ -4,23 +4,21 @@
       trigger="click"
       placement="bottom"
       :bound-to="{ x: 'container' }"
+      remove-padding
     >
-      <div
+      <template v-slot:content>
-        slot="content"
-        class="account-tools-popover"
-      >
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn btn-default dropdown-item"
+              class="btn button-default dropdown-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn btn-default dropdown-item"
+              class="btn button-default dropdown-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -32,42 +30,41 @@
           </template>
           <button
             v-if="relationship.blocking"
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn btn-default btn-block dropdown-item"
+            class="btn button-default btn-block dropdown-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
           </button>
         </div>
-      </div>
+      </template>
-      <div
+      <template v-slot:trigger>
-        slot="trigger"
+        <button class="button-unstyled ellipsis-button">
-        class="btn btn-default ellipsis-button"
+          <FAIcon
-      >
+            class="icon"
-        <FAIcon
+            icon="ellipsis-v"
-          class="icon"
+          />
-          icon="ellipsis-v"
+        </button>
-        />
+      </template>
-      </div>
     </Popover>
   </div>
 </template>
@@ -82,7 +79,6 @@
   }
 
   .ellipsis-button {
-    cursor: pointer;
     width: 2.5em;
     margin: -0.5em 0;
     padding: 0.5em 0;

src/components/async_component_error/async_component_error.vue

@@ -8,7 +8,7 @@
         {{ $t('general.error_retry') }}
       </p>
       <button
-        class="btn"
+        class="btn button-default"
         @click="retry"
       >
         {{ $t('general.retry') }}

src/components/attachment/attachment.js

@@ -1,4 +1,5 @@
 import StillImage from '../still-image/still-image.vue'
+import Flash from '../flash/flash.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
@@ -8,14 +9,18 @@ import {
   faFile,
   faMusic,
   faImage,
-  faVideo
+  faVideo,
+  faPlayCircle,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faFile,
   faMusic,
   faImage,
-  faVideo
+  faVideo,
+  faPlayCircle,
+  faTimes
 )
 
 const Attachment = {
@@ -39,6 +44,7 @@ const Attachment = {
     }
   },
   components: {
+    Flash,
     StillImage,
     VideoAttachment
   },

src/components/attachment/attachment.vue

@@ -42,15 +42,13 @@
         icon="play-circle"
       />
     </a>
-    <div
+    <button
       v-if="nsfw && hideNsfwLocal && !hidden"
-      class="hider"
+      class="button-unstyled hider"
+      @click.prevent="toggleHidden"
     >
-      <a
+      <FAIcon icon="times" />
-        href="#"
+    </button>
-        @click.prevent="toggleHidden"
-      >Hide</a>
-    </div>
 
     <a
       v-if="type === 'image' && (!hidden || preloadImage)"
@@ -119,6 +117,11 @@
         <!-- eslint-enable vue/no-v-html -->
       </div>
     </div>
+
+    <Flash
+      v-if="type === 'flash'"
+      :src="attachment.large_thumb_url || attachment.url"
+    />
   </div>
 </template>
 
@@ -174,6 +177,7 @@
   }
 
   .non-gallery.attachment {
+    &.flash,
     &.video {
       flex: 1 0 40%;
     }
@@ -234,15 +238,23 @@
   .hider {
     position: absolute;
     right: 0;
-    white-space: nowrap;
     margin: 10px;
-    padding: 5px;
+    padding: 0;
-    background: rgba(230,230,230,0.6);
-    font-weight: bold;
     z-index: 4;
-    line-height: 1;
     border-radius: $fallback--tooltipRadius;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    text-align: center;
+    width: 2em;
+    height: 2em;
+    font-size: 1.25em;
+    // TODO: theming? hard to theme with unknown background image color
+    background: rgba(230, 230, 230, 0.7);
+    .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    &:hover .svg-inline--fa {
+      color: rgba(0, 0, 0, 0.9);
+    }
   }
 
   video {

src/components/basic_user_card/basic_user_card.js

@@ -1,5 +1,6 @@
 import UserCard from '../user_card/user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const BasicUserCard = {
@@ -13,7 +14,8 @@ const BasicUserCard = {
   },
   components: {
     UserCard,
-    UserAvatar
+    UserAvatar,
+    RichContent
   },
   methods: {
     toggleUserExpanded () {

src/components/basic_user_card/basic_user_card.vue

@@ -25,24 +25,18 @@
         :title="user.name"
         class="basic-user-card-user-name"
       >
-        <!-- eslint-disable vue/no-v-html -->
+        <RichContent
-        <span
-          v-if="user.name_html"
           class="basic-user-card-user-name-value"
-          v-html="user.name_html"
+          :html="user.name"
+          :emoji="user.emoji"
         />
-        <!-- eslint-enable vue/no-v-html -->
-        <span
-          v-else
-          class="basic-user-card-user-name-value"
-        >{{ user.name }}</span>
       </div>
       <div>
         <router-link
           class="basic-user-card-screen-name"
           :to="userProfileLink(user)"
         >
-          @{{ user.screen_name }}
+          @{{ user.screen_name_ui }}
         </router-link>
       </div>
       <slot />

src/components/block_card/block_card.vue

@@ -3,7 +3,7 @@
     <div class="block-card-content-container">
       <button
         v-if="blocked"
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="progress"
         @click="unblockUser"
       >
@@ -16,7 +16,7 @@
       </button>
       <button
         v-else
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="progress"
         @click="blockUser"
       >

src/components/chat/chat.js

@@ -73,7 +73,7 @@ const Chat = {
     },
     formPlaceholder () {
       if (this.recipient) {
-        return this.$t('chats.message_user', { nickname: this.recipient.screen_name })
+        return this.$t('chats.message_user', { nickname: this.recipient.screen_name_ui })
       } else {
         return ''
       }
@@ -234,6 +234,13 @@ const Chat = {
       const scrollable = this.$refs.scrollable
       return scrollable && scrollable.scrollTop <= 0
     },
+    cullOlderCheck () {
+      window.setTimeout(() => {
+        if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
+          this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId)
+        }
+      }, 5000)
+    },
     handleScroll: _.throttle(function () {
       if (!this.currentChat) { return }
 
@@ -241,6 +248,7 @@ const Chat = {
         this.fetchChat({ maxId: this.currentChatMessageService.minId })
       } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) {
         this.jumpToBottomButtonVisible = false
+        this.cullOlderCheck()
         if (this.newMessageCount > 0) {
           // Use a delay before marking as read to prevent situation where new messages
           // arrive just as you're leaving the view and messages that you didn't actually

src/components/chat/chat.scss

@@ -98,10 +98,10 @@
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;
-      transform: translate(-50%, 0);
-      border-radius: 100%;
       margin-top: -1rem;
-      padding: 0;
+      padding: 0.1em;
+      border-radius: 50px;
+      position: absolute;
     }
 
     .chat-loading-error {

src/components/chat_list/chat_list.vue

@@ -10,7 +10,10 @@
       <span class="title">
         {{ $t("chats.chats") }}
       </span>
-      <button @click="newChat">
+      <button
+        class="button-default"
+        @click="newChat"
+      >
         {{ $t("chats.new") }}
       </button>
     </div>
@@ -20,10 +23,7 @@
         class="timeline"
       >
         <List :items="sortedChatList">
-          <template
+          <template v-slot:item="{item}">
-            slot="item"
-            slot-scope="{item}"
-          >
             <ChatListItem
               :key="item.id"
               :compact="false"

src/components/chat_list_item/chat_list_item.js

@@ -1,5 +1,5 @@
 import { mapState } from 'vuex'
-import StatusContent from '../status_content/status_content.vue'
+import StatusBody from '../status_content/status_content.vue'
 import fileType from 'src/services/file_type/file_type.service'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
@@ -16,7 +16,7 @@ const ChatListItem = {
     AvatarList,
     Timeago,
     ChatTitle,
-    StatusContent
+    StatusBody
   },
   computed: {
     ...mapState({
@@ -38,12 +38,14 @@ const ChatListItem = {
     },
     messageForStatusContent () {
       const message = this.chat.lastMessage
+      const messageEmojis = message ? message.emojis : []
       const isYou = message && message.account_id === this.currentUser.id
       const content = message ? (this.attachmentInfo || message.content) : ''
       const messagePreview = isYou ? `<i>${this.$t('chats.you')}</i> ${content}` : content
       return {
         summary: '',
-        statusnet_html: messagePreview,
+        emojis: messageEmojis,
+        raw_html: messagePreview,
         text: messagePreview,
         attachments: []
       }

src/components/chat_list_item/chat_list_item.scss

@@ -77,18 +77,15 @@
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
   }
 
-  .StatusContent {
+  .chat-preview-body {
-    img.emoji {
+    --emoji-size: 1.4em;
-      width: 1.4em;
-      height: 1.4em;
-    }
   }
 
   .time-wrapper {
     line-height: 1.4em;
   }
 
-  .single-line {
+  .chat-preview-body {
     padding-right: 1em;
   }
 }

src/components/chat_list_item/chat_list_item.vue

@@ -29,7 +29,8 @@
         </div>
       </div>
       <div class="chat-preview">
-        <StatusContent
+        <StatusBody
+          class="chat-preview-body"
           :status="messageForStatusContent"
           :single-line="true"
         />

src/components/chat_message/chat_message.js

@@ -57,8 +57,9 @@ const ChatMessage = {
     messageForStatusContent () {
       return {
         summary: '',
-        statusnet_html: this.message.content,
+        emojis: this.message.emojis,
-        text: this.message.content,
+        raw_html: this.message.content || '',
+        text: this.message.content || '',
         attachments: this.message.attachments
       }
     },

src/components/chat_message/chat_message.scss

@@ -31,9 +31,6 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
   }
 
   .popover {
@@ -92,8 +89,9 @@
   }
 
   .without-attachment {
-    .status-content {
+    .message-content {
-      &::after {
+      // TODO figure out how to do it properly
+      .RichContent::after {
         margin-right: 5.4em;
         content: " ";
         display: inline-block;
@@ -165,6 +163,7 @@
   .visible {
     opacity: 1;
   }
+
 }
 
 .chat-message-date-separator {

src/components/chat_message/chat_message.vue

@@ -50,35 +50,38 @@
                 @show="menuOpened = true"
                 @close="menuOpened = false"
               >
-                <div slot="content">
+                <template v-slot:content>
                   <div class="dropdown-menu">
                     <button
-                      class="dropdown-item dropdown-item-icon"
+                      class="button-default dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
                     </button>
                   </div>
-                </div>
+                </template>
-                <button
+                <template v-slot:trigger>
-                  slot="trigger"
+                  <button
-                  class="menu-icon"
+                    class="button-default menu-icon"
-                  :title="$t('chats.more')"
+                    :title="$t('chats.more')"
-                >
+                  >
-                  <FAIcon icon="ellipsis-h" />
+                    <FAIcon icon="ellipsis-h" />
-                </button>
+                  </button>
+                </template>
               </Popover>
             </div>
             <StatusContent
+              class="message-content"
               :status="messageForStatusContent"
               :full-content="true"
             >
-              <span
+              <template v-slot:footer>
-                slot="footer"
+                <span
-                class="created-at"
+                  class="created-at"
-              >
+                >
-                {{ createdAt }}
+                  {{ createdAt }}
-              </span>
+                </span>
+              </template>
             </StatusContent>
           </div>
         </div>

src/components/chat_message_date/chat_message_date.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import localeService from 'src/services/locale/locale.service.js'
+
 export default {
   name: 'Timeago',
   props: ['date'],
@@ -16,7 +18,7 @@ export default {
       if (this.date.getTime() === today.getTime()) {
         return this.$t('display_date.today')
       } else {
-        return this.date.toLocaleDateString('en', { day: 'numeric', month: 'long' })
+        return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
       }
     }
   }

src/components/chat_title/chat_title.js

@@ -12,7 +12,7 @@ export default Vue.component('chat-title', {
   ],
   computed: {
     title () {
-      return this.user ? this.user.screen_name : ''
+      return this.user ? this.user.screen_name_ui : ''
     },
     htmlTitle () {
       return this.user ? this.user.name_html : ''

src/components/conversation/conversation.vue

@@ -10,12 +10,13 @@
       class="panel-heading conversation-heading"
     >
       <span class="title"> {{ $t('timeline.conversation') }} </span>
-      <span v-if="collapsable">
+      <button
-        <a
+        v-if="collapsable"
-          href="#"
+        class="button-unstyled -link"
-          @click.prevent="toggleExpanded"
+        @click.prevent="toggleExpanded"
-        >{{ $t('timeline.collapse') }}</a>
+      >
-      </span>
+        {{ $t('timeline.collapse') }}
+      </button>
     </div>
     <status
       v-for="status in conversation"
@@ -49,7 +50,6 @@
 
 .Conversation {
   .conversation-status {
-    border-left: none;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: var(--border, $fallback--border);
@@ -57,13 +57,6 @@
   }
 
   &.-expanded {
-    .conversation-status {
-      border-color: $fallback--border;
-      border-color: var(--border, $fallback--border);
-      border-left-color: $fallback--cRed;
-      border-left-color: var(--cRed, $fallback--cRed);
-    }
-
     .conversation-status:last-child {
       border-bottom: none;
       border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;

src/components/desktop_nav/desktop_nav.scss

@@ -5,6 +5,10 @@
   width: 100%;
   position: fixed;
 
+  a {
+    color: var(--topBarLink, $fallback--link);
+  }
+
   .inner-nav {
     display: grid;
     grid-template-rows: 50px;
@@ -21,7 +25,7 @@
     grid-template-areas: "logo sitename actions";
   }
 
-  button {
+  .button-default {
     &, svg {
       color: $fallback--text;
       color: var(--btnTopBarText, $fallback--text);
@@ -80,12 +84,13 @@
   .nav-icon {
     margin-left: 0.2em;
     width: 2em;
+    height: 100%;
     text-align: center;
-  }
 
-  a, a svg {
+    .svg-inline--fa {
-    color: $fallback--link;
+      color: $fallback--link;
-    color: var(--topBarLink, $fallback--link);
+      color: var(--topBarLink, $fallback--link);
+    }
   }
 
   .sitename {

src/components/desktop_nav/desktop_nav.vue

@@ -36,9 +36,8 @@
           @toggled="onSearchBarToggled"
           @click.stop.native
         />
-        <a
+        <button
-          href="#"
+          class="button-unstyled nav-icon"
-          class="nav-icon"
           @click.stop="openSettingsModal"
         >
           <FAIcon
@@ -47,29 +46,32 @@
             icon="cog"
             :title="$t('nav.preferences')"
           />
-        </a>
+        </button>
         <a
           v-if="currentUser && currentUser.role === 'admin'"
           href="/pleroma/admin/#/login-pleroma"
           class="nav-icon"
           target="_blank"
-        ><FAIcon
+        >
-          fixed-width
+          <FAIcon
-          class="fa-scale-110 fa-old-padding"
+            fixed-width
-          icon="tachometer-alt"
+            class="fa-scale-110 fa-old-padding"
-          :title="$t('nav.administration')"
+            icon="tachometer-alt"
-        /></a>
+            :title="$t('nav.administration')"
-        <a
+          />
+        </a>
+        <button
           v-if="currentUser"
-          href="#"
+          class="button-unstyled nav-icon"
-          class="nav-icon"
           @click.prevent="logout"
-        ><FAIcon
+        >
-          fixed-width
+          <FAIcon
-          class="fa-scale-110 fa-old-padding"
+            fixed-width
-          icon="sign-out-alt"
+            class="fa-scale-110 fa-old-padding"
-          :title="$t('login.logout')"
+            icon="sign-out-alt"
-        /></a>
+            :title="$t('login.logout')"
+          />
+        </button>
       </div>
     </div>
   </nav>

src/components/domain_mute_card/domain_mute_card.vue

@@ -6,20 +6,20 @@
     <ProgressButton
       v-if="muted"
       :click="unmuteDomain"
-      class="btn btn-default"
+      class="btn button-default"
     >
       {{ $t('domain_mute_card.unmute') }}
-      <template slot="progress">
+      <template v-slot:progress>
         {{ $t('domain_mute_card.unmute_progress') }}
       </template>
     </ProgressButton>
     <ProgressButton
       v-else
       :click="muteDomain"
-      class="btn btn-default"
+      class="btn button-default"
     >
       {{ $t('domain_mute_card.mute') }}
-      <template slot="progress">
+      <template v-slot:progress>
         {{ $t('domain_mute_card.mute_progress') }}
       </template>
     </ProgressButton>

src/components/emoji_input/emoji_input.js

@@ -57,6 +57,7 @@ const EmojiInput = {
       required: true,
       type: Function
     },
+    // TODO VUE3: change to modelValue, change 'input' event to 'input'
     value: {
       /**
        * Used for v-model
@@ -114,7 +115,8 @@ const EmojiInput = {
       showPicker: false,
       temporarilyHideSuggestions: false,
       keepOpen: false,
-      disableClickOutside: false
+      disableClickOutside: false,
+      suggestions: []
     }
   },
   components: {
@@ -124,21 +126,6 @@ const EmojiInput = {
     padEmoji () {
       return this.$store.getters.mergedConfig.padEmoji
     },
-    suggestions () {
-      const firstchar = this.textAtCaret.charAt(0)
-      if (this.textAtCaret === firstchar) { return [] }
-      const matchedSuggestions = this.suggest(this.textAtCaret)
-      if (matchedSuggestions.length <= 0) {
-        return []
-      }
-      return take(matchedSuggestions, 5)
-        .map(({ imageUrl, ...rest }, index) => ({
-          ...rest,
-          // eslint-disable-next-line camelcase
-          img: imageUrl || '',
-          highlighted: index === this.highlighted
-        }))
-    },
     showSuggestions () {
       return this.focused &&
         this.suggestions &&
@@ -157,45 +144,68 @@ const EmojiInput = {
     }
   },
   mounted () {
-    const slots = this.$slots.default
+    const { root } = this.$refs
-    if (!slots || slots.length === 0) return
+    const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
-    const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag))
     if (!input) return
     this.input = input
     this.resize()
-    input.elm.addEventListener('blur', this.onBlur)
+    input.addEventListener('blur', this.onBlur)
-    input.elm.addEventListener('focus', this.onFocus)
+    input.addEventListener('focus', this.onFocus)
-    input.elm.addEventListener('paste', this.onPaste)
+    input.addEventListener('paste', this.onPaste)
-    input.elm.addEventListener('keyup', this.onKeyUp)
+    input.addEventListener('keyup', this.onKeyUp)
-    input.elm.addEventListener('keydown', this.onKeyDown)
+    input.addEventListener('keydown', this.onKeyDown)
-    input.elm.addEventListener('click', this.onClickInput)
+    input.addEventListener('click', this.onClickInput)
-    input.elm.addEventListener('transitionend', this.onTransition)
+    input.addEventListener('transitionend', this.onTransition)
-    input.elm.addEventListener('input', this.onInput)
+    input.addEventListener('input', this.onInput)
   },
   unmounted () {
     const { input } = this
     if (input) {
-      input.elm.removeEventListener('blur', this.onBlur)
+      input.removeEventListener('blur', this.onBlur)
-      input.elm.removeEventListener('focus', this.onFocus)
+      input.removeEventListener('focus', this.onFocus)
-      input.elm.removeEventListener('paste', this.onPaste)
+      input.removeEventListener('paste', this.onPaste)
-      input.elm.removeEventListener('keyup', this.onKeyUp)
+      input.removeEventListener('keyup', this.onKeyUp)
-      input.elm.removeEventListener('keydown', this.onKeyDown)
+      input.removeEventListener('keydown', this.onKeyDown)
-      input.elm.removeEventListener('click', this.onClickInput)
+      input.removeEventListener('click', this.onClickInput)
-      input.elm.removeEventListener('transitionend', this.onTransition)
+      input.removeEventListener('transitionend', this.onTransition)
-      input.elm.removeEventListener('input', this.onInput)
+      input.removeEventListener('input', this.onInput)
     }
   },
   watch: {
     showSuggestions: function (newValue) {
       this.$emit('shown', newValue)
+    },
+    textAtCaret: async function (newWord) {
+      const firstchar = newWord.charAt(0)
+      this.suggestions = []
+      if (newWord === firstchar) return
+      const matchedSuggestions = await this.suggest(newWord)
+      // Async: cancel if textAtCaret has changed during wait
+      if (this.textAtCaret !== newWord) return
+      if (matchedSuggestions.length <= 0) return
+      this.suggestions = take(matchedSuggestions, 5)
+        .map(({ imageUrl, ...rest }) => ({
+          ...rest,
+          img: imageUrl || ''
+        }))
+    },
+    suggestions (newValue) {
+      this.$nextTick(this.resize)
     }
   },
   methods: {
+    focusPickerInput () {
+      const pickerEl = this.$refs.picker.$el
+      if (!pickerEl) return
+      const pickerInput = pickerEl.querySelector('input')
+      if (pickerInput) pickerInput.focus()
+    },
     triggerShowPicker () {
       this.showPicker = true
       this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
         this.scrollIntoView()
+        this.focusPickerInput()
       })
       // This temporarily disables "click outside" handler
       // since external trigger also means click originates
@@ -206,11 +216,12 @@ const EmojiInput = {
       }, 0)
     },
     togglePicker () {
-      this.input.elm.focus()
+      this.input.focus()
       this.showPicker = !this.showPicker
       if (this.showPicker) {
         this.scrollIntoView()
         this.$refs.picker.startEmojiLoad()
+        this.$nextTick(this.focusPickerInput)
       }
     },
     replace (replacement) {
@@ -251,13 +262,13 @@ const EmojiInput = {
       this.$emit('input', newValue)
       const position = this.caret + (insertion + spaceAfter + spaceBefore).length
       if (!keepOpen) {
-        this.input.elm.focus()
+        this.input.focus()
       }
 
       this.$nextTick(function () {
         // Re-focus inputbox after clicking suggestion
         // Set selection right after the replacement instead of the very end
-        this.input.elm.setSelectionRange(position, position)
+        this.input.setSelectionRange(position, position)
         this.caret = position
       })
     },
@@ -274,9 +285,9 @@ const EmojiInput = {
 
         this.$nextTick(function () {
           // Re-focus inputbox after clicking suggestion
-          this.input.elm.focus()
+          this.input.focus()
           // Set selection right after the replacement instead of the very end
-          this.input.elm.setSelectionRange(position, position)
+          this.input.setSelectionRange(position, position)
           this.caret = position
         })
         e.preventDefault()
@@ -338,7 +349,7 @@ const EmojiInput = {
       }
 
       this.$nextTick(() => {
-        const { offsetHeight } = this.input.elm
+        const { offsetHeight } = this.input
         const { picker } = this.$refs
         const pickerBottom = picker.$el.getBoundingClientRect().bottom
         if (pickerBottom > window.innerHeight) {
@@ -403,8 +414,8 @@ const EmojiInput = {
 
         // Scroll the input element to the position of the cursor
         this.$nextTick(() => {
-          this.input.elm.blur()
+          this.input.blur()
-          this.input.elm.focus()
+          this.input.focus()
         })
       }
       // Disable suggestions hotkeys if suggestions are hidden
@@ -433,7 +444,7 @@ const EmojiInput = {
       // de-focuses the element (i.e. default browser behavior)
       if (key === 'Escape') {
         if (!this.temporarilyHideSuggestions) {
-          this.input.elm.focus()
+          this.input.focus()
         }
       }
 
@@ -469,7 +480,7 @@ const EmojiInput = {
       if (!panel) return
       const picker = this.$refs.picker.$el
       const panelBody = this.$refs['panel-body']
-      const { offsetHeight, offsetTop } = this.input.elm
+      const { offsetHeight, offsetTop } = this.input
       const offsetBottom = offsetTop + offsetHeight
 
       this.setPlacement(panelBody, panel, offsetBottom)
@@ -483,7 +494,7 @@ const EmojiInput = {
 
       if (this.placement === 'top' || (this.placement === 'auto' && this.overflowsBottom(container))) {
         target.style.top = 'auto'
-        target.style.bottom = this.input.elm.offsetHeight + 'px'
+        target.style.bottom = this.input.offsetHeight + 'px'
       }
     },
     overflowsBottom (el) {

src/components/emoji_input/emoji_input.vue

@@ -1,18 +1,20 @@
 <template>
   <div
+    ref="root"
     v-click-outside="onClickOutside"
     class="emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
     <slot />
     <template v-if="enableEmojiPicker">
-      <div
+      <button
         v-if="!hideEmojiButton"
-        class="emoji-picker-icon"
+        class="button-unstyled emoji-picker-icon"
+        type="button"
         @click.prevent="togglePicker"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
-      </div>
+      </button>
       <EmojiPicker
         v-if="enableEmojiPicker"
         ref="picker"
@@ -37,7 +39,7 @@
           v-for="(suggestion, index) in suggestions"
           :key="index"
           class="autocomplete-item"
-          :class="{ highlighted: suggestion.highlighted }"
+          :class="{ highlighted: index === highlighted }"
           @click.stop.prevent="onClick($event, suggestion)"
         >
           <span class="image">

src/components/emoji_input/suggestor.js

@@ -1,4 +1,3 @@
-import { debounce } from 'lodash'
 /**
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
@@ -11,19 +10,19 @@ import { debounce } from 'lodash'
  * doesn't support user linking you can just provide only emoji.
  */
 
-const debounceUserSearch = debounce((data, input) => {
+export default data => {
-  data.updateUsersList(input)
+  const emojiCurry = suggestEmoji(data.emoji)
-}, 500)
+  const usersCurry = data.store && suggestUsers(data.store)
-
+  return input => {
-export default data => input => {
+    const firstChar = input[0]
-  const firstChar = input[0]
+    if (firstChar === ':' && data.emoji) {
-  if (firstChar === ':' && data.emoji) {
+      return emojiCurry(input)
-    return suggestEmoji(data.emoji)(input)
+    }
+    if (firstChar === '@' && usersCurry) {
+      return usersCurry(input)
+    }
+    return []
   }
-  if (firstChar === '@' && data.users) {
-    return suggestUsers(data)(input)
-  }
-  return []
 }
 
 export const suggestEmoji = emojis => input => {
@@ -57,50 +56,75 @@ export const suggestEmoji = emojis => input => {
     })
 }
 
-export const suggestUsers = data => input => {
+export const suggestUsers = ({ dispatch, state }) => {
-  const noPrefix = input.toLowerCase().substr(1)
+  // Keep some persistent values in closure, most importantly for the
-  const users = data.users
+  // custom debounce to work. Lodash debounce does not return a promise.
+  let suggestions = []
+  let previousQuery = ''
+  let timeout = null
+  let cancelUserSearch = null
 
-  const newUsers = users.filter(
+  const userSearch = (query) => dispatch('searchUsers', { query })
-    user =>
+  const debounceUserSearch = (query) => {
-      user.screen_name.toLowerCase().startsWith(noPrefix) ||
+    cancelUserSearch && cancelUserSearch()
-      user.name.toLowerCase().startsWith(noPrefix)
+    return new Promise((resolve, reject) => {
-
+      timeout = setTimeout(() => {
-    /* taking only 20 results so that sorting is a bit cheaper, we display
+        userSearch(query).then(resolve).catch(reject)
-     * only 5 anyway. could be inaccurate, but we ideally we should query
+      }, 300)
-     * backend anyway
+      cancelUserSearch = () => {
-     */
+        clearTimeout(timeout)
-  ).slice(0, 20).sort((a, b) => {
+        resolve([])
-    let aScore = 0
+      }
-    let bScore = 0
+    })
-
+  }
-    // Matches on screen name (i.e. user@instance) makes a priority
+
-    aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+  return async input => {
-    bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+    const noPrefix = input.toLowerCase().substr(1)
-
+    if (previousQuery === noPrefix) return suggestions
-    // Matches on name takes second priority
+
-    aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+    suggestions = []
-    bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+    previousQuery = noPrefix
-
+    // Fetch more and wait, don't fetch if there's the 2nd @ because
-    const diff = (bScore - aScore) * 10
+    // the backend user search can't deal with it.
-
+    // Reference semantics make it so that we get the updated data after
-    // Then sort alphabetically
+    // the await.
-    const nameAlphabetically = a.name > b.name ? 1 : -1
+    if (!noPrefix.includes('@')) {
-    const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
+      await debounceUserSearch(noPrefix)
-
+    }
-    return diff + nameAlphabetically + screenNameAlphabetically
+
-    /* eslint-disable camelcase */
+    const newSuggestions = state.users.users.filter(
-  }).map(({ screen_name, name, profile_image_url_original }) => ({
+      user =>
-    displayText: screen_name,
+        user.screen_name.toLowerCase().startsWith(noPrefix) ||
-    detailText: name,
+        user.name.toLowerCase().startsWith(noPrefix)
-    imageUrl: profile_image_url_original,
+    ).slice(0, 20).sort((a, b) => {
-    replacement: '@' + screen_name + ' '
+      let aScore = 0
-  }))
+      let bScore = 0
-
+
-  // BE search users to get more comprehensive results
+      // Matches on screen name (i.e. user@instance) makes a priority
-  if (data.updateUsersList) {
+      aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
-    debounceUserSearch(data, noPrefix)
+      bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+
+      // Matches on name takes second priority
+      aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+      bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+
+      const diff = (bScore - aScore) * 10
+
+      // Then sort alphabetically
+      const nameAlphabetically = a.name > b.name ? 1 : -1
+      const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
+
+      return diff + nameAlphabetically + screenNameAlphabetically
+      /* eslint-disable camelcase */
+    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
+      displayText: screen_name_ui,
+      detailText: name,
+      imageUrl: profile_image_url_original,
+      replacement: '@' + screen_name + ' '
+    }))
+    /* eslint-enable camelcase */
+
+    suggestions = newSuggestions || []
+    return suggestions
   }
-  return newUsers
-  /* eslint-enable camelcase */
 }

src/components/emoji_reactions/emoji_reactions.vue

@@ -6,7 +6,7 @@
       :users="accountsForEmoji[reaction.name]"
     >
       <button
-        class="emoji-reaction btn btn-default"
+        class="emoji-reaction btn button-default"
         :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"

src/components/export_import/export_import.vue

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

src/components/exporter/exporter.vue

@@ -11,7 +11,7 @@
     </div>
     <button
       v-else
-      class="btn btn-default"
+      class="btn button-default"
       @click="process"
     >
       {{ exportButtonLabel }}

src/components/extra_buttons/extra_buttons.js

@@ -5,10 +5,12 @@ import {
   faBookmark,
   faEyeSlash,
   faThumbtack,
-  faShareAlt
+  faShareAlt,
+  faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as faBookmarkReg
+  faBookmark as faBookmarkReg,
+  faFlag
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
@@ -17,7 +19,9 @@ library.add(
   faBookmarkReg,
   faEyeSlash,
   faThumbtack,
-  faShareAlt
+  faShareAlt,
+  faExternalLinkAlt,
+  faFlag
 )
 
 const ExtraButtons = {
@@ -64,6 +68,9 @@ const ExtraButtons = {
       this.$store.dispatch('unbookmark', { id: this.status.id })
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
+    },
+    reportStatus () {
+      this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
     }
   },
   computed: {

src/components/extra_buttons/extra_buttons.vue

@@ -1,18 +1,17 @@
 <template>
   <Popover
+    class="ExtraButtons"
     trigger="click"
     placement="top"
-    class="extra-button-popover"
+    :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
+    remove-padding
   >
-    <div
+    <template v-slot:content="{close}">
-      slot="content"
-      slot-scope="{close}"
-    >
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
           <FAIcon
@@ -22,7 +21,7 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
           <FAIcon
@@ -32,7 +31,7 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="pinStatus"
           @click="close"
         >
@@ -43,7 +42,7 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="unpinStatus"
           @click="close"
         >
@@ -54,7 +53,7 @@
         </button>
         <button
           v-if="!status.bookmarked"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="bookmarkStatus"
           @click="close"
         >
@@ -65,7 +64,7 @@
         </button>
         <button
           v-if="status.bookmarked"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
@@ -76,7 +75,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="deleteStatus"
           @click="close"
         >
@@ -86,7 +85,7 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="dropdown-item dropdown-item-icon"
+          class="button-default dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
@@ -95,14 +94,38 @@
             icon="share-alt"
           /><span>{{ $t("status.copy_link") }}</span>
         </button>
+        <a
+          v-if="!status.is_local"
+          class="button-default dropdown-item dropdown-item-icon"
+          title="Source"
+          :href="status.external_url"
+          target="_blank"
+        >
+          <FAIcon
+            fixed-width
+            icon="external-link-alt"
+          /><span>{{ $t("status.external_source") }}</span>
+        </a>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click.prevent="reportStatus"
+          @click="close"
+        >
+          <FAIcon
+            fixed-width
+            :icon="['far', 'flag']"
+          /><span>{{ $t("user_card.report") }}</span>
+        </button>
       </div>
-    </div>
+    </template>
-    <span slot="trigger">
+    <template v-slot:trigger>
-      <FAIcon
+      <button class="button-unstyled popover-trigger">
-        class="ExtraButtons fa-scale-110 fa-old-padding"
+        <FAIcon
-        icon="ellipsis-h"
+          class="fa-scale-110 fa-old-padding"
-      />
+          icon="ellipsis-h"
-    </span>
+        />
+      </button>
+    </template>
   </Popover>
 </template>
 
@@ -112,13 +135,20 @@
 @import '../../_variables.scss';
 
 .ExtraButtons {
-  cursor: pointer;
+  /* override of popover internal stuff */
-  position: static;
+  .popover-trigger-button {
+    width: auto;
+  }
 
-  &:hover,
+  .popover-trigger {
-  .extra-button-popover.open & {
+    position: static;
-    color: $fallback--text;
+    padding: 10px;
-    color: var(--text, $fallback--text);
+    margin: -10px;
+
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
   }
 }
 </style>

src/components/favorite_button/favorite_button.js

@@ -31,11 +31,6 @@ const FavoriteButton = {
     }
   },
   computed: {
-    classes () {
-      return {
-        '-favorited': this.status.favorited
-      }
-    },
     ...mapGetters(['mergedConfig'])
   }
 }

src/components/favorite_button/favorite_button.vue

@@ -1,23 +1,31 @@
 <template>
-  <div v-if="loggedIn">
+  <div class="FavoriteButton">
-    <FAIcon
+    <button
-      :class="classes"
+      v-if="loggedIn"
-      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
+      class="button-unstyled interactive"
+      :class="status.favorited && '-favorited'"
       :title="$t('tool_tip.favorite')"
-      :icon="[status.favorited ? 'fas' : 'far', 'star']"
-      :spin="animated"
       @click.prevent="favorite()"
-    />
+    >
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+      <FAIcon
-  </div>
+        class="fa-scale-110 fa-old-padding"
-  <div v-else>
+        :icon="[status.favorited ? 'fas' : 'far', 'star']"
-    <FAIcon
+        :spin="animated"
-      :class="classes"
+      />
-      class="FavoriteButton fa-scale-110 fa-old-padding"
+    </button>
-      :title="$t('tool_tip.favorite')"
+    <span v-else>
-      :icon="['far', 'star']"
+      <FAIcon
-    />
+        class="fa-scale-110 fa-old-padding"
-    <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+        :title="$t('tool_tip.favorite')"
+        :icon="['far', 'star']"
+      />
+    </span>
+    <span
+      v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
+      class="action-counter"
+    >
+      {{ status.fave_num }}
+    </span>
   </div>
 </template>
 
@@ -27,19 +35,28 @@
 @import '../../_variables.scss';
 
 .FavoriteButton {
-  &.-interactive {
+  display: flex;
-    cursor: pointer;
-    animation-duration: 0.6s;
 
-    &:hover {
+  > :first-child {
+    padding: 10px;
+    margin: -10px -8px -10px -10px;
+  }
+
+  .action-counter {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .interactive {
+    .svg-inline--fa {
+      animation-duration: 0.6s;
+    }
+
+    &:hover .svg-inline--fa,
+    &.-favorited .svg-inline--fa {
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
   }
-
-  &.-favorited {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
-  }
 }
 </style>

src/components/features_panel/features_panel.js

@@ -1,12 +1,15 @@
+import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
+
 const FeaturesPanel = {
   computed: {
-    chat: function () { return this.$store.state.instance.chatAvailable },
+    shout: function () { return this.$store.state.instance.shoutAvailable },
     pleromaChatMessages: function () { return this.$store.state.instance.pleromaChatMessagesAvailable },
     gopher: function () { return this.$store.state.instance.gopherAvailable },
     whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
     mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
     minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode },
-    textlimit: function () { return this.$store.state.instance.textlimit }
+    textlimit: function () { return this.$store.state.instance.textlimit },
+    uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
   }
 }
 

src/components/features_panel/features_panel.vue

@@ -8,8 +8,8 @@
       </div>
       <div class="panel-body features-panel">
         <ul>
-          <li v-if="chat">
+          <li v-if="shout">
-            {{ $t('features_panel.chat') }}
+            {{ $t('features_panel.shout') }}
           </li>
           <li v-if="pleromaChatMessages">
             {{ $t('features_panel.pleroma_chat_messages') }}
@@ -25,6 +25,7 @@
           </li>
           <li>{{ $t('features_panel.scope_options') }}</li>
           <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
+          <li>{{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }} {{ $t('upload.file_size_units.' + uploadlimit.unit) }}</li>
         </ul>
       </div>
     </div>

src/components/flash/flash.js

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

src/components/flash/flash.vue

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

src/components/follow_button/follow_button.js

@@ -14,7 +14,7 @@ export default {
       if (this.inProgress || this.relationship.following) {
         return this.$t('user_card.follow_unfollow')
       } else if (this.relationship.requested) {
-        return this.$t('user_card.follow_again')
+        return this.$t('user_card.follow_cancel')
       } else {
         return this.$t('user_card.follow')
       }
@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     onClick () {
-      this.relationship.following ? this.unfollow() : this.follow()
+      this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
     },
     follow () {
       this.inProgress = true

src/components/follow_button/follow_button.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="btn btn-default follow-button"
+    class="btn button-default follow-button"
     :class="{ toggled: isPressed }"
     :disabled="inProgress"
     :title="title"

src/components/follow_request_card/follow_request_card.vue

@@ -2,13 +2,13 @@
   <basic-user-card :user="user">
     <div class="follow-request-card-content-container">
       <button
-        class="btn btn-default"
+        class="btn button-default"
         @click="approveUser"
       >
         {{ $t('user_card.approve') }}
       </button>
       <button
-        class="btn btn-default"
+        class="btn button-default"
         @click="denyUser"
       >
         {{ $t('user_card.deny') }}

src/components/font_control/font_control.js

@@ -1,14 +1,10 @@
 import { set } from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 export default {
+  components: {
+    Select
+  },
   props: [
     'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
   ],

src/components/font_control/font_control.vue

@@ -22,30 +22,20 @@
       class="opt-l"
       :for="name + '-o'"
     />
-    <label
+    <Select
-      :for="name + '-font-switcher'"
+      :id="name + '-font-switcher'"
-      class="select"
+      v-model="preset"
       :disabled="!present"
+      class="font-switcher"
     >
-      <select
+      <option
-        :id="name + '-font-switcher'"
+        v-for="option in availableOptions"
-        v-model="preset"
+        :key="option"
-        :disabled="!present"
+        :value="option"
-        class="font-switcher"
       >
-        <option
+        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-          v-for="option in availableOptions"
+      </option>
-          :key="option"
+    </Select>
-          :value="option"
-        >
-          {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
     <input
       v-if="isCustom"
       :id="name"
@@ -65,7 +55,8 @@
     min-width: 10em;
   }
   &.custom {
-    .select {
+    /* TODO Should make proper joiners... */
+    .font-switcher {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }

src/components/global_notice_list/global_notice_list.vue

@@ -9,11 +9,15 @@
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
-      <FAIcon
+      <button
-        class="fa-scale-110 fa-old-padding"
+        class="button-unstyled close-notice"
-        icon="times"
         @click="closeNotice(notice)"
-      />
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="times"
+        />
+      </button>
     </div>
   </div>
 </template>
@@ -54,7 +58,7 @@
   .global-error {
     background-color: var(--alertPopupError, $fallback--cRed);
     color: var(--alertPopupErrorText, $fallback--text);
-    i {
+    .svg-inline--fa {
       color: var(--alertPopupErrorText, $fallback--text);
     }
   }
@@ -62,17 +66,32 @@
   .global-warning {
     background-color: var(--alertPopupWarning, $fallback--cOrange);
     color: var(--alertPopupWarningText, $fallback--text);
-    i {
+    .svg-inline--fa {
       color: var(--alertPopupWarningText, $fallback--text);
     }
   }
 
+  .global-success {
+    background-color: var(--alertPopupSuccess, $fallback--cGreen);
+    color: var(--alertPopupSuccessText, $fallback--text);
+    .svg-inline--fa {
+      color: var(--alertPopupSuccessText, $fallback--text);
+    }
+  }
+
   .global-info {
     background-color: var(--alertPopupNeutral, $fallback--fg);
     color: var(--alertPopupNeutralText, $fallback--text);
-    i {
+    .svg-inline--fa {
       color: var(--alertPopupNeutralText, $fallback--text);
     }
   }
+
+  .close-notice {
+    padding-right: 0.2em;
+    .svg-inline--fa:hover {
+      opacity: 0.6;
+    }
+  }
 }
 </style>

src/components/hashtag_link/hashtag_link.js

@@ -0,0 +1,36 @@
+import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
+
+const HashtagLink = {
+  name: 'HashtagLink',
+  props: {
+    url: {
+      required: true,
+      type: String
+    },
+    content: {
+      required: true,
+      type: String
+    },
+    tag: {
+      required: false,
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onClick () {
+      const tag = this.tag || extractTagFromUrl(this.url)
+      if (tag) {
+        const link = this.generateTagLink(tag)
+        this.$router.push(link)
+      } else {
+        window.open(this.url, '_blank')
+      }
+    },
+    generateTagLink (tag) {
+      return `/tag/${tag}`
+    }
+  }
+}
+
+export default HashtagLink

src/components/hashtag_link/hashtag_link.scss

@@ -0,0 +1,6 @@
+.HashtagLink {
+  position: relative;
+  white-space: normal;
+  display: inline-block;
+  color: var(--link);
+}

src/components/hashtag_link/hashtag_link.vue

@@ -0,0 +1,19 @@
+<template>
+  <span
+    class="HashtagLink"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <a
+      :href="url"
+      class="original"
+      target="_blank"
+      @click.prevent="onClick"
+      v-html="content"
+    />
+    <!-- eslint-enable vue/no-v-html -->
+  </span>
+</template>
+
+<script src="./hashtag_link.js"/>
+
+<style lang="scss" src="./hashtag_link.scss"/>

src/components/image_cropper/image_cropper.js

@@ -2,12 +2,10 @@ import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes,
   faCircleNotch
 )
 
@@ -53,8 +51,7 @@ const ImageCropper = {
       cropper: undefined,
       dataUrl: undefined,
       filename: undefined,
-      submitting: false,
+      submitting: false
-      submitError: null
     }
   },
   computed: {
@@ -66,9 +63,6 @@ const ImageCropper = {
     },
     cancelText () {
       return this.cancelButtonLabel || this.$t('image_cropper.cancel')
-    },
-    submitErrorMsg () {
-      return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError
     }
   },
   methods: {
@@ -82,12 +76,8 @@ const ImageCropper = {
     },
     submit (cropping = true) {
       this.submitting = true
-      this.avatarUploadError = null
       this.submitHandler(cropping && this.cropper, this.file)
         .then(() => this.destroy())
-        .catch((err) => {
-          this.submitError = err
-        })
         .finally(() => {
           this.submitting = false
         })
@@ -113,9 +103,6 @@ const ImageCropper = {
         reader.readAsDataURL(this.file)
         this.$emit('changed', this.file, reader)
       }
-    },
-    clearError () {
-      this.submitError = null
     }
   },
   mounted () {

src/components/image_cropper/image_cropper.vue

@@ -11,21 +11,21 @@
       </div>
       <div class="image-cropper-buttons-wrapper">
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="submit()"
           v-text="saveText"
         />
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="destroy"
           v-text="cancelText"
         />
         <button
-          class="btn"
+          class="button-default btn"
           type="button"
           :disabled="submitting"
           @click="submit(false)"
@@ -37,17 +37,6 @@
           icon="circle-notch"
         />
       </div>
-      <div
-        v-if="submitError"
-        class="alert error"
-      >
-        {{ submitErrorMsg }}
-        <FAIcon
-          class="fa-scale-110 fa-old-padding"
-          icon="times"
-          @click="clearError"
-        />
-      </div>
     </div>
     <input
       ref="input"

src/components/importer/importer.vue

@@ -15,7 +15,7 @@
     />
     <button
       v-else
-      class="btn btn-default"
+      class="btn button-default"
       @click="submit"
     >
       {{ submitButtonLabel }}

src/components/interface_language_switcher/interface_language_switcher.vue

@@ -3,51 +3,35 @@
     <label for="interface-language-switcher">
       {{ $t('settings.interfaceLanguage') }}
     </label>
-    <label
+    <Select
-      for="interface-language-switcher"
+      id="interface-language-switcher"
-      class="select"
+      v-model="language"
     >
-      <select
+      <option
-        id="interface-language-switcher"
+        v-for="lang in languages"
-        v-model="language"
+        :key="lang.code"
+        :value="lang.code"
       >
-        <option
+        {{ lang.name }}
-          v-for="(langCode, i) in languageCodes"
+      </option>
-          :key="langCode"
+    </Select>
-          :value="langCode"
-        >
-          {{ languageNames[i] }}
-        </option>
-      </select>
-      <FAIcon
-        class="select-down-icon"
-        icon="chevron-down"
-      />
-    </label>
   </div>
 </template>
 
 <script>
 import languagesObject from '../../i18n/messages'
+import localeService from '../../services/locale/locale.service.js'
 import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
-import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faChevronDown
-)
 
 export default {
+  components: {
+    Select
+  },
   computed: {
-    languageCodes () {
+    languages () {
-      return languagesObject.languages
+      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
-    },
-
-    languageNames () {
-      return _.map(this.languageCodes, this.getLanguageName)
     },
 
     language: {
@@ -61,11 +45,13 @@ export default {
   methods: {
     getLanguageName (code) {
       const specialLanguageNames = {
-        'ja': 'Japanese (日本語)',
+        'ja_easy': 'やさしいにほんご',
-        'ja_easy': 'Japanese (やさしいにほんご)',
+        'zh': '简体中文',
-        'zh': 'Chinese (简体中文)'
+        'zh_Hant': '繁體中文'
       }
-      return specialLanguageNames[code] || ISO6391.getName(code)
+      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
+      const browserLocale = localeService.internalToBrowserLocale(code)
+      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
     }
   }
 }

src/components/link-preview/link-preview.js

@@ -1,3 +1,5 @@
+import { mapGetters } from 'vuex'
+
 const LinkPreview = {
   name: 'LinkPreview',
   props: [
@@ -15,11 +17,20 @@ const LinkPreview = {
       // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
       // as it makes sure to hide the image if somehow NSFW tagged preview can
       // exist.
-      return this.card.image && !this.nsfw && this.size !== 'hide'
+      return this.card.image && !this.censored && this.size !== 'hide'
+    },
+    censored () {
+      return this.nsfw && this.hideNsfwConfig
     },
     useDescription () {
       return this.card.description && /\S/.test(this.card.description)
-    }
+    },
+    hideNsfwConfig () {
+      return this.mergedConfig.hideNsfw
+    },
+    ...mapGetters([
+      'mergedConfig'
+    ])
   },
   created () {
     if (this.useImage) {

src/components/link-preview/link-preview.vue

@@ -9,12 +9,17 @@
       <div
         v-if="useImage && imageLoaded"
         class="card-image"
-        :class="{ 'small-image': size === 'small' }"
       >
         <img :src="card.image">
       </div>
       <div class="card-content">
-        <span class="card-host faint">{{ card.provider_name }}</span>
+        <span class="card-host faint">
+          <span
+            v-if="censored"
+            class="nsfw-alert alert warning"
+          >{{ $t('status.nsfw') }}</span>
+          {{ card.provider_name }}
+        </span>
         <h4 class="card-title">{{ card.title }}</h4>
         <p
           v-if="useDescription"
@@ -50,10 +55,6 @@
     }
   }
 
-  .small-image {
-    width: 80px;
-  }
-
   .card-content {
     max-height: 100%;
     margin: 0.5em;
@@ -76,6 +77,10 @@
     max-height: calc(1.2em * 3 - 1px);
   }
 
+  .nsfw-alert {
+    margin: 2em 0;
+  }
+
   color: $fallback--text;
   color: var(--text, $fallback--text);
   border-style: solid;

src/components/login_form/login_form.vue

@@ -61,7 +61,7 @@
             <button
               :disabled="loggingIn"
               type="submit"
-              class="btn btn-default"
+              class="btn button-default"
             >
               {{ $t('login.login') }}
             </button>

src/components/media_modal/media_modal.vue

@@ -73,11 +73,21 @@
   }
 }
 
+@keyframes media-fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .modal-image {
   max-width: 90%;
   max-height: 90%;
   box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
   image-orientation: from-image; // NOTE: only FF supports this
+  animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
 }
 
 .modal-view-button-arrow {

src/components/media_upload/media_upload.vue

@@ -1,33 +1,29 @@
 <template>
-  <div
+  <label
     class="media-upload"
     :class="{ disabled: disabled }"
+    :title="$t('tool_tip.media_upload')"
   >
-    <label
+    <FAIcon
-      class="label"
+      v-if="uploading"
-      :title="$t('tool_tip.media_upload')"
+      class="progress-icon"
+      icon="circle-notch"
+      spin
+    />
+    <FAIcon
+      v-if="!uploading"
+      class="new-icon"
+      icon="upload"
+    />
+    <input
+      v-if="uploadReady"
+      :disabled="disabled"
+      type="file"
+      style="position: fixed; top: -100em"
+      multiple="true"
+      @change="change"
     >
-      <FAIcon
+  </label>
-        v-if="uploading"
-        class="progress-icon"
-        icon="circle-notch"
-        spin
-      />
-      <FAIcon
-        v-if="!uploading"
-        class="new-icon"
-        icon="upload"
-      />
-      <input
-        v-if="uploadReady"
-        :disabled="disabled"
-        type="file"
-        style="position: fixed; top: -100em"
-        multiple="true"
-        @change="change"
-      >
-    </label>
-  </div>
 </template>
 
 <script src="./media_upload.js" ></script>
@@ -36,12 +32,6 @@
 @import '../../_variables.scss';
 
 .media-upload {
-  .label {
+  cursor: pointer;
-    display: inline-block;
-  }
-
-  .new-icon {
-    cursor: pointer;
-  }
 }
  </style>

src/components/mention_link/mention_link.js

@@ -0,0 +1,95 @@
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { mapGetters, mapState } from 'vuex'
+import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAt
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAt
+)
+
+const MentionLink = {
+  name: 'MentionLink',
+  props: {
+    url: {
+      required: true,
+      type: String
+    },
+    content: {
+      required: true,
+      type: String
+    },
+    userId: {
+      required: false,
+      type: String
+    },
+    userScreenName: {
+      required: false,
+      type: String
+    }
+  },
+  methods: {
+    onClick () {
+      const link = generateProfileLink(
+        this.userId || this.user.id,
+        this.userScreenName || this.user.screen_name
+      )
+      this.$router.push(link)
+    }
+  },
+  computed: {
+    user () {
+      return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
+    },
+    isYou () {
+      // FIXME why user !== currentUser???
+      return this.user && this.user.id === this.currentUser.id
+    },
+    userName () {
+      return this.user && this.userNameFullUi.split('@')[0]
+    },
+    userNameFull () {
+      return this.user && this.user.screen_name
+    },
+    userNameFullUi () {
+      return this.user && this.user.screen_name_ui
+    },
+    highlight () {
+      return this.user && this.mergedConfig.highlight[this.user.screen_name]
+    },
+    highlightType () {
+      return this.highlight && ('-' + this.highlight.type)
+    },
+    highlightClass () {
+      if (this.highlight) return highlightClass(this.user)
+    },
+    style () {
+      if (this.highlight) {
+        const {
+          backgroundColor,
+          backgroundPosition,
+          backgroundImage,
+          ...rest
+        } = highlightStyle(this.highlight)
+        return rest
+      }
+    },
+    classnames () {
+      return [
+        {
+          '-you': this.isYou,
+          '-highlighted': this.highlight
+        },
+        this.highlightType
+      ]
+    },
+    ...mapGetters(['mergedConfig']),
+    ...mapState({
+      currentUser: state => state.users.currentUser
+    })
+  }
+}
+
+export default MentionLink

src/components/mention_link/mention_link.scss

@@ -0,0 +1,91 @@
+.MentionLink {
+  position: relative;
+  white-space: normal;
+  display: inline-block;
+  color: var(--link);
+
+  & .new,
+  & .original {
+    display: inline-block;
+    border-radius: 2px;
+  }
+
+  .full {
+    position: absolute;
+    display: inline-block;
+    pointer-events: none;
+    opacity: 0;
+    top: 100%;
+    left: 0;
+    height: 100%;
+    word-wrap: normal;
+    white-space: nowrap;
+    transition: opacity 0.2s ease;
+    z-index: 1;
+    margin-top: 0.25em;
+    padding: 0.5em;
+    user-select: all;
+  }
+
+  .short {
+    user-select: none;
+  }
+
+  & .short,
+  & .full {
+    white-space: nowrap;
+  }
+
+  .new {
+    &.-you {
+      & .shortName,
+      & .full {
+        font-weight: 600;
+      }
+    }
+
+    .at {
+      color: var(--link);
+      opacity: 0.8;
+      display: inline-block;
+      height: 50%;
+      line-height: 1;
+      padding: 0 0.1em;
+      vertical-align: -25%;
+      margin: 0;
+    }
+
+    &.-striped {
+      & .userName,
+      & .full {
+        background-image:
+          repeating-linear-gradient(
+            135deg,
+            var(--____highlight-tintColor),
+            var(--____highlight-tintColor) 5px,
+            var(--____highlight-tintColor2) 5px,
+            var(--____highlight-tintColor2) 10px
+          );
+      }
+    }
+
+    &.-solid {
+      & .userName,
+      & .full {
+        background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
+      }
+    }
+
+    &.-side {
+      & .userName,
+      & .userNameFull {
+        box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
+      }
+    }
+  }
+
+  &:hover .new .full {
+    opacity: 1;
+    pointer-events: initial;
+  }
+}

src/components/mention_link/mention_link.vue

@@ -0,0 +1,56 @@
+<template>
+  <span
+    class="MentionLink"
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <a
+      v-if="!user"
+      :href="url"
+      class="original"
+      target="_blank"
+      v-html="content"
+    />
+    <!-- eslint-enable vue/no-v-html -->
+    <span
+      v-if="user"
+      class="new"
+      :style="style"
+      :class="classnames"
+    >
+      <a
+        class="short button-unstyled"
+        :href="url"
+        @click.prevent="onClick"
+      >
+        <!-- eslint-disable vue/no-v-html -->
+        <FAIcon
+          size="sm"
+          icon="at"
+          class="at"
+        /><span class="shortName"><span
+          class="userName"
+          v-html="userName"
+        /></span>
+        <span
+          v-if="isYou"
+          class="you"
+        >{{ $t('status.you') }}</span>
+        <!-- eslint-enable vue/no-v-html -->
+      </a>
+      <span
+        v-if="userName !== userNameFull"
+        class="full popover-default"
+        :class="[highlightType]"
+      >
+        <span
+          class="userNameFull"
+          v-text="'@' + userNameFull"
+        />
+      </span>
+    </span>
+  </span>
+</template>
+
+<script src="./mention_link.js"/>
+
+<style lang="scss" src="./mention_link.scss"/>

src/components/mentions_line/mentions_line.js

@@ -0,0 +1,37 @@
+import MentionLink from 'src/components/mention_link/mention_link.vue'
+import { mapGetters } from 'vuex'
+
+export const MENTIONS_LIMIT = 5
+
+const MentionsLine = {
+  name: 'MentionsLine',
+  props: {
+    mentions: {
+      required: true,
+      type: Array
+    }
+  },
+  data: () => ({ expanded: false }),
+  components: {
+    MentionLink
+  },
+  computed: {
+    mentionsComputed () {
+      return this.mentions.slice(0, MENTIONS_LIMIT)
+    },
+    extraMentions () {
+      return this.mentions.slice(MENTIONS_LIMIT)
+    },
+    manyMentions () {
+      return this.extraMentions.length > 0
+    },
+    ...mapGetters(['mergedConfig'])
+  },
+  methods: {
+    toggleShowMore () {
+      this.expanded = !this.expanded
+    }
+  }
+}
+
+export default MentionsLine

src/components/mentions_line/mentions_line.scss

@@ -0,0 +1,11 @@
+.MentionsLine {
+  .showMoreLess {
+    white-space: normal;
+    color: var(--link);
+  }
+
+  .fullExtraMentions,
+  .mention-link:not(:last-child) {
+    margin-right: 0.25em;
+  }
+}

src/components/mentions_line/mentions_line.vue

@@ -0,0 +1,43 @@
+<template>
+  <span class="MentionsLine">
+    <MentionLink
+      v-for="mention in mentionsComputed"
+      :key="mention.index"
+      class="mention-link"
+      :content="mention.content"
+      :url="mention.url"
+      :first-mention="false"
+    /><span
+      v-if="manyMentions"
+      class="extraMentions"
+    >
+      <span
+        v-if="expanded"
+        class="fullExtraMentions"
+      >
+        <MentionLink
+          v-for="mention in extraMentions"
+          :key="mention.index"
+          class="mention-link"
+          :content="mention.content"
+          :url="mention.url"
+          :first-mention="false"
+        />
+      </span><button
+        v-if="!expanded"
+        class="button-unstyled showMoreLess"
+        @click="toggleShowMore"
+      >
+        {{ $t('status.plus_more', { number: extraMentions.length }) }}
+      </button><button
+        v-if="expanded"
+        class="button-unstyled showMoreLess"
+        @click="toggleShowMore"
+      >
+        {{ $t('general.show_less') }}
+      </button>
+    </span>
+  </span>
+</template>
+<script src="./mentions_line.js" ></script>
+<style lang="scss" src="./mentions_line.scss" />

src/components/mfa_form/recovery_form.vue

@@ -23,23 +23,25 @@
         <div class="form-group">
           <div class="login-bottom">
             <div>
-              <a
+              <button
-                href="#"
+                class="button-unstyled -link"
+                type="button"
                 @click.prevent="requireTOTP"
               >
                 {{ $t('login.enter_two_factor_code') }}
-              </a>
+              </button>
               <br>
-              <a
+              <button
-                href="#"
+                class="button-unstyled -link"
+                type="button"
                 @click.prevent="abortMFA"
               >
                 {{ $t('general.cancel') }}
-              </a>
+              </button>
             </div>
             <button
               type="submit"
-              class="btn btn-default"
+              class="btn button-default"
             >
               {{ $t('general.verify') }}
             </button>

src/components/mfa_form/totp_form.vue

@@ -25,23 +25,25 @@
         <div class="form-group">
           <div class="login-bottom">
             <div>
-              <a
+              <button
-                href="#"
+                class="button-unstyled -link"
+                type="button"
                 @click.prevent="requireRecovery"
               >
                 {{ $t('login.enter_recovery_code') }}
-              </a>
+              </button>
               <br>
-              <a
+              <button
-                href="#"
+                class="button-unstyled -link"
+                type="button"
                 @click.prevent="abortMFA"
               >
                 {{ $t('general.cancel') }}
-              </a>
+              </button>
             </div>
             <button
               type="submit"
-              class="btn btn-default"
+              class="btn button-default"
             >
               {{ $t('general.verify') }}
             </button>

src/components/mobile_nav/mobile_nav.vue

@@ -9,9 +9,8 @@
       @click="scrollToTop()"
     >
       <div class="item">
-        <a
+        <button
-          href="#"
+          class="button-unstyled mobile-nav-button"
-          class="mobile-nav-button"
           @click.stop.prevent="toggleMobileSidebar()"
         >
           <FAIcon
@@ -22,7 +21,7 @@
             v-if="unreadChatCount"
             class="alert-dot"
           />
-        </a>
+        </button>
         <router-link
           v-if="!hideSitename"
           class="site-name"
@@ -33,10 +32,9 @@
         </router-link>
       </div>
       <div class="item right">
-        <a
+        <button
           v-if="currentUser"
-          class="mobile-nav-button"
+          class="button-unstyled mobile-nav-button"
-          href="#"
           @click.stop.prevent="openMobileNotifications()"
         >
           <FAIcon
@@ -47,7 +45,7 @@
             v-if="unseenNotificationsCount"
             class="alert-dot"
           />
-        </a>
+        </button>
       </div>
     </nav>
     <div

src/components/mobile_post_status_button/mobile_post_status_button.js

@@ -44,6 +44,9 @@ const MobilePostStatusButton = {
 
       return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
     },
+    isPersistent () {
+      return !!this.$store.getters.mergedConfig.showNewPostButton
+    },
     autohideFloatingPostButton () {
       return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
     }

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="isLoggedIn">
     <button
-      class="new-status-button"
+      class="button-default new-status-button"
-      :class="{ 'hidden': isHidden }"
+      :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
       @click="openPostForm"
     >
       <FAIcon icon="pen" />
@@ -47,7 +47,7 @@
 }
 
 @media all and (min-width: 801px) {
-  .new-status-button {
+  .new-status-button:not(.always-show) {
     display: none;
   }
 }

src/components/moderation_tools/moderation_tools.js

@@ -1,6 +1,11 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+
 import DialogModal from '../dialog_modal/dialog_modal.vue'
 import Popover from '../popover/popover.vue'
 
+library.add(faChevronDown)
+
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
 const FORCE_UNLISTED = 'mrf_tag:force-unlisted'

src/components/moderation_tools/moderation_tools.vue

@@ -8,17 +8,17 @@
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
-      <div slot="content">
+      <template v-slot:content>
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleRight(&quot;admin&quot;)"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleRight(&quot;moderator&quot;)"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@@ -29,13 +29,13 @@
             />
           </span>
           <button
-            class="dropdown-item"
+            class="button-default dropdown-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
-            class="dropdown-item"
+            class="button-default dropdown-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -47,107 +47,109 @@
           />
           <span v-if="hasTagPolicy">
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
-              {{ $t('user_card.admin_menu.force_nsfw') }}
               <span
                 class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
               />
+              {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
-              {{ $t('user_card.admin_menu.strip_media') }}
               <span
                 class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
               />
+              {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
-              {{ $t('user_card.admin_menu.force_unlisted') }}
               <span
                 class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
               />
+              {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.SANDBOX)"
             >
-              {{ $t('user_card.admin_menu.sandbox') }}
               <span
                 class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
               />
+              {{ $t('user_card.admin_menu.sandbox') }}
             </button>
             <button
               v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
-              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
               <span
                 class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
               />
+              {{ $t('user_card.admin_menu.disable_remote_subscription') }}
             </button>
             <button
               v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
-              {{ $t('user_card.admin_menu.disable_any_subscription') }}
               <span
                 class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
               />
+              {{ $t('user_card.admin_menu.disable_any_subscription') }}
             </button>
             <button
               v-if="user.is_local"
-              class="dropdown-item"
+              class="button-default dropdown-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
-              {{ $t('user_card.admin_menu.quarantine') }}
               <span
                 class="menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
               />
+              {{ $t('user_card.admin_menu.quarantine') }}
             </button>
           </span>
         </div>
-      </div>
+      </template>
-      <button
+      <template v-slot:trigger>
-        slot="trigger"
+        <button
-        class="btn btn-default btn-block"
+          class="btn button-default btn-block moderation-tools-button"
-        :class="{ toggled }"
+          :class="{ toggled }"
-      >
+        >
-        {{ $t('user_card.admin_menu.moderation') }}
+          {{ $t('user_card.admin_menu.moderation') }}
-      </button>
+          <FAIcon icon="chevron-down" />
+        </button>
+      </template>
     </Popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"
         :on-cancel="deleteUserDialog.bind(this, false)"
       >
-        <template slot="header">
+        <template v-slot:header>
           {{ $t('user_card.admin_menu.delete_user') }}
         </template>
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template slot="footer">
+        <template v-slot:footer>
           <button
-            class="btn btn-default"
+            class="btn button-default"
             @click="deleteUserDialog(false)"
           >
             {{ $t('general.cancel') }}
           </button>
           <button
-            class="btn btn-default danger"
+            class="btn button-default danger"
             @click="deleteUser()"
           >
             {{ $t('user_card.admin_menu.delete_user') }}
@@ -163,25 +165,6 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.menu-checkbox {
-  float: right;
-  min-width: 22px;
-  max-width: 22px;
-  min-height: 22px;
-  max-height: 22px;
-  line-height: 22px;
-  text-align: center;
-  border-radius: 0px;
-  background-color: $fallback--fg;
-  background-color: var(--input, $fallback--fg);
-  box-shadow: 0px 0px 2px black inset;
-  box-shadow: var(--inputShadow);
-
-  &.menu-checkbox-checked::after {
-    content: '✓';
-  }
-}
-
 .moderation-tools-popover {
   height: 100%;
   .trigger {
@@ -189,4 +172,10 @@
     height: 100%;
   }
 }
+
+.moderation-tools-button {
+  svg,i {
+    font-size: 0.8em;
+  }
+}
 </style>

src/components/mrf_transparency_panel/mrf_transparency_panel.js

@@ -1,17 +1,56 @@
 import { mapState } from 'vuex'
 import { get } from 'lodash'
 
+/**
+ * This is for backwards compatibility. We originally didn't recieve
+ * extra info like a reason why an instance was rejected/quarantined/etc.
+ * Because we didn't want to break backwards compatibility it was decided
+ * to add an extra "info" key.
+ */
+const toInstanceReasonObject = (instances, info, key) => {
+  return instances.map(instance => {
+    if (info[key] && info[key][instance] && info[key][instance]['reason']) {
+      return { instance: instance, reason: info[key][instance]['reason'] }
+    }
+    return { instance: instance, reason: '' }
+  })
+}
+
 const MRFTransparencyPanel = {
   computed: {
     ...mapState({
       federationPolicy: state => get(state, 'instance.federationPolicy'),
       mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
-      quarantineInstances: state => get(state, 'instance.federationPolicy.quarantined_instances', []),
+      quarantineInstances: state => toInstanceReasonObject(
-      acceptInstances: state => get(state, 'instance.federationPolicy.mrf_simple.accept', []),
+        get(state, 'instance.federationPolicy.quarantined_instances', []),
-      rejectInstances: state => get(state, 'instance.federationPolicy.mrf_simple.reject', []),
+        get(state, 'instance.federationPolicy.quarantined_instances_info', []),
-      ftlRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
+        'quarantined_instances'
-      mediaNsfwInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
+      ),
-      mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
+      acceptInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.accept', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'accept'
+      ),
+      rejectInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.reject', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'reject'
+      ),
+      ftlRemovalInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'federated_timeline_removal'
+      ),
+      mediaNsfwInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'media_nsfw'
+      ),
+      mediaRemovalInstances: state => toInstanceReasonObject(
+        get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
+        get(state, 'instance.federationPolicy.mrf_simple_info', []),
+        'media_removal'
+      ),
       keywordsFtlRemoval: state => get(state, 'instance.federationPolicy.mrf_keyword.federated_timeline_removal', []),
       keywordsReject: state => get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
       keywordsReplace: state => get(state, 'instance.federationPolicy.mrf_keyword.replace', [])

src/components/mrf_transparency_panel/mrf_transparency_panel.scss

@@ -0,0 +1,21 @@
+.mrf-section {
+  margin: 1em;
+
+  table {
+    width:100%;
+    text-align: left;
+    padding-left:10px;
+    padding-bottom:20px;
+
+    th, td {
+      width: 180px;
+      max-width: 360px;
+      overflow:  hidden;
+      vertical-align: text-top;
+    }
+
+    th+th, td+td {
+      width: auto;
+    }
+  }
+}

src/components/mrf_transparency_panel/mrf_transparency_panel.vue

@@ -31,13 +31,24 @@
 
             <p>{{ $t("about.mrf.simple.accept_desc") }}</p>
 
-            <ul>
+            <table>
-              <li
+              <tr>
-                v-for="instance in acceptInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in acceptInstances"
+                :key="entry.instance + '_accept'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="rejectInstances.length">
@@ -45,13 +56,24 @@
 
             <p>{{ $t("about.mrf.simple.reject_desc") }}</p>
 
-            <ul>
+            <table>
-              <li
+              <tr>
-                v-for="instance in rejectInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in rejectInstances"
+                :key="entry.instance + '_reject'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="quarantineInstances.length">
@@ -59,13 +81,24 @@
 
             <p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>
 
-            <ul>
+            <table>
-              <li
+              <tr>
-                v-for="instance in quarantineInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in quarantineInstances"
+                :key="entry.instance + '_quarantine'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="ftlRemovalInstances.length">
@@ -73,13 +106,24 @@
 
             <p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>
 
-            <ul>
+            <table>
-              <li
+              <tr>
-                v-for="instance in ftlRemovalInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in ftlRemovalInstances"
+                :key="entry.instance + '_ftl_removal'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="mediaNsfwInstances.length">
@@ -87,13 +131,24 @@
 
             <p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>
 
-            <ul>
+            <table>
-              <li
+              <tr>
-                v-for="instance in mediaNsfwInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in mediaNsfwInstances"
+                :key="entry.instance + '_media_nsfw'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
           </div>
 
           <div v-if="mediaRemovalInstances.length">
@@ -101,13 +156,24 @@
 
             <p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>
 
-            <ul>
+            <table>
-              <li
+              <tr>
-                v-for="instance in mediaRemovalInstances"
+                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                :key="instance"
+                <th>{{ $t("about.mrf.simple.reason") }}</th>
-                v-text="instance"
+              </tr>
-              />
+              <tr
-            </ul>
+                v-for="entry in mediaRemovalInstances"
+                :key="entry.instance + '_media_removal'"
+              >
+                <td>{{ entry.instance }}</td>
+                <td v-if="entry.reason === ''">
+                  {{ $t("about.mrf.simple.not_applicable") }}
+                </td>
+                <td v-else>
+                  {{ entry.reason }}
+                </td>
+              </tr>
+            </table>
           </div>
 
           <h2 v-if="hasKeywordPolicies">
@@ -161,7 +227,6 @@
 <script src="./mrf_transparency_panel.js"></script>
 
 <style lang="scss">
-.mrf-section {
+@import '../../_variables.scss';
-  margin: 1em;
+@import './mrf_transparency_panel.scss';
-}
 </style>

src/components/mute_card/mute_card.vue

@@ -3,7 +3,7 @@
     <div class="mute-card-content-container">
       <button
         v-if="muted"
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="progress"
         @click="unmuteUser"
       >
@@ -16,7 +16,7 @@
       </button>
       <button
         v-else
-        class="btn btn-default"
+        class="btn button-default"
         :disabled="progress"
         @click="muteUser"
       >

src/components/nav_panel/nav_panel.js

@@ -1,4 +1,4 @@
-import { timelineNames } from '../timeline_menu/timeline_menu.js'
+import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -7,10 +7,12 @@ import {
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome,
+  faChevronDown,
+  faChevronUp,
   faComments,
   faBell,
-  faInfoCircle
+  faInfoCircle,
+  faStream
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -18,10 +20,12 @@ library.add(
   faGlobe,
   faBookmark,
   faEnvelope,
-  faHome,
+  faChevronDown,
+  faChevronUp,
   faComments,
   faBell,
-  faInfoCircle
+  faInfoCircle,
+  faStream
 )
 
 const NavPanel = {
@@ -30,16 +34,20 @@ const NavPanel = {
       this.$store.dispatch('startFetchingFollowRequests')
     }
   },
+  components: {
+    TimelineMenuContent
+  },
+  data () {
+    return {
+      showTimelines: false
+    }
+  },
+  methods: {
+    toggleTimelines () {
+      this.showTimelines = !this.showTimelines
+    }
+  },
   computed: {
-    onTimelineRoute () {
-      return !!timelineNames()[this.$route.name]
-    },
-    timelinesRoute () {
-      if (this.$store.state.interface.lastTimeline) {
-        return this.$store.state.interface.lastTimeline
-      }
-      return this.currentUser ? 'friends' : 'public-timeline'
-    },
     ...mapState({
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,

src/components/nav_panel/nav_panel.vue

@@ -3,19 +3,33 @@
     <div class="panel panel-default">
       <ul>
         <li v-if="currentUser || !privateMode">
-          <router-link
+          <button
-            :to="{ name: timelinesRoute }"
+            class="button-unstyled menu-item"
-            :class="onTimelineRoute && 'router-link-active'"
+            @click="toggleTimelines"
           >
             <FAIcon
               fixed-width
               class="fa-scale-110"
-              icon="home"
+              icon="stream"
             />{{ $t("nav.timelines") }}
-          </router-link>
+            <FAIcon
+              class="timelines-chevron"
+              fixed-width
+              :icon="showTimelines ? 'chevron-up' : 'chevron-down'"
+            />
+          </button>
+          <div
+            v-show="showTimelines"
+            class="timelines-background"
+          >
+            <TimelineMenuContent class="timelines" />
+          </div>
         </li>
         <li v-if="currentUser">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -24,7 +38,10 @@
           </router-link>
         </li>
         <li v-if="currentUser && pleromaChatMessagesAvailable">
-          <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+          >
             <div
               v-if="unreadChatCount"
               class="badge badge-notification"
@@ -39,7 +56,10 @@
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
-          <router-link :to="{ name: 'friend-requests' }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'friend-requests' }"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -54,7 +74,10 @@
           </router-link>
         </li>
         <li>
-          <router-link :to="{ name: 'about' }">
+          <router-link
+            class="menu-item"
+            :to="{ name: 'about' }"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110"
@@ -91,14 +114,14 @@
     border-color: var(--border, $fallback--border);
     padding: 0;
 
-    &:first-child a {
+    &:first-child .menu-item {
       border-top-right-radius: $fallback--panelRadius;
       border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-top-left-radius: $fallback--panelRadius;
       border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     }
 
-    &:last-child a {
+    &:last-child .menu-item {
       border-bottom-right-radius: $fallback--panelRadius;
       border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-bottom-left-radius: $fallback--panelRadius;
@@ -110,13 +133,15 @@
     border: none;
   }
 
-  a {
+  .menu-item {
     display: block;
     box-sizing: border-box;
-    align-items: stretch;
     height: 3.5em;
     line-height: 3.5em;
     padding: 0 1em;
+    width: 100%;
+    color: $fallback--link;
+    color: var(--link, $fallback--link);
 
     &:hover {
       background-color: $fallback--lightBg;
@@ -146,6 +171,25 @@
     }
   }
 
+  .timelines-chevron {
+    margin-left: 0.8em;
+    font-size: 1.1em;
+  }
+
+  .timelines-background {
+    padding: 0 0 0 0.6em;
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    border-top: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+
+  .timelines {
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+  }
+
   .fa-scale-110 {
     margin-right: 0.8em;
   }

src/components/notification/notification.js

@@ -4,6 +4,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 RichContent from 'src/components/rich_content/rich_content.jsx'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -44,7 +45,8 @@ const Notification = {
     UserAvatar,
     UserCard,
     Timeago,
-    Status
+    Status,
+    RichContent
   },
   methods: {
     toggleUserExpanded () {

src/components/notification/notification.scss

@@ -2,6 +2,8 @@
 
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
+  --emoji-size: 14px;
+
   &.-muted {
     padding: 0.25em 0.6em;
     height: 1.2em;

src/components/notification/notification.vue

@@ -11,17 +11,18 @@
     >
       <small>
         <router-link :to="userProfileLink">
-          {{ notification.from_profile.screen_name }}
+          {{ notification.from_profile.screen_name_ui }}
         </router-link>
       </small>
-      <a
+      <button
-        href="#"
+        class="button-unstyled unmute"
-        class="unmute"
         @click.prevent="toggleMute"
-      ><FAIcon
+      >
-        class="fa-scale-110 fa-old-padding"
+        <FAIcon
-        icon="eye-slash"
+          class="fa-scale-110 fa-old-padding"
-      /></a>
+          icon="eye-slash"
+        />
+      </button>
     </div>
     <div
       v-else
@@ -50,17 +51,19 @@
         <span class="notification-details">
           <div class="name-and-action">
             <!-- eslint-disable vue/no-v-html -->
-            <bdi
+            <bdi v-if="!!notification.from_profile.name_html">
-              v-if="!!notification.from_profile.name_html"
+              <RichContent
-              class="username"
+                class="username"
-              :title="'@'+notification.from_profile.screen_name"
+                :title="'@'+notification.from_profile.screen_name_ui"
-              v-html="notification.from_profile.name_html"
+                :html="notification.from_profile.name_html"
-            />
+                :emoji="notification.from_profile.emoji"
+              />
+            </bdi>
             <!-- eslint-enable vue/no-v-html -->
             <span
               v-else
               class="username"
-              :title="'@'+notification.from_profile.screen_name"
+              :title="'@'+notification.from_profile.screen_name_ui"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
               <FAIcon
@@ -132,14 +135,16 @@
               />
             </span>
           </div>
-          <a
+          <button
             v-if="needMute"
-            href="#"
+            class="button-unstyled"
             @click.prevent="toggleMute"
-          ><FAIcon
+          >
-            class="fa-scale-110 fa-old-padding"
+            <FAIcon
-            icon="eye-slash"
+              class="fa-scale-110 fa-old-padding"
-          /></a>
+              icon="eye-slash"
+            />
+          </button>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@@ -149,7 +154,7 @@
             :to="userProfileLink"
             class="follow-name"
           >
-            @{{ notification.from_profile.screen_name }}
+            @{{ notification.from_profile.screen_name_ui }}
           </router-link>
           <div
             v-if="notification.type === 'follow_request'"
@@ -174,7 +179,7 @@
           class="move-text"
         >
           <router-link :to="targetUserProfileLink">
-            @{{ notification.target.screen_name }}
+            @{{ notification.target.screen_name_ui }}
           </router-link>
         </div>
         <template v-else>

src/components/notifications/notification_filters.vue

@@ -0,0 +1,122 @@
+<template>
+  <Popover
+    trigger="click"
+    class="NotificationFilters"
+    placement="bottom"
+    :bound-to="{ x: 'container' }"
+  >
+    <template v-slot:content>
+      <div class="dropdown-menu">
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('likes')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.likes }"
+          />{{ $t('settings.notification_visibility_likes') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('repeats')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.repeats }"
+          />{{ $t('settings.notification_visibility_repeats') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('follows')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.follows }"
+          />{{ $t('settings.notification_visibility_follows') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('mentions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.mentions }"
+          />{{ $t('settings.notification_visibility_mentions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('emojiReactions')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+          />{{ $t('settings.notification_visibility_emoji_reactions') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('moves')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.moves }"
+          />{{ $t('settings.notification_visibility_moves') }}
+        </button>
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled">
+        <FAIcon icon="filter" />
+      </button>
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFilter
+)
+
+export default {
+  components: { Popover },
+  computed: {
+    filters () {
+      return this.$store.getters.mergedConfig.notificationVisibility
+    }
+  },
+  methods: {
+    toggleNotificationFilter (type) {
+      this.$store.dispatch('setOption', {
+        name: 'notificationVisibility',
+        value: {
+          ...this.filters,
+          [type]: !this.filters[type]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.NotificationFilters {
+  align-self: stretch;
+
+  > button {
+    font-size: 1.2em;
+    padding-left: 0.7em;
+    padding-right: 0.2em;
+    line-height: 100%;
+    height: 100%;
+  }
+
+  .dropdown-item {
+    margin: 0;
+  }
+}
+
+</style>

src/components/notifications/notifications.js

@@ -1,11 +1,13 @@
 import { mapGetters } from 'vuex'
 import Notification from '../notification/notification.vue'
+import NotificationFilters from './notification_filters.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
   notificationsFromStore,
   filteredNotificationsFromStore,
   unseenNotificationsFromStore
 } from '../../services/notification_utils/notification_utils.js'
+import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
@@ -16,6 +18,10 @@ library.add(
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 
 const Notifications = {
+  components: {
+    Notification,
+    NotificationFilters
+  },
   props: {
     // Disables display of panel header
     noHeading: Boolean,
@@ -34,11 +40,6 @@ const Notifications = {
       seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
     }
   },
-  created () {
-    const store = this.$store
-    const credentials = store.state.users.currentUser.credentials
-    notificationsFetcher.fetchAndUpdate({ store, credentials })
-  },
   computed: {
     mainClass () {
       return this.minimalMode ? '' : 'panel panel-default'
@@ -69,14 +70,13 @@ const Notifications = {
     },
     ...mapGetters(['unreadChatCount'])
   },
-  components: {
-    Notification
-  },
   watch: {
     unseenCountTitle (count) {
       if (count > 0) {
+        FaviconService.drawFaviconBadge()
         this.$store.dispatch('setPageTitle', `(${count})`)
       } else {
+        FaviconService.clearFaviconBadge()
         this.$store.dispatch('setPageTitle', '')
       }
     }

src/components/notifications/notifications.scss

@@ -1,6 +1,6 @@
 @import '../../_variables.scss';
 
-.notifications {
+.Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
     padding-bottom: 15em;
@@ -11,6 +11,10 @@
     color: var(--text, $fallback--text);
   }
 
+  .notifications-footer {
+    border: none;
+  }
+
   .notification {
     position: relative;
 
@@ -82,7 +86,6 @@
     }
   }
 
-
   .follow-text, .move-text {
     padding: 0.5em 0;
     overflow-wrap: break-word;
@@ -145,13 +148,6 @@
       max-width: 100%;
       text-overflow: ellipsis;
       white-space: nowrap;
-
-      img {
-        width: 14px;
-        height: 14px;
-        vertical-align: middle;
-        object-fit: contain
-      }
     }
 
     .timeago {

src/components/notifications/notifications.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{ minimal: minimalMode }"
-    class="notifications"
+    class="Notifications"
   >
     <div :class="mainClass">
       <div
@@ -15,20 +15,14 @@
             class="badge badge-notification unseen-count"
           >{{ unseenCount }}</span>
         </div>
-        <div
-          v-if="error"
-          class="loadmore-error alert error"
-          @click.prevent
-        >
-          {{ $t('timeline.error_fetching') }}
-        </div>
         <button
           v-if="unseenCount"
-          class="read-button"
+          class="button-default read-button"
           @click.prevent="markAsSeen"
         >
           {{ $t('notifications.read') }}
         </button>
+        <NotificationFilters />
       </div>
       <div class="panel-body">
         <div
@@ -41,25 +35,25 @@
           <notification :notification="notification" />
         </div>
       </div>
-      <div class="panel-footer">
+      <div class="panel-footer notifications-footer">
         <div
           v-if="bottomedOut"
-          class="new-status-notification text-center panel-footer faint"
+          class="new-status-notification text-center faint"
         >
           {{ $t('notifications.no_more_notifications') }}
         </div>
-        <a
+        <button
           v-else-if="!loading"
-          href="#"
+          class="button-unstyled -link -fullwidth"
           @click.prevent="fetchOlderNotifications()"
         >
-          <div class="new-status-notification text-center panel-footer">
+          <div class="new-status-notification text-center">
             {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
           </div>
-        </a>
+        </button>
         <div
           v-else
-          class="new-status-notification text-center panel-footer"
+          class="new-status-notification text-center"
         >
           <FAIcon
             icon="circle-notch"

src/components/password_reset/password_reset.vue

@@ -51,9 +51,9 @@
               <button
                 :disabled="isPending"
                 type="submit"
-                class="btn btn-default btn-block"
+                class="btn button-default btn-block"
               >
-                {{ $t('general.submit') }}
+                {{ $t('settings.save') }}
               </button>
             </div>
           </div>

src/components/poll/poll.js

@@ -1,10 +1,14 @@
-import Timeago from '../timeago/timeago.vue'
+import Timeago from 'components/timeago/timeago.vue'
+import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'
 
 export default {
   name: 'Poll',
-  props: ['basePoll'],
+  props: ['basePoll', 'emoji'],
-  components: { Timeago },
+  components: {
+    Timeago,
+    RichContent
+  },
   data () {
     return {
       loading: false,

src/components/poll/poll.vue

@@ -17,8 +17,11 @@
           <span class="result-percentage">
             {{ percentageForOption(option.votes_count) }}%
           </span>
-          <!-- eslint-disable-next-line vue/no-v-html -->
+          <RichContent
-          <span v-html="option.title_html" />
+            :html="option.title_html"
+            :handle-links="false"
+            :emoji="emoji"
+          />
         </div>
         <div
           class="result-fill"
@@ -42,14 +45,18 @@
           :value="index"
         >
         <label class="option-vote">
-          <div>{{ option.title }}</div>
+          <RichContent
+            :html="option.title_html"
+            :handle-links="false"
+            :emoji="emoji"
+          />
         </label>
       </div>
     </div>
     <div class="footer faint">
       <button
         v-if="!showResults"
-        class="btn btn-default poll-vote-button"
+        class="btn button-default poll-vote-button"
         type="button"
         :disabled="isDisabled"
         @click="vote"
@@ -57,7 +64,12 @@
         {{ $t('polls.vote') }}
       </button>
       <div class="total">
-        {{ totalVotesCount }} {{ $t("polls.votes") }}&nbsp;·&nbsp;
+        <template v-if="typeof poll.voters_count === 'number'">
+          {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}&nbsp;·&nbsp;
+        </template>
+        <template v-else>
+          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
+        </template>
       </div>
       <i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
         <Timeago

src/components/poll/poll_form.js

@@ -1,19 +1,21 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import Select from '../select/select.vue'
 import {
   faTimes,
-  faChevronDown,
   faPlus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faTimes,
-  faChevronDown,
   faPlus
 )
 
 export default {
+  components: {
+    Select
+  },
   name: 'PollForm',
   props: ['visible'],
   data: () => ({

src/components/poll/poll_form.vue

@@ -21,20 +21,17 @@
           @keydown.enter.stop.prevent="nextOption(index)"
         >
       </div>
-      <div
+      <button
         v-if="options.length > 2"
-        class="icon-container"
+        class="delete-option button-unstyled -hover-highlight"
+        @click="deleteOption(index)"
       >
-        <FAIcon
+        <FAIcon icon="times" />
-          icon="times"
+      </button>
-          class="delete"
-          @click="deleteOption(index)"
-        />
-      </div>
     </div>
-    <a
+    <button
       v-if="options.length < maxOptions"
-      class="add-option faint"
+      class="add-option faint button-unstyled -hover-highlight"
       @click="addOption"
     >
       <FAIcon
@@ -43,29 +40,25 @@
       />
 
       {{ $t("polls.add_option") }}
-    </a>
+    </button>
     <div class="poll-type-expiry">
       <div
         class="poll-type"
         :title="$t('polls.type')"
       >
-        <label
+        <Select
-          for="poll-type-selector"
+          v-model="pollType"
-          class="select"
+          class="poll-type-select"
+          unstyled="true"
+          @change="updatePollToParent"
         >
-          <select
+          <option value="single">
-            v-model="pollType"
+            {{ $t('polls.single_choice') }}
-            class="select"
+          </option>
-            @change="updatePollToParent"
+          <option value="multiple">
-          >
+            {{ $t('polls.multiple_choices') }}
-            <option value="single">{{ $t('polls.single_choice') }}</option>
+          </option>
-            <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
+        </Select>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
       </div>
       <div
         class="poll-expiry"
@@ -79,24 +72,20 @@
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
         >
-        <label class="expiry-unit select">
+        <Select
-          <select
+          v-model="expiryUnit"
-            v-model="expiryUnit"
+          unstyled="true"
-            @change="expiryAmountChange"
+          class="expiry-unit"
+          @change="expiryAmountChange"
+        >
+          <option
+            v-for="unit in expiryUnits"
+            :key="unit"
+            :value="unit"
           >
-            <option
+            {{ $t(`time.${unit}_short`, ['']) }}
-              v-for="unit in expiryUnits"
+          </option>
-              :key="unit"
+        </Select>
-              :value="unit"
-            >
-              {{ $t(`time.${unit}_short`, ['']) }}
-            </option>
-          </select>
-          <FAIcon
-            class="select-down-icon"
-            icon="chevron-down"
-          />
-        </label>
       </div>
     </div>
   </div>
@@ -116,7 +105,6 @@
     align-self: flex-start;
     padding-top: 0.25em;
     padding-left: 0.1em;
-    cursor: pointer;
   }
 
   .poll-option {
@@ -135,19 +123,11 @@
     }
   }
 
-  .icon-container {
+  .delete-option {
     // Hack: Move the icon over the input box
     width: 1.5em;
     margin-left: -1.5em;
     z-index: 1;
-
-    .delete {
-      cursor: pointer;
-
-      &:hover {
-        color: inherit;
-      }
-    }
   }
 
   .poll-type-expiry {
@@ -159,10 +139,9 @@
   .poll-type {
     margin-right: 0.75em;
     flex: 1 1 60%;
-    .select {
+
-      border: none;
+    .poll-type-select {
-      box-shadow: none;
+      padding-right: 0.75em;
-      background-color: transparent;
     }
   }
 
@@ -173,12 +152,6 @@
       width: 3em;
       text-align: right;
     }
-
-    .expiry-unit {
-      border: none;
-      box-shadow: none;
-      background-color: transparent;
-    }
   }
 }
 </style>