From f174f289a93e6bef1182a2face00bb809da49d18 Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Tue, 29 Sep 2020 10:18:37 +0000
Subject: Timeline virtual scrolling

---
 src/components/timeline/timeline.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 2ff933e9..c1e2f44b 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -32,7 +32,10 @@
       </div>
     </div>
     <div :class="classes.body">
-      <div class="timeline">
+      <div
+        ref="timeline"
+        class="timeline"
+      >
         <template v-for="statusId in pinnedStatusIds">
           <conversation
             v-if="timeline.statusesObject[statusId]"
@@ -54,6 +57,7 @@
             :collapsable="true"
             :in-profile="inProfile"
             :profile-user-id="userId"
+            :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
           />
         </template>
       </div>
-- 
cgit v1.2.3-70-g09d2


From 8b3a7ae8c0fec5f79971745f64aeb3c5ac470894 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Oct 2020 22:35:46 +0300
Subject: more FA5 stuff with small related refactoring

---
 src/App.scss                                       | 10 ++++---
 src/components/chat_panel/chat_panel.js            |  6 ++++
 src/components/chat_panel/chat_panel.vue           |  2 +-
 src/components/exporter/exporter.js                |  7 +++++
 src/components/exporter/exporter.vue               |  4 +--
 src/components/extra_buttons/extra_buttons.js      | 20 ++++++++++++--
 src/components/extra_buttons/extra_buttons.vue     | 32 ++++++++++++----------
 src/components/media_upload/media_upload.vue       |  3 +-
 src/components/notification/notification.js        | 22 +++++++++++++++
 src/components/notification/notification.scss      | 32 ++++++++++++++++++++++
 src/components/notification/notification.vue       | 32 ++++++++++++----------
 src/components/notifications/notifications.js      |  6 ++++
 src/components/notifications/notifications.scss    | 31 ---------------------
 src/components/notifications/notifications.vue     |  2 +-
 src/components/panel_loading/panel_loading.vue     | 14 ++++++++--
 src/components/popover/popover.vue                 |  6 ++--
 src/components/scope_selector/scope_selector.js    |  4 +--
 src/components/scope_selector/scope_selector.vue   |  2 +-
 src/components/search/search.js                    |  6 ++++
 src/components/search/search.vue                   |  2 +-
 src/components/status/status.js                    | 10 ++-----
 src/components/status_popover/status_popover.js    |  6 ++++
 src/components/status_popover/status_popover.vue   |  2 +-
 src/components/timeline/timeline.js                |  6 ++++
 src/components/timeline/timeline.vue               |  2 +-
 src/components/user_card/user_card.js              | 16 +++++++++++
 src/components/user_card/user_card.vue             | 26 ++++++++++++------
 .../user_list_popover/user_list_popover.js         |  6 ++++
 .../user_list_popover/user_list_popover.vue        |  2 +-
 src/main.js                                        |  3 +-
 30 files changed, 221 insertions(+), 101 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/App.scss b/src/App.scss
index d34698e2..10969abb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -106,7 +106,8 @@ button {
     color: var(--btnPressedText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnPressed, $fallback--fg);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnPressedText, $fallback--text);
     }
@@ -118,7 +119,8 @@ button {
     color: var(--btnDisabledText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnDisabled, $fallback--fg);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnDisabledText, $fallback--text);
     }
@@ -131,7 +133,8 @@ button {
     background-color: var(--btnToggled, $fallback--fg);
     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);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnToggledText, $fallback--text);
     }
@@ -808,7 +811,6 @@ nav {
 }
 
 .button-icon {
-  &i,
   &.svg-inline--fa.fa-lg {
     display: inline-block;
     padding: 0 0.3em;
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index f2e3adf0..3dfec6df 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,4 +1,10 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBullhorn
+)
 
 const chatPanel = {
   props: [ 'floating' ],
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 570435e7..b64535b0 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -63,7 +63,7 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <i class="icon-megaphone" />
+          <FAIcon icon="bullhorn" />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
diff --git a/src/components/exporter/exporter.js b/src/components/exporter/exporter.js
index 8f507416..51912ac3 100644
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@@ -1,3 +1,10 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const Exporter = {
   props: {
     getContent: {
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index f5126dc1..156db9a3 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="exporter">
     <div v-if="processing">
-      <i class="icon-spin4 animate-spin exporter-processing" />
+      <FAIcon icon="circle-notch" size="lg" spin />
+
       <span>{{ processingMessage }}</span>
     </div>
     <button
@@ -19,7 +20,6 @@
 <style lang="scss">
 .exporter {
   &-processing {
-    font-size: 1.5em;
     margin: 0.25em;
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 6892dabc..f325b2b4 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,8 +1,24 @@
 import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+import {
+  faEllipsisH,
+  faBookmark,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faBookmark as faBookmarkReg,
+} from '@fortawesome/free-regular-svg-icons'
 
-library.add(faEllipsisH)
+library.add(
+  faEllipsisH,
+  faBookmark,
+  faBookmarkReg,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt
+)
 
 const ExtraButtons = {
   props: [ 'status' ],
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 0af264a5..1889eaed 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -15,14 +15,14 @@
           class="dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
-          <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
+          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
         </button>
         <button
           v-if="canMute && status.thread_muted"
           class="dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
-          <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
+          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
         </button>
         <button
           v-if="!status.pinned && canPin"
@@ -30,7 +30,7 @@
           @click.prevent="pinStatus"
           @click="close"
         >
-          <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
+          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
         </button>
         <button
           v-if="status.pinned && canPin"
@@ -38,7 +38,7 @@
           @click.prevent="unpinStatus"
           @click="close"
         >
-          <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
+          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
         </button>
         <button
           v-if="!status.bookmarked"
@@ -46,7 +46,7 @@
           @click.prevent="bookmarkStatus"
           @click="close"
         >
-          <i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
+          <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
         </button>
         <button
           v-if="status.bookmarked"
@@ -54,7 +54,7 @@
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
-          <i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
+          <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
         </button>
         <button
           v-if="canDelete"
@@ -62,23 +62,24 @@
           @click.prevent="deleteStatus"
           @click="close"
         >
-          <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
+          <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
           class="dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
-          <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
+          <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
         </button>
       </div>
     </div>
-    <FAIcon
-      slot="trigger"
-      class="button-icon"
-      icon="ellipsis-h"
-      size="lg"
-    />
+    <span slot="trigger">
+      <FAIcon
+        class="ExtraButtons button-icon"
+        icon="ellipsis-h"
+        size="md"
+      />
+    </span>
   </Popover>
 </template>
 
@@ -87,8 +88,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.icon-ellipsis {
+.ExtraButtons {
   cursor: pointer;
+  position: static;
 
   &:hover,
   .extra-button-popover.open & {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 38e00702..15b2b8e4 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -9,8 +9,9 @@
     >
       <FAIcon
         v-if="uploading"
-        class="progress-icon animate-spin"
+        class="progress-icon"
         icon="circle-notch"
+        spin
       />
       <FAIcon
         v-if="!uploading"
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index bb906b50..4aa9affd 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faEyeSlash,
+  faUser,
+  faSuitcaseRolling
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faUser,
+  faEyeSlash,
+  faSuitcaseRolling
+)
 
 const Notification = {
   data () {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index d0e63d81..f5905560 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,3 +1,5 @@
+@import '../../_variables.scss';
+
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   &.-muted {
@@ -49,4 +51,34 @@
       display: block;
     }
   }
+
+  .type-icon {
+    margin: 0 0.1em;
+  }
+
+  &.-type--repeat .type-icon {
+    color: $fallback--cGreen;
+    color: var(--cGreen, $fallback--cGreen);
+  }
+
+  &.-type--follow .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--follow-request .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--like .type-icon {
+    color: orange;
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
+
+  &.-type--move .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 7fac3840..857727a4 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,5 +1,5 @@
 <template>
-  <status
+  <Status
     v-if="notification.type === 'mention'"
     :compact="true"
     :statusoid="notification.status"
@@ -18,12 +18,12 @@
         href="#"
         class="unmute"
         @click.prevent="toggleMute"
-      ><i class="button-icon icon-eye-off" /></a>
+      ><FAIcon class="button-icon" icon="eye-slash" /></a>
     </div>
     <div
       v-else
-      class="non-mention"
-      :class="[userClass, { highlighted: userStyle }]"
+      class="Notification non-mention"
+      :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
       :style="[ userStyle ]"
     >
       <a
@@ -60,26 +60,26 @@
               :title="'@'+notification.from_profile.screen_name"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
-              <i class="fa icon-star lit" />
+              <FAIcon class="type-icon" icon="star" />
               <small>{{ $t('notifications.favorited_you') }}</small>
             </span>
             <span v-if="notification.type === 'repeat'">
-              <i
-                class="fa icon-retweet lit"
+              <FAIcon
+                class="type-icon" icon="retweet"
                 :title="$t('tool_tip.repeat')"
               />
               <small>{{ $t('notifications.repeated_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow'">
-              <i class="fa icon-user-plus lit" />
+              <FAIcon class="type-icon" icon="user-plus" />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow_request'">
-              <i class="fa icon-user lit" />
+              <FAIcon class="type-icon" icon="user" />
               <small>{{ $t('notifications.follow_request') }}</small>
             </span>
             <span v-if="notification.type === 'move'">
-              <i class="fa icon-arrow-curved lit" />
+              <FAIcon class="type-icon" icon="suitcase-rolling" />
               <small>{{ $t('notifications.migrated_to') }}</small>
             </span>
             <span v-if="notification.type === 'pleroma:emoji_reaction'">
@@ -120,7 +120,7 @@
             v-if="needMute"
             href="#"
             @click.prevent="toggleMute"
-          ><i class="button-icon icon-eye-off" /></a>
+          ><FAIcon class="button-icon" icon="eye-slash" /></a>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@@ -136,13 +136,15 @@
             v-if="notification.type === 'follow_request'"
             style="white-space: nowrap;"
           >
-            <i
-              class="icon-ok button-icon follow-request-accept"
+            <FAIcon
+              icon="check"
+              class="button-icon follow-request-accept"
               :title="$t('tool_tip.accept_follow_request')"
               @click="approveUser()"
             />
-            <i
-              class="icon-cancel button-icon follow-request-reject"
+            <FAIcon
+              icon="times"
+              class="button-icon follow-request-reject"
               :title="$t('tool_tip.reject_follow_request')"
               @click="denyUser()"
             />
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d951e2a8..4b479e13 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -6,6 +6,12 @@ import {
   filteredNotificationsFromStore,
   unseenNotificationsFromStore
 } from '../../services/notification_utils/notification_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index c6b2a5b5..682ae127 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -158,37 +158,6 @@
       margin-right: .2em;
     }
 
-    .icon-retweet.lit {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
-    }
-
-    .icon-user.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-user-plus.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-reply.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-star.lit {
-      color: orange;
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
-    }
-
-    .icon-arrow-curved.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
     .status-content {
       margin: 0;
       max-height: 300px;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d477a41b..57972854 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -61,7 +61,7 @@
           v-else
           class="new-status-notification text-center panel-footer"
         >
-          <i class="icon-spin3 animate-spin" />
+          <FAIcon icon="circle-notch" spin size="lg"/>
         </div>
       </div>
     </div>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 4efebb3c..9bf3ab32 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -1,12 +1,21 @@
 <template>
   <div class="panel-loading">
     <span class="loading-text">
-      <i class="icon-spin4 animate-spin" />
+      <FAIcon icon="circle-notch" spin size="3x"/>
       {{ $t('general.loading') }}
     </span>
   </div>
 </template>
 
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+</script>
+
 <style lang="scss">
 @import 'src/_variables.scss';
 
@@ -18,8 +27,7 @@
   font-size: 2em;
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  .loading-text i {
-    font-size: 3em;
+  .loading-text svg {
     line-height: 0;
     vertical-align: middle;
     color: $fallback--text;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 5c99c509..9b8680e5 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -27,7 +27,7 @@
 
 <script src="./popover.js" />
 
-<style lang=scss>
+<style lang="scss">
 @import '../../_variables.scss';
 
 .popover {
@@ -96,7 +96,7 @@
     &-icon {
       padding-left: 0.5rem;
 
-      i {
+      svg {
         margin-right: 0.25rem;
         color: var(--menuPopoverIcon, $fallback--icon)
       }
@@ -111,7 +111,7 @@
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      i {
+      svg {
         color: var(--selectedMenuPopoverIcon, $fallback--icon);
       }
     }
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 34efdc00..ddb20ff2 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faGlobeEurope
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -10,7 +10,7 @@ library.add(
   faEnvelope,
   faGlobeEurope,
   faLock,
-  faLockOpen
+  faUnlock
 )
 
 const ScopeSelector = {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 5b9abd64..ddd89422 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -28,7 +28,7 @@
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
       >
-      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+      <FAIcon icon="unlock" class="button-icon" size="lg" />
     </span>
     <span
       v-if="showPublic"
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 8e903052..3eb92fc1 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -2,6 +2,12 @@ import FollowCard from '../follow_card/follow_card.vue'
 import Conversation from '../conversation/conversation.vue'
 import Status from '../status/status.vue'
 import map from 'lodash/map'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const Search = {
   components: {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 746bbaa2..a6677e4b 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -24,7 +24,7 @@
       v-if="loading"
       class="text-center loading-icon"
     >
-      <i class="icon-spin3 animate-spin" />
+      <FAIcon icon="circle-notch" spin size="lg"/>
     </div>
     <div v-else-if="loaded">
       <div class="search-nav-heading">
diff --git a/src/components/status/status.js b/src/components/status/status.js
index f7a0ff83..5b93054f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -21,7 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faGlobeEurope,
   faTimes,
   faRetweet,
@@ -35,22 +35,18 @@ import {
   faEye,
   faThumbtack
 } from '@fortawesome/free-solid-svg-icons'
-import {
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
 
 library.add(
   faEnvelope,
   faGlobeEurope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faTimes,
   faRetweet,
   faReply,
   faExternalLinkSquareAlt,
   faPlusSquare,
   faStar,
-  faStarRegular,
   faSmileBeam,
   faEllipsisH,
   faEyeSlash,
@@ -270,7 +266,7 @@ const Status = {
         case 'private':
           return 'lock'
         case 'unlisted':
-          return 'lock-open'
+          return 'unlock'
         case 'direct':
           return 'envelope'
         default:
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 51e7680c..c47f5631 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -1,4 +1,10 @@
 import { find } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const StatusPopover = {
   name: 'StatusPopover',
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 162eb210..f6432687 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -27,7 +27,7 @@
         v-else
         class="status-preview-no-content"
       >
-        <i class="icon-spin4 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="2x"/>
       </div>
     </div>
   </Popover>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 17680542..a443340f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -3,6 +3,12 @@ import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.se
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 import { throttle, keyBy } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
   const ids = []
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c1e2f44b..ab17cbbc 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -92,7 +92,7 @@
         v-else
         class="new-status-notification text-center panel-footer"
       >
-        <i class="icon-spin3 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="lg"/>
       </div>
     </div>
   </div>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 8e6b9d7f..3a8efafc 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -6,6 +6,22 @@ import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBell,
+  faRss,
+  faChevronDown,
+  faSearchPlus,
+  faExternalLinkAlt
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faRss,
+  faBell,
+  faChevronDown,
+  faSearchPlus,
+  faExternalLinkAlt
+)
 
 export default {
   props: [
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 041bb80f..cfdeaa17 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -21,7 +21,7 @@
               :user="user"
             />
             <div class="user-info-avatar-link-overlay">
-              <i class="button-icon icon-zoom-in" />
+              <FAIcon class="button-icon" icon="search-plus" size="lg" />
             </div>
           </a>
           <router-link
@@ -55,7 +55,7 @@
                 :href="user.statusnet_profile_url"
                 target="_blank"
               >
-                <i class="icon-link-ext usersettings" />
+                <FAIcon class="usersettings" icon="external-link-alt" />
               </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
@@ -85,7 +85,9 @@
                   bot
                 </span>
               </template>
-              <span v-if="user.locked"><i class="icon icon-lock" /></span>
+              <span v-if="user.locked">
+               <FAIcon class="lock-icon" icon="lock" size="sm"/>
+              </span>
               <span
                 v-if="!mergedConfig.hideUserStats && !hideBio"
                 class="dailyAvg"
@@ -133,7 +135,7 @@
                 <option value="striped">Striped bg</option>
                 <option value="side">Side stripe</option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </div>
@@ -150,7 +152,7 @@
                 :click="subscribeUser"
                 :title="$t('user_card.subscribe')"
               >
-                <i class="icon-bell-alt" />
+                <FAIcon icon="bell" />
               </ProgressButton>
               <ProgressButton
                 v-else
@@ -158,7 +160,11 @@
                 :click="unsubscribeUser"
                 :title="$t('user_card.unsubscribe')"
               >
-                <i class="icon-bell-ringing-o" />
+                <FALayers>
+                  <FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
+                  <FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
+                  <FAIcon icon="bell" />
+                </FALayers>
               </ProgressButton>
             </template>
           </div>
@@ -388,7 +394,7 @@
       opacity: 0;
       transition: opacity .2s ease;
 
-      i {
+      svg {
         color: #FFF;
       }
     }
@@ -447,6 +453,10 @@
     font-weight: light;
     font-size: 15px;
 
+    .lock-icon {
+      margin-left: 0.5em;
+    }
+
     .user-screen-name {
       min-width: 1px;
       flex: 0 1 auto;
@@ -508,7 +518,7 @@
         padding-bottom: 0;
         flex: 1 0 auto;
       }
-      .userHighlightSel.select i {
+      .userHighlightSel.select svg {
         line-height: 22px;
       }
 
diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
index b60f2c4c..32ca2b8d 100644
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -1,3 +1,9 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const UserListPopover = {
   name: 'UserListPopover',
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 185c73ca..dd6977d2 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div v-else>
-        <i class="icon-spin4 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="3x"/>
       </div>
     </div>
   </Popover>
diff --git a/src/main.js b/src/main.js
index 42b6bcb2..90ee2887 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,7 +33,7 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -48,6 +48,7 @@ Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
 
 Vue.component('FAIcon', FontAwesomeIcon)
+Vue.component('FALayers', FontAwesomeLayers)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
-- 
cgit v1.2.3-70-g09d2


From f561e755530063b2e8e0db210264b1d244543bd0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:31:16 +0300
Subject: lint

---
 src/App.vue                                        | 17 +++--
 src/components/account_actions/account_actions.vue |  5 +-
 src/components/attachment/attachment.vue           |  6 +-
 src/components/chat/chat.vue                       |  5 +-
 src/components/chat_new/chat_new.vue               | 11 ++-
 src/components/chat_panel/chat_panel.vue           |  5 +-
 src/components/emoji_picker/emoji_picker.vue       | 10 ++-
 src/components/exporter/exporter.vue               |  6 +-
 src/components/extra_buttons/extra_buttons.js      |  2 +-
 src/components/extra_buttons/extra_buttons.vue     | 48 ++++++++++---
 src/components/font_control/font_control.vue       |  5 +-
 .../global_notice_list/global_notice_list.vue      |  3 +-
 src/components/image_cropper/image_cropper.vue     |  3 +-
 .../interface_language_switcher.vue                |  5 +-
 src/components/login_form/login_form.vue           |  3 +-
 src/components/media_modal/media_modal.vue         | 10 ++-
 src/components/mfa_form/recovery_form.vue          |  3 +-
 src/components/mobile_nav/mobile_nav.vue           | 18 ++++-
 src/components/nav_panel/nav_panel.vue             | 35 +++++++--
 src/components/notification/notification.vue       | 33 +++++++--
 src/components/notifications/notifications.vue     |  6 +-
 src/components/panel_loading/panel_loading.vue     |  6 +-
 src/components/poll/poll_form.vue                  | 15 +++-
 .../post_status_form/post_status_form.vue          | 12 ++--
 src/components/retweet_button/retweet_button.vue   | 18 ++---
 src/components/scope_selector/scope_selector.vue   | 36 +++++++---
 src/components/search/search.vue                   |  6 +-
 src/components/search_bar/search_bar.vue           | 12 ++--
 .../settings_modal/tabs/filtering_tab.vue          |  5 +-
 src/components/settings_modal/tabs/general_tab.vue | 10 ++-
 src/components/settings_modal/tabs/profile_tab.vue | 12 ++--
 .../settings_modal/tabs/theme_tab/preview.vue      | 12 ++--
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 10 ++-
 src/components/shadow_control/shadow_control.vue   | 25 +++++--
 src/components/side_drawer/side_drawer.vue         | 84 ++++++++++++++++++----
 src/components/status/status.vue                   | 44 +++++++++---
 src/components/status_popover/status_popover.vue   |  6 +-
 src/components/timeline/timeline.vue               |  6 +-
 src/components/timeline_menu/timeline_menu.vue     | 40 +++++++++--
 src/components/user_card/user_card.vue             | 33 +++++++--
 .../user_list_popover/user_list_popover.vue        |  6 +-
 41 files changed, 497 insertions(+), 140 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/App.vue b/src/App.vue
index 5efaf717..c27f51bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,7 +54,8 @@
             <FAIcon
               fixed-width
               size="lg"
-              class="button-icon" icon="cog"
+              class="button-icon"
+              icon="cog"
               :title="$t('nav.preferences')"
             />
           </a>
@@ -64,9 +65,10 @@
             class="mobile-hidden nav-icon"
             target="_blank"
           ><FAIcon
-             fixed-width
-              size="lg"
-             class="button-icon" icon="tachometer-alt"
+            fixed-width
+            size="lg"
+            class="button-icon"
+            icon="tachometer-alt"
             :title="$t('nav.administration')"
           /></a>
           <a
@@ -75,9 +77,10 @@
             class="mobile-hidden nav-icon"
             @click.prevent="logout"
           ><FAIcon
-             fixed-width
-              size="lg"
-             class="button-icon" icon="sign-out-alt"
+            fixed-width
+            size="lg"
+            class="button-icon"
+            icon="sign-out-alt"
             :title="$t('login.logout')"
           /></a>
         </div>
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 61099d4f..e3ae376e 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -63,7 +63,10 @@
         slot="trigger"
         class="btn btn-default ellipsis-button"
       >
-        <FAIcon class="icon" icon="ellipsis-v" />
+        <FAIcon
+          class="icon"
+          icon="ellipsis-v"
+        />
       </div>
     </Popover>
   </div>
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 0b7a3f9c..f1fac2c8 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -38,7 +38,8 @@
       >
       <FAIcon
         v-if="type === 'video'"
-        class="play-icon" icon="play-circle"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
     <div
@@ -85,7 +86,8 @@
       />
       <FAIcon
         v-if="!allowPlay"
-        class="play-icon" icon="play-circle"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
 
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 0670f1ac..5f58b9a6 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -14,7 +14,10 @@
             class="go-back-button"
             @click="goBack"
           >
-            <FAIcon size="lg" icon="chevron-left" />
+            <FAIcon
+              size="lg"
+              icon="chevron-left"
+            />
           </a>
           <div class="title text-center">
             <ChatTitle
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 95eebe6b..8f02a699 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -11,12 +11,19 @@
         class="go-back-button"
         @click="goBack"
       >
-        <FAIcon size="lg" icon="chevron-left" />
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
       </a>
     </div>
     <div class="input-wrap">
       <div class="input-search">
-        <FAIcon size="lg" class="search-icon button-icon" icon="search" />
+        <FAIcon
+          size="lg"
+          class="search-icon button-icon"
+          icon="search"
+        />
       </div>
       <input
         ref="search"
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 51b99563..7993c94d 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -63,7 +63,10 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <FAIcon class="icon" icon="bullhorn" />
+          <FAIcon
+            class="icon"
+            icon="bullhorn"
+          />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index bd093c99..3262a3d9 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -13,7 +13,10 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
-          <FAIcon :icon="group.icon" fixed-width/>
+          <FAIcon
+            :icon="group.icon"
+            fixed-width
+          />
         </span>
       </span>
       <span
@@ -26,7 +29,10 @@
           :title="$t('emoji.stickers')"
           @click.prevent="toggleStickers"
         >
-          <FAIcon icon="sticky-note" fixed-width/>
+          <FAIcon
+            icon="sticky-note"
+            fixed-width
+          />
         </span>
       </span>
     </div>
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index 156db9a3..ecd71bf1 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="exporter">
     <div v-if="processing">
-      <FAIcon icon="circle-notch" size="lg" spin />
+      <FAIcon
+        icon="circle-notch"
+        size="lg"
+        spin
+      />
 
       <span>{{ processingMessage }}</span>
     </div>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index f325b2b4..1a8eef72 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -8,7 +8,7 @@ import {
   faShareAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as faBookmarkReg,
+  faBookmark as faBookmarkReg
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 1889eaed..4bf1e62a 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -15,14 +15,22 @@
           class="dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
-          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="eye-slash"
+          /><span>{{ $t("status.mute_conversation") }}</span>
         </button>
         <button
           v-if="canMute && status.thread_muted"
           class="dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
-          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="eye-slash"
+          /><span>{{ $t("status.unmute_conversation") }}</span>
         </button>
         <button
           v-if="!status.pinned && canPin"
@@ -30,7 +38,11 @@
           @click.prevent="pinStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="thumbtack"
+          /><span>{{ $t("status.pin") }}</span>
         </button>
         <button
           v-if="status.pinned && canPin"
@@ -38,7 +50,11 @@
           @click.prevent="unpinStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="thumbtack"
+          /><span>{{ $t("status.unpin") }}</span>
         </button>
         <button
           v-if="!status.bookmarked"
@@ -46,7 +62,11 @@
           @click.prevent="bookmarkStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            :icon="['far', 'bookmark']"
+          /><span>{{ $t("status.bookmark") }}</span>
         </button>
         <button
           v-if="status.bookmarked"
@@ -54,7 +74,11 @@
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="bookmark"
+          /><span>{{ $t("status.unbookmark") }}</span>
         </button>
         <button
           v-if="canDelete"
@@ -62,14 +86,22 @@
           @click.prevent="deleteStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="times"
+          /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
           class="dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="share-alt"
+          /><span>{{ $t("status.copy_link") }}</span>
         </button>
       </div>
     </div>
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 6070ab22..dd117ec0 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,10 @@
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
       </select>
-      <FAIcon class="select-down-icon" icon="chevron-down" />
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
     </label>
     <input
       v-if="isCustom"
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 3a7139f4..06b6af9c 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -10,7 +10,8 @@
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
       <FAIcon
-        class="button-icon" icon="times"
+        class="button-icon"
+        icon="times"
         @click="closeNotice(notice)"
       />
     </div>
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index e69cbd0b..605f7427 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -43,7 +43,8 @@
       >
         {{ submitErrorMsg }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 76bdcdfe..d039e86b 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,10 @@
           {{ languageNames[i] }}
         </option>
       </select>
-      <FAIcon class="select-down-icon" icon="chevron-down" />
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
     </label>
   </div>
 </template>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index f6b767a2..4ab5d192 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -77,7 +77,8 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index cbcfc6d2..ea7f7a7f 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -34,7 +34,10 @@
       class="modal-view-button-arrow modal-view-button-arrow--prev"
       @click.stop.prevent="goPrev"
     >
-      <FAIcon class="arrow-icon" icon="chevron-left" />
+      <FAIcon
+        class="arrow-icon"
+        icon="chevron-left"
+      />
     </button>
     <button
       v-if="canNavigate"
@@ -42,7 +45,10 @@
       class="modal-view-button-arrow modal-view-button-arrow--next"
       @click.stop.prevent="goNext"
     >
-      <FAIcon class="arrow-icon" icon="chevron-right" />
+      <FAIcon
+        class="arrow-icon"
+        icon="chevron-right"
+      />
     </button>
   </Modal>
 </template>
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 61dbda24..f6526d2a 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -55,7 +55,8 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 4d91af77..db9b0ba0 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -15,7 +15,11 @@
             class="mobile-nav-button"
             @click.stop.prevent="toggleMobileSidebar()"
           >
-            <FAIcon size="lg" class="button-icon" icon="bars" />
+            <FAIcon
+              size="lg"
+              class="button-icon"
+              icon="bars"
+            />
             <div
               v-if="unreadChatCount"
               class="alert-dot"
@@ -37,7 +41,11 @@
             href="#"
             @click.stop.prevent="openMobileNotifications()"
           >
-            <FAIcon size="lg" class="button-icon" icon="bell" />
+            <FAIcon
+              size="lg"
+              class="button-icon"
+              icon="bell"
+            />
             <div
               v-if="unseenNotificationsCount"
               class="alert-dot"
@@ -59,7 +67,11 @@
           class="mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications()"
         >
-          <FAIcon size="lg" class="button-icon" icon="times" />
+          <FAIcon
+            size="lg"
+            class="button-icon"
+            icon="times"
+          />
         </a>
       </div>
       <div
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index f3e131ff..4755d7b7 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -7,13 +7,23 @@
             :to="{ name: timelinesRoute }"
             :class="onTimelineRoute && 'router-link-active'"
           >
-            <FAIcon fixed-width size="lg" class="button-icon" icon="home" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="home"
+            />
             {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="bell" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="bell"
+            />
             {{ $t("nav.interactions") }}
           </router-link>
         </li>
@@ -25,13 +35,23 @@
             >
               {{ unreadChatCount }}
             </div>
-            <FAIcon fixed-width size="lg" class="button-icon" icon="comments" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="comments"
+            />
             {{ $t("nav.chats") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="user-plus" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="user-plus"
+            />
             {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
@@ -43,7 +63,12 @@
         </li>
         <li>
           <router-link :to="{ name: 'about' }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="info-circle" />{{ $t("nav.about") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="info-circle"
+            />{{ $t("nav.about") }}
           </router-link>
         </li>
       </ul>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 857727a4..b609ae04 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -18,7 +18,10 @@
         href="#"
         class="unmute"
         @click.prevent="toggleMute"
-      ><FAIcon class="button-icon" icon="eye-slash" /></a>
+      ><FAIcon
+        class="button-icon"
+        icon="eye-slash"
+      /></a>
     </div>
     <div
       v-else
@@ -60,26 +63,39 @@
               :title="'@'+notification.from_profile.screen_name"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
-              <FAIcon class="type-icon" icon="star" />
+              <FAIcon
+                class="type-icon"
+                icon="star"
+              />
               <small>{{ $t('notifications.favorited_you') }}</small>
             </span>
             <span v-if="notification.type === 'repeat'">
               <FAIcon
-                class="type-icon" icon="retweet"
+                class="type-icon"
+                icon="retweet"
                 :title="$t('tool_tip.repeat')"
               />
               <small>{{ $t('notifications.repeated_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow'">
-              <FAIcon class="type-icon" icon="user-plus" />
+              <FAIcon
+                class="type-icon"
+                icon="user-plus"
+              />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow_request'">
-              <FAIcon class="type-icon" icon="user" />
+              <FAIcon
+                class="type-icon"
+                icon="user"
+              />
               <small>{{ $t('notifications.follow_request') }}</small>
             </span>
             <span v-if="notification.type === 'move'">
-              <FAIcon class="type-icon" icon="suitcase-rolling" />
+              <FAIcon
+                class="type-icon"
+                icon="suitcase-rolling"
+              />
               <small>{{ $t('notifications.migrated_to') }}</small>
             </span>
             <span v-if="notification.type === 'pleroma:emoji_reaction'">
@@ -120,7 +136,10 @@
             v-if="needMute"
             href="#"
             @click.prevent="toggleMute"
-          ><FAIcon class="button-icon" icon="eye-slash" /></a>
+          ><FAIcon
+            class="button-icon"
+            icon="eye-slash"
+          /></a>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 57972854..bd875cca 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -61,7 +61,11 @@
           v-else
           class="new-status-notification text-center panel-footer"
         >
-          <FAIcon icon="circle-notch" spin size="lg"/>
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 9bf3ab32..b15e7d38 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="panel-loading">
     <span class="loading-text">
-      <FAIcon icon="circle-notch" spin size="3x"/>
+      <FAIcon
+        icon="circle-notch"
+        spin
+        size="3x"
+      />
       {{ $t('general.loading') }}
     </span>
   </div>
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index f3e7a716..e598cf3b 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -36,7 +36,10 @@
       class="add-option faint"
       @click="addOption"
     >
-      <FAIcon icon="plus" size="sm"/>
+      <FAIcon
+        icon="plus"
+        size="sm"
+      />
 
       {{ $t("polls.add_option") }}
     </a>
@@ -57,7 +60,10 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down"/>
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
       <div
@@ -85,7 +91,10 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down"/>
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
     </div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 3cd9e7a5..9cf38a9a 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -15,7 +15,7 @@
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
       >
-        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'"/>
+        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
       </div>
       <div class="form-group">
         <i18n
@@ -200,7 +200,10 @@
                   {{ $t(`post_status.content_type["${postFormat}"]`) }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down"/>
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
           <div
@@ -242,7 +245,7 @@
               class="btn btn-default"
               @click="showEmojiPicker"
             >
-              <FAIcon icon="smile-beam"/>
+              <FAIcon icon="smile-beam" />
             </div>
           </div>
           <div
@@ -299,7 +302,8 @@
           class="media-upload-wrapper"
         >
           <FAIcon
-            class="button-icon" icon="times"
+            class="button-icon"
+            icon="times"
             @click="removeMediaFile(file)"
           />
           <attachment
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 3e15f30b..706c6b81 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-    <FAIcon
-      :class="classes"
-      class="RetweetButton button-icon -interactive"
-      icon="retweet"
-      size="lg"
-      :spin="animated"
-      :title="$t('tool_tip.repeat')"
-      @click.prevent="retweet()"
-    />
+      <FAIcon
+        :class="classes"
+        class="RetweetButton button-icon -interactive"
+        icon="retweet"
+        size="lg"
+        :spin="animated"
+        :title="$t('tool_tip.repeat')"
+        @click.prevent="retweet()"
+      />
       <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
     </template>
     <template v-else>
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index d490f8ee..a43af23b 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -2,24 +2,32 @@
   <div
     v-if="!showNothing"
     class="ScopeSelector"
-    >
+  >
     <span
       v-if="showDirect"
       class="scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
-      >
-      <FAIcon icon="envelope" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="envelope"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
-      class="scope"
       v-if="showPrivate"
+      class="scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
-      >
-      <FAIcon icon="lock" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="lock"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
       v-if="showUnlisted"
@@ -27,8 +35,12 @@
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
-      >
-      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="lock-open"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
       v-if="showPublic"
@@ -36,8 +48,12 @@
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
-      >
-      <FAIcon icon="globe" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="globe"
+        class="button-icon"
+        size="lg"
+      />
     </span>
   </div>
 </template>
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index d32f48d9..665390f9 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -24,7 +24,11 @@
       v-if="loading"
       class="text-center loading-icon"
     >
-      <FAIcon icon="circle-notch" spin size="lg"/>
+      <FAIcon
+        icon="circle-notch"
+        spin
+        size="lg"
+      />
     </div>
     <div v-else-if="loaded">
       <div class="search-nav-heading">
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index fbbbbfe0..442e91b2 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -7,11 +7,11 @@
         class="nav-icon"
         :title="$t('nav.search')"
       ><FAIcon
-         fixed-width
-         size="lg"
-         class="button-icon"
-         icon="search"
-         @click.prevent.stop="toggleHidden"
+        fixed-width
+        size="lg"
+        class="button-icon"
+        icon="search"
+        @click.prevent.stop="toggleHidden"
       /></a>
       <template v-else>
         <input
@@ -30,7 +30,7 @@
           <FAIcon
             fixed-width
             icon="search"
-            />
+          />
         </button>
         <span>
           <FAIcon
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index ff1a129b..813dc4cd 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,10 @@
             <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
             <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
       <div>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 99d3a0dc..c1d0d0ec 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,10 @@
                   {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </li>
@@ -127,7 +130,10 @@
                   {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </li>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 773c77de..5a659fc8 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -169,7 +169,8 @@
         <FAIcon
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetAvatar"
         />
@@ -197,7 +198,8 @@
         <FAIcon
           v-if="!isDefaultBanner"
           :title="$t('settings.reset_profile_banner')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetBanner"
         />
@@ -233,7 +235,8 @@
       >
         Error: {{ bannerUploadError }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearUploadError('banner')"
         />
       </div>
@@ -245,7 +248,8 @@
         <FAIcon
           v-if="!isDefaultBackground"
           :title="$t('settings.reset_profile_background')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetBackground"
         />
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 65863c54..20201e18 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -42,22 +42,26 @@
               <FAIcon
                 fixed-width
                 style="color: var(--cBlue)"
-                class="button-icon" icon="reply"
+                class="button-icon"
+                icon="reply"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cGreen)"
-                class="button-icon" icon="retweet"
+                class="button-icon"
+                icon="retweet"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cOrange)"
-                class="button-icon" icon="star"
+                class="button-icon"
+                icon="star"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cRed)"
-                class="button-icon" icon="times"
+                class="button-icon"
+                icon="times"
               />
             </div>
           </div>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 9cc1c392..280e1955 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,10 @@
                     {{ style[0] || style.name }}
                   </option>
                 </select>
-                <FAIcon class="select-down-icon" icon="chevron-down" />
+                <FAIcon
+                  class="select-down-icon"
+                  icon="chevron-down"
+                />
               </label>
             </div>
           </template>
@@ -907,7 +910,10 @@
                     {{ $t('settings.style.shadows.components.' + shadow) }}
                   </option>
                 </select>
-                <FAIcon class="select-down-icon" icon="chevron-down" />
+                <FAIcon
+                  class="select-down-icon"
+                  icon="chevron-down"
+                />
               </label>
             </div>
             <div class="override">
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 32220ae8..78f0e544 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,35 +78,50 @@
               {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
             </option>
           </select>
-          <FAIcon icon="chevron-down" class="select-down-icon" />
+          <FAIcon
+            icon="chevron-down"
+            class="select-down-icon"
+          />
         </label>
         <button
           class="btn btn-default"
           :disabled="!ready || !present"
           @click="del"
         >
-          <FAIcon fixed-width icon="times" />
+          <FAIcon
+            fixed-width
+            icon="times"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveUpValid"
           @click="moveUp"
         >
-          <FAIcon fixed-width icon="chevron-up" />
+          <FAIcon
+            fixed-width
+            icon="chevron-up"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveDnValid"
           @click="moveDn"
         >
-          <FAIcon fixed-width icon="chevron-down" />
+          <FAIcon
+            fixed-width
+            icon="chevron-down"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="usingFallback"
           @click="add"
         >
-          <FAIcon fixed-width icon="plus" />
+          <FAIcon
+            fixed-width
+            icon="plus"
+          />
         </button>
       </div>
       <div
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index fbdb2441..2a4d794a 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -36,7 +36,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'login' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-in-alt" /> {{ $t("login.login") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="sign-in-alt"
+            /> {{ $t("login.login") }}
           </router-link>
         </li>
         <li
@@ -44,7 +49,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: timelinesRoute }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="home" /> {{ $t("nav.timelines") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="home"
+            /> {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li
@@ -55,7 +65,12 @@
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="comments" /> {{ $t("nav.chats") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="comments"
+            /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
               class="badge badge-notification unread-chat-count"
@@ -68,7 +83,12 @@
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="bell" /> {{ $t("nav.interactions") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="bell"
+            /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li
@@ -76,7 +96,12 @@
           @click="toggleDrawer"
         >
           <router-link to="/friend-requests">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.friend_requests") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="user-plus"
+            /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -90,7 +115,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="bullhorn" /> {{ $t("shoutbox.title") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="bullhorn"
+            /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>
@@ -100,7 +130,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'search' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="search" /> {{ $t("nav.search") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="search"
+            /> {{ $t("nav.search") }}
           </router-link>
         </li>
         <li
@@ -108,7 +143,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'who-to-follow' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.who_to_follow") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="user-plus"
+            /> {{ $t("nav.who_to_follow") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
@@ -116,12 +156,22 @@
             href="#"
             @click="openSettingsModal"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="cog" /> {{ $t("settings.settings") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="cog"
+            /> {{ $t("settings.settings") }}
           </a>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="info-circle" /> {{ $t("nav.about") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="info-circle"
+            /> {{ $t("nav.about") }}
           </router-link>
         </li>
         <li
@@ -132,7 +182,12 @@
             href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="tachometer-alt" /> {{ $t("nav.administration") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="tachometer-alt"
+            /> {{ $t("nav.administration") }}
           </a>
         </li>
         <li
@@ -143,7 +198,12 @@
             href="#"
             @click="doLogout"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-out-alt" /> {{ $t("login.logout") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="sign-out-alt"
+            /> {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b9b967cc..c94862d4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -13,7 +13,7 @@
       <span
         class="button-icon"
         @click="clearError"
-        >
+      >
         <FAIcon icon="times" />
       </span>
     </div>
@@ -51,8 +51,12 @@
           href="#"
           class="unmute button-icon"
           @click.prevent="toggleMute"
-          >
-          <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+        >
+          <FAIcon
+            icon="eye-slash"
+            class="button-icon"
+            size="lg"
+          />
         </a>
       </div>
     </template>
@@ -61,7 +65,10 @@
         v-if="showPinned"
         class="pin"
       >
-        <FAIcon icon="thumbtack" class="faint" />
+        <FAIcon
+          icon="thumbtack"
+          class="faint"
+        />
         <span class="faint">{{ $t('status.pinned') }}</span>
       </div>
       <div
@@ -177,8 +184,12 @@
                   v-if="status.visibility"
                   class="visibility-icon"
                   :title="status.visibility | capitalize"
-                  >
-                  <FAIcon class="button-icon" :icon="visibilityIcon(status.visibility)" size="lg" />
+                >
+                  <FAIcon
+                    class="button-icon"
+                    :icon="visibilityIcon(status.visibility)"
+                    size="lg"
+                  />
                 </span>
                 <a
                   v-if="!status.is_local && !isPreview"
@@ -187,7 +198,11 @@
                   class="source_url"
                   title="Source"
                 >
-                  <FAIcon class="button-icon" icon="external-link-square-alt" size="lg" />
+                  <FAIcon
+                    class="button-icon"
+                    icon="external-link-square-alt"
+                    size="lg"
+                  />
                 </a>
                 <a
                   v-if="expandable && !isPreview"
@@ -195,14 +210,22 @@
                   title="Expand"
                   @click.prevent="toggleExpanded"
                 >
-                  <FAIcon class="button-icon" icon="plus-square" size="lg" />
+                  <FAIcon
+                    class="button-icon"
+                    icon="plus-square"
+                    size="lg"
+                  />
                 </a>
                 <a
                   v-if="unmuted"
                   href="#"
                   @click.prevent="toggleMute"
                 >
-                  <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+                  <FAIcon
+                    icon="eye-slash"
+                    class="button-icon"
+                    size="lg"
+                  />
                 </a>
               </span>
             </div>
@@ -230,7 +253,7 @@
                       icon="reply"
                       size="lg"
                       flip="horizontal"
-                      />
+                    />
                     <span
                       class="faint-link reply-to-text"
                     >
@@ -358,7 +381,6 @@
               @onSuccess="clearError"
             />
           </div>
-
         </div>
       </div>
       <div
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index f6432687..8237ce00 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -27,7 +27,11 @@
         v-else
         class="status-preview-no-content"
       >
-        <FAIcon icon="circle-notch" spin size="2x"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="2x"
+        />
       </div>
     </div>
   </Popover>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index ab17cbbc..aaf0349c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -92,7 +92,11 @@
         v-else
         class="new-status-notification text-center panel-footer"
       >
-        <FAIcon icon="circle-notch" spin size="lg"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="lg"
+        />
       </div>
     </div>
   </div>
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 1e546fae..8099ddd5 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -16,27 +16,52 @@
       <ul>
         <li v-if="currentUser">
           <router-link :to="{ name: 'friends' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="home" />{{ $t("nav.timeline") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="home"
+            />{{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'bookmarks'}">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="bookmark" />{{ $t("nav.bookmarks") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="bookmark"
+            />{{ $t("nav.bookmarks") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="envelope" />{{ $t("nav.dms") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="envelope"
+            />{{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'public-timeline' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="users" />{{ $t("nav.public_tl") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="users"
+            />{{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="globe" />{{ $t("nav.twkn") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="globe"
+            />{{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>
@@ -46,7 +71,10 @@
       class="title timeline-menu-title"
     >
       <span>{{ timelineName() }}</span>
-      <FAIcon size="sm" icon="chevron-down" />
+      <FAIcon
+        size="sm"
+        icon="chevron-down"
+      />
     </div>
   </Popover>
 </template>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6c35c781..c5f10b75 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -21,7 +21,11 @@
               :user="user"
             />
             <div class="user-info-avatar-link-overlay">
-              <FAIcon class="button-icon" icon="search-plus" size="lg" />
+              <FAIcon
+                class="button-icon"
+                icon="search-plus"
+                size="lg"
+              />
             </div>
           </a>
           <router-link
@@ -56,7 +60,10 @@
                 target="_blank"
                 class="external-link-button"
               >
-                <FAIcon class="icon" icon="external-link-alt" />
+                <FAIcon
+                  class="icon"
+                  icon="external-link-alt"
+                />
               </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
@@ -87,7 +94,11 @@
                 </span>
               </template>
               <span v-if="user.locked">
-               <FAIcon class="lock-icon" icon="lock" size="sm"/>
+                <FAIcon
+                  class="lock-icon"
+                  icon="lock"
+                  size="sm"
+                />
               </span>
               <span
                 v-if="!mergedConfig.hideUserStats && !hideBio"
@@ -136,7 +147,10 @@
                 <option value="striped">Striped bg</option>
                 <option value="side">Side stripe</option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </div>
@@ -162,8 +176,15 @@
                 :title="$t('user_card.unsubscribe')"
               >
                 <FALayers>
-                  <FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
-                  <FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
+                  <FAIcon
+                    icon="rss"
+                    transform="left-5 shrink-6 up-3 rotate-20"
+                    flip="horizontal"
+                  />
+                  <FAIcon
+                    icon="rss"
+                    transform="right-5 shrink-6 up-3 rotate-20"
+                  />
                   <FAIcon icon="bell" />
                 </FALayers>
               </ProgressButton>
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index dd6977d2..95673733 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -31,7 +31,11 @@
         </div>
       </div>
       <div v-else>
-        <FAIcon icon="circle-notch" spin size="3x"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="3x"
+        />
       </div>
     </div>
   </Popover>
-- 
cgit v1.2.3-70-g09d2


From 7007659e05842dc06eb2c13eddaba6ab657df5ea Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 28 Oct 2020 08:53:23 +0200
Subject: change input blocking to use css

---
 src/components/timeline/timeline.js  | 10 +++-------
 src/components/timeline/timeline.vue |  9 +++++++--
 2 files changed, 10 insertions(+), 9 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 25fa3e41..ea290fde 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -65,8 +65,10 @@ const Timeline = {
       }
     },
     classes () {
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
+      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
       return {
-        root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
+        root: rootClasses,
         header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
@@ -125,17 +127,11 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
-    blockClickEvent (e) {
-      e.stopPropagation()
-      e.preventDefault()
-    },
     stopBlockingClicks: debounce(function () {
       this.blockingClicks = false
-      this.$el && this.$el.removeEventListener('click', this.blockClickEvent, true)
     }, 1000),
     blockClicksTemporarily () {
       if (!this.blockingClicks) {
-        this.$el.addEventListener('click', this.blockClickEvent, true)
         this.blockingClicks = true
       }
       this.stopBlockingClicks()
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c1e2f44b..234ca2d2 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[classes.root, 'timeline']">
+  <div :class="[classes.root, 'Timeline']">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
       <div
@@ -103,10 +103,15 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline {
+.Timeline {
   .loadmore-text {
     opacity: 1;
   }
+
+  &.-blocked {
+    pointer-events: none;
+    cursor: wait;
+  }
 }
 
 .timeline-heading {
-- 
cgit v1.2.3-70-g09d2


From 6d7ecd7d800450ab07cb2895d4af96ab13849ded Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Wed, 28 Oct 2020 10:02:51 +0000
Subject: Apply 1 suggestion(s) to 1 file(s)

---
 src/components/timeline/timeline.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 234ca2d2..e4404daf 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -110,7 +110,6 @@
 
   &.-blocked {
     pointer-events: none;
-    cursor: wait;
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From e351665bb31745e2639abef3e47bf4f9df616d6b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 2 Nov 2020 23:43:32 +0200
Subject: Instead of blocking all interaction, only block interaction in places
 that matter

---
 src/components/extra_buttons/extra_buttons.vue     |  4 ++++
 src/components/favorite_button/favorite_button.vue |  4 ++++
 src/components/react_button/react_button.vue       |  4 ++++
 src/components/reply_button/reply_button.vue       |  4 ++++
 src/components/retweet_button/retweet_button.vue   |  4 ++++
 src/components/status/status.scss                  | 14 ++++++++++++++
 src/components/status/status.vue                   |  1 +
 src/components/status_content/status_content.vue   |  4 ++++
 src/components/timeline/timeline.js                |  2 +-
 src/components/timeline/timeline.vue               |  2 +-
 src/components/user_card/user_card.vue             |  4 ++++
 11 files changed, 45 insertions(+), 2 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a33f6e87..984b0483 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -120,5 +120,9 @@
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
+
+  ._misclick-prevention & {
+    pointer-events: none !important;
+  }
 }
 </style>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index dfe12f86..55872133 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -35,6 +35,10 @@
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
+
+    ._misclick-prevention & {
+      pointer-events: none !important;
+    }
   }
 
   &.-favorited {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 95d95b11..bb4472d7 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -107,6 +107,10 @@
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }
+
+  ._misclick-prevention & {
+    pointer-events: none !important;
+  }
 }
 
 </style>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index a0ac8941..4ca37d5e 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -34,6 +34,10 @@
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
     }
+
+    ._misclick-prevention & {
+      pointer-events: none !important;
+    }
   }
 }
 </style>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index b234f3d9..b79fcd75 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -45,6 +45,10 @@
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
+
+    ._misclick-prevention & {
+      pointer-events: none !important;
+    }
   }
 
   &.-repeated {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0a395086..769f7ef4 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -59,6 +59,12 @@ $status-margin: 0.75em;
     justify-content: flex-end;
   }
 
+  .user-avatar {
+    ._misclick-prevention & {
+      pointer-events: none !important;
+    }
+  }
+
   .left-side {
     margin-right: $status-margin;
   }
@@ -108,6 +114,10 @@ $status-margin: 0.75em;
     a {
       display: inline-block;
       word-break: break-all;
+
+      ._misclick-prevention & {
+        pointer-events: none !important;
+      }
     }
   }
 
@@ -250,6 +260,10 @@ $status-margin: 0.75em;
       vertical-align: middle;
       object-fit: contain;
     }
+
+    ._misclick-prevention & a {
+      pointer-events: none !important;
+    }
   }
 
   .status-fadein {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 21412faa..eb54befc 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -119,6 +119,7 @@
         >
           <router-link
             :to="userProfileLink"
+            class="user-avatar"
             @click.stop.prevent.capture.native="toggleUserExpanded"
           >
             <UserAvatar
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 321cd477..e3875498 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -240,6 +240,10 @@ $status-margin: 0.75em;
     word-wrap: break-word;
     word-break: break-word;
 
+    ._misclick-prevention & :not(.attachments) a {
+      pointer-events: none !important;
+    }
+
     blockquote {
       margin: 0.2em 0 0.2em 2em;
       font-style: italic;
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 368ee81b..cba46daf 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -72,7 +72,7 @@ const Timeline = {
     },
     classes () {
       let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
-      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
+      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
         header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 373b946f..04859852 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -113,7 +113,7 @@
   }
 
   &.-blocked {
-    pointer-events: none;
+    cursor: progress;
   }
 }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f916af9d..d1cfe654 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -282,6 +282,10 @@
 .user-card {
   position: relative;
 
+  ._misclick-prevention & {
+    pointer-events: none !important;
+  }
+
   &:hover .Avatar {
     --_still-image-img-visibility: visible;
     --_still-image-canvas-visibility: hidden;
-- 
cgit v1.2.3-70-g09d2