From d7688fafd367f8e32ce94278b3ac3f91ba89ee6b Mon Sep 17 00:00:00 2001
From: emma <hi@emma.cafe>
Date: Thu, 8 Dec 2022 16:48:17 +0000
Subject: [PATCH] format everything

---
 .prettierrc                                   |   6 +
 src/App.js                                    |  83 ++-
 src/App.vue                                   |   2 +-
 src/boot/after_store.js                       | 265 +++++---
 src/boot/routes.js                            | 146 ++++-
 src/components/about/about.js                 |  12 +-
 src/components/about/about.vue                |   5 +-
 .../account_actions/account_actions.js        |  49 +-
 .../account_actions/account_actions.vue       |  10 +-
 src/components/announcement/announcement.js   |  65 +-
 src/components/announcement/announcement.vue  |   9 +-
 .../announcement_editor.vue                   |  16 +-
 .../announcements_page/announcements_page.js  |  17 +-
 .../announcements_page/announcements_page.vue |  13 +-
 .../async_component_error.vue                 |   6 +-
 src/components/attachment/attachment.js       |  75 +--
 src/components/attachment/attachment.vue      |  34 +-
 src/components/auth_form/auth_form.js         |  12 +-
 src/components/autosuggest/autosuggest.js     |  22 +-
 src/components/autosuggest/autosuggest.vue    |   2 +-
 src/components/avatar_list/avatar_list.js     |  10 +-
 src/components/avatar_list/avatar_list.vue    |   2 +-
 .../awaiting_email_confirmation.js            |   3 +-
 .../basic_user_card/basic_user_card.js        |  16 +-
 src/components/block_card/block_card.js       |  12 +-
 .../bookmark_timeline/bookmark_timeline.js    |   4 +-
 .../bubble_timeline/bubble_timeline.js        |   9 +-
 .../chat_message_date/chat_message_date.vue   |   7 +-
 src/components/checkbox/checkbox.vue          |  17 +-
 src/components/color_input/color_input.vue    |  23 +-
 src/components/confirm_modal/confirm_modal.js |   7 +-
 .../confirm_modal/confirm_modal.vue           |   4 +-
 .../contrast_ratio/contrast_ratio.vue         |  34 +-
 .../conversation-page/conversation-page.js    |   2 +-
 src/components/conversation/conversation.js   | 351 ++++++-----
 src/components/conversation/conversation.vue  |  99 +--
 src/components/desktop_nav/desktop_nav.js     |  96 +--
 src/components/desktop_nav/desktop_nav.vue    |  14 +-
 src/components/dialog_modal/dialog_modal.vue  |   9 +-
 src/components/dm_timeline/dm_timeline.js     |   2 +-
 .../domain_mute_card/domain_mute_card.js      |   8 +-
 .../domain_mute_card/domain_mute_card.vue     |   4 +-
 .../edit_status_modal/edit_status_modal.js    |  25 +-
 .../edit_status_modal/edit_status_modal.vue   |   6 +-
 src/components/emoji_input/emoji_input.js     | 160 ++---
 src/components/emoji_input/emoji_input.vue    |  16 +-
 src/components/emoji_input/suggestor.js       |  99 ++-
 src/components/emoji_picker/emoji_picker.js   |  90 +--
 src/components/emoji_picker/emoji_picker.vue  |  16 +-
 .../emoji_reactions/emoji_reactions.js        |  30 +-
 .../emoji_reactions/emoji_reactions.vue       |  16 +-
 src/components/exporter/exporter.js           |  36 +-
 src/components/extra_buttons/extra_buttons.js | 209 ++++---
 .../extra_buttons/extra_buttons.vue           |  34 +-
 .../favorite_button/favorite_button.js        |  19 +-
 .../favorite_button/favorite_button.vue       |   2 +-
 .../features_panel/features_panel.js          |  18 +-
 .../features_panel/features_panel.vue         |  13 +-
 src/components/flash/flash.js                 |  28 +-
 src/components/follow_button/follow_button.js |  38 +-
 .../follow_button/follow_button.vue           |   4 +-
 src/components/follow_card/follow_card.js     |  11 +-
 .../follow_request_card.js                    |  35 +-
 .../follow_requests/follow_requests.js        |   2 +-
 src/components/font_control/font_control.js   |  34 +-
 src/components/font_control/font_control.vue  |  13 +-
 .../friends_timeline/friends_timeline.js      |   4 +-
 src/components/gallery/gallery.js             |  95 +--
 src/components/gallery/gallery.vue            |  29 +-
 .../global_notice_list/global_notice_list.js  |  12 +-
 src/components/hashtag_link/hashtag_link.js   |   4 +-
 src/components/hashtag_link/hashtag_link.vue  |   8 +-
 src/components/image_cropper/image_cropper.js |  41 +-
 .../image_cropper/image_cropper.vue           |   4 +-
 src/components/importer/importer.js           |  30 +-
 src/components/importer/importer.vue          |  10 +-
 .../instance_specific_panel.js                |   2 +-
 .../instance_specific_panel.vue               |   2 +-
 src/components/interactions/interactions.js   |   7 +-
 src/components/interactions/interactions.vue  |   2 +-
 .../interface_language_switcher.vue           |   8 +-
 src/components/link-preview/link-preview.js   |  22 +-
 src/components/link-preview/link-preview.vue  |   9 +-
 src/components/list/list.vue                  |   2 +-
 src/components/list_card/list_card.js         |  12 +-
 src/components/list_edit/list_edit.js         |  67 +--
 src/components/list_edit/list_edit.vue        |   2 +-
 src/components/list_new/list_new.js           |  50 +-
 src/components/list_new/list_new.vue          |   6 +-
 src/components/list_timeline/list_timeline.js |  15 +-
 .../list_user_search/list_user_search.js      |  29 +-
 .../list_user_search/list_user_search.vue     |   3 +-
 src/components/lists/lists.js                 |  10 +-
 src/components/lists/lists.vue                |   2 +-
 .../local_bubble_panel/local_bubble_panel.js  |   2 +-
 .../local_bubble_panel/local_bubble_panel.vue |   4 +-
 src/components/login_form/login_form.js       |  88 +--
 src/components/login_form/login_form.vue      |  14 +-
 src/components/media_modal/media_modal.js     |  66 +-
 src/components/media_modal/media_modal.vue    |  27 +-
 src/components/media_upload/media_upload.js   |  48 +-
 src/components/media_upload/media_upload.vue  |   6 +-
 src/components/mention_link/mention_link.js   |  76 ++-
 src/components/mention_link/mention_link.vue  |  39 +-
 src/components/mentions/mentions.js           |   2 +-
 src/components/mentions_line/mentions_line.js |   8 +-
 .../mentions_line/mentions_line.vue           |  10 +-
 src/components/mfa_form/recovery_form.js      |  14 +-
 src/components/mfa_form/recovery_form.vue     |   6 +-
 src/components/mfa_form/totp_form.js          |  14 +-
 src/components/mfa_form/totp_form.vue         |   4 +-
 src/components/mobile_nav/mobile_nav.js       |  56 +-
 src/components/mobile_nav/mobile_nav.vue      |  11 +-
 .../mobile_post_status_button.js              |  66 +-
 .../mobile_post_status_button.vue             |   3 +-
 src/components/mod_modal/mod_modal.js         |  33 +-
 src/components/mod_modal/mod_modal_content.js |  28 +-
 .../mod_modal/tabs/reports_tab/report_card.js | 105 ++--
 .../tabs/reports_tab/report_card.vue          |  61 +-
 .../mod_modal/tabs/reports_tab/report_note.js |  21 +-
 .../tabs/reports_tab/report_note.vue          |   2 +-
 .../mod_modal/tabs/reports_tab/reports_tab.js |   6 +-
 .../tabs/reports_tab/reports_tab.vue          |   8 +-
 src/components/modal/modal.vue                |   4 +-
 .../moderation_tools/moderation_tools.js      | 103 ++--
 .../moderation_tools/moderation_tools.vue     |  49 +-
 .../mrf_transparency_panel.js                 | 106 ++--
 .../mrf_transparency_panel.vue                |  78 +--
 src/components/mute_card/mute_card.js         |  12 +-
 src/components/nav_panel/nav_panel.js         |  14 +-
 src/components/nav_panel/nav_panel.vue        |  17 +-
 src/components/notification/notification.js   |  76 ++-
 src/components/notification/notification.vue  |  26 +-
 .../notifications/notification_filters.vue    |  14 +-
 src/components/notifications/notifications.js |  68 ++-
 .../notifications/notifications.vue           |  11 +-
 .../oauth_callback/oauth_callback.js          |  24 +-
 .../opacity_input/opacity_input.vue           |  12 +-
 .../panel_loading/panel_loading.vue           |   4 +-
 .../password_reset/password_reset.js          |  50 +-
 .../password_reset/password_reset.vue         |  11 +-
 src/components/pinch_zoom/pinch_zoom.js       |   6 +-
 src/components/poll/poll.js                   |  76 ++-
 src/components/poll/poll.vue                  |  18 +-
 src/components/poll/poll_form.js              |  76 +--
 src/components/poll/poll_form.vue             |   6 +-
 src/components/popover/popover.js             | 101 ++--
 src/components/popover/popover.vue            |  12 +-
 .../post_status_form/post_status_form.js      | 346 ++++++-----
 .../post_status_form/post_status_form.vue     |  76 ++-
 .../post_status_modal/post_status_modal.js    |  26 +-
 .../progress_button/progress_button.vue       |  11 +-
 .../public_and_external_timeline.js           |  12 +-
 .../public_timeline/public_timeline.js        |   9 +-
 src/components/quote_button/quote_button.js   |   2 +-
 src/components/quote_button/quote_button.vue  |   3 +-
 src/components/quote_card/quote_card.js       |  10 +-
 src/components/quote_card/quote_card.vue      |   4 +-
 .../quote_card_content/quote_card_content.vue |   4 +-
 src/components/range_input/range_input.vue    |  19 +-
 src/components/react_button/react_button.js   |  12 +-
 src/components/react_button/react_button.vue  |  11 +-
 src/components/registration/registration.js   |  33 +-
 src/components/registration/registration.vue  |  79 ++-
 .../registration_request_sent.js              |   3 +-
 src/components/remote_follow/remote_follow.js |   4 +-
 .../remote_follow/remote_follow.vue           |   4 +-
 .../remote_user_resolver.js                   |  10 +-
 .../remote_user_resolver.vue                  |   7 +-
 .../remove_follower_button.js                 |  14 +-
 src/components/reply_button/reply_button.js   |   8 +-
 src/components/reply_button/reply_button.vue  |   3 +-
 .../retweet_button/retweet_button.js          |  22 +-
 .../retweet_button/retweet_button.vue         |   8 +-
 .../scope_selector/scope_selector.js          |  44 +-
 .../scope_selector/scope_selector.vue         |   1 -
 src/components/search/search.js               |  48 +-
 src/components/search/search.vue              |  19 +-
 src/components/search_bar/search_bar.js       |  16 +-
 src/components/search_bar/search_bar.vue      |   3 +-
 src/components/select/select.js               |  15 +-
 src/components/select/select.vue              |   5 +-
 .../selectable_list/selectable_list.js        |  22 +-
 .../selectable_list/selectable_list.vue       |   6 +-
 .../settings_modal/helpers/boolean_setting.js |  24 +-
 .../helpers/boolean_setting.vue               |   5 +-
 .../settings_modal/helpers/choice_setting.js  |  26 +-
 .../settings_modal/helpers/choice_setting.vue |  10 +-
 .../settings_modal/helpers/integer_setting.js |  12 +-
 .../helpers/integer_setting.vue               |   2 +-
 .../helpers/modified_indicator.vue            |  12 +-
 .../helpers/server_side_indicator.vue         |  12 +-
 .../helpers/shared_computed_object.js         |  63 +-
 .../settings_modal/settings_modal.js          |  65 +-
 .../settings_modal/settings_modal.vue         |  35 +-
 .../settings_modal/settings_modal_content.js  |  18 +-
 .../tabs/data_import_export_tab.js            |  96 +--
 .../tabs/data_import_export_tab.vue           |   8 +-
 .../settings_modal/tabs/filtering_tab.js      |  13 +-
 .../settings_modal/tabs/filtering_tab.vue     |   2 +-
 .../settings_modal/tabs/general_tab.js        | 157 +++--
 .../settings_modal/tabs/general_tab.vue       |  76 ++-
 .../tabs/mutes_and_blocks_tab.js              |  77 +--
 .../tabs/mutes_and_blocks_tab.vue             |  52 +-
 .../settings_modal/tabs/notifications_tab.js  |  14 +-
 .../settings_modal/tabs/notifications_tab.vue |   4 +-
 .../settings_modal/tabs/profile_tab.js        | 154 +++--
 .../settings_modal/tabs/profile_tab.vue       |  32 +-
 .../tabs/security_tab/confirm.js              |   8 +-
 .../tabs/security_tab/confirm.vue             |   3 +-
 .../settings_modal/tabs/security_tab/mfa.js   |  98 +--
 .../settings_modal/tabs/security_tab/mfa.vue  |  18 +-
 .../tabs/security_tab/mfa_backup_codes.js     |  12 +-
 .../tabs/security_tab/mfa_totp.js             |  22 +-
 .../tabs/security_tab/mfa_totp.vue            |   2 +-
 .../tabs/security_tab/security_tab.js         |  59 +-
 .../tabs/security_tab/security_tab.vue        |  38 +-
 .../settings_modal/tabs/theme_tab/preview.vue |  27 +-
 .../tabs/theme_tab/theme_tab.js               | 415 +++++++------
 .../tabs/theme_tab/theme_tab.vue              |  11 +-
 .../settings_modal/tabs/version_tab.js        |   6 +-
 .../settings_modal/tabs/version_tab.vue       |   6 +-
 .../shadow_control/shadow_control.js          |  58 +-
 .../shadow_control/shadow_control.vue         |  49 +-
 src/components/side_drawer/side_drawer.js     |  43 +-
 src/components/side_drawer/side_drawer.vue    |  75 ++-
 src/components/staff_panel/staff_panel.js     |  20 +-
 src/components/staff_panel/staff_panel.vue    |   6 +-
 src/components/status/status.js               | 365 +++++++-----
 src/components/status/status.vue              |  80 ++-
 src/components/status_body/status_body.js     |  84 +--
 src/components/status_body/status_body.vue    |  43 +-
 .../status_content/status_content.js          |  87 +--
 .../status_content/status_content.vue         |  16 +-
 .../status_history_modal.js                   |  32 +-
 .../status_history_modal.vue                  |  10 +-
 .../status_popover/status_popover.js          |  25 +-
 .../status_popover/status_popover.vue         |   7 +-
 .../sticker_picker/sticker_picker.js          |  41 +-
 .../sticker_picker/sticker_picker.vue         |  13 +-
 src/components/still-image/still-image.js     |  44 +-
 src/components/still-image/still-image.vue    |   2 +-
 src/components/swipe_click/swipe_click.js     |  20 +-
 src/components/tag_timeline/tag_timeline.js   |  30 +-
 src/components/tag_timeline/tag_timeline.vue  |   2 +-
 .../terms_of_service_panel.js                 |   2 +-
 .../terms_of_service_panel.vue                |   6 +-
 src/components/thread_tree/thread_tree.js     |  43 +-
 src/components/thread_tree/thread_tree.vue    |  39 +-
 src/components/timeago/timeago.vue            |  29 +-
 src/components/timeline/timeline.js           | 208 ++++---
 src/components/timeline/timeline.vue          |   8 +-
 .../timeline/timeline_quick_settings.js       |  72 ++-
 .../timeline/timeline_quick_settings.vue      |   7 +-
 src/components/timeline_menu/timeline_menu.js |  20 +-
 .../timeline_menu/timeline_menu.vue           |  11 +-
 .../timeline_menu/timeline_menu_content.js    |  18 +-
 .../timeline_menu/timeline_menu_content.vue   |  36 +-
 .../timeline_menu_content.js                  |  15 +-
 .../timeline_menu_content.vue                 |  36 +-
 .../timeline_menu_tabs/timeline_menu_tabs.js  |  20 +-
 .../timeline_menu_tabs/timeline_menu_tabs.vue |   2 +-
 src/components/user_avatar/user_avatar.js     |  28 +-
 src/components/user_avatar/user_avatar.vue    |   1 -
 src/components/user_card/user_card.js         | 133 +++--
 src/components/user_card/user_card.vue        |  27 +-
 .../user_list_popover/user_list_popover.js    |  14 +-
 .../user_list_popover/user_list_popover.vue   |  15 +-
 src/components/user_panel/user_panel.js       |   6 +-
 src/components/user_profile/user_profile.js   |  85 +--
 src/components/user_profile/user_profile.vue  |   7 +-
 .../user_reporting_modal.js                   |  50 +-
 .../user_reporting_modal.vue                  |   6 +-
 .../video_attachment/video_attachment.js      |  11 +-
 src/components/who_to_follow/who_to_follow.js |  18 +-
 .../who_to_follow/who_to_follow.vue           |   3 +-
 .../who_to_follow_panel.js                    |  47 +-
 .../who_to_follow_panel.vue                   |  54 +-
 src/directives/body_scroll_lock.js            |  22 +-
 src/lib/persisted_state.js                    |  47 +-
 src/lib/push_notifications_plugin.js          |  24 +-
 src/main.js                                   |  30 +-
 src/modules/announcements.js                  |  63 +-
 src/modules/api.js                            | 235 +++++---
 src/modules/auth_flow.js                      |  16 +-
 src/modules/config.js                         | 104 ++--
 src/modules/editStatus.js                     |   8 +-
 src/modules/errors.js                         |   2 +-
 src/modules/instance.js                       | 110 ++--
 src/modules/interface.js                      |  95 +--
 src/modules/lists.js                          |  51 +-
 src/modules/media_viewer.js                   |  14 +-
 src/modules/oauth.js                          |  12 +-
 src/modules/oauth_tokens.js                   |  21 +-
 src/modules/polls.js                          |  28 +-
 src/modules/postStatus.js                     |   8 +-
 src/modules/reports.js                        |  45 +-
 src/modules/serverSideConfig.js               |  68 +--
 src/modules/statusHistory.js                  |   8 +-
 src/modules/statuses.js                       | 517 ++++++++++------
 src/modules/tags.js                           |  24 +-
 src/modules/users.js                          | 382 +++++++-----
 .../announcements_fetcher.service.js          |  12 +-
 src/services/api/api.service.js               | 564 +++++++++++-------
 .../backend_interactor_service.js             |  53 +-
 src/services/color_convert/color_convert.js   |  37 +-
 src/services/completion/completion.js         |  34 +-
 .../component_utils/component_utils.js        |   8 +-
 src/services/date_utils/date_utils.js         |   6 +-
 .../desktop_notification_utils.js             |  14 +-
 .../entity_normalizer.service.js              |  76 ++-
 src/services/errors/errors.js                 |  10 +-
 src/services/export_import/export_import.js   |  16 +-
 .../favicon_service/favicon_service.js        |  48 +-
 .../file_size_format/file_size_format.js      |   5 +-
 src/services/file_type/file_type.service.js   |   4 +-
 .../follow_manipulate/follow_manipulate.js    | 102 ++--
 .../follow_request_fetcher.service.js         |  14 +-
 .../gesture_service/gesture_service.js        |  57 +-
 .../html_line_converter.service.js            |  69 ++-
 .../html_tree_converter.service.js            |  25 +-
 .../html_converter/utility.service.js         |  11 +-
 .../lists_fetcher/lists_fetcher.service.js    |  12 +-
 src/services/locale/locale.service.js         |  27 +-
 src/services/matcher/matcher.service.js       |   5 +-
 src/services/new_api/mfa.js                   |  36 +-
 src/services/new_api/oauth.js                 | 113 ++--
 src/services/new_api/password_reset.js        |  12 +-
 .../notification_utils/notification_utils.js  |  60 +-
 .../notifications_fetcher.service.js          |  10 +-
 .../offset_finder/offset_finder.service.js    |  23 +-
 .../promise_interval/promise_interval.js      |   5 +-
 src/services/push/push.js                     | 153 +++--
 .../reports_fetcher.service.js                |  28 +-
 src/services/resettable_async_component.js    |  15 +-
 src/services/ruffle_service/ruffle_service.js |  65 +-
 src/services/status_parser/status_parser.js   |   5 +-
 .../status_poster/status_poster.service.js    |  50 +-
 src/services/style_setter/style_setter.js     | 414 +++++++------
 src/services/theme_data/theme_data.service.js | 371 ++++++------
 .../timeline_fetcher.service.js               |  61 +-
 .../user_highlighter/user_highlighter.js      |  21 +-
 .../user_profile_link_generator.js            |  11 +-
 src/services/version/version.service.js       |   3 +-
 src/services/window_utils/window_utils.js     |   1 -
 src/sw.js                                     |  40 +-
 test/unit/specs/boot/routes.spec.js           |  40 +-
 .../unit/specs/components/emoji_input.spec.js |  14 +-
 .../specs/components/rich_content.spec.js     |  97 ++-
 .../specs/components/user_profile.spec.js     |  16 +-
 test/unit/specs/modules/lists.spec.js         |  14 +-
 test/unit/specs/modules/statuses.spec.js      | 275 +++++++--
 test/unit/specs/modules/users.spec.js         |  14 +-
 .../services/completion/completion.spec.js    |  25 +-
 .../services/date_utils/date_utils.spec.js    |  42 +-
 .../entity_normalizer.spec.js                 | 420 +++++++------
 .../gesture_service/gesture_service.spec.js   |  41 +-
 .../html_line_converter.spec.js               |  65 +-
 .../html_tree_converter.spec.js               |  77 +--
 .../services/html_converter/utility.spec.js   |   9 +-
 .../notification_utils.spec.js                |   8 +-
 .../services/theme_data/sanity_checks.spec.js |   2 +-
 .../services/theme_data/theme_data.spec.js    |  11 +-
 .../user_profile_link_generator.spec.js       |   9 +-
 364 files changed, 9181 insertions(+), 6305 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..983b1f483
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "semi": false,
+  "singleAttributePerLine": true
+}
diff --git a/src/App.js b/src/App.js
index d4b3b41aa..83e535b90 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,7 +24,9 @@ export default {
   components: {
     UserPanel,
     NavPanel,
-    Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
+    Notifications: defineAsyncComponent(() =>
+      import('./components/notifications/notifications.vue')
+    ),
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
@@ -44,17 +46,20 @@ export default {
   data: () => ({
     mobileActivePanel: 'timeline'
   }),
-  created () {
+  created() {
     // Load the locale from the storage
     const val = this.$store.getters.mergedConfig.interfaceLanguage
-    this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+    this.$store.dispatch('setOption', {
+      name: 'interfaceLanguage',
+      value: val
+    })
     window.addEventListener('resize', this.updateMobileState)
   },
-  unmounted () {
+  unmounted() {
     window.removeEventListener('resize', this.updateMobileState)
   },
   computed: {
-    classes () {
+    classes() {
       return [
         {
           '-reverse': this.reverseLayout,
@@ -64,48 +69,76 @@ export default {
         '-' + this.layoutType
       ]
     },
-    currentUser () { return this.$store.state.users.currentUser },
-    userBackground () { return this.currentUser.background_image },
-    instanceBackground () {
+    currentUser() {
+      return this.$store.state.users.currentUser
+    },
+    userBackground() {
+      return this.currentUser.background_image
+    },
+    instanceBackground() {
       return this.mergedConfig.hideInstanceWallpaper
         ? null
         : this.$store.state.instance.background
     },
-    background () { return this.userBackground || this.instanceBackground },
-    bgStyle () {
+    background() {
+      return this.userBackground || this.instanceBackground
+    },
+    bgStyle() {
       if (this.background) {
         return {
           '--body-background-image': `url(${this.background})`
         }
       }
     },
-    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
-    showInstanceSpecificPanel () {
-      return this.$store.state.instance.showInstanceSpecificPanel &&
+    suggestionsEnabled() {
+      return this.$store.state.instance.suggestionsEnabled
+    },
+    showInstanceSpecificPanel() {
+      return (
+        this.$store.state.instance.showInstanceSpecificPanel &&
         !this.$store.getters.mergedConfig.hideISP &&
         this.$store.state.instance.instanceSpecificPanelContent
+      )
     },
-    newPostButtonShown () {
-      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
+    newPostButtonShown() {
+      return (
+        this.$store.getters.mergedConfig.alwaysShowNewPostButton ||
+        this.layoutType === 'mobile'
+      )
     },
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
-    editingAvailable () { return this.$store.state.instance.editingAvailable },
-    layoutType () { return this.$store.state.interface.layoutType },
-    privateMode () { return this.$store.state.instance.private },
-    reverseLayout () {
-      const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
+    showFeaturesPanel() {
+      return this.$store.state.instance.showFeaturesPanel
+    },
+    editingAvailable() {
+      return this.$store.state.instance.editingAvailable
+    },
+    layoutType() {
+      return this.$store.state.interface.layoutType
+    },
+    privateMode() {
+      return this.$store.state.instance.private
+    },
+    reverseLayout() {
+      const { thirdColumnMode, sidebarRight: reverseSetting } =
+        this.$store.getters.mergedConfig
       if (this.layoutType !== 'wide') {
         return reverseSetting
       } else {
-        return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
+        return thirdColumnMode === 'notifications'
+          ? reverseSetting
+          : !reverseSetting
       }
     },
-    noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
-    showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
+    noSticky() {
+      return this.$store.getters.mergedConfig.disableStickyHeaders
+    },
+    showScrollbars() {
+      return this.$store.getters.mergedConfig.showScrollbars
+    },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
-    updateMobileState () {
+    updateMobileState() {
       this.$store.dispatch('setLayoutWidth', windowWidth())
       this.$store.dispatch('setLayoutHeight', windowHeight())
     }
diff --git a/src/App.vue b/src/App.vue
index 80ebb525c..65b6e35b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,7 +43,7 @@
             :to="{ name: 'login' }"
             class="panel-body"
           >
-            {{ $t("login.hint") }}
+            {{ $t('login.hint') }}
           </router-link>
         </div>
         <router-view />
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 4bafca1d6..c09403baf 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -3,13 +3,19 @@ import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import vClickOutside from 'click-outside-vue3'
 
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import {
+  FontAwesomeIcon,
+  FontAwesomeLayers
+} from '@fortawesome/vue-fontawesome'
 
 import App from '../App.vue'
 import routes from './routes'
 import VBodyScrollLock from 'src/directives/body_scroll_lock'
 
-import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
+import {
+  windowWidth,
+  windowHeight
+} from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
@@ -23,7 +29,9 @@ const parsedInitialResults = () => {
     return null
   }
   if (!staticInitialResults) {
-    staticInitialResults = JSON.parse(document.getElementById('initial-results').textContent)
+    staticInitialResults = JSON.parse(
+      document.getElementById('initial-results').textContent
+    )
   }
   return staticInitialResults
 }
@@ -71,18 +79,30 @@ const getInstanceConfig = async ({ store }) => {
       const textlimit = data.max_toot_chars
       const vapidPublicKey = data.pleroma.vapid_public_key
 
-      store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
-      store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
+      store.dispatch('setInstanceOption', {
+        name: 'textlimit',
+        value: textlimit
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'accountApprovalRequired',
+        value: data.approval_required
+      })
       // don't override cookie if set
       if (!Cookies.get('userLanguage')) {
-        store.dispatch('setOption', { name: 'interfaceLanguage', value: resolveLanguage(data.languages) })
+        store.dispatch('setOption', {
+          name: 'interfaceLanguage',
+          value: resolveLanguage(data.languages)
+        })
       }
 
       if (vapidPublicKey) {
-        store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
+        store.dispatch('setInstanceOption', {
+          name: 'vapidPublicKey',
+          value: vapidPublicKey
+        })
       }
     } else {
-      throw (res)
+      throw res
     }
   } catch (error) {
     console.error('Could not load instance config, potentially fatal')
@@ -97,10 +117,12 @@ const getBackendProvidedConfig = async ({ store }) => {
       const data = await res.json()
       return data.pleroma_fe
     } else {
-      throw (res)
+      throw res
     }
   } catch (error) {
-    console.error('Could not load backend-provided frontend config, potentially fatal')
+    console.error(
+      'Could not load backend-provided frontend config, potentially fatal'
+    )
     console.error(error)
   }
 }
@@ -111,7 +133,7 @@ const getStaticConfig = async () => {
     if (res.ok) {
       return res.json()
     } else {
-      throw (res)
+      throw res
     }
   } catch (error) {
     console.warn('Failed to load static/config.json, continuing without it.')
@@ -154,16 +176,12 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
 
   store.dispatch('setInstanceOption', {
     name: 'logoMask',
-    value: typeof config.logoMask === 'undefined'
-      ? true
-      : config.logoMask
+    value: typeof config.logoMask === 'undefined' ? true : config.logoMask
   })
 
   store.dispatch('setInstanceOption', {
     name: 'logoMargin',
-    value: typeof config.logoMargin === 'undefined'
-      ? 0
-      : config.logoMargin
+    value: typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin
   })
   copyInstanceOption('logoLeft')
   store.commit('authFlow/setInitialStrategy', config.loginMethod)
@@ -191,7 +209,7 @@ const getTOS = async ({ store }) => {
       const html = await res.text()
       store.dispatch('setInstanceOption', { name: 'tos', value: html })
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
     console.warn("Can't load TOS")
@@ -204,9 +222,12 @@ const getInstancePanel = async ({ store }) => {
     const res = await preloadFetch('/instance/panel.html')
     if (res.ok) {
       const html = await res.text()
-      store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
+      store.dispatch('setInstanceOption', {
+        name: 'instanceSpecificPanelContent',
+        value: html
+      })
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
     console.warn("Can't load instance panel")
@@ -219,25 +240,30 @@ const getStickers = async ({ store }) => {
     const res = await window.fetch('/static/stickers.json')
     if (res.ok) {
       const values = await res.json()
-      const stickers = (await Promise.all(
-        Object.entries(values).map(async ([name, path]) => {
-          const resPack = await window.fetch(path + 'pack.json')
-          var meta = {}
-          if (resPack.ok) {
-            meta = await resPack.json()
-          }
-          return {
-            pack: name,
-            path,
-            meta
-          }
-        })
-      )).sort((a, b) => {
+      const stickers = (
+        await Promise.all(
+          Object.entries(values).map(async ([name, path]) => {
+            const resPack = await window.fetch(path + 'pack.json')
+            var meta = {}
+            if (resPack.ok) {
+              meta = await resPack.json()
+            }
+            return {
+              pack: name,
+              path,
+              meta
+            }
+          })
+        )
+      ).sort((a, b) => {
         return a.meta.title.localeCompare(b.meta.title)
       })
-      store.dispatch('setInstanceOption', { name: 'stickers', value: stickers })
+      store.dispatch('setInstanceOption', {
+        name: 'stickers',
+        value: stickers
+      })
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
     console.warn("Can't load stickers")
@@ -252,13 +278,19 @@ const getAppSecret = async ({ store }) => {
     .then((app) => getClientToken({ ...app, instance: instance.server }))
     .then((token) => {
       commit('setAppToken', token.access_token)
-      commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
+      commit(
+        'setBackendInteractor',
+        backendInteractorService(store.getters.getToken())
+      )
     })
 }
 
 const resolveStaffAccounts = ({ store, accounts }) => {
-  const nicknames = accounts.map(uri => uri.split('/').pop())
-  store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
+  const nicknames = accounts.map((uri) => uri.split('/').pop())
+  store.dispatch('setInstanceOption', {
+    name: 'staffAccounts',
+    value: nicknames
+  })
 }
 
 const getNodeInfo = async ({ store }) => {
@@ -268,65 +300,137 @@ const getNodeInfo = async ({ store }) => {
       const data = await res.json()
       const metadata = data.metadata
       const features = metadata.features
-      store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName })
-      store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
-      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
-      store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
-      store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
-      store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
-      store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
-      store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
-      store.dispatch('setInstanceOption', { name: 'translationEnabled', value: features.includes('akkoma:machine_translation') })
+      store.dispatch('setInstanceOption', {
+        name: 'name',
+        value: metadata.nodeName
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'registrationOpen',
+        value: data.openRegistrations
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'mediaProxyAvailable',
+        value: features.includes('media_proxy')
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'safeDM',
+        value: features.includes('safe_dm_mentions')
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'pollsAvailable',
+        value: features.includes('polls')
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'editingAvailable',
+        value: features.includes('editing')
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'pollLimits',
+        value: metadata.pollLimits
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'mailerEnabled',
+        value: metadata.mailerEnabled
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'translationEnabled',
+        value: features.includes('akkoma:machine_translation')
+      })
 
       const uploadLimits = metadata.uploadLimits
-      store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
-      store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) })
-      store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) })
-      store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) })
-      store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits })
+      store.dispatch('setInstanceOption', {
+        name: 'uploadlimit',
+        value: parseInt(uploadLimits.general)
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'avatarlimit',
+        value: parseInt(uploadLimits.avatar)
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'backgroundlimit',
+        value: parseInt(uploadLimits.background)
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'bannerlimit',
+        value: parseInt(uploadLimits.banner)
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'fieldsLimits',
+        value: metadata.fieldsLimits
+      })
 
-      store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
-      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })
+      store.dispatch('setInstanceOption', {
+        name: 'restrictedNicknames',
+        value: metadata.restrictedNicknames
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'postFormats',
+        value: metadata.postFormats
+      })
 
       const suggestions = metadata.suggestions
-      store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
-      store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
+      store.dispatch('setInstanceOption', {
+        name: 'suggestionsEnabled',
+        value: suggestions.enabled
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'suggestionsWeb',
+        value: suggestions.web
+      })
 
       const software = data.software
-      store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
-      store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
+      store.dispatch('setInstanceOption', {
+        name: 'backendVersion',
+        value: software.version
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'pleromaBackend',
+        value: software.name === 'pleroma'
+      })
 
       const priv = metadata.private
       store.dispatch('setInstanceOption', { name: 'private', value: priv })
 
       const frontendVersion = window.___pleromafe_commit_hash
-      store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })
+      store.dispatch('setInstanceOption', {
+        name: 'frontendVersion',
+        value: frontendVersion
+      })
 
       const federation = metadata.federation
 
       store.dispatch('setInstanceOption', {
         name: 'tagPolicyAvailable',
-        value: typeof federation.mrf_policies === 'undefined'
-          ? false
-          : metadata.federation.mrf_policies.includes('TagPolicy')
+        value:
+          typeof federation.mrf_policies === 'undefined'
+            ? false
+            : metadata.federation.mrf_policies.includes('TagPolicy')
       })
 
-      store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
-      store.dispatch('setInstanceOption', { name: 'localBubbleInstances', value: metadata.localBubbleInstances })
+      store.dispatch('setInstanceOption', {
+        name: 'federationPolicy',
+        value: federation
+      })
+      store.dispatch('setInstanceOption', {
+        name: 'localBubbleInstances',
+        value: metadata.localBubbleInstances
+      })
       store.dispatch('setInstanceOption', {
         name: 'federating',
-        value: typeof federation.enabled === 'undefined'
-          ? true
-          : federation.enabled
+        value:
+          typeof federation.enabled === 'undefined' ? true : federation.enabled
       })
 
       const accountActivationRequired = metadata.accountActivationRequired
-      store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })
+      store.dispatch('setInstanceOption', {
+        name: 'accountActivationRequired',
+        value: accountActivationRequired
+      })
 
       const accounts = metadata.staffAccounts
       resolveStaffAccounts({ store, accounts })
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
     console.warn('Could not load nodeinfo')
@@ -336,11 +440,16 @@ const getNodeInfo = async ({ store }) => {
 
 const setConfig = async ({ store }) => {
   // apiConfig, staticConfig
-  const configInfos = await Promise.all([getBackendProvidedConfig({ store }), getStaticConfig()])
+  const configInfos = await Promise.all([
+    getBackendProvidedConfig({ store }),
+    getStaticConfig()
+  ])
   const apiConfig = configInfos[0]
   const staticConfig = configInfos[1]
 
-  await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
+  await setSettings({ store, apiConfig, staticConfig }).then(
+    getAppSecret({ store })
+  )
 }
 
 const checkOAuthToken = async ({ store }) => {
@@ -363,7 +472,10 @@ const afterStoreSetup = async ({ store, i18n }) => {
   FaviconService.initFaviconService()
 
   const overrides = window.___pleromafe_dev_overrides || {}
-  const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
+  const server =
+    typeof overrides.target !== 'undefined'
+      ? overrides.target
+      : window.location.origin
   store.dispatch('setInstanceOption', { name: 'server', value: server })
 
   await setConfig({ store })
@@ -373,7 +485,10 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const customThemePresent = customThemeSource || customTheme
 
   if (customThemePresent) {
-    if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
+    if (
+      customThemeSource &&
+      customThemeSource.themeEngineVersion === CURRENT_VERSION
+    ) {
       applyTheme(customThemeSource)
     } else {
       applyTheme(customTheme)
@@ -404,7 +519,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
     history: createWebHistory(),
     routes: routes(store),
     scrollBehavior: (to, _from, savedPosition) => {
-      if (to.matched.some(m => m.meta.dontScroll)) {
+      if (to.matched.some((m) => m.meta.dontScroll)) {
         return {}
       }
 
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 93a94a9b6..e22946639 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -35,51 +35,145 @@ export default (store) => {
   }
 
   let routes = [
-    { name: 'root',
+    {
+      name: 'root',
       path: '/',
-      redirect: _to => {
-        return (store.state.users.currentUser
-          ? store.state.instance.redirectRootLogin
-          : store.state.instance.redirectRootNoLogin) || '/main/all'
+      redirect: (_to) => {
+        return (
+          (store.state.users.currentUser
+            ? store.state.instance.redirectRootLogin
+            : store.state.instance.redirectRootNoLogin) || '/main/all'
+        )
       }
     },
-    { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
-    { name: 'public-timeline', path: '/main/public', component: PublicTimeline },
-    { name: 'bubble-timeline', path: '/main/bubble', component: BubbleTimeline },
-    { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
+    {
+      name: 'public-external-timeline',
+      path: '/main/all',
+      component: PublicAndExternalTimeline
+    },
+    {
+      name: 'public-timeline',
+      path: '/main/public',
+      component: PublicTimeline
+    },
+    {
+      name: 'bubble-timeline',
+      path: '/main/bubble',
+      component: BubbleTimeline
+    },
+    {
+      name: 'friends',
+      path: '/main/friends',
+      component: FriendsTimeline,
+      beforeEnter: validateAuthenticatedRoute
+    },
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
-    { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
-    { name: 'remote-user-profile-acct',
+    {
+      name: 'conversation',
+      path: '/notice/:id',
+      component: ConversationPage,
+      meta: { dontScroll: true }
+    },
+    {
+      name: 'remote-user-profile-acct',
       path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
       component: RemoteUserResolver,
       beforeEnter: validateAuthenticatedRoute
     },
-    { name: 'remote-user-profile',
+    {
+      name: 'remote-user-profile',
       path: '/remote-users/:hostname/:username',
       component: RemoteUserResolver,
       beforeEnter: validateAuthenticatedRoute
     },
-    { name: 'external-user-profile', path: '/users/:id', component: UserProfile, meta: { dontScroll: true } },
-    { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
-    { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
+    {
+      name: 'external-user-profile',
+      path: '/users/:id',
+      component: UserProfile,
+      meta: { dontScroll: true }
+    },
+    {
+      name: 'interactions',
+      path: '/users/:username/interactions',
+      component: Interactions,
+      beforeEnter: validateAuthenticatedRoute
+    },
+    {
+      name: 'dms',
+      path: '/users/:username/dms',
+      component: DMs,
+      beforeEnter: validateAuthenticatedRoute
+    },
     { name: 'registration', path: '/registration', component: Registration },
-    { name: 'registration-request-sent', path: '/registration-request-sent', component: RegistrationRequestSent },
-    { name: 'awaiting-email-confirmation', path: '/awaiting-email-confirmation', component: AwaitingEmailConfirmation },
-    { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
-    { name: 'registration-token', path: '/registration/:token', component: Registration },
-    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
-    { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
+    {
+      name: 'registration-request-sent',
+      path: '/registration-request-sent',
+      component: RegistrationRequestSent
+    },
+    {
+      name: 'awaiting-email-confirmation',
+      path: '/awaiting-email-confirmation',
+      component: AwaitingEmailConfirmation
+    },
+    {
+      name: 'password-reset',
+      path: '/password-reset',
+      component: PasswordReset,
+      props: true
+    },
+    {
+      name: 'registration-token',
+      path: '/registration/:token',
+      component: Registration
+    },
+    {
+      name: 'friend-requests',
+      path: '/friend-requests',
+      component: FollowRequests,
+      beforeEnter: validateAuthenticatedRoute
+    },
+    {
+      name: 'notifications',
+      path: '/:username/notifications',
+      component: Notifications,
+      props: () => ({ disableTeleport: true }),
+      beforeEnter: validateAuthenticatedRoute
+    },
     { name: 'login', path: '/login', component: AuthForm },
-    { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
-    { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
-    { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
+    {
+      name: 'oauth-callback',
+      path: '/oauth-callback',
+      component: OAuthCallback,
+      props: (route) => ({ code: route.query.code })
+    },
+    {
+      name: 'search',
+      path: '/search',
+      component: Search,
+      props: (route) => ({ query: route.query.query })
+    },
+    {
+      name: 'who-to-follow',
+      path: '/who-to-follow',
+      component: WhoToFollow,
+      beforeEnter: validateAuthenticatedRoute
+    },
     { name: 'about', path: '/about', component: About },
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'list-timeline', path: '/lists/:id', component: ListTimeline },
     { name: 'list-edit', path: '/lists/:id/edit', component: ListEdit },
-    { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
-    { name: 'user-profile', path: '/:_(users)?/:name', component: UserProfile, meta: { dontScroll: true } }
+    {
+      name: 'announcements',
+      path: '/announcements',
+      component: AnnouncementsPage
+    },
+    {
+      name: 'user-profile',
+      path: '/:_(users)?/:name',
+      component: UserProfile,
+      meta: { dontScroll: true }
+    }
   ]
 
   return routes
diff --git a/src/components/about/about.js b/src/components/about/about.js
index 7998c2d37..c8bc9f51f 100644
--- a/src/components/about/about.js
+++ b/src/components/about/about.js
@@ -15,13 +15,17 @@ const About = {
     LocalBubblePanel
   },
   computed: {
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
-    showInstanceSpecificPanel () {
-      return this.$store.state.instance.showInstanceSpecificPanel &&
+    showFeaturesPanel() {
+      return this.$store.state.instance.showFeaturesPanel
+    },
+    showInstanceSpecificPanel() {
+      return (
+        this.$store.state.instance.showInstanceSpecificPanel &&
         !this.$store.getters.mergedConfig.hideISP &&
         this.$store.state.instance.instanceSpecificPanelContent
+      )
     },
-    showLocalBubblePanel () {
+    showLocalBubblePanel() {
       return this.$store.state.instance.localBubbleInstances.length > 0
     }
   }
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index df9bb1966..9126b3ff6 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -9,7 +9,6 @@
   </div>
 </template>
 
-<script src="./about.js" ></script>
+<script src="./about.js"></script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 0f3484748..92b8679f2 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -3,19 +3,13 @@ import Popover from '../popover/popover.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { mapState } from 'vuex'
-import {
-  faEllipsisV
-} from '@fortawesome/free-solid-svg-icons'
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faEllipsisV
-)
+library.add(faEllipsisV)
 
 const AccountActions = {
-  props: [
-    'user', 'relationship'
-  ],
-  data () {
+  props: ['user', 'relationship'],
+  data() {
     return {
       showingConfirmBlock: false
     }
@@ -26,56 +20,59 @@ const AccountActions = {
     ConfirmModal
   },
   methods: {
-    refetchRelationship () {
+    refetchRelationship() {
       return this.$store.dispatch('fetchUserRelationship', this.user.id)
     },
-    showConfirmBlock () {
+    showConfirmBlock() {
       this.showingConfirmBlock = true
     },
-    hideConfirmBlock () {
+    hideConfirmBlock() {
       this.showingConfirmBlock = false
     },
-    showRepeats () {
+    showRepeats() {
       this.$store.dispatch('showReblogs', this.user.id)
     },
-    hideRepeats () {
+    hideRepeats() {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
-    blockUser () {
+    blockUser() {
       if (!this.shouldConfirmBlock) {
         this.doBlockUser()
       } else {
         this.showConfirmBlock()
       }
     },
-    doBlockUser () {
+    doBlockUser() {
       this.$store.dispatch('blockUser', this.user.id)
       this.hideConfirmBlock()
     },
-    unblockUser () {
+    unblockUser() {
       this.$store.dispatch('unblockUser', this.user.id)
     },
-    removeUserFromFollowers () {
+    removeUserFromFollowers() {
       this.$store.dispatch('removeUserFromFollowers', this.user.id)
     },
-    reportUser () {
+    reportUser() {
       this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
     },
-    muteDomain () {
-      this.$store.dispatch('muteDomain', this.user.screen_name.split('@')[1])
+    muteDomain() {
+      this.$store
+        .dispatch('muteDomain', this.user.screen_name.split('@')[1])
         .then(() => this.refetchRelationship())
     },
-    unmuteDomain () {
-      this.$store.dispatch('unmuteDomain', this.user.screen_name.split('@')[1])
+    unmuteDomain() {
+      this.$store
+        .dispatch('unmuteDomain', this.user.screen_name.split('@')[1])
         .then(() => this.refetchRelationship())
     }
   },
   computed: {
-    shouldConfirmBlock () {
+    shouldConfirmBlock() {
       return this.$store.getters.mergedConfig.modalOnBlock
     },
     ...mapState({
-      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
+      pleromaChatMessagesAvailable: (state) =>
+        state.instance.pleromaChatMessagesAvailable
     })
   }
 }
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 126f6fa99..1ad96c7fe 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -6,7 +6,7 @@
       :bound-to="{ x: 'container' }"
       remove-padding
     >
-      <template v-slot:content>
+      <template #content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
@@ -71,7 +71,7 @@
           </button>
         </div>
       </template>
-      <template v-slot:trigger>
+      <template #trigger>
         <button class="button-unstyled ellipsis-button">
           <FAIcon
             class="icon"
@@ -93,10 +93,8 @@
           keypath="user_card.block_confirm"
           tag="span"
         >
-          <template v-slot:user>
-            <span
-              v-text="user.screen_name_ui"
-            />
+          <template #user>
+            <span v-text="user.screen_name_ui" />
           </template>
         </i18n-t>
       </confirm-modal>
diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
index 993e36557..e1e76cffb 100644
--- a/src/components/announcement/announcement.js
+++ b/src/components/announcement/announcement.js
@@ -8,7 +8,7 @@ const Announcement = {
     AnnouncementEditor,
     RichContent
   },
-  data () {
+  data() {
     return {
       editing: false,
       editedAnnouncement: {
@@ -25,78 +25,93 @@ const Announcement = {
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
     }),
-    content () {
+    content() {
       return this.announcement.content
     },
-    isRead () {
+    isRead() {
       return this.announcement.read
     },
-    publishedAt () {
+    publishedAt() {
       const time = this.announcement['published_at']
       if (!time) {
         return
       }
 
-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale)
+      )
     },
-    startsAt () {
+    startsAt() {
       const time = this.announcement['starts_at']
       if (!time) {
         return
       }
 
-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale)
+      )
     },
-    endsAt () {
+    endsAt() {
       const time = this.announcement['ends_at']
       if (!time) {
         return
       }
 
-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale)
+      )
     },
-    inactive () {
+    inactive() {
       return this.announcement.inactive
     }
   },
   methods: {
-    markAsRead () {
+    markAsRead() {
       if (!this.isRead) {
-        return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id)
+        return this.$store.dispatch(
+          'markAnnouncementAsRead',
+          this.announcement.id
+        )
       }
     },
-    deleteAnnouncement () {
+    deleteAnnouncement() {
       return this.$store.dispatch('deleteAnnouncement', this.announcement.id)
     },
-    formatTimeOrDate (time, locale) {
+    formatTimeOrDate(time, locale) {
       const d = new Date(time)
-      return this.announcement['all_day'] ? d.toLocaleDateString(locale) : d.toLocaleString(locale)
+      return this.announcement['all_day']
+        ? d.toLocaleDateString(locale)
+        : d.toLocaleString(locale)
     },
-    enterEditMode () {
+    enterEditMode() {
       this.editedAnnouncement.content = this.announcement.pleroma['raw_content']
       this.editedAnnouncement.startsAt = this.announcement['starts_at']
       this.editedAnnouncement.endsAt = this.announcement['ends_at']
       this.editedAnnouncement.allDay = this.announcement['all_day']
       this.editing = true
     },
-    submitEdit () {
-      this.$store.dispatch('editAnnouncement', {
-        id: this.announcement.id,
-        ...this.editedAnnouncement
-      })
+    submitEdit() {
+      this.$store
+        .dispatch('editAnnouncement', {
+          id: this.announcement.id,
+          ...this.editedAnnouncement
+        })
         .then(() => {
           this.editing = false
         })
-        .catch(error => {
+        .catch((error) => {
           this.editError = error.error
         })
     },
-    cancelEdit () {
+    cancelEdit() {
       this.editing = false
     },
-    clearError () {
+    clearError() {
       this.editError = undefined
     }
   }
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
index 5f64232a9..a9bb352ec 100644
--- a/src/components/announcement/announcement.vue
+++ b/src/components/announcement/announcement.vue
@@ -21,7 +21,9 @@
         class="times"
       >
         <span v-if="publishedAt">
-          {{ $t('announcements.published_time_display', { time: publishedAt }) }}
+          {{
+            $t('announcements.published_time_display', { time: publishedAt })
+          }}
         </span>
         <span v-if="startsAt">
           {{ $t('announcements.start_time_display', { time: startsAt }) }}
@@ -99,7 +101,7 @@
 <script src="./announcement.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+@import '../../variables';
 
 .announcement {
   border-bottom-width: 1px;
@@ -108,7 +110,8 @@
   border-radius: 0;
   padding: var(--status-margin, $status-margin);
 
-  .heading, .body {
+  .heading,
+  .body {
     margin-bottom: var(--status-margin, $status-margin);
   }
 
diff --git a/src/components/announcement_editor/announcement_editor.vue b/src/components/announcement_editor/announcement_editor.vue
index 0f29f9f70..d06bd94a0 100644
--- a/src/components/announcement_editor/announcement_editor.vue
+++ b/src/components/announcement_editor/announcement_editor.vue
@@ -10,22 +10,26 @@
       :disabled="disabled"
     />
     <span class="announcement-metadata">
-      <label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label>
+      <label for="announcement-start-time">{{
+        $t('announcements.start_time_prompt')
+      }}</label>
       <input
         id="announcement-start-time"
         v-model="announcement.startsAt"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
-      >
+      />
     </span>
     <span class="announcement-metadata">
-      <label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label>
+      <label for="announcement-end-time">{{
+        $t('announcements.end_time_prompt')
+      }}</label>
       <input
         id="announcement-end-time"
         v-model="announcement.endsAt"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
-      >
+      />
     </span>
     <span class="announcement-metadata">
       <Checkbox
@@ -33,7 +37,9 @@
         v-model="announcement.allDay"
         :disabled="disabled"
       />
-      <label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label>
+      <label for="announcement-all-day">{{
+        $t('announcements.all_day_prompt')
+      }}</label>
     </span>
   </div>
 </template>
diff --git a/src/components/announcements_page/announcements_page.js b/src/components/announcements_page/announcements_page.js
index 0bb4892e1..39437cc4f 100644
--- a/src/components/announcements_page/announcements_page.js
+++ b/src/components/announcements_page/announcements_page.js
@@ -7,7 +7,7 @@ const AnnouncementsPage = {
     Announcement,
     AnnouncementEditor
   },
-  data () {
+  data() {
     return {
       newAnnouncement: {
         content: '',
@@ -19,34 +19,35 @@ const AnnouncementsPage = {
       error: undefined
     }
   },
-  mounted () {
+  mounted() {
     this.$store.dispatch('fetchAnnouncements')
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
     }),
-    announcements () {
+    announcements() {
       return this.$store.state.announcements.announcements
     }
   },
   methods: {
-    postAnnouncement () {
+    postAnnouncement() {
       this.posting = true
-      this.$store.dispatch('postAnnouncement', this.newAnnouncement)
+      this.$store
+        .dispatch('postAnnouncement', this.newAnnouncement)
         .then(() => {
           this.newAnnouncement.content = ''
           this.startsAt = undefined
           this.endsAt = undefined
         })
-        .catch(error => {
+        .catch((error) => {
           this.error = error.error
         })
         .finally(() => {
           this.posting = false
         })
     },
-    clearError () {
+    clearError() {
       this.error = undefined
     }
   }
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
index a548a8a0a..024be596a 100644
--- a/src/components/announcements_page/announcements_page.vue
+++ b/src/components/announcements_page/announcements_page.vue
@@ -6,9 +6,7 @@
       </div>
     </div>
     <div class="panel-body">
-      <section
-        v-if="currentUser && currentUser.role === 'admin'"
-      >
+      <section v-if="currentUser && currentUser.role === 'admin'">
         <div class="post-form">
           <div class="heading">
             <h4>{{ $t('announcements.post_form_header') }}</h4>
@@ -50,9 +48,7 @@
         v-for="announcement in announcements"
         :key="announcement.id"
       >
-        <announcement
-          :announcement="announcement"
-        />
+        <announcement :announcement="announcement" />
       </section>
     </div>
   </div>
@@ -61,13 +57,14 @@
 <script src="./announcements_page.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+@import '../../variables';
 
 .announcements-page {
   .post-form {
     padding: var(--status-margin, $status-margin);
 
-    .heading, .body {
+    .heading,
+    .body {
       margin-bottom: var(--status-margin, $status-margin);
     }
 
diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index 26ab5d21c..d6bdbe116 100644
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@@ -21,7 +21,7 @@
 export default {
   emits: ['resetAsyncComponent'],
   methods: {
-    retry () {
+    retry() {
       this.$emit('resetAsyncComponent')
     }
   }
@@ -35,8 +35,8 @@ export default {
   align-items: center;
   justify-content: center;
   .btn {
-    margin: .5em;
-    padding: .5em 2em;
+    margin: 0.5em;
+    padding: 0.5em 2em;
   }
 }
 </style>
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 4dcacc7e4..fa70b06b2 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -46,14 +46,16 @@ const Attachment = {
     'shiftDn',
     'edit'
   ],
-  data () {
+  data() {
     return {
       localDescription: this.description || this.attachment.description,
       nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
       hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
       preloadImage: this.$store.getters.mergedConfig.preloadImage,
       loading: false,
-      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
+      img:
+        fileTypeService.fileType(this.attachment.mimetype) === 'image' &&
+        document.createElement('img'),
       modalOpen: false,
       showHidden: false,
       flashLoaded: false,
@@ -66,7 +68,7 @@ const Attachment = {
     VideoAttachment
   },
   computed: {
-    classNames () {
+    classNames() {
       return [
         {
           '-loading': this.loading,
@@ -78,37 +80,37 @@ const Attachment = {
         `-${this.useContainFit ? 'contain' : 'cover'}-fit`
       ]
     },
-    usePlaceholder () {
+    usePlaceholder() {
       return this.size === 'hide'
     },
-    useContainFit () {
+    useContainFit() {
       return this.$store.getters.mergedConfig.useContainFit
     },
-    placeholderName () {
+    placeholderName() {
       if (this.attachment.description === '' || !this.attachment.description) {
         return this.type.toUpperCase()
       }
       return this.attachment.description
     },
-    placeholderIconClass () {
+    placeholderIconClass() {
       if (this.type === 'image') return 'image'
       if (this.type === 'video') return 'video'
       if (this.type === 'audio') return 'music'
       return 'file'
     },
-    referrerpolicy () {
+    referrerpolicy() {
       return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
     },
-    type () {
+    type() {
       return fileTypeService.fileType(this.attachment.mimetype)
     },
-    hidden () {
+    hidden() {
       return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
-    isEmpty () {
-      return (this.type === 'html' && !this.attachment.oembed)
+    isEmpty() {
+      return this.type === 'html' && !this.attachment.oembed
     },
-    useModal () {
+    useModal() {
       let modalTypes = []
       switch (this.size) {
         case 'hide':
@@ -123,29 +125,29 @@ const Attachment = {
       }
       return modalTypes.includes(this.type)
     },
-    videoTag () {
+    videoTag() {
       return this.useModal ? 'button' : 'span'
     },
-    statusForm () {
+    statusForm() {
       return this.$parent.$parent
     },
     ...mapGetters(['mergedConfig'])
   },
   watch: {
-    'attachment.description' (newVal) {
+    'attachment.description'(newVal) {
       this.localDescription = newVal
     },
-    localDescription (newVal) {
+    localDescription(newVal) {
       this.onEdit(newVal)
     }
   },
   methods: {
-    linkClicked ({ target }) {
+    linkClicked({ target }) {
       if (target.tagName === 'A') {
         window.open(target.href, '_blank')
       }
     },
-    openModal (event) {
+    openModal(event) {
       if (this.useModal) {
         this.$emit('setMedia')
         this.$store.dispatch('setCurrentMedia', this.attachment)
@@ -153,34 +155,35 @@ const Attachment = {
         window.open(this.attachment.url)
       }
     },
-    openModalForce (event) {
+    openModalForce(event) {
       this.$emit('setMedia')
       this.$store.dispatch('setCurrentMedia', this.attachment)
     },
-    onEdit (event) {
+    onEdit(event) {
       this.edit && this.edit(this.attachment, event)
     },
-    onRemove () {
+    onRemove() {
       this.remove && this.remove(this.attachment)
     },
-    onShiftUp () {
+    onShiftUp() {
       this.shiftUp && this.shiftUp(this.attachment)
     },
-    onShiftDn () {
+    onShiftDn() {
       this.shiftDn && this.shiftDn(this.attachment)
     },
-    stopFlash () {
+    stopFlash() {
       this.$refs.flash.closePlayer()
     },
-    setFlashLoaded (event) {
+    setFlashLoaded(event) {
       this.flashLoaded = event
     },
-    toggleDescription () {
+    toggleDescription() {
       this.showDescription = !this.showDescription
     },
-    toggleHidden (event) {
+    toggleHidden(event) {
       if (
-        (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
+        this.mergedConfig.useOneClickNsfw &&
+        !this.showHidden &&
         (this.type !== 'video' || this.mergedConfig.playVideosInModal)
       ) {
         this.openModal(event)
@@ -201,14 +204,16 @@ const Attachment = {
         this.showHidden = !this.showHidden
       }
     },
-    onImageLoad (image) {
+    onImageLoad(image) {
       const width = image.naturalWidth
       const height = image.naturalHeight
       this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
     },
-    resize (e) {
+    resize(e) {
       const target = e.target || e
-      if (!(target instanceof window.Element)) { return }
+      if (!(target instanceof window.Element)) {
+        return
+      }
 
       // Reset to default height for empty form, nothing else to do here.
       if (target.value === '') {
@@ -219,14 +224,16 @@ const Attachment = {
 
       const paddingString = getComputedStyle(target)['padding']
       // remove -px suffix
-      const padding = Number(paddingString.substring(0, paddingString.length - 2))
+      const padding = Number(
+        paddingString.substring(0, paddingString.length - 2)
+      )
 
       target.style.height = 'auto'
       const newHeight = Math.floor(target.scrollHeight - padding * 2)
       target.style.height = `${newHeight}px`
       this.$emit('resize', newHeight)
     },
-    postStatus (event) {
+    postStatus(event) {
       this.statusForm.postStatus(event, this.statusForm.newStatus)
     }
   }
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 947b1bfc9..0c156e0ca 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -15,7 +15,8 @@
       @click.prevent
     >
       <FAIcon :icon="placeholderIconClass" />
-      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
+      <b>{{ nsfw ? 'NSFW / ' : '' }}</b
+      >{{ edit ? '' : placeholderName }}
     </a>
     <div
       v-if="edit || remove"
@@ -30,7 +31,11 @@
       </button>
     </div>
     <div
-      v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
+      v-if="
+        size !== 'hide' &&
+        !hideDescription &&
+        (edit || localDescription || showDescription)
+      "
       class="description-container"
       :class="{ '-static': !edit }"
     >
@@ -41,7 +46,7 @@
         class="description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
-      >
+      />
       <p v-else>
         {{ localDescription }}
       </p>
@@ -68,7 +73,7 @@
           :key="nsfwImage"
           class="nsfw"
           :src="nsfwImage"
-        >
+        />
         <FAIcon
           v-if="type === 'video'"
           class="play-icon"
@@ -88,7 +93,12 @@
           <FAIcon icon="stop" />
         </button>
         <button
-          v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
+          v-if="
+            attachment.description &&
+            size !== 'small' &&
+            !edit &&
+            type !== 'unknown'
+          "
           class="button-unstyled attachment-button"
           :title="$t('status.show_attachment_description')"
           @click.prevent="toggleDescription"
@@ -140,7 +150,7 @@
       <a
         v-if="type === 'image' && (!hidden || preloadImage)"
         class="image-container"
-        :class="{'-hidden': hidden && preloadImage }"
+        :class="{ '-hidden': hidden && preloadImage }"
         :href="attachment.url"
         target="_blank"
         @click.stop.prevent="openModal"
@@ -218,11 +228,13 @@
           v-if="attachment.thumb_url"
           class="image"
         >
-          <img :src="attachment.thumb_url">
+          <img :src="attachment.thumb_url" />
         </div>
         <div class="text">
           <!-- eslint-disable vue/no-v-html -->
-          <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
+          <h1>
+            <a :href="attachment.url">{{ attachment.oembed.title }}</a>
+          </h1>
           <div v-html="attachment.oembed.oembedHTML" />
           <!-- eslint-enable vue/no-v-html -->
         </div>
@@ -244,7 +256,11 @@
       </span>
     </div>
     <div
-      v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"
+      v-if="
+        size !== 'hide' &&
+        !hideDescription &&
+        (edit || (localDescription && showDescription))
+      "
       class="description-container"
       :class="{ '-static': !edit }"
     >
diff --git a/src/components/auth_form/auth_form.js b/src/components/auth_form/auth_form.js
index a86a3dca2..3b538e8ea 100644
--- a/src/components/auth_form/auth_form.js
+++ b/src/components/auth_form/auth_form.js
@@ -6,13 +6,17 @@ import { mapGetters } from 'vuex'
 
 const AuthForm = {
   name: 'AuthForm',
-  render () {
+  render() {
     return h(resolveComponent(this.authForm))
   },
   computed: {
-    authForm () {
-      if (this.requiredTOTP) { return 'MFATOTPForm' }
-      if (this.requiredRecovery) { return 'MFARecoveryForm' }
+    authForm() {
+      if (this.requiredTOTP) {
+        return 'MFATOTPForm'
+      }
+      if (this.requiredRecovery) {
+        return 'MFARecoveryForm'
+      }
       return 'LoginForm'
     },
     ...mapGetters('authFlow', ['requiredTOTP', 'requiredRecovery'])
diff --git a/src/components/autosuggest/autosuggest.js b/src/components/autosuggest/autosuggest.js
index f58f17bb6..49974f7bf 100644
--- a/src/components/autosuggest/autosuggest.js
+++ b/src/components/autosuggest/autosuggest.js
@@ -2,11 +2,13 @@ const debounceMilliseconds = 500
 
 export default {
   props: {
-    query: { // function to query results and return a promise
+    query: {
+      // function to query results and return a promise
       type: Function,
       required: true
     },
-    filter: { // function to filter results in real time
+    filter: {
+      // function to filter results in real time
       type: Function
     },
     placeholder: {
@@ -14,7 +16,7 @@ export default {
       default: 'Search...'
     }
   },
-  data () {
+  data() {
     return {
       term: '',
       timeout: null,
@@ -23,29 +25,31 @@ export default {
     }
   },
   computed: {
-    filtered () {
+    filtered() {
       return this.filter ? this.filter(this.results) : this.results
     }
   },
   watch: {
-    term (val) {
+    term(val) {
       this.fetchResults(val)
     }
   },
   methods: {
-    fetchResults (term) {
+    fetchResults(term) {
       clearTimeout(this.timeout)
       this.timeout = setTimeout(() => {
         this.results = []
         if (term) {
-          this.query(term).then((results) => { this.results = results })
+          this.query(term).then((results) => {
+            this.results = results
+          })
         }
       }, debounceMilliseconds)
     },
-    onInputClick () {
+    onInputClick() {
       this.resultsVisible = true
     },
-    onClickOutside () {
+    onClickOutside() {
       this.resultsVisible = false
     }
   }
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index f283ab82a..2204a8da2 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -8,7 +8,7 @@
       :placeholder="placeholder"
       class="autosuggest-input"
       @click="onInputClick"
-    >
+    />
     <div
       v-if="resultsVisible && filtered.length > 0"
       class="autosuggest-results"
diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js
index 9b6301b22..d260212ef 100644
--- a/src/components/avatar_list/avatar_list.js
+++ b/src/components/avatar_list/avatar_list.js
@@ -4,7 +4,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 const AvatarList = {
   props: ['users'],
   computed: {
-    slicedUsers () {
+    slicedUsers() {
       return this.users ? this.users.slice(0, 15) : []
     }
   },
@@ -12,8 +12,12 @@ const AvatarList = {
     UserAvatar
   },
   methods: {
-    userProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    userProfileLink(user) {
+      return generateProfileLink(
+        user.id,
+        user.screen_name,
+        this.$store.state.instance.restrictedNicknames
+      )
     }
   }
 }
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index e1b6e9713..9a6ca3f6e 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -14,7 +14,7 @@
   </div>
 </template>
 
-<script src="./avatar_list.js" ></script>
+<script src="./avatar_list.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/awaiting_email_confirmation/awaiting_email_confirmation.js b/src/components/awaiting_email_confirmation/awaiting_email_confirmation.js
index 3809de4a8..a28b30e70 100644
--- a/src/components/awaiting_email_confirmation/awaiting_email_confirmation.js
+++ b/src/components/awaiting_email_confirmation/awaiting_email_confirmation.js
@@ -1,4 +1,3 @@
 export default {
-  computed: {
-  }
+  computed: {}
 }
diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index 8f41e2fb0..54ddb94bb 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -4,10 +4,8 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const BasicUserCard = {
-  props: [
-    'user'
-  ],
-  data () {
+  props: ['user'],
+  data() {
     return {
       userExpanded: false
     }
@@ -18,11 +16,15 @@ const BasicUserCard = {
     RichContent
   },
   methods: {
-    toggleUserExpanded () {
+    toggleUserExpanded() {
       this.userExpanded = !this.userExpanded
     },
-    userProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    userProfileLink(user) {
+      return generateProfileLink(
+        user.id,
+        user.screen_name,
+        this.$store.state.instance.restrictedNicknames
+      )
     }
   }
 }
diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index 0bf4e37bc..ddf00ea25 100644
--- a/src/components/block_card/block_card.js
+++ b/src/components/block_card/block_card.js
@@ -2,19 +2,19 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const BlockCard = {
   props: ['userId'],
-  data () {
+  data() {
     return {
       progress: false
     }
   },
   computed: {
-    user () {
+    user() {
       return this.$store.getters.findUser(this.userId)
     },
-    relationship () {
+    relationship() {
       return this.$store.getters.relationship(this.userId)
     },
-    blocked () {
+    blocked() {
       return this.relationship.blocking
     }
   },
@@ -22,13 +22,13 @@ const BlockCard = {
     BasicUserCard
   },
   methods: {
-    unblockUser () {
+    unblockUser() {
       this.progress = true
       this.$store.dispatch('unblockUser', this.user.id).then(() => {
         this.progress = false
       })
     },
-    blockUser () {
+    blockUser() {
       this.progress = true
       this.$store.dispatch('blockUser', this.user.id).then(() => {
         this.progress = false
diff --git a/src/components/bookmark_timeline/bookmark_timeline.js b/src/components/bookmark_timeline/bookmark_timeline.js
index 5ac43d90c..0bdc0537e 100644
--- a/src/components/bookmark_timeline/bookmark_timeline.js
+++ b/src/components/bookmark_timeline/bookmark_timeline.js
@@ -2,14 +2,14 @@ import Timeline from '../timeline/timeline.vue'
 
 const Bookmarks = {
   computed: {
-    timeline () {
+    timeline() {
       return this.$store.state.statuses.timelines.bookmarks
     }
   },
   components: {
     Timeline
   },
-  unmounted () {
+  unmounted() {
     this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
   }
 }
diff --git a/src/components/bubble_timeline/bubble_timeline.js b/src/components/bubble_timeline/bubble_timeline.js
index 514f8a590..f03563f44 100644
--- a/src/components/bubble_timeline/bubble_timeline.js
+++ b/src/components/bubble_timeline/bubble_timeline.js
@@ -4,15 +4,16 @@ const PublicTimeline = {
     Timeline
   },
   computed: {
-    timeline () { return this.$store.state.statuses.timelines.bubble }
+    timeline() {
+      return this.$store.state.statuses.timelines.bubble
+    }
   },
-  created () {
+  created() {
     this.$store.dispatch('startFetchingTimeline', { timeline: 'bubble' })
   },
-  unmounted () {
+  unmounted() {
     this.$store.dispatch('stopFetchingTimeline', 'bubble')
   }
-
 }
 
 export default PublicTimeline
diff --git a/src/components/chat_message_date/chat_message_date.vue b/src/components/chat_message_date/chat_message_date.vue
index 98349b753..598cdc27b 100644
--- a/src/components/chat_message_date/chat_message_date.vue
+++ b/src/components/chat_message_date/chat_message_date.vue
@@ -11,14 +11,17 @@ export default {
   name: 'Timeago',
   props: ['date'],
   computed: {
-    displayDate () {
+    displayDate() {
       const today = new Date()
       today.setHours(0, 0, 0, 0)
 
       if (this.date.getTime() === today.getTime()) {
         return this.$t('display_date.today')
       } else {
-        return this.date.toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale), { day: 'numeric', month: 'long' })
+        return this.date.toLocaleDateString(
+          localeService.internalToBrowserLocale(this.$i18n.locale),
+          { day: 'numeric', month: 'long' }
+        )
       }
     }
   }
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 836959123..271eb69ea 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -9,7 +9,7 @@
       :checked="modelValue"
       :indeterminate="indeterminate"
       @change="$emit('update:modelValue', $event.target.checked)"
-    >
+    />
     <i class="checkbox-indicator" />
     <span
       v-if="!!$slots.default"
@@ -22,12 +22,8 @@
 
 <script>
 export default {
-  emits: ['update:modelValue'],
-  props: [
-    'modelValue',
-    'indeterminate',
-    'disabled'
-  ]
+  props: ['modelValue', 'indeterminate', 'disabled'],
+  emits: ['update:modelValue']
 }
 </script>
 
@@ -71,7 +67,7 @@ export default {
   &.disabled {
     .checkbox-indicator::before,
     .label {
-      opacity: .5;
+      opacity: 0.5;
     }
     .label {
       color: $fallback--faint;
@@ -79,7 +75,7 @@ export default {
     }
   }
 
-  input[type=checkbox] {
+  input[type='checkbox'] {
     display: none;
 
     &:checked + .checkbox-indicator::before {
@@ -92,11 +88,10 @@ export default {
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
     }
-
   }
 
   & > span {
-    margin-left: .5em;
+    margin-left: 0.5em;
   }
 }
 </style>
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index e84603c36..2ce0d8741 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -14,7 +14,12 @@
       :model-value="present"
       :disabled="disabled"
       class="opt"
-      @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+      @update:modelValue="
+        $emit(
+          'update:modelValue',
+          typeof modelValue === 'undefined' ? fallback : undefined
+        )
+      "
     />
     <div class="input color-input-field">
       <input
@@ -24,7 +29,7 @@
         :value="modelValue || fallback"
         :disabled="!present || disabled"
         @input="$emit('update:modelValue', $event.target.value)"
-      >
+      />
       <input
         v-if="validColor"
         :id="name"
@@ -33,7 +38,7 @@
         :value="modelValue || fallback"
         :disabled="!present || disabled"
         @input="$emit('update:modelValue', $event.target.value)"
-      >
+      />
       <div
         v-if="transparentColor"
         class="transparentIndicator"
@@ -41,12 +46,11 @@
       <div
         v-if="computedColor"
         class="computedIndicator"
-        :style="{backgroundColor: fallback}"
+        :style="{ backgroundColor: fallback }"
       />
     </div>
   </div>
 </template>
-<style lang="scss" src="./color_input.scss"></style>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
@@ -93,21 +97,22 @@ export default {
   },
   emits: ['update:modelValue'],
   computed: {
-    present () {
+    present() {
       return typeof this.modelValue !== 'undefined'
     },
-    validColor () {
+    validColor() {
       return hex2rgb(this.modelValue || this.fallback)
     },
-    transparentColor () {
+    transparentColor() {
       return this.modelValue === 'transparent'
     },
-    computedColor () {
+    computedColor() {
       return this.modelValue && this.modelValue.startsWith('--')
     }
   }
 }
 </script>
+<style lang="scss" src="./color_input.scss"></style>
 
 <style lang="scss">
 .color-control {
diff --git a/src/components/confirm_modal/confirm_modal.js b/src/components/confirm_modal/confirm_modal.js
index 96ddc118f..f462596c2 100644
--- a/src/components/confirm_modal/confirm_modal.js
+++ b/src/components/confirm_modal/confirm_modal.js
@@ -22,13 +22,12 @@ const ConfirmModal = {
       type: String
     }
   },
-  computed: {
-  },
+  computed: {},
   methods: {
-    onCancel () {
+    onCancel() {
       this.$emit('cancelled')
     },
-    onAccept () {
+    onAccept() {
       this.$emit('accepted')
     }
   }
diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 5783c7944..cae5dec66 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -25,6 +25,8 @@
   </dialog-modal>
 </template>
 
+<script src="./confirm_modal.js"></script>
+
 <style lang="scss" scoped>
 @import '../../_variables';
 
@@ -35,5 +37,3 @@
   }
 }
 </style>
-
-<script src="./confirm_modal.js"></script>
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 374cb9ba2..c534d931f 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -43,11 +43,7 @@ import {
   faThumbsUp
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faAdjust,
-  faExclamationTriangle,
-  faThumbsUp
-)
+library.add(faAdjust, faExclamationTriangle, faThumbsUp)
 
 export default {
   props: {
@@ -65,19 +61,35 @@ export default {
     }
   },
   computed: {
-    hint () {
-      const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')
+    hint() {
+      const levelVal = this.contrast.aaa
+        ? 'aaa'
+        : this.contrast.aa
+        ? 'aa'
+        : 'bad'
       const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
       const context = this.$t('settings.style.common.contrast.context.text')
       const ratio = this.contrast.text
-      return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
+      return this.$t('settings.style.common.contrast.hint', {
+        level,
+        context,
+        ratio
+      })
     },
-    hint_18pt () {
-      const levelVal = this.contrast.laaa ? 'aaa' : (this.contrast.laa ? 'aa' : 'bad')
+    hint_18pt() {
+      const levelVal = this.contrast.laaa
+        ? 'aaa'
+        : this.contrast.laa
+        ? 'aa'
+        : 'bad'
       const level = this.$t(`settings.style.common.contrast.level.${levelVal}`)
       const context = this.$t('settings.style.common.contrast.context.18pt')
       const ratio = this.contrast.text
-      return this.$t('settings.style.common.contrast.hint', { level, context, ratio })
+      return this.$t('settings.style.common.contrast.hint', {
+        level,
+        context,
+        ratio
+      })
     }
   }
 }
diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js
index 8f996be12..750e3b0bb 100644
--- a/src/components/conversation-page/conversation-page.js
+++ b/src/components/conversation-page/conversation-page.js
@@ -5,7 +5,7 @@ const conversationPage = {
     Conversation
   },
   computed: {
-    statusId () {
+    statusId() {
       return this.$route.params.id
     }
   }
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index f8df9eb53..dc430fcf7 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -11,11 +11,7 @@ import {
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faAngleDoubleDown,
-  faAngleDoubleLeft,
-  faChevronLeft
-)
+library.add(faAngleDoubleDown, faAngleDoubleLeft, faChevronLeft)
 
 const sortById = (a, b) => {
   const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@@ -39,16 +35,17 @@ const sortAndFilterConversation = (conversation, statusoid) => {
   if (statusoid.type === 'retweet') {
     conversation = filter(
       conversation,
-      (status) => (status.type === 'retweet' || status.id !== statusoid.retweeted_status.id)
+      (status) =>
+        status.type === 'retweet' || status.id !== statusoid.retweeted_status.id
     )
   } else {
     conversation = filter(conversation, (status) => status.type !== 'retweet')
   }
-  return conversation.filter(_ => _).sort(sortById)
+  return conversation.filter((_) => _).sort(sortById)
 }
 
 const conversation = {
-  data () {
+  data() {
     return {
       highlight: null,
       expanded: false,
@@ -66,74 +63,78 @@ const conversation = {
     'profileUserId',
     'virtualHidden'
   ],
-  created () {
+  created() {
     if (this.isPage) {
       this.fetchConversation()
     }
   },
   computed: {
-    maxDepthToShowByDefault () {
+    maxDepthToShowByDefault() {
       // maxDepthInThread = max number of depths that is *visible*
       // since our depth starts with 0 and "showing" means "showing children"
       // there is a -2 here
       const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
       return maxDepth >= 1 ? maxDepth : 1
     },
-    streamingEnabled () {
-      return this.mergedConfig.useStreamingApi && this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+    streamingEnabled() {
+      return (
+        this.mergedConfig.useStreamingApi &&
+        this.mastoUserSocketStatus === WSConnectionStatus.JOINED
+      )
     },
-    displayStyle () {
+    displayStyle() {
       return this.$store.getters.mergedConfig.conversationDisplay
     },
-    isTreeView () {
+    isTreeView() {
       return !this.isLinearView
     },
-    treeViewIsSimple () {
+    treeViewIsSimple() {
       return !this.$store.getters.mergedConfig.conversationTreeAdvanced
     },
-    isLinearView () {
+    isLinearView() {
       return this.displayStyle === 'linear'
     },
-    shouldFadeAncestors () {
+    shouldFadeAncestors() {
       return this.$store.getters.mergedConfig.conversationTreeFadeAncestors
     },
-    otherRepliesButtonPosition () {
+    otherRepliesButtonPosition() {
       return this.$store.getters.mergedConfig.conversationOtherRepliesButton
     },
-    showOtherRepliesButtonBelowStatus () {
+    showOtherRepliesButtonBelowStatus() {
       return this.otherRepliesButtonPosition === 'below'
     },
-    showOtherRepliesButtonInsideStatus () {
+    showOtherRepliesButtonInsideStatus() {
       return this.otherRepliesButtonPosition === 'inside'
     },
-    suspendable () {
+    suspendable() {
       if (this.isTreeView) {
-        return Object.entries(this.statusContentProperties)
-          .every(([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0)
+        return Object.entries(this.statusContentProperties).every(
+          ([k, prop]) => !prop.replying && prop.mediaPlaying.length === 0
+        )
       }
       if (this.$refs.statusComponent && this.$refs.statusComponent[0]) {
-        return this.$refs.statusComponent.every(s => s.suspendable)
+        return this.$refs.statusComponent.every((s) => s.suspendable)
       } else {
         return true
       }
     },
-    hideStatus () {
+    hideStatus() {
       return this.virtualHidden && this.suspendable
     },
-    status () {
+    status() {
       return this.$store.state.statuses.allStatusesObject[this.statusId]
     },
-    originalStatusId () {
+    originalStatusId() {
       if (this.status.retweeted_status) {
         return this.status.retweeted_status.id
       } else {
         return this.statusId
       }
     },
-    conversationId () {
+    conversationId() {
       return this.getConversationId(this.statusId)
     },
-    conversation () {
+    conversation() {
       if (!this.status) {
         return []
       }
@@ -142,155 +143,203 @@ const conversation = {
         return [this.status]
       }
 
-      const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId])
-      const statusIndex = findIndex(conversation, { id: this.originalStatusId })
+      const conversation = clone(
+        this.$store.state.statuses.conversationsObject[this.conversationId]
+      )
+      const statusIndex = findIndex(conversation, {
+        id: this.originalStatusId
+      })
       if (statusIndex !== -1) {
         conversation[statusIndex] = this.status
       }
 
       return sortAndFilterConversation(conversation, this.status)
     },
-    statusMap () {
+    statusMap() {
       return this.conversation.reduce((res, s) => {
         res[s.id] = s
         return res
       }, {})
     },
-    threadTree () {
-      const reverseLookupTable = this.conversation.reduce((table, status, index) => {
-        table[status.id] = index
-        return table
-      }, {})
+    threadTree() {
+      const reverseLookupTable = this.conversation.reduce(
+        (table, status, index) => {
+          table[status.id] = index
+          return table
+        },
+        {}
+      )
 
-      const threads = this.conversation.reduce((a, cur) => {
-        const id = cur.id
-        a.forest[id] = this.getReplies(id)
-          .map(s => s.id)
+      const threads = this.conversation.reduce(
+        (a, cur) => {
+          const id = cur.id
+          a.forest[id] = this.getReplies(id).map((s) => s.id)
 
-        return a
-      }, {
-        forest: {}
-      })
-
-      const walk = (forest, topLevel, depth = 0, processed = {}) => topLevel.map(id => {
-        if (processed[id]) {
-          return []
+          return a
+        },
+        {
+          forest: {}
         }
+      )
 
-        processed[id] = true
-        return [{
-          status: this.conversation[reverseLookupTable[id]],
-          id,
-          depth
-        }, walk(forest, forest[id], depth + 1, processed)].reduce((a, b) => a.concat(b), [])
-      }).reduce((a, b) => a.concat(b), [])
+      const walk = (forest, topLevel, depth = 0, processed = {}) =>
+        topLevel
+          .map((id) => {
+            if (processed[id]) {
+              return []
+            }
 
-      const linearized = walk(threads.forest, this.topLevel.map(k => k.id))
+            processed[id] = true
+            return [
+              {
+                status: this.conversation[reverseLookupTable[id]],
+                id,
+                depth
+              },
+              walk(forest, forest[id], depth + 1, processed)
+            ].reduce((a, b) => a.concat(b), [])
+          })
+          .reduce((a, b) => a.concat(b), [])
+
+      const linearized = walk(
+        threads.forest,
+        this.topLevel.map((k) => k.id)
+      )
 
       return linearized
     },
-    replyIds () {
-      return this.conversation.map(k => k.id)
+    replyIds() {
+      return this.conversation
+        .map((k) => k.id)
         .reduce((res, id) => {
-          res[id] = (this.replies[id] || []).map(k => k.id)
+          res[id] = (this.replies[id] || []).map((k) => k.id)
           return res
         }, {})
     },
-    totalReplyCount () {
+    totalReplyCount() {
       const sizes = {}
       const subTreeSizeFor = (id) => {
         if (sizes[id]) {
           return sizes[id]
         }
-        sizes[id] = 1 + this.replyIds[id].map(cid => subTreeSizeFor(cid)).reduce((a, b) => a + b, 0)
+        sizes[id] =
+          1 +
+          this.replyIds[id]
+            .map((cid) => subTreeSizeFor(cid))
+            .reduce((a, b) => a + b, 0)
         return sizes[id]
       }
-      this.conversation.map(k => k.id).map(subTreeSizeFor)
+      this.conversation.map((k) => k.id).map(subTreeSizeFor)
       return Object.keys(sizes).reduce((res, id) => {
         res[id] = sizes[id] - 1 // exclude itself
         return res
       }, {})
     },
-    totalReplyDepth () {
+    totalReplyDepth() {
       const depths = {}
       const subTreeDepthFor = (id) => {
         if (depths[id]) {
           return depths[id]
         }
-        depths[id] = 1 + this.replyIds[id].map(cid => subTreeDepthFor(cid)).reduce((a, b) => a > b ? a : b, 0)
+        depths[id] =
+          1 +
+          this.replyIds[id]
+            .map((cid) => subTreeDepthFor(cid))
+            .reduce((a, b) => (a > b ? a : b), 0)
         return depths[id]
       }
-      this.conversation.map(k => k.id).map(subTreeDepthFor)
+      this.conversation.map((k) => k.id).map(subTreeDepthFor)
       return Object.keys(depths).reduce((res, id) => {
         res[id] = depths[id] - 1 // exclude itself
         return res
       }, {})
     },
-    depths () {
+    depths() {
       return this.threadTree.reduce((a, k) => {
         a[k.id] = k.depth
         return a
       }, {})
     },
-    topLevel () {
-      const topLevel = this.conversation.reduce((tl, cur) =>
-        tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation)
+    topLevel() {
+      const topLevel = this.conversation.reduce(
+        (tl, cur) =>
+          tl.filter(
+            (k) =>
+              this.getReplies(cur.id)
+                .map((v) => v.id)
+                .indexOf(k.id) === -1
+          ),
+        this.conversation
+      )
       return topLevel
     },
-    otherTopLevelCount () {
+    otherTopLevelCount() {
       return this.topLevel.length - 1
     },
-    showingTopLevel () {
+    showingTopLevel() {
       if (this.canDive && this.diveRoot) {
         return [this.statusMap[this.diveRoot]]
       }
       return this.topLevel
     },
-    diveRoot () {
+    diveRoot() {
       const statusId = this.inlineDivePosition || this.statusId
       const isTopLevel = !this.parentOf(statusId)
       return isTopLevel ? null : statusId
     },
-    diveDepth () {
+    diveDepth() {
       return this.canDive && this.diveRoot ? this.depths[this.diveRoot] : 0
     },
-    diveMode () {
+    diveMode() {
       return this.canDive && !!this.diveRoot
     },
-    shouldShowAllConversationButton () {
+    shouldShowAllConversationButton() {
       // The "show all conversation" button tells the user that there exist
       // other toplevel statuses, so do not show it if there is only a single root
-      return this.isTreeView && this.isExpanded && this.diveMode && this.topLevel.length > 1
+      return (
+        this.isTreeView &&
+        this.isExpanded &&
+        this.diveMode &&
+        this.topLevel.length > 1
+      )
     },
-    shouldShowAncestors () {
-      return this.isTreeView && this.isExpanded && this.ancestorsOf(this.diveRoot).length
+    shouldShowAncestors() {
+      return (
+        this.isTreeView &&
+        this.isExpanded &&
+        this.ancestorsOf(this.diveRoot).length
+      )
     },
-    replies () {
+    replies() {
       let i = 1
       // eslint-disable-next-line camelcase
-      return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => {
-        /* eslint-disable camelcase */
-        const irid = in_reply_to_status_id
-        /* eslint-enable camelcase */
-        if (irid) {
-          result[irid] = result[irid] || []
-          result[irid].push({
-            name: `#${i}`,
-            id: id
-          })
-        }
-        i++
-        return result
-      }, {})
+      return reduce(
+        this.conversation,
+        (result, { id, in_reply_to_status_id }) => {
+          /* eslint-disable camelcase */
+          const irid = in_reply_to_status_id
+          /* eslint-enable camelcase */
+          if (irid) {
+            result[irid] = result[irid] || []
+            result[irid].push({
+              name: `#${i}`,
+              id: id
+            })
+          }
+          i++
+          return result
+        },
+        {}
+      )
     },
-    isExpanded () {
+    isExpanded() {
       return !!(this.expanded || this.isPage)
     },
-    hiddenStyle () {
+    hiddenStyle() {
       const height = (this.status && this.status.virtualHeight) || '120px'
       return this.virtualHidden ? { height } : {}
     },
-    threadDisplayStatus () {
+    threadDisplayStatus() {
       return this.conversation.reduce((a, k) => {
         const id = k.id
         const depth = this.depths[id]
@@ -298,7 +347,7 @@ const conversation = {
           if (this.threadDisplayStatusObject[id]) {
             return this.threadDisplayStatusObject[id]
           }
-          if ((depth - this.diveDepth) <= this.maxDepthToShowByDefault) {
+          if (depth - this.diveDepth <= this.maxDepthToShowByDefault) {
             return 'showing'
           } else {
             return 'hidden'
@@ -309,7 +358,7 @@ const conversation = {
         return a
       }, {})
     },
-    statusContentProperties () {
+    statusContentProperties() {
       return this.conversation.reduce((a, k) => {
         const id = k.id
         const props = (() => {
@@ -334,20 +383,20 @@ const conversation = {
         return a
       }, {})
     },
-    canDive () {
+    canDive() {
       return this.isTreeView && this.isExpanded
     },
-    focused () {
+    focused() {
       return (id) => {
-        return (this.isExpanded) && id === this.highlight
+        return this.isExpanded && id === this.highlight
       }
     },
-    maybeHighlight () {
+    maybeHighlight() {
       return this.isExpanded ? this.highlight : null
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
-      mastoUserSocketStatus: state => state.api.mastoUserSocketStatus
+      mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus
     })
   },
   components: {
@@ -355,53 +404,59 @@ const conversation = {
     ThreadTree
   },
   watch: {
-    statusId (newVal, oldVal) {
+    statusId(newVal, oldVal) {
       const newConversationId = this.getConversationId(newVal)
       const oldConversationId = this.getConversationId(oldVal)
-      if (newConversationId && oldConversationId && newConversationId === oldConversationId) {
+      if (
+        newConversationId &&
+        oldConversationId &&
+        newConversationId === oldConversationId
+      ) {
         this.setHighlight(this.originalStatusId)
       } else {
         this.fetchConversation()
       }
     },
-    expanded (value) {
+    expanded(value) {
       if (value) {
         this.fetchConversation()
       } else {
         this.resetDisplayState()
       }
     },
-    virtualHidden (value) {
-      this.$store.dispatch(
-        'setVirtualHeight',
-        { statusId: this.statusId, height: `${this.$el.clientHeight}px` }
-      )
+    virtualHidden(value) {
+      this.$store.dispatch('setVirtualHeight', {
+        statusId: this.statusId,
+        height: `${this.$el.clientHeight}px`
+      })
     }
   },
   methods: {
-    fetchConversation () {
+    fetchConversation() {
       if (this.status) {
-        this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId })
+        this.$store.state.api.backendInteractor
+          .fetchConversation({ id: this.statusId })
           .then(({ ancestors, descendants }) => {
             this.$store.dispatch('addNewStatuses', { statuses: ancestors })
             this.$store.dispatch('addNewStatuses', { statuses: descendants })
             this.setHighlight(this.originalStatusId)
           })
       } else {
-        this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
+        this.$store.state.api.backendInteractor
+          .fetchStatus({ id: this.statusId })
           .then((status) => {
             this.$store.dispatch('addNewStatuses', { statuses: [status] })
             this.fetchConversation()
           })
       }
     },
-    getReplies (id) {
+    getReplies(id) {
       return this.replies[id] || []
     },
-    getHighlight () {
+    getHighlight() {
       return this.isExpanded ? this.highlight : null
     },
-    setHighlight (id) {
+    setHighlight(id) {
       if (!id) return
       this.highlight = id
 
@@ -412,32 +467,38 @@ const conversation = {
       this.$store.dispatch('fetchFavsAndRepeats', id)
       this.$store.dispatch('fetchEmojiReactionsBy', id)
     },
-    toggleExpanded () {
+    toggleExpanded() {
       this.expanded = !this.expanded
     },
-    getConversationId (statusId) {
+    getConversationId(statusId) {
       const status = this.$store.state.statuses.allStatusesObject[statusId]
-      return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id'))
+      return get(
+        status,
+        'retweeted_status.statusnet_conversation_id',
+        get(status, 'statusnet_conversation_id')
+      )
     },
-    setThreadDisplay (id, nextStatus) {
+    setThreadDisplay(id, nextStatus) {
       this.threadDisplayStatusObject = {
         ...this.threadDisplayStatusObject,
         [id]: nextStatus
       }
     },
-    toggleThreadDisplay (id) {
+    toggleThreadDisplay(id) {
       const curStatus = this.threadDisplayStatus[id]
       const nextStatus = curStatus === 'showing' ? 'hidden' : 'showing'
       this.setThreadDisplay(id, nextStatus)
     },
-    setThreadDisplayRecursively (id, nextStatus) {
+    setThreadDisplayRecursively(id, nextStatus) {
       this.setThreadDisplay(id, nextStatus)
-      this.getReplies(id).map(k => k.id).map(id => this.setThreadDisplayRecursively(id, nextStatus))
+      this.getReplies(id)
+        .map((k) => k.id)
+        .map((id) => this.setThreadDisplayRecursively(id, nextStatus))
     },
-    showThreadRecursively (id) {
+    showThreadRecursively(id) {
       this.setThreadDisplayRecursively(id, 'showing')
     },
-    setStatusContentProperty (id, name, value) {
+    setStatusContentProperty(id, name, value) {
       this.statusContentPropertiesObject = {
         ...this.statusContentPropertiesObject,
         [id]: {
@@ -446,10 +507,14 @@ const conversation = {
         }
       }
     },
-    toggleStatusContentProperty (id, name) {
-      this.setStatusContentProperty(id, name, !this.statusContentProperties[id][name])
+    toggleStatusContentProperty(id, name) {
+      this.setStatusContentProperty(
+        id,
+        name,
+        !this.statusContentProperties[id][name]
+      )
     },
-    leastVisibleAncestor (id) {
+    leastVisibleAncestor(id) {
       let cur = id
       let parent = this.parentOf(cur)
       while (cur) {
@@ -463,18 +528,20 @@ const conversation = {
       // nothing found, fall back to toplevel
       return this.topLevel[0] ? this.topLevel[0].id : undefined
     },
-    diveIntoStatus (id, preventScroll) {
+    diveIntoStatus(id, preventScroll) {
       this.tryScrollTo(id)
     },
-    diveToTopLevel () {
-      this.tryScrollTo(this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id)
+    diveToTopLevel() {
+      this.tryScrollTo(
+        this.topLevelAncestorOrSelfId(this.diveRoot) || this.topLevel[0].id
+      )
     },
     // only used when we are not on a page
-    undive () {
+    undive() {
       this.inlineDivePosition = null
       this.setHighlight(this.statusId)
     },
-    tryScrollTo (id) {
+    tryScrollTo(id) {
       if (!id) {
         return
       }
@@ -503,13 +570,13 @@ const conversation = {
         this.setHighlight(id)
       })
     },
-    goToCurrent () {
+    goToCurrent() {
       this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
     },
-    statusById (id) {
+    statusById(id) {
       return this.statusMap[id]
     },
-    parentOf (id) {
+    parentOf(id) {
       const status = this.statusById(id)
       if (!status) {
         return undefined
@@ -520,11 +587,11 @@ const conversation = {
       }
       return parentId
     },
-    parentOrSelf (id) {
+    parentOrSelf(id) {
       return this.parentOf(id) || id
     },
     // Ancestors of some status, from top to bottom
-    ancestorsOf (id) {
+    ancestorsOf(id) {
       const ancestors = []
       let cur = this.parentOf(id)
       while (cur) {
@@ -533,7 +600,7 @@ const conversation = {
       }
       return ancestors
     },
-    topLevelAncestorOrSelfId (id) {
+    topLevelAncestorOrSelfId(id) {
       let cur = id
       let parent = this.parentOf(id)
       while (parent) {
@@ -542,7 +609,7 @@ const conversation = {
       }
       return cur
     },
-    resetDisplayState () {
+    resetDisplayState() {
       this.undive()
       this.threadDisplayStatusObject = {}
     }
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 1adbe2500..c83d7e7a5 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -3,7 +3,7 @@
     v-if="!hideStatus"
     :style="hiddenStyle"
     class="Conversation"
-    :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
+    :class="{ '-expanded': isExpanded, panel: isExpanded }"
   >
     <div
       v-if="isExpanded"
@@ -35,13 +35,15 @@
             @click.prevent="diveToTopLevel"
           >
             <template #icon>
-              <FAIcon
-                icon="angle-double-left"
-              />
+              <FAIcon icon="angle-double-left" />
             </template>
             <template #text>
               <span>
-                {{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
+                {{
+                  $tc('status.show_all_conversation', otherTopLevelCount, {
+                    numStatus: otherTopLevelCount
+                  })
+                }}
               </span>
             </template>
           </i18n-t>
@@ -54,14 +56,20 @@
             v-for="status in ancestorsOf(diveRoot)"
             :key="status.id"
             class="thread-ancestor"
-            :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
+            :class="{
+              'thread-ancestor-has-other-replies':
+                getReplies(status.id).length > 1,
+              '-faded': shouldFadeAncestors
+            }"
           >
             <status
               ref="statusComponent"
               :inline-expanded="collapsable && isExpanded"
               :statusoid="status"
               :expandable="!isExpanded"
-              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+              :show-pinned="
+                pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]
+              "
               :focused="focused(status.id)"
               :in-conversation="isExpanded"
               :highlight="getHighlight()"
@@ -69,7 +77,6 @@
               :in-profile="inProfile"
               :profile-user-id="profileUserId"
               class="conversation-status status-fadein panel-body"
-
               :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
               :thread-display-status="threadDisplayStatus"
@@ -78,28 +85,47 @@
               :total-reply-depth="totalReplyDepth"
               :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
               :dive="() => diveIntoStatus(status.id)"
-
-              :controlled-showing-tall="statusContentProperties[status.id].showingTall"
-              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
-              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
+              :controlled-showing-tall="
+                statusContentProperties[status.id].showingTall
+              "
+              :controlled-expanding-subject="
+                statusContentProperties[status.id].expandingSubject
+              "
+              :controlled-showing-long-subject="
+                statusContentProperties[status.id].showingLongSubject
+              "
               :controlled-replying="statusContentProperties[status.id].replying"
-              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
-              :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
-              :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
-              :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
-              :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
-              :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
-
+              :controlled-media-playing="
+                statusContentProperties[status.id].mediaPlaying
+              "
+              :controlled-toggle-showing-tall="
+                () => toggleStatusContentProperty(status.id, 'showingTall')
+              "
+              :controlled-toggle-expanding-subject="
+                () => toggleStatusContentProperty(status.id, 'expandingSubject')
+              "
+              :controlled-toggle-showing-long-subject="
+                () =>
+                  toggleStatusContentProperty(status.id, 'showingLongSubject')
+              "
+              :controlled-toggle-replying="
+                () => toggleStatusContentProperty(status.id, 'replying')
+              "
+              :controlled-set-media-playing="
+                (newVal) =>
+                  toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)
+              "
               @goto="setHighlight"
               @toggleExpanded="toggleExpanded"
             />
             <div
-              v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
+              v-if="
+                showOtherRepliesButtonBelowStatus &&
+                getReplies(status.id).length > 1
+              "
               class="thread-ancestor-dive-box"
             >
-              <div
-                class="thread-ancestor-dive-box-inner"
-              >
+              <div class="thread-ancestor-dive-box-inner">
                 <i18n-t
                   tag="button"
                   scope="global"
@@ -108,13 +134,17 @@
                   @click.prevent="diveIntoStatus(status.id)"
                 >
                   <template #icon>
-                    <FAIcon
-                      icon="angle-double-right"
-                    />
+                    <FAIcon icon="angle-double-right" />
                   </template>
                   <template #text>
                     <span>
-                      {{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
+                      {{
+                        $tc(
+                          'status.ancestor_follow',
+                          getReplies(status.id).length - 1,
+                          { numReplies: getReplies(status.id).length - 1 }
+                        )
+                      }}
                     </span>
                   </template>
                 </i18n-t>
@@ -127,7 +157,6 @@
           :key="status.id"
           ref="statusComponent"
           :depth="0"
-
           :status="status"
           :in-profile="inProfile"
           :conversation="conversation"
@@ -135,13 +164,11 @@
           :is-expanded="isExpanded"
           :pinned-status-ids-object="pinnedStatusIdsObject"
           :profile-user-id="profileUserId"
-
           :focused="focused"
           :get-replies="getReplies"
           :highlight="maybeHighlight"
           :set-highlight="setHighlight"
           :toggle-expanded="toggleExpanded"
-
           :simple="treeViewIsSimple"
           :toggle-thread-display="toggleThreadDisplay"
           :thread-display-status="threadDisplayStatus"
@@ -165,7 +192,9 @@
           :inline-expanded="collapsable && isExpanded"
           :statusoid="status"
           :expandable="!isExpanded"
-          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+          :show-pinned="
+            pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]
+          "
           :focused="focused(status.id)"
           :in-conversation="isExpanded"
           :highlight="getHighlight()"
@@ -173,7 +202,6 @@
           :in-profile="inProfile"
           :profile-user-id="profileUserId"
           class="conversation-status status-fadein panel-body"
-
           :toggle-thread-display="toggleThreadDisplay"
           :thread-display-status="threadDisplayStatus"
           :show-thread-recursively="showThreadRecursively"
@@ -182,7 +210,6 @@
           :status-content-properties="statusContentProperties"
           :set-status-content-property="setStatusContentProperty"
           :toggle-status-content-property="toggleStatusContentProperty"
-
           @goto="setHighlight"
           @toggleExpanded="toggleExpanded"
         />
@@ -233,7 +260,8 @@
     border-bottom-color: var(--border, $fallback--border);
     border-radius: 0;
     /* Make the button stretch along the whole row */
-    &, &-inner {
+    &,
+    &-inner {
       display: flex;
       align-items: stretch;
       flex-direction: column;
@@ -271,7 +299,8 @@
     border-left-color: $fallback--cRed;
     border-left-color: var(--cRed, $fallback--cRed);
     border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius)
+      var(--panelRadius, $fallback--panelRadius);
     border-bottom: 1px solid var(--border, $fallback--border);
   }
 
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index f4900c380..bacdf53b2 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -46,76 +46,98 @@ export default {
   },
   data: () => ({
     searchBarHidden: true,
-    supportsMask: window.CSS && window.CSS.supports && (
-      window.CSS.supports('mask-size', 'contain') ||
+    supportsMask:
+      window.CSS &&
+      window.CSS.supports &&
+      (window.CSS.supports('mask-size', 'contain') ||
         window.CSS.supports('-webkit-mask-size', 'contain') ||
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
-        window.CSS.supports('-o-mask-size', 'contain')
-    ),
+        window.CSS.supports('-o-mask-size', 'contain')),
     showingConfirmLogout: false
   }),
   computed: {
-    enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
-    logoStyle () {
+    enableMask() {
+      return this.supportsMask && this.$store.state.instance.logoMask
+    },
+    logoStyle() {
       return {
-        'visibility': this.enableMask ? 'hidden' : 'visible'
+        visibility: this.enableMask ? 'hidden' : 'visible'
       }
     },
-    logoMaskStyle () {
-      return this.enableMask ? {
-        'mask-image': `url(${this.$store.state.instance.logo})`
-      } : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      }
+    logoMaskStyle() {
+      return this.enableMask
+        ? {
+            'mask-image': `url(${this.$store.state.instance.logo})`
+          }
+        : {
+            'background-color': this.enableMask ? '' : 'transparent'
+          }
     },
-    logoBgStyle () {
-      return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`,
-        opacity: this.searchBarHidden ? 1 : 0
-      }, this.enableMask ? {} : {
-        'background-color': this.enableMask ? '' : 'transparent'
-      })
+    logoBgStyle() {
+      return Object.assign(
+        {
+          margin: `${this.$store.state.instance.logoMargin} 0`,
+          opacity: this.searchBarHidden ? 1 : 0
+        },
+        this.enableMask
+          ? {}
+          : {
+              'background-color': this.enableMask ? '' : 'transparent'
+            }
+      )
     },
-    logo () { return this.$store.state.instance.logo },
-    mergedConfig () {
+    logo() {
+      return this.$store.state.instance.logo
+    },
+    mergedConfig() {
       return this.$store.getters.mergedConfig
     },
-    sitename () { return this.$store.state.instance.name },
-    showNavShortcuts () {
+    sitename() {
+      return this.$store.state.instance.name
+    },
+    showNavShortcuts() {
       return this.mergedConfig.showNavShortcuts
     },
-    showWiderShortcuts () {
+    showWiderShortcuts() {
       return this.mergedConfig.showWiderShortcuts
     },
-    hideSiteFavicon () {
+    hideSiteFavicon() {
       return this.mergedConfig.hideSiteFavicon
     },
-    hideSiteName () {
+    hideSiteName() {
       return this.mergedConfig.hideSiteName
     },
-    hideSitename () { return this.$store.state.instance.hideSitename },
-    logoLeft () { return this.$store.state.instance.logoLeft },
-    currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private },
-    shouldConfirmLogout () {
+    hideSitename() {
+      return this.$store.state.instance.hideSitename
+    },
+    logoLeft() {
+      return this.$store.state.instance.logoLeft
+    },
+    currentUser() {
+      return this.$store.state.users.currentUser
+    },
+    privateMode() {
+      return this.$store.state.instance.private
+    },
+    shouldConfirmLogout() {
       return this.$store.getters.mergedConfig.modalOnLogout
     },
-    showBubbleTimeline () {
+    showBubbleTimeline() {
       return this.$store.state.instance.localBubbleInstances.length > 0
     }
   },
   methods: {
-    scrollToTop () {
+    scrollToTop() {
       window.scrollTo(0, 0)
     },
-    onSearchBarToggled (hidden) {
+    onSearchBarToggled(hidden) {
       this.searchBarHidden = hidden
     },
-    openSettingsModal () {
+    openSettingsModal() {
       this.$store.dispatch('openSettingsModal')
     },
-    openModModal () {
+    openModModal() {
       this.$store.dispatch('openModModal')
     }
   }
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 92d3fa5ba..7e365f3e4 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -19,7 +19,7 @@
             v-if="!hideSiteFavicon"
             class="favicon"
             src="/favicon.png"
-          >
+          />
           <span
             v-if="!hideSiteName"
             class="site-name"
@@ -91,7 +91,7 @@
         <img
           :src="logo"
           :style="logoStyle"
-        >
+        />
       </router-link>
       <div class="item right actions">
         <search-bar
@@ -106,7 +106,10 @@
           <router-link
             v-if="currentUser"
             class="nav-icon"
-            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+            :to="{
+              name: 'interactions',
+              params: { username: currentUser.screen_name }
+            }"
           >
             <FAIcon
               fixed-width
@@ -152,7 +155,10 @@
           />
         </button>
         <button
-          v-if="currentUser && currentUser.role === 'admin' || currentUser.role === 'moderator'"
+          v-if="
+            (currentUser && currentUser.role === 'admin') ||
+            currentUser.role === 'moderator'
+          "
           class="button-unstyled nav-icon"
           @click.stop="openModModal"
         >
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 0feef27b4..6d78b3cab 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -31,14 +31,14 @@
 .dark-overlay {
   &::before {
     bottom: 0;
-    content: " ";
+    content: ' ';
     display: block;
     cursor: default;
     left: 0;
     position: fixed;
     right: 0;
     top: 0;
-    background: rgba(27,31,35,.5);
+    background: rgba(27, 31, 35, 0.5);
     z-index: 2000;
   }
 }
@@ -74,7 +74,7 @@
 
   .dialog-modal-footer {
     margin: 0;
-    padding: .5em .5em;
+    padding: 0.5em 0.5em;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     border-top: 1px solid $fallback--border;
@@ -84,9 +84,8 @@
 
     button {
       width: auto;
-      margin-left: .5rem;
+      margin-left: 0.5rem;
     }
   }
 }
-
 </style>
diff --git a/src/components/dm_timeline/dm_timeline.js b/src/components/dm_timeline/dm_timeline.js
index 8b5393a98..20e1d77c5 100644
--- a/src/components/dm_timeline/dm_timeline.js
+++ b/src/components/dm_timeline/dm_timeline.js
@@ -2,7 +2,7 @@ import Timeline from '../timeline/timeline.vue'
 
 const DMs = {
   computed: {
-    timeline () {
+    timeline() {
       return this.$store.state.statuses.timelines.dms
     }
   },
diff --git a/src/components/domain_mute_card/domain_mute_card.js b/src/components/domain_mute_card/domain_mute_card.js
index f234dcb0f..84009c729 100644
--- a/src/components/domain_mute_card/domain_mute_card.js
+++ b/src/components/domain_mute_card/domain_mute_card.js
@@ -6,18 +6,18 @@ const DomainMuteCard = {
     ProgressButton
   },
   computed: {
-    user () {
+    user() {
       return this.$store.state.users.currentUser
     },
-    muted () {
+    muted() {
       return this.user.domainMutes.includes(this.domain)
     }
   },
   methods: {
-    unmuteDomain () {
+    unmuteDomain() {
       return this.$store.dispatch('unmuteDomain', this.domain)
     },
-    muteDomain () {
+    muteDomain() {
       return this.$store.dispatch('muteDomain', this.domain)
     }
   }
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
index 836688aa0..28c61631d 100644
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@@ -9,7 +9,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.unmute') }}
-      <template v-slot:progress>
+      <template #progress>
         {{ $t('domain_mute_card.unmute_progress') }}
       </template>
     </ProgressButton>
@@ -19,7 +19,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.mute') }}
-      <template v-slot:progress>
+      <template #progress>
         {{ $t('domain_mute_card.mute_progress') }}
       </template>
     </ProgressButton>
diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
index 75adfea75..90d5793d7 100644
--- a/src/components/edit_status_modal/edit_status_modal.js
+++ b/src/components/edit_status_modal/edit_status_modal.js
@@ -8,27 +8,27 @@ const EditStatusModal = {
     PostStatusForm,
     Modal
   },
-  data () {
+  data() {
     return {
       resettingForm: false
     }
   },
   computed: {
-    isLoggedIn () {
+    isLoggedIn() {
       return !!this.$store.state.users.currentUser
     },
-    modalActivated () {
+    modalActivated() {
       return this.$store.state.editStatus.modalActivated
     },
-    isFormVisible () {
+    isFormVisible() {
       return this.isLoggedIn && !this.resettingForm && this.modalActivated
     },
-    params () {
+    params() {
       return this.$store.state.editStatus.params || {}
     }
   },
   watch: {
-    params (newVal, oldVal) {
+    params(newVal, oldVal) {
       if (get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
         this.resettingForm = true
         this.$nextTick(() => {
@@ -36,14 +36,16 @@ const EditStatusModal = {
         })
       }
     },
-    isFormVisible (val) {
+    isFormVisible(val) {
       if (val) {
-        this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
+        this.$nextTick(
+          () => this.$el && this.$el.querySelector('textarea').focus()
+        )
       }
     }
   },
   methods: {
-    doEditStatus ({ status, spoilerText, sensitive, media, contentType, poll }) {
+    doEditStatus({ status, spoilerText, sensitive, media, contentType, poll }) {
       const params = {
         store: this.$store,
         statusId: this.$store.state.editStatus.params.statusId,
@@ -55,7 +57,8 @@ const EditStatusModal = {
         contentType
       }
 
-      return statusPosterService.editStatus(params)
+      return statusPosterService
+        .editStatus(params)
         .then((data) => {
           return data
         })
@@ -66,7 +69,7 @@ const EditStatusModal = {
           }
         })
     },
-    closeModal () {
+    closeModal() {
       this.$store.dispatch('closeEditStatusModal')
     }
   }
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index 00dde7dee..dceb68e12 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/src/components/edit_status_modal/edit_status_modal.vue
@@ -11,10 +11,10 @@
       <PostStatusForm
         class="panel-body"
         v-bind="params"
-        @posted="closeModal"
-        :disablePolls="true"
-        :disableVisibilitySelector="true"
+        :disable-polls="true"
+        :disable-visibility-selector="true"
         :post-handler="doEditStatus"
+        @posted="closeModal"
       />
     </div>
   </Modal>
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 846274b82..92563725d 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -4,13 +4,9 @@ import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSmileBeam
-} from '@fortawesome/free-regular-svg-icons'
+import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
 
-library.add(
-  faSmileBeam
-)
+library.add(faSmileBeam)
 
 /**
  * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
@@ -105,7 +101,7 @@ const EmojiInput = {
       default: false
     }
   },
-  data () {
+  data() {
     return {
       input: undefined,
       highlighted: 0,
@@ -123,29 +119,34 @@ const EmojiInput = {
     EmojiPicker
   },
   computed: {
-    padEmoji () {
+    padEmoji() {
       return this.$store.getters.mergedConfig.padEmoji
     },
-    showSuggestions () {
-      return this.focused &&
+    showSuggestions() {
+      return (
+        this.focused &&
         this.suggestions &&
         this.suggestions.length > 0 &&
         !this.showPicker &&
         !this.temporarilyHideSuggestions
+      )
     },
-    textAtCaret () {
+    textAtCaret() {
       return (this.wordAtCaret || {}).word || ''
     },
-    wordAtCaret () {
+    wordAtCaret() {
       if (this.modelValue && this.caret) {
-        const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
+        const word =
+          Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
         return word
       }
     }
   },
-  mounted () {
+  mounted() {
     const { root } = this.$refs
-    const input = root.querySelector('.emoji-input > input') || root.querySelector('.emoji-input > textarea')
+    const input =
+      root.querySelector('.emoji-input > input') ||
+      root.querySelector('.emoji-input > textarea')
     if (!input) return
     this.input = input
     this.resize()
@@ -158,7 +159,7 @@ const EmojiInput = {
     input.addEventListener('transitionend', this.onTransition)
     input.addEventListener('input', this.onInput)
   },
-  unmounted () {
+  unmounted() {
     const { input } = this
     if (input) {
       input.removeEventListener('blur', this.onBlur)
@@ -183,27 +184,28 @@ const EmojiInput = {
       // Async: cancel if textAtCaret has changed during wait
       if (this.textAtCaret !== newWord) return
       if (matchedSuggestions.length <= 0) return
-      this.suggestions = take(matchedSuggestions, 5)
-        .map(({ imageUrl, ...rest }) => ({
+      this.suggestions = take(matchedSuggestions, 5).map(
+        ({ imageUrl, ...rest }) => ({
           ...rest,
           img: imageUrl || ''
-        }))
+        })
+      )
     },
     suggestions: {
-      handler (newValue) {
+      handler(newValue) {
         this.$nextTick(this.resize)
       },
       deep: true
     }
   },
   methods: {
-    focusPickerInput () {
+    focusPickerInput() {
       const pickerEl = this.$refs.picker.$el
       if (!pickerEl) return
       const pickerInput = pickerEl.querySelector('input')
       if (pickerInput) pickerInput.focus()
     },
-    triggerShowPicker () {
+    triggerShowPicker() {
       this.showPicker = true
       this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
@@ -218,7 +220,7 @@ const EmojiInput = {
         this.disableClickOutside = false
       }, 0)
     },
-    togglePicker () {
+    togglePicker() {
       this.input.focus()
       this.showPicker = !this.showPicker
       if (this.showPicker) {
@@ -227,12 +229,16 @@ const EmojiInput = {
         this.$nextTick(this.focusPickerInput)
       }
     },
-    replace (replacement) {
-      const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+    replace(replacement) {
+      const newValue = Completion.replaceWord(
+        this.modelValue,
+        this.wordAtCaret,
+        replacement
+      )
       this.$emit('update:modelValue', newValue)
       this.caret = 0
     },
-    insert ({ insertion, keepOpen, surroundingSpace = true }) {
+    insert({ insertion, keepOpen, surroundingSpace = true }) {
       const before = this.modelValue.substring(0, this.caret) || ''
       const after = this.modelValue.substring(this.caret) || ''
 
@@ -251,19 +257,25 @@ const EmojiInput = {
        * them, masto seem to be rendering :emoji::emoji: correctly now so why not
        */
       const isSpaceRegex = /\s/
-      const spaceBefore = (surroundingSpace && !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0) ? ' ' : ''
-      const spaceAfter = (surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji) ? ' ' : ''
+      const spaceBefore =
+        surroundingSpace &&
+        !isSpaceRegex.exec(before.slice(-1)) &&
+        before.length &&
+        this.padEmoji > 0
+          ? ' '
+          : ''
+      const spaceAfter =
+        surroundingSpace && !isSpaceRegex.exec(after[0]) && this.padEmoji
+          ? ' '
+          : ''
 
-      const newValue = [
-        before,
-        spaceBefore,
-        insertion,
-        spaceAfter,
-        after
-      ].join('')
+      const newValue = [before, spaceBefore, insertion, spaceAfter, after].join(
+        ''
+      )
       this.keepOpen = keepOpen
       this.$emit('update:modelValue', newValue)
-      const position = this.caret + (insertion + spaceAfter + spaceBefore).length
+      const position =
+        this.caret + (insertion + spaceAfter + spaceBefore).length
       if (!keepOpen) {
         this.input.focus()
       }
@@ -275,12 +287,17 @@ const EmojiInput = {
         this.caret = position
       })
     },
-    replaceText (e, suggestion) {
+    replaceText(e, suggestion) {
       const len = this.suggestions.length || 0
       if (len > 0 || suggestion) {
-        const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
+        const chosenSuggestion =
+          suggestion || this.suggestions[this.highlighted]
         const replacement = chosenSuggestion.replacement
-        const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+        const newValue = Completion.replaceWord(
+          this.modelValue,
+          this.wordAtCaret,
+          replacement
+        )
         this.$emit('update:modelValue', newValue)
         this.highlighted = 0
         const position = this.wordAtCaret.start + replacement.length
@@ -295,7 +312,7 @@ const EmojiInput = {
         e.preventDefault()
       }
     },
-    cycleBackward (e) {
+    cycleBackward(e) {
       const len = this.suggestions.length || 0
       if (len > 1) {
         this.highlighted -= 1
@@ -307,7 +324,7 @@ const EmojiInput = {
         this.highlighted = 0
       }
     },
-    cycleForward (e) {
+    cycleForward(e) {
       const len = this.suggestions.length || 0
       if (len > 1) {
         this.highlighted += 1
@@ -319,26 +336,28 @@ const EmojiInput = {
         this.highlighted = 0
       }
     },
-    scrollIntoView () {
+    scrollIntoView() {
       const rootRef = this.$refs['picker'].$el
       /* Scroller is either `window` (replies in TL), sidebar (main post form,
        * replies in notifs) or mobile post form. Note that getting and setting
        * scroll is different for `Window` and `Element`s
        */
-      const scrollerRef = this.$el.closest('.sidebar-scroller') ||
-            this.$el.closest('.post-form-modal-view') ||
-            window
-      const currentScroll = scrollerRef === window
-        ? scrollerRef.scrollY
-        : scrollerRef.scrollTop
-      const scrollerHeight = scrollerRef === window
-        ? scrollerRef.innerHeight
-        : scrollerRef.offsetHeight
+      const scrollerRef =
+        this.$el.closest('.sidebar-scroller') ||
+        this.$el.closest('.post-form-modal-view') ||
+        window
+      const currentScroll =
+        scrollerRef === window ? scrollerRef.scrollY : scrollerRef.scrollTop
+      const scrollerHeight =
+        scrollerRef === window
+          ? scrollerRef.innerHeight
+          : scrollerRef.offsetHeight
 
       const scrollerBottomBorder = currentScroll + scrollerHeight
       // We check where the bottom border of root element is, this uses findOffset
       // to find offset relative to scrollable container (scroller)
-      const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
+      const rootBottomBorder =
+        rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
 
       const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder)
       // could also check top delta but there's no case for it
@@ -360,10 +379,10 @@ const EmojiInput = {
         }
       })
     },
-    onTransition (e) {
+    onTransition(e) {
       this.resize()
     },
-    onBlur (e) {
+    onBlur(e) {
       // Clicking on any suggestion removes focus from autocomplete,
       // preventing click handler ever executing.
       this.blurTimeout = setTimeout(() => {
@@ -372,10 +391,10 @@ const EmojiInput = {
         this.resize()
       }, 200)
     },
-    onClick (e, suggestion) {
+    onClick(e, suggestion) {
       this.replaceText(e, suggestion)
     },
-    onFocus (e) {
+    onFocus(e) {
       if (this.blurTimeout) {
         clearTimeout(this.blurTimeout)
         this.blurTimeout = null
@@ -389,7 +408,7 @@ const EmojiInput = {
       this.resize()
       this.temporarilyHideSuggestions = false
     },
-    onKeyUp (e) {
+    onKeyUp(e) {
       const { key } = e
       this.setCaret(e)
       this.resize()
@@ -402,11 +421,11 @@ const EmojiInput = {
         this.temporarilyHideSuggestions = false
       }
     },
-    onPaste (e) {
+    onPaste(e) {
       this.setCaret(e)
       this.resize()
     },
-    onKeyDown (e) {
+    onKeyDown(e) {
       const { ctrlKey, shiftKey, key } = e
       if (this.newlineOnCtrlEnter && ctrlKey && key === 'Enter') {
         this.insert({ insertion: '\n', surroundingSpace: false })
@@ -453,31 +472,31 @@ const EmojiInput = {
       this.showPicker = false
       this.resize()
     },
-    onInput (e) {
+    onInput(e) {
       this.showPicker = false
       this.setCaret(e)
       this.resize()
       this.$emit('update:modelValue', e.target.value)
     },
-    onClickInput (e) {
+    onClickInput(e) {
       this.showPicker = false
     },
-    onClickOutside (e) {
+    onClickOutside(e) {
       if (this.disableClickOutside) return
       this.showPicker = false
     },
-    onStickerUploaded (e) {
+    onStickerUploaded(e) {
       this.showPicker = false
       this.$emit('sticker-uploaded', e)
     },
-    onStickerUploadFailed (e) {
+    onStickerUploadFailed(e) {
       this.showPicker = false
       this.$emit('sticker-upload-Failed', e)
     },
-    setCaret ({ target: { selectionStart } }) {
+    setCaret({ target: { selectionStart } }) {
       this.caret = selectionStart
     },
-    resize () {
+    resize() {
       const panel = this.$refs.panel
       if (!panel) return
       const picker = this.$refs.picker.$el
@@ -488,9 +507,12 @@ const EmojiInput = {
       this.setPlacement(panelBody, panel, offsetBottom)
       this.setPlacement(picker, picker, offsetBottom)
     },
-    setPlacement (container, target, offsetBottom) {
+    setPlacement(container, target, offsetBottom) {
       if (!container || !target) return
-      if (this.placement === 'bottom' || (this.placement === 'auto' && !this.overflowsBottom(container))) {
+      if (
+        this.placement === 'bottom' ||
+        (this.placement === 'auto' && !this.overflowsBottom(container))
+      ) {
         target.style.top = offsetBottom + 'px'
         target.style.bottom = 'auto'
       } else {
@@ -498,7 +520,7 @@ const EmojiInput = {
         target.style.bottom = this.input.offsetHeight + 'px'
       }
     },
-    overflowsBottom (el) {
+    overflowsBottom(el) {
       return el.getBoundingClientRect().bottom > window.innerHeight
     }
   }
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 078253c25..b90afb8f8 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -42,11 +42,14 @@
           :class="{ highlighted: index === highlighted }"
           @click.stop.prevent="onClick($event, suggestion)"
         >
-          <span v-if="!suggestion.mfm" class="image">
+          <span
+            v-if="!suggestion.mfm"
+            class="image"
+          >
             <img
               v-if="suggestion.img"
               :src="suggestion.img"
-            >
+            />
             <span v-else>{{ suggestion.replacement }}</span>
           </span>
           <div class="label">
@@ -77,7 +80,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin: .2em .25em;
+    margin: 0.2em 0.25em;
     font-size: 1.3em;
     cursor: pointer;
     line-height: 24px;
@@ -93,7 +96,7 @@
     margin-top: 2px;
 
     &.hide {
-      display: none
+      display: none;
     }
   }
 
@@ -104,7 +107,7 @@
       margin-top: 2px;
 
       &.hide {
-        display: none
+        display: none;
       }
 
       &-body {
@@ -178,7 +181,8 @@
     }
   }
 
-  input, textarea {
+  input,
+  textarea {
     flex: 1 0 auto;
   }
 }
diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index a0fe7a5b8..527f6f32a 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -1,5 +1,26 @@
-const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow', 'rotate', 'shake', 'sparkle', 'spin', 'tada', 'twitch', 'x2', 'x3', 'x4']
-  .map(tag => ({ displayText: tag, detailText: '$[' + tag + ' ]', replacement: '$[' + tag + ' ]', mfm: true }))
+const MFM_TAGS = [
+  'blur',
+  'bounce',
+  'flip',
+  'font',
+  'jelly',
+  'jump',
+  'rainbow',
+  'rotate',
+  'shake',
+  'sparkle',
+  'spin',
+  'tada',
+  'twitch',
+  'x2',
+  'x3',
+  'x4'
+].map((tag) => ({
+  displayText: tag,
+  detailText: '$[' + tag + ' ]',
+  replacement: '$[' + tag + ' ]',
+  mfm: true
+}))
 
 /**
  * suggest - generates a suggestor function to be used by emoji-input
@@ -13,10 +34,10 @@ const MFM_TAGS = ['blur', 'bounce', 'flip', 'font', 'jelly', 'jump', 'rainbow',
  * doesn't support user linking you can just provide only emoji.
  */
 
-export default data => {
+export default (data) => {
   const emojiCurry = suggestEmoji(data.emoji)
   const usersCurry = data.store && suggestUsers(data.store)
-  return input => {
+  return (input) => {
     const firstChar = input[0]
     if (firstChar === ':' && data.emoji) {
       return emojiCurry(input)
@@ -25,14 +46,15 @@ export default data => {
       return usersCurry(input)
     }
     if (firstChar === '$') {
-      return MFM_TAGS
-        .filter(({ replacement }) => replacement.toLowerCase().indexOf(input) !== -1)
+      return MFM_TAGS.filter(
+        ({ replacement }) => replacement.toLowerCase().indexOf(input) !== -1
+      )
     }
     return []
   }
 }
 
-export const suggestEmoji = emojis => input => {
+export const suggestEmoji = (emojis) => (input) => {
   const noPrefix = input.toLowerCase().substr(1)
   return emojis
     .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))
@@ -85,7 +107,7 @@ export const suggestUsers = ({ dispatch, state }) => {
     })
   }
 
-  return async input => {
+  return async (input) => {
     const noPrefix = input.toLowerCase().substr(1)
     if (previousQuery === noPrefix) return suggestions
 
@@ -99,36 +121,47 @@ export const suggestUsers = ({ dispatch, state }) => {
       await debounceUserSearch(noPrefix)
     }
 
-    const newSuggestions = state.users.users.filter(
-      user =>
-        user.screen_name.toLowerCase().startsWith(noPrefix) ||
-        user.name.toLowerCase().startsWith(noPrefix)
-    ).slice(0, 20).sort((a, b) => {
-      let aScore = 0
-      let bScore = 0
+    const newSuggestions = state.users.users
+      .filter(
+        (user) =>
+          user.screen_name.toLowerCase().startsWith(noPrefix) ||
+          user.name.toLowerCase().startsWith(noPrefix)
+      )
+      .slice(0, 20)
+      .sort((a, b) => {
+        let aScore = 0
+        let bScore = 0
 
-      // Matches on screen name (i.e. user@instance) makes a priority
-      aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
-      bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+        // Matches on screen name (i.e. user@instance) makes a priority
+        aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
+        bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0
 
-      // Matches on name takes second priority
-      aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
-      bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+        // Matches on name takes second priority
+        aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
+        bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0
 
-      const diff = (bScore - aScore) * 10
+        const diff = (bScore - aScore) * 10
 
-      // Then sort alphabetically
-      const nameAlphabetically = a.name > b.name ? 1 : -1
-      const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
+        // Then sort alphabetically
+        const nameAlphabetically = a.name > b.name ? 1 : -1
+        const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1
 
-      return diff + nameAlphabetically + screenNameAlphabetically
-      /* eslint-disable camelcase */
-    }).map(({ screen_name, screen_name_ui, name, profile_image_url_original }) => ({
-      displayText: screen_name_ui,
-      detailText: name,
-      imageUrl: profile_image_url_original,
-      replacement: '@' + screen_name + ' '
-    }))
+        return diff + nameAlphabetically + screenNameAlphabetically
+        /* eslint-disable camelcase */
+      })
+      .map(
+        ({
+          screen_name,
+          screen_name_ui,
+          name,
+          profile_image_url_original
+        }) => ({
+          displayText: screen_name_ui,
+          detailText: name,
+          imageUrl: profile_image_url_original,
+          replacement: '@' + screen_name + ' '
+        })
+      )
     /* eslint-enable camelcase */
 
     suggestions = newSuggestions || []
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 6617a9373..23bee7b97 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -8,11 +8,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { trim, escapeRegExp, startCase } from 'lodash'
 
-library.add(
-  faBoxOpen,
-  faStickyNote,
-  faSmileBeam
-)
+library.add(faBoxOpen, faStickyNote, faSmileBeam)
 
 // At widest, approximately 20 emoji are visible in a row,
 // loading 3 rows, could be overkill for narrow picker
@@ -29,7 +25,7 @@ const EmojiPicker = {
       default: false
     }
   },
-  data () {
+  data() {
     return {
       keyword: '',
       activeGroup: 'standard',
@@ -42,35 +38,39 @@ const EmojiPicker = {
     }
   },
   components: {
-    StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
+    StickerPicker: defineAsyncComponent(() =>
+      import('../sticker_picker/sticker_picker.vue')
+    ),
     Checkbox
   },
   methods: {
-    onStickerUploaded (e) {
+    onStickerUploaded(e) {
       this.$emit('sticker-uploaded', e)
     },
-    onStickerUploadFailed (e) {
+    onStickerUploadFailed(e) {
       this.$emit('sticker-upload-failed', e)
     },
-    onEmoji (emoji) {
-      const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
+    onEmoji(emoji) {
+      const value = emoji.imageUrl
+        ? `:${emoji.displayText}:`
+        : emoji.replacement
       this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
     },
-    onScroll (e) {
+    onScroll(e) {
       const target = (e && e.target) || this.$refs['emoji-groups']
       this.updateScrolledClass(target)
       this.scrolledGroup(target)
       this.triggerLoadMore(target)
     },
-    onWheel (e) {
+    onWheel(e) {
       e.preventDefault()
       this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
     },
-    highlight (key) {
+    highlight(key) {
       this.setShowStickers(false)
       this.activeGroup = key
     },
-    updateScrolledClass (target) {
+    updateScrolledClass(target) {
       if (target.scrollTop <= 5) {
         this.groupsScrolledClass = 'scrolled-top'
       } else if (target.scrollTop >= target.scrollTopMax - 5) {
@@ -79,7 +79,7 @@ const EmojiPicker = {
         this.groupsScrolledClass = 'scrolled-middle'
       }
     },
-    triggerLoadMore (target) {
+    triggerLoadMore(target) {
       const ref = this.$refs['group-end-custom']
       if (!ref) return
       const bottom = ref.offsetTop + ref.offsetHeight
@@ -93,15 +93,16 @@ const EmojiPicker = {
       // Always load when at the very top in case there's no scroll space yet
       const atTop = scrollerTop < 5
       // Don't load when looking at unicode category or at the very bottom
-      const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
+      const bottomAboveViewport =
+        bottom < scrollerTop || scrollerBottom === scrollerMax
       if (!bottomAboveViewport && (approachingBottom || atTop)) {
         this.loadEmoji()
       }
     },
-    scrolledGroup (target) {
+    scrolledGroup(target) {
       const top = target.scrollTop + 5
       this.$nextTick(() => {
-        this.emojisView.forEach(group => {
+        this.emojisView.forEach((group) => {
           const ref = this.$refs['group-' + group.id]
           if (ref.offsetTop <= top) {
             this.activeGroup = group.id
@@ -109,8 +110,9 @@ const EmojiPicker = {
         })
       })
     },
-    loadEmoji () {
-      const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
+    loadEmoji() {
+      const allLoaded =
+        this.customEmojiBuffer.length === this.filteredEmoji.length
 
       if (allLoaded) {
         return
@@ -118,7 +120,7 @@ const EmojiPicker = {
 
       this.customEmojiBufferSlice += LOAD_EMOJI_BY
     },
-    startEmojiLoad (forceUpdate = false) {
+    startEmojiLoad(forceUpdate = false) {
       if (!forceUpdate) {
         this.keyword = ''
       }
@@ -132,46 +134,47 @@ const EmojiPicker = {
       }
       this.customEmojiBufferSlice = LOAD_EMOJI_BY
     },
-    toggleStickers () {
+    toggleStickers() {
       this.showingStickers = !this.showingStickers
     },
-    setShowStickers (value) {
+    setShowStickers(value) {
       this.showingStickers = value
     },
-    filterByKeyword (list) {
+    filterByKeyword(list) {
       if (this.keyword === '') return list
       const regex = new RegExp(escapeRegExp(trim(this.keyword)), 'i')
-      return list.filter(emoji => {
-        return (regex.test(emoji.displayText) || (!emoji.imageUrl && emoji.replacement === this.keyword))
+      return list.filter((emoji) => {
+        return (
+          regex.test(emoji.displayText) ||
+          (!emoji.imageUrl && emoji.replacement === this.keyword)
+        )
       })
     }
   },
   watch: {
-    keyword () {
+    keyword() {
       this.customEmojiLoadAllConfirmed = false
       this.onScroll()
       this.startEmojiLoad(true)
     }
   },
   computed: {
-    activeGroupView () {
+    activeGroupView() {
       return this.showingStickers ? '' : this.activeGroup
     },
-    stickersAvailable () {
+    stickersAvailable() {
       if (this.$store.state.instance.stickers) {
         return this.$store.state.instance.stickers.length > 0
       }
       return 0
     },
-    filteredEmoji () {
-      return this.filterByKeyword(
-        this.$store.state.instance.customEmoji || []
-      )
+    filteredEmoji() {
+      return this.filterByKeyword(this.$store.state.instance.customEmoji || [])
     },
-    customEmojiBuffer () {
+    customEmojiBuffer() {
       return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
     },
-    emojis () {
+    emojis() {
       const standardEmojis = this.$store.state.instance.emoji || []
       const customEmojis = this.sortedEmoji
       const emojiPacks = []
@@ -195,7 +198,7 @@ const EmojiPicker = {
         }
       ].concat(emojiPacks)
     },
-    sortedEmoji () {
+    sortedEmoji() {
       const customEmojis = this.$store.state.instance.customEmoji || []
       const sortedEmojiGroups = new Map()
       customEmojis.forEach((emoji) => {
@@ -207,19 +210,22 @@ const EmojiPicker = {
       })
       return new Map([...sortedEmojiGroups.entries()].sort())
     },
-    emojisView () {
+    emojisView() {
       if (this.keyword === '') {
-        return this.emojis.filter(pack => {
+        return this.emojis.filter((pack) => {
           return pack.id === this.activeGroup
         })
       } else {
-        return this.emojis.filter(pack => {
+        return this.emojis.filter((pack) => {
           return pack.emojis.length > 0
         })
       }
     },
-    stickerPickerEnabled () {
-      return (this.$store.state.instance.stickers || []).length !== 0 && this.enableStickerPicker
+    stickerPickerEnabled() {
+      return (
+        (this.$store.state.instance.stickers || []).length !== 0 &&
+        this.enableStickerPicker
+      )
     }
   }
 }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 00ffb9d2b..320da52e5 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -2,9 +2,9 @@
   <div class="emoji-picker panel panel-default panel-body">
     <div class="heading">
       <span
+        ref="emoji-tabs"
         class="emoji-tabs"
         @wheel="onWheel"
-        ref="emoji-tabs"
       >
         <span
           v-for="group in emojis"
@@ -17,16 +17,18 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
-          <span v-if="!group.first.imageUrl">{{ group.first.replacement }}</span>
+          <span v-if="!group.first.imageUrl">{{
+            group.first.replacement
+          }}</span>
           <img
             v-else
             :src="group.first.imageUrl"
-          >
+          />
         </span>
         <span
           v-if="stickerPickerEnabled"
           class="stickers-tab-icon emoji-tabs-item"
-          :class="{active: showingStickers}"
+          :class="{ active: showingStickers }"
           :title="$t('emoji.stickers')"
           @click.prevent="toggleStickers"
         >
@@ -40,7 +42,7 @@
     <div class="content">
       <div
         class="emoji-content"
-        :class="{hidden: showingStickers}"
+        :class="{ hidden: showingStickers }"
       >
         <div class="emoji-search">
           <input
@@ -49,7 +51,7 @@
             class="form-control"
             :placeholder="$t('emoji.search_emoji')"
             @input="$event.target.composing = false"
-          >
+          />
         </div>
         <div
           ref="emoji-groups"
@@ -79,7 +81,7 @@
               <img
                 v-else
                 :src="emoji.imageUrl"
-              >
+              />
             </span>
             <span :ref="'group-end-' + group.id" />
           </div>
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index 06e21f6e6..634bcac88 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -14,18 +14,20 @@ const EmojiReactions = {
     showAll: false
   }),
   computed: {
-    tooManyReactions () {
+    tooManyReactions() {
       return this.status.emoji_reactions.length > EMOJI_REACTION_COUNT_CUTOFF
     },
-    emojiReactions () {
+    emojiReactions() {
       return this.showAll
         ? this.status.emoji_reactions
         : this.status.emoji_reactions.slice(0, EMOJI_REACTION_COUNT_CUTOFF)
     },
-    showMoreString () {
-      return `+${this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF}`
+    showMoreString() {
+      return `+${
+        this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF
+      }`
     },
-    accountsForEmoji () {
+    accountsForEmoji() {
       return this.status.emoji_reactions.reduce((acc, reaction) => {
         if (reaction.url) {
           acc[reaction.url] = reaction.accounts || []
@@ -35,30 +37,30 @@ const EmojiReactions = {
         return acc
       }, {})
     },
-    loggedIn () {
+    loggedIn() {
       return !!this.$store.state.users.currentUser
     }
   },
   methods: {
-    toggleShowAll () {
+    toggleShowAll() {
       this.showAll = !this.showAll
     },
-    reactedWith (emoji) {
-      return this.status.emoji_reactions.find(r => r.name === emoji).me
+    reactedWith(emoji) {
+      return this.status.emoji_reactions.find((r) => r.name === emoji).me
     },
-    fetchEmojiReactionsByIfMissing () {
-      const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
+    fetchEmojiReactionsByIfMissing() {
+      const hasNoAccounts = this.status.emoji_reactions.find((r) => !r.accounts)
       if (hasNoAccounts) {
         this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
       }
     },
-    reactWith (emoji) {
+    reactWith(emoji) {
       this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
     },
-    unreact (emoji) {
+    unreact(emoji) {
       this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
     },
-    emojiOnClick (emoji, event) {
+    emojiOnClick(emoji, event) {
       if (!this.loggedIn) return
 
       if (this.reactedWith(emoji)) {
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index d9c568f6d..a717f72cf 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,25 +1,26 @@
 <template>
   <div class="emoji-reactions">
     <UserListPopover
-      v-for="(reaction) in emojiReactions"
+      v-for="reaction in emojiReactions"
       :key="reaction.url || reaction.name"
       :users="accountsForEmoji[reaction.url || reaction.name]"
     >
       <button
         class="emoji-reaction btn button-default"
-        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{
+          'picked-reaction': reactedWith(reaction.name),
+          'not-clickable': !loggedIn
+        }"
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-        <span
-          v-if="reaction.url !== null"
-        >
+        <span v-if="reaction.url !== null">
           <img
             :src="reaction.url"
             :title="reaction.name"
             class="reaction-emoji"
             width="2.55em"
-          >
+          />
           {{ reaction.count }}
         </span>
         <span v-else>
@@ -41,7 +42,7 @@
   </div>
 </template>
 
-<script src="./emoji_reactions.js" ></script>
+<script src="./emoji_reactions.js"></script>
 <style lang="scss">
 @import '../../_variables.scss';
 
@@ -97,5 +98,4 @@
   margin-left: -1px; // offset the border, can't use inset shadows either
   margin-right: calc(0.5em - 1px);
 }
-
 </style>
diff --git a/src/components/exporter/exporter.js b/src/components/exporter/exporter.js
index fc75372e3..f65b47edd 100644
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@@ -1,9 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
 const Exporter = {
   props: {
@@ -18,26 +16,30 @@ const Exporter = {
     exportButtonLabel: { type: String },
     processingMessage: { type: String }
   },
-  data () {
+  data() {
     return {
       processing: false
     }
   },
   methods: {
-    process () {
+    process() {
       this.processing = true
-      this.getContent()
-        .then((content) => {
-          const fileToDownload = document.createElement('a')
-          fileToDownload.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content))
-          fileToDownload.setAttribute('download', this.filename)
-          fileToDownload.style.display = 'none'
-          document.body.appendChild(fileToDownload)
-          fileToDownload.click()
-          document.body.removeChild(fileToDownload)
-          // Add delay before hiding processing state since browser takes some time to handle file download
-          setTimeout(() => { this.processing = false }, 2000)
-        })
+      this.getContent().then((content) => {
+        const fileToDownload = document.createElement('a')
+        fileToDownload.setAttribute(
+          'href',
+          'data:text/plain;charset=utf-8,' + encodeURIComponent(content)
+        )
+        fileToDownload.setAttribute('download', this.filename)
+        fileToDownload.style.display = 'none'
+        document.body.appendChild(fileToDownload)
+        fileToDownload.click()
+        document.body.removeChild(fileToDownload)
+        // Add delay before hiding processing state since browser takes some time to handle file download
+        setTimeout(() => {
+          this.processing = false
+        }, 2000)
+      })
     }
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 4bc6144cc..8b950c88d 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -35,7 +35,7 @@ const ExtraButtons = {
     Popover,
     ConfirmModal
   },
-  data () {
+  data() {
     return {
       expanded: false,
       showingDeleteDialog: false,
@@ -43,154 +43,205 @@ const ExtraButtons = {
     }
   },
   methods: {
-    deleteStatus () {
+    deleteStatus() {
       if (this.shouldConfirmDelete) {
         this.showDeleteStatusConfirmDialog()
       } else {
         this.doDeleteStatus()
       }
     },
-    doDeleteStatus () {
+    doDeleteStatus() {
       this.$store.dispatch('deleteStatus', { id: this.status.id })
       this.hideDeleteStatusConfirmDialog()
     },
-    showDeleteStatusConfirmDialog () {
+    showDeleteStatusConfirmDialog() {
       this.showingDeleteDialog = true
     },
-    hideDeleteStatusConfirmDialog () {
+    hideDeleteStatusConfirmDialog() {
       this.showingDeleteDialog = false
     },
-    translateStatus () {
+    translateStatus() {
       if (this.noTranslationTargetSet) {
-        this.$store.dispatch('pushGlobalNotice', { messageKey: 'toast.no_translation_target_set', level: 'info' })
+        this.$store.dispatch('pushGlobalNotice', {
+          messageKey: 'toast.no_translation_target_set',
+          level: 'info'
+        })
       }
-      const translateTo = this.$store.getters.mergedConfig.translationLanguage || this.$store.state.instance.interfaceLanguage
-      this.$store.dispatch('translateStatus', { id: this.status.id, language: translateTo })
+      const translateTo =
+        this.$store.getters.mergedConfig.translationLanguage ||
+        this.$store.state.instance.interfaceLanguage
+      this.$store
+        .dispatch('translateStatus', {
+          id: this.status.id,
+          language: translateTo
+        })
         .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
     },
-    pinStatus () {
-      this.$store.dispatch('pinStatus', this.status.id)
+    pinStatus() {
+      this.$store
+        .dispatch('pinStatus', this.status.id)
         .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
     },
-    unpinStatus () {
-      this.$store.dispatch('unpinStatus', this.status.id)
+    unpinStatus() {
+      this.$store
+        .dispatch('unpinStatus', this.status.id)
         .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
     },
-    muteConversation () {
-      this.$store.dispatch('muteConversation', this.status.id)
+    muteConversation() {
+      this.$store
+        .dispatch('muteConversation', this.status.id)
         .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
     },
-    unmuteConversation () {
-      this.$store.dispatch('unmuteConversation', this.status.id)
+    unmuteConversation() {
+      this.$store
+        .dispatch('unmuteConversation', this.status.id)
         .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
     },
-    copyLink () {
-      navigator.clipboard.writeText(this.statusLink)
+    copyLink() {
+      navigator.clipboard
+        .writeText(this.statusLink)
         .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
     },
-    bookmarkStatus () {
-      this.$store.dispatch('bookmark', { id: this.status.id })
+    bookmarkStatus() {
+      this.$store
+        .dispatch('bookmark', { id: this.status.id })
         .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
     },
-    unbookmarkStatus () {
-      this.$store.dispatch('unbookmark', { id: this.status.id })
+    unbookmarkStatus() {
+      this.$store
+        .dispatch('unbookmark', { id: this.status.id })
         .then(() => this.$emit('onSuccess'))
-        .catch(err => this.$emit('onError', err.error.error))
+        .catch((err) => this.$emit('onError', err.error.error))
     },
-    reportStatus () {
-      this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
+    reportStatus() {
+      this.$store.dispatch('openUserReportingModal', {
+        userId: this.status.user.id,
+        statusIds: [this.status.id]
+      })
     },
-    editStatus () {
-      this.$store.dispatch('fetchStatusSource', { id: this.status.id })
-        .then(data => this.$store.dispatch('openEditStatusModal', {
-          statusId: this.status.id,
-          subject: data.spoiler_text,
-          statusText: data.text,
-          statusIsSensitive: this.status.nsfw,
-          statusPoll: this.status.poll,
-          statusFiles: [...this.status.attachments],
-          visibility: this.status.visibility,
-          statusContentType: data.content_type
-        }))
+    editStatus() {
+      this.$store
+        .dispatch('fetchStatusSource', { id: this.status.id })
+        .then((data) =>
+          this.$store.dispatch('openEditStatusModal', {
+            statusId: this.status.id,
+            subject: data.spoiler_text,
+            statusText: data.text,
+            statusIsSensitive: this.status.nsfw,
+            statusPoll: this.status.poll,
+            statusFiles: [...this.status.attachments],
+            visibility: this.status.visibility,
+            statusContentType: data.content_type
+          })
+        )
     },
-    showStatusHistory () {
+    showStatusHistory() {
       const originalStatus = { ...this.status }
-      const stripFieldsList = ['attachments', 'created_at', 'emojis', 'text', 'raw_html', 'nsfw', 'poll', 'summary', 'summary_raw_html']
-      stripFieldsList.forEach(p => delete originalStatus[p])
+      const stripFieldsList = [
+        'attachments',
+        'created_at',
+        'emojis',
+        'text',
+        'raw_html',
+        'nsfw',
+        'poll',
+        'summary',
+        'summary_raw_html'
+      ]
+      stripFieldsList.forEach((p) => delete originalStatus[p])
       this.$store.dispatch('openStatusHistoryModal', originalStatus)
     },
-    redraftStatus () {
+    redraftStatus() {
       if (this.shouldConfirmDelete) {
         this.showRedraftStatusConfirmDialog()
       } else {
         this.doRedraftStatus()
       }
     },
-    doRedraftStatus () {
-      this.$store.dispatch('fetchStatusSource', { id: this.status.id })
-        .then(data => this.$store.dispatch('openPostStatusModal', {
-          isRedraft: true,
-          statusId: this.status.id,
-          subject: data.spoiler_text,
-          statusText: data.text,
-          statusIsSensitive: this.status.nsfw,
-          statusPoll: this.status.poll,
-          statusFiles: [...this.status.attachments],
-          statusScope: this.status.visibility,
-          statusContentType: data.content_type
-        }))
+    doRedraftStatus() {
+      this.$store
+        .dispatch('fetchStatusSource', { id: this.status.id })
+        .then((data) =>
+          this.$store.dispatch('openPostStatusModal', {
+            isRedraft: true,
+            statusId: this.status.id,
+            subject: data.spoiler_text,
+            statusText: data.text,
+            statusIsSensitive: this.status.nsfw,
+            statusPoll: this.status.poll,
+            statusFiles: [...this.status.attachments],
+            statusScope: this.status.visibility,
+            statusContentType: data.content_type
+          })
+        )
       this.doDeleteStatus()
     },
-    showRedraftStatusConfirmDialog () {
+    showRedraftStatusConfirmDialog() {
       this.showingRedraftDialog = true
     },
-    hideRedraftStatusConfirmDialog () {
+    hideRedraftStatusConfirmDialog() {
       this.showingRedraftDialog = false
     }
   },
   computed: {
-    currentUser () { return this.$store.state.users.currentUser },
-    canDelete () {
-      if (!this.currentUser) { return }
-      const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin
+    currentUser() {
+      return this.$store.state.users.currentUser
+    },
+    canDelete() {
+      if (!this.currentUser) {
+        return
+      }
+      const superuser =
+        this.currentUser.rights.moderator || this.currentUser.rights.admin
       return superuser || this.status.user.id === this.currentUser.id
     },
-    ownStatus () {
+    ownStatus() {
       return this.status.user.id === this.currentUser.id
     },
-    canPin () {
-      return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
+    canPin() {
+      return (
+        this.ownStatus &&
+        (this.status.visibility === 'public' ||
+          this.status.visibility === 'unlisted')
+      )
     },
-    canMute () {
+    canMute() {
       return !!this.currentUser
     },
-    canTranslate () {
+    canTranslate() {
       return this.$store.state.instance.translationEnabled === true
     },
-    noTranslationTargetSet () {
+    noTranslationTargetSet() {
       return this.$store.getters.mergedConfig.translationLanguage === undefined
     },
-    statusLink () {
+    statusLink() {
       if (this.status.is_local) {
-        return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
+        return `${this.$store.state.instance.server}${
+          this.$router.resolve({
+            name: 'conversation',
+            params: { id: this.status.id }
+          }).href
+        }`
       } else {
         return this.status.external_url
       }
     },
-    shouldConfirmDelete () {
+    shouldConfirmDelete() {
       return this.$store.getters.mergedConfig.modalOnDelete
     },
-    isEdited () {
+    isEdited() {
       return this.status.edited_at !== null
     },
-    editingAvailable () { return this.$store.state.instance.editingAvailable }
+    editingAvailable() {
+      return this.$store.state.instance.editingAvailable
+    }
   }
 }
 
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 9da2ad8c0..39c3e9b96 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -7,7 +7,7 @@
     :bound-to="{ x: 'container' }"
     remove-padding
   >
-    <template v-slot:content="{close}">
+    <template #content="{ close }">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -17,7 +17,7 @@
           <FAIcon
             fixed-width
             icon="eye-slash"
-          /><span>{{ $t("status.mute_conversation") }}</span>
+          /><span>{{ $t('status.mute_conversation') }}</span>
         </button>
         <button
           v-if="canMute && status.thread_muted"
@@ -27,7 +27,7 @@
           <FAIcon
             fixed-width
             icon="eye-slash"
-          /><span>{{ $t("status.unmute_conversation") }}</span>
+          /><span>{{ $t('status.unmute_conversation') }}</span>
         </button>
         <button
           v-if="!status.pinned && canPin"
@@ -38,7 +38,7 @@
           <FAIcon
             fixed-width
             icon="thumbtack"
-          /><span>{{ $t("status.pin") }}</span>
+          /><span>{{ $t('status.pin') }}</span>
         </button>
         <button
           v-if="status.pinned && canPin"
@@ -49,7 +49,7 @@
           <FAIcon
             fixed-width
             icon="thumbtack"
-          /><span>{{ $t("status.unpin") }}</span>
+          /><span>{{ $t('status.unpin') }}</span>
         </button>
         <button
           v-if="!status.bookmarked"
@@ -60,7 +60,7 @@
           <FAIcon
             fixed-width
             :icon="['far', 'bookmark']"
-          /><span>{{ $t("status.bookmark") }}</span>
+          /><span>{{ $t('status.bookmark') }}</span>
         </button>
         <button
           v-if="status.bookmarked"
@@ -71,7 +71,7 @@
           <FAIcon
             fixed-width
             icon="bookmark"
-          /><span>{{ $t("status.unbookmark") }}</span>
+          /><span>{{ $t('status.unbookmark') }}</span>
         </button>
         <button
           v-if="ownStatus && editingAvailable"
@@ -82,7 +82,7 @@
           <FAIcon
             fixed-width
             icon="pen"
-          /><span>{{ $t("status.edit") }}</span>
+          /><span>{{ $t('status.edit') }}</span>
         </button>
         <button
           v-if="isEdited && editingAvailable"
@@ -93,7 +93,7 @@
           <FAIcon
             fixed-width
             icon="history"
-          /><span>{{ $t("status.edit_history") }}</span>
+          /><span>{{ $t('status.edit_history') }}</span>
         </button>
         <button
           v-if="ownStatus"
@@ -104,7 +104,7 @@
           <FAIcon
             fixed-width
             icon="file-pen"
-          /><span>{{ $t("status.redraft") }}</span>
+          /><span>{{ $t('status.redraft') }}</span>
         </button>
         <button
           v-if="canDelete"
@@ -115,7 +115,7 @@
           <FAIcon
             fixed-width
             icon="times"
-          /><span>{{ $t("status.delete") }}</span>
+          /><span>{{ $t('status.delete') }}</span>
         </button>
         <button
           class="button-default dropdown-item dropdown-item-icon"
@@ -125,7 +125,7 @@
           <FAIcon
             fixed-width
             icon="share-alt"
-          /><span>{{ $t("status.copy_link") }}</span>
+          /><span>{{ $t('status.copy_link') }}</span>
         </button>
         <a
           v-if="!status.is_local"
@@ -137,7 +137,7 @@
           <FAIcon
             fixed-width
             icon="external-link-alt"
-          /><span>{{ $t("status.external_source") }}</span>
+          /><span>{{ $t('status.external_source') }}</span>
         </a>
         <button
           class="button-default dropdown-item dropdown-item-icon"
@@ -147,7 +147,7 @@
           <FAIcon
             fixed-width
             :icon="['far', 'flag']"
-          /><span>{{ $t("user_card.report") }}</span>
+          /><span>{{ $t('user_card.report') }}</span>
         </button>
         <button
           v-if="canTranslate"
@@ -158,7 +158,7 @@
           <FAIcon
             fixed-width
             icon="globe"
-          /><span>{{ $t("status.translate") }}</span>
+          /><span>{{ $t('status.translate') }}</span>
 
           <template v-if="noTranslationTargetSet">
             <span class="dropdown-item-icon__badge warning">
@@ -172,7 +172,7 @@
         </button>
       </div>
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <button class="button-unstyled popover-trigger">
         <FAIcon
           class="fa-scale-110 fa-old-padding"
@@ -205,7 +205,7 @@
   </Popover>
 </template>
 
-<script src="./extra_buttons.js" ></script>
+<script src="./extra_buttons.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index d15699f71..58c7b1d6b 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -1,24 +1,19 @@
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faStar } from '@fortawesome/free-solid-svg-icons'
-import {
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
+import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons'
 
-library.add(
-  faStar,
-  faStarRegular
-)
+library.add(faStar, faStarRegular)
 
 const FavoriteButton = {
   props: ['status', 'loggedIn'],
-  data () {
+  data() {
     return {
       animated: false
     }
   },
   methods: {
-    favorite () {
+    favorite() {
       if (!this.status.favorited) {
         this.$store.dispatch('favorite', { id: this.status.id })
       } else {
@@ -32,8 +27,10 @@ const FavoriteButton = {
   },
   computed: {
     ...mapGetters(['mergedConfig']),
-    remoteInteractionLink () {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    remoteInteractionLink() {
+      return this.$store.getters.remoteInteractionLink({
+        statusId: this.status.id
+      })
     }
   }
 }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 7d23572ec..bf181cf9a 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -35,7 +35,7 @@
   </div>
 </template>
 
-<script src="./favorite_button.js" ></script>
+<script src="./favorite_button.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js
index e88236938..04e8b658f 100644
--- a/src/components/features_panel/features_panel.js
+++ b/src/components/features_panel/features_panel.js
@@ -2,10 +2,20 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 
 const FeaturesPanel = {
   computed: {
-    whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled },
-    mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable },
-    textlimit: function () { return this.$store.state.instance.textlimit },
-    uploadlimit: function () { return fileSizeFormatService.fileSizeFormat(this.$store.state.instance.uploadlimit) }
+    whoToFollow: function () {
+      return this.$store.state.instance.suggestionsEnabled
+    },
+    mediaProxy: function () {
+      return this.$store.state.instance.mediaProxyAvailable
+    },
+    textlimit: function () {
+      return this.$store.state.instance.textlimit
+    },
+    uploadlimit: function () {
+      return fileSizeFormatService.fileSizeFormat(
+        this.$store.state.instance.uploadlimit
+      )
+    }
   }
 }
 
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
index 0dc5ac083..2251c335d 100644
--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@@ -16,17 +16,20 @@
           </li>
           <li>{{ $t('features_panel.scope_options') }}</li>
           <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
-          <li>{{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }} {{ $t('upload.file_size_units.' + uploadlimit.unit) }}</li>
+          <li>
+            {{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }}
+            {{ $t('upload.file_size_units.' + uploadlimit.unit) }}
+          </li>
         </ul>
       </div>
     </div>
   </div>
 </template>
 
-<script src="./features_panel.js" ></script>
+<script src="./features_panel.js"></script>
 
 <style lang="scss">
-  .features-panel li {
-    line-height: 24px;
-  }
+.features-panel li {
+  line-height: 24px;
+}
 </style>
diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js
index 87f940a71..29fddba53 100644
--- a/src/components/flash/flash.js
+++ b/src/components/flash/flash.js
@@ -5,14 +5,11 @@ import {
   faExclamationTriangle
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faStop,
-  faExclamationTriangle
-)
+library.add(faStop, faExclamationTriangle)
 
 const Flash = {
-  props: [ 'src' ],
-  data () {
+  props: ['src'],
+  data() {
     return {
       player: false, // can be true, "hidden", false. hidden = element exists
       loaded: false,
@@ -20,7 +17,7 @@ const Flash = {
     }
   },
   methods: {
-    openPlayer () {
+    openPlayer() {
       if (this.player) return // prevent double-loading, or re-loading on failure
       this.player = 'hidden'
       RuffleService.getRuffle().then((ruffle) => {
@@ -32,17 +29,20 @@ const Flash = {
         container.appendChild(player)
         player.style.width = '100%'
         player.style.height = '100%'
-        player.load(this.src).then(() => {
-          this.player = true
-        }).catch((e) => {
-          console.error('Error loading ruffle', e)
-          this.player = 'error'
-        })
+        player
+          .load(this.src)
+          .then(() => {
+            this.player = true
+          })
+          .catch((e) => {
+            console.error('Error loading ruffle', e)
+            this.player = 'error'
+          })
         this.ruffleInstance = player
         this.$emit('playerOpened')
       })
     },
-    closePlayer () {
+    closePlayer() {
       this.ruffleInstance && this.ruffleInstance.remove()
       this.player = false
       this.$emit('playerClosed')
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index 443aa9bcc..6a29e005d 100644
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@@ -1,24 +1,27 @@
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
+import {
+  requestFollow,
+  requestUnfollow
+} from '../../services/follow_manipulate/follow_manipulate'
 export default {
   props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
   components: {
     ConfirmModal
   },
-  data () {
+  data() {
     return {
       inProgress: false,
       showingConfirmUnfollow: false
     }
   },
   computed: {
-    shouldConfirmUnfollow () {
+    shouldConfirmUnfollow() {
       return this.$store.getters.mergedConfig.modalOnUnfollow
     },
-    isPressed () {
+    isPressed() {
       return this.inProgress || this.relationship.following
     },
-    title () {
+    title() {
       if (this.inProgress || this.relationship.following) {
         return this.$t('user_card.follow_unfollow')
       } else if (this.relationship.requested) {
@@ -27,7 +30,7 @@ export default {
         return this.$t('user_card.follow')
       }
     },
-    label () {
+    label() {
       if (this.inProgress) {
         return this.$t('user_card.follow_progress')
       } else if (this.relationship.following) {
@@ -38,39 +41,44 @@ export default {
         return this.$t('user_card.follow')
       }
     },
-    disabled () {
+    disabled() {
       return this.inProgress || this.user.deactivated
     }
   },
   methods: {
-    showConfirmUnfollow () {
+    showConfirmUnfollow() {
       this.showingConfirmUnfollow = true
     },
-    hideConfirmUnfollow () {
+    hideConfirmUnfollow() {
       this.showingConfirmUnfollow = false
     },
-    onClick () {
-      this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
+    onClick() {
+      this.relationship.following || this.relationship.requested
+        ? this.unfollow()
+        : this.follow()
     },
-    follow () {
+    follow() {
       this.inProgress = true
       requestFollow(this.relationship.id, this.$store).then(() => {
         this.inProgress = false
       })
     },
-    unfollow () {
+    unfollow() {
       if (this.shouldConfirmUnfollow) {
         this.showConfirmUnfollow()
       } else {
         this.doUnfollow()
       }
     },
-    doUnfollow () {
+    doUnfollow() {
       const store = this.$store
       this.inProgress = true
       requestUnfollow(this.relationship.id, store).then(() => {
         this.inProgress = false
-        store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
+        store.commit('removeStatus', {
+          timeline: 'friends',
+          userId: this.relationship.id
+        })
       })
 
       this.hideConfirmUnfollow()
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index e421c15b3..a16c2dcd3 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -21,9 +21,7 @@
           tag="span"
         >
           <template #user>
-            <span
-              v-text="user.screen_name_ui"
-            />
+            <span v-text="user.screen_name_ui" />
           </template>
         </i18n-t>
       </confirm-modal>
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index b26b27a74..aa6d169cb 100644
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@@ -4,10 +4,7 @@ import FollowButton from '../follow_button/follow_button.vue'
 import RemoveFollowerButton from '../remove_follower_button/remove_follower_button.vue'
 
 const FollowCard = {
-  props: [
-    'user',
-    'noFollowsYou'
-  ],
+  props: ['user', 'noFollowsYou'],
   components: {
     BasicUserCard,
     RemoteFollow,
@@ -15,13 +12,13 @@ const FollowCard = {
     RemoveFollowerButton
   },
   computed: {
-    isMe () {
+    isMe() {
       return this.$store.state.users.currentUser.id === this.user.id
     },
-    loggedIn () {
+    loggedIn() {
       return this.$store.state.users.currentUser
     },
-    relationship () {
+    relationship() {
       return this.$store.getters.relationship(this.user.id)
     }
   }
diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index b0873bb10..38e9244a4 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -8,39 +8,41 @@ const FollowRequestCard = {
     BasicUserCard,
     ConfirmModal
   },
-  data () {
+  data() {
     return {
       showingApproveConfirmDialog: false,
       showingDenyConfirmDialog: false
     }
   },
   methods: {
-    findFollowRequestNotificationId () {
+    findFollowRequestNotificationId() {
       const notif = notificationsFromStore(this.$store).find(
-        (notif) => notif.from_profile.id === this.user.id && notif.type === 'follow_request'
+        (notif) =>
+          notif.from_profile.id === this.user.id &&
+          notif.type === 'follow_request'
       )
       return notif && notif.id
     },
-    showApproveConfirmDialog () {
+    showApproveConfirmDialog() {
       this.showingApproveConfirmDialog = true
     },
-    hideApproveConfirmDialog () {
+    hideApproveConfirmDialog() {
       this.showingApproveConfirmDialog = false
     },
-    showDenyConfirmDialog () {
+    showDenyConfirmDialog() {
       this.showingDenyConfirmDialog = true
     },
-    hideDenyConfirmDialog () {
+    hideDenyConfirmDialog() {
       this.showingDenyConfirmDialog = false
     },
-    approveUser () {
+    approveUser() {
       if (this.shouldConfirmApprove) {
         this.showApproveConfirmDialog()
       } else {
         this.doApprove()
       }
     },
-    doApprove () {
+    doApprove() {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
 
@@ -48,22 +50,23 @@ const FollowRequestCard = {
       this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
       this.$store.dispatch('updateNotification', {
         id: notifId,
-        updater: notification => {
+        updater: (notification) => {
           notification.type = 'follow'
         }
       })
       this.hideApproveConfirmDialog()
     },
-    denyUser () {
+    denyUser() {
       if (this.shouldConfirmDeny) {
         this.showDenyConfirmDialog()
       } else {
         this.doDeny()
       }
     },
-    doDeny () {
+    doDeny() {
       const notifId = this.findFollowRequestNotificationId()
-      this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
+      this.$store.state.api.backendInteractor
+        .denyUser({ id: this.user.id })
         .then(() => {
           this.$store.dispatch('dismissNotificationLocal', { id: notifId })
           this.$store.dispatch('removeFollowRequest', this.user)
@@ -72,13 +75,13 @@ const FollowRequestCard = {
     }
   },
   computed: {
-    mergedConfig () {
+    mergedConfig() {
       return this.$store.getters.mergedConfig
     },
-    shouldConfirmApprove () {
+    shouldConfirmApprove() {
       return this.mergedConfig.modalOnApproveFollow
     },
-    shouldConfirmDeny () {
+    shouldConfirmDeny() {
       return this.mergedConfig.modalOnDenyFollow
     }
   }
diff --git a/src/components/follow_requests/follow_requests.js b/src/components/follow_requests/follow_requests.js
index 704a76c66..1129c0f07 100644
--- a/src/components/follow_requests/follow_requests.js
+++ b/src/components/follow_requests/follow_requests.js
@@ -5,7 +5,7 @@ const FollowRequests = {
     FollowRequestCard
   },
   computed: {
-    requests () {
+    requests() {
       return this.$store.state.api.followRequests
     }
   }
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 92ee3f306..64166efe9 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -5,11 +5,9 @@ export default {
   components: {
     Select
   },
-  props: [
-    'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
-  ],
+  props: ['name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'],
   emits: ['update:modelValue'],
-  data () {
+  data() {
     return {
       lValue: this.modelValue,
       availableOptions: [
@@ -19,43 +17,45 @@ export default {
         'serif',
         'monospace',
         'sans-serif'
-      ].filter(_ => _)
+      ].filter((_) => _)
     }
   },
-  beforeUpdate () {
+  beforeUpdate() {
     this.lValue = this.modelValue
   },
   computed: {
-    present () {
+    present() {
       return typeof this.lValue !== 'undefined'
     },
-    dValue () {
+    dValue() {
       return this.lValue || this.fallback || {}
     },
     family: {
-      get () {
+      get() {
         return this.dValue.family
       },
-      set (v) {
+      set(v) {
         set(this.lValue, 'family', v)
         this.$emit('update:modelValue', this.lValue)
       }
     },
-    isCustom () {
+    isCustom() {
       return this.preset === 'custom'
     },
     preset: {
-      get () {
-        if (this.family === 'serif' ||
-            this.family === 'sans-serif' ||
-            this.family === 'monospace' ||
-            this.family === 'inherit') {
+      get() {
+        if (
+          this.family === 'serif' ||
+          this.family === 'sans-serif' ||
+          this.family === 'monospace' ||
+          this.family === 'inherit'
+        ) {
           return this.family
         } else {
           return 'custom'
         }
       },
-      set (v) {
+      set(v) {
         this.family = v === 'custom' ? '' : v
       }
     }
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index f100c3a9f..3a9a755f6 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -15,8 +15,13 @@
       class="opt exlcude-disabled"
       type="checkbox"
       :checked="present"
-      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
-    >
+      @change="
+        $emit(
+          'update:modelValue',
+          typeof modelValue === 'undefined' ? fallback : undefined
+        )
+      "
+    />
     <label
       v-if="typeof fallback !== 'undefined'"
       class="opt-l"
@@ -43,11 +48,11 @@
       v-model="family"
       class="custom-font"
       type="text"
-    >
+    />
   </div>
 </template>
 
-<script src="./font_control.js" ></script>
+<script src="./font_control.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/friends_timeline/friends_timeline.js b/src/components/friends_timeline/friends_timeline.js
index 948b23a49..252602093 100644
--- a/src/components/friends_timeline/friends_timeline.js
+++ b/src/components/friends_timeline/friends_timeline.js
@@ -4,7 +4,9 @@ const FriendsTimeline = {
     Timeline
   },
   computed: {
-    timeline () { return this.$store.state.statuses.timelines.friends }
+    timeline() {
+      return this.$store.state.statuses.timelines.friends
+    }
   }
 }
 
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 4e1bda55f..7cd43157e 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -17,7 +17,7 @@ const Gallery = {
     'editAttachment',
     'grid'
   ],
-  data () {
+  data() {
     return {
       sizes: {},
       hidingLong: true
@@ -25,42 +25,61 @@ const Gallery = {
   },
   components: { Attachment },
   computed: {
-    rows () {
+    rows() {
       if (!this.attachments) {
         return []
       }
-      const attachments = this.limit > 0
-        ? this.attachments.slice(0, this.limit)
-        : this.attachments
+      const attachments =
+        this.limit > 0
+          ? this.attachments.slice(0, this.limit)
+          : this.attachments
       if (this.size === 'hide') {
-        return attachments.map(item => ({ minimal: true, items: [item] }))
+        return attachments.map((item) => ({ minimal: true, items: [item] }))
       }
       const rows = this.grid
         ? [{ grid: true, items: attachments }]
-        : attachments.reduce((acc, attachment, i) => {
-          if (attachment.mimetype.includes('audio')) {
-            return [...acc, { audio: true, items: [attachment] }, { items: [] }]
-          }
-          if (!(
-            attachment.mimetype.includes('image') ||
-              attachment.mimetype.includes('video') ||
-              attachment.mimetype.includes('flash')
-          )) {
-            return [...acc, { minimal: true, items: [attachment] }, { items: [] }]
-          }
-          const maxPerRow = 3
-          const attachmentsRemaining = this.attachments.length - i + 1
-          const currentRow = acc[acc.length - 1].items
-          currentRow.push(attachment)
-          if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) {
-            return [...acc, { items: [] }]
-          } else {
-            return acc
-          }
-        }, [{ items: [] }]).filter(_ => _.items.length > 0)
+        : attachments
+            .reduce(
+              (acc, attachment, i) => {
+                if (attachment.mimetype.includes('audio')) {
+                  return [
+                    ...acc,
+                    { audio: true, items: [attachment] },
+                    { items: [] }
+                  ]
+                }
+                if (
+                  !(
+                    attachment.mimetype.includes('image') ||
+                    attachment.mimetype.includes('video') ||
+                    attachment.mimetype.includes('flash')
+                  )
+                ) {
+                  return [
+                    ...acc,
+                    { minimal: true, items: [attachment] },
+                    { items: [] }
+                  ]
+                }
+                const maxPerRow = 3
+                const attachmentsRemaining = this.attachments.length - i + 1
+                const currentRow = acc[acc.length - 1].items
+                currentRow.push(attachment)
+                if (
+                  currentRow.length >= maxPerRow &&
+                  attachmentsRemaining > maxPerRow
+                ) {
+                  return [...acc, { items: [] }]
+                } else {
+                  return acc
+                }
+              },
+              [{ items: [] }]
+            )
+            .filter((_) => _.items.length > 0)
       return rows
     },
-    attachmentsDimensionalScore () {
+    attachmentsDimensionalScore() {
       return this.rows.reduce((acc, row) => {
         let size = 0
         if (row.minimal) {
@@ -73,7 +92,7 @@ const Gallery = {
         return acc + size
       }, 0)
     },
-    tooManyAttachments () {
+    tooManyAttachments() {
       if (this.editable || this.size === 'small') {
         return false
       } else if (this.size === 'hide') {
@@ -84,32 +103,32 @@ const Gallery = {
     }
   },
   methods: {
-    onNaturalSizeLoad ({ id, width, height }) {
+    onNaturalSizeLoad({ id, width, height }) {
       set(this.sizes, id, { width, height })
     },
-    rowStyle (row) {
+    rowStyle(row) {
       if (row.audio) {
         return { 'padding-bottom': '25%' } // fixed reduced height for audio
       } else if (!row.minimal && !row.grid) {
-        return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` }
+        return { 'padding-bottom': `${100 / (row.items.length + 0.6)}%` }
       }
     },
-    itemStyle (id, row) {
-      const total = sumBy(row, item => this.getAspectRatio(item.id))
+    itemStyle(id, row) {
+      const total = sumBy(row, (item) => this.getAspectRatio(item.id))
       return { flex: `${this.getAspectRatio(id) / total} 1 0%` }
     },
-    getAspectRatio (id) {
+    getAspectRatio(id) {
       const size = this.sizes[id]
       return size ? size.width / size.height : 1
     },
-    toggleHidingLong (event) {
+    toggleHidingLong(event) {
       this.hidingLong = event
     },
-    openGallery () {
+    openGallery() {
       this.$store.dispatch('setMedia', this.attachments)
       this.$store.dispatch('setCurrentMedia', this.attachments[0])
     },
-    onMedia () {
+    onMedia() {
       this.$store.dispatch('setMedia', this.attachments)
     }
   }
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 3e0d23b63..445043831 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -25,11 +25,20 @@
             :size="size"
             :editable="editable"
             :remove="removeAttachment"
-            :shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
-            :shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
+            :shift-up="
+              !(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment
+            "
+            :shift-dn="
+              !(
+                attachmentIndex === row.items.length - 1 &&
+                rowIndex === rows.length - 1
+              ) && shiftDnAttachment
+            "
             :edit="editAttachment"
             :description="descriptions && descriptions[attachment.id]"
-            :hide-description="size === 'small' || tooManyAttachments && hidingLong"
+            :hide-description="
+              size === 'small' || (tooManyAttachments && hidingLong)
+            "
             :style="itemStyle(attachment.id, row.items)"
             @setMedia="onMedia"
             @naturalSizeLoad="onNaturalSizeLoad"
@@ -42,7 +51,7 @@
       class="many-attachments"
     >
       <div class="many-attachments-text">
-        {{ $t("status.many_attachments", { number: attachments.length }) }}
+        {{ $t('status.many_attachments', { number: attachments.length }) }}
       </div>
       <div class="many-attachments-buttons">
         <span
@@ -53,7 +62,7 @@
             class="button-unstyled -link"
             @click="toggleHidingLong(true)"
           >
-            {{ $t("status.collapse_attachments") }}
+            {{ $t('status.collapse_attachments') }}
           </button>
         </span>
         <span
@@ -64,7 +73,7 @@
             class="button-unstyled -link"
             @click="toggleHidingLong(false)"
           >
-            {{ $t("status.show_all_attachments") }}
+            {{ $t('status.show_all_attachments') }}
           </button>
         </span>
         <span
@@ -75,7 +84,7 @@
             class="button-unstyled -link"
             @click="openGallery"
           >
-            {{ $t("status.open_gallery") }}
+            {{ $t('status.open_gallery') }}
           </button>
         </span>
       </div>
@@ -83,7 +92,7 @@
   </div>
 </template>
 
-<script src='./gallery.js'></script>
+<script src="./gallery.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -109,8 +118,8 @@
     .gallery-rows {
       max-height: 25em;
       overflow: hidden;
-      mask:
-        linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+      mask: linear-gradient(to top, white, transparent) bottom/100% 70px
+          no-repeat,
         linear-gradient(to top, white, white);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
diff --git a/src/components/global_notice_list/global_notice_list.js b/src/components/global_notice_list/global_notice_list.js
index e93fba752..471f5840e 100644
--- a/src/components/global_notice_list/global_notice_list.js
+++ b/src/components/global_notice_list/global_notice_list.js
@@ -1,20 +1,16 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes
-)
+library.add(faTimes)
 
 const GlobalNoticeList = {
   computed: {
-    notices () {
+    notices() {
       return this.$store.state.interface.globalNotices
     }
   },
   methods: {
-    closeNotice (notice) {
+    closeNotice(notice) {
       this.$store.dispatch('removeGlobalNotice', notice)
     }
   }
diff --git a/src/components/hashtag_link/hashtag_link.js b/src/components/hashtag_link/hashtag_link.js
index a2433c2ab..6914c2618 100644
--- a/src/components/hashtag_link/hashtag_link.js
+++ b/src/components/hashtag_link/hashtag_link.js
@@ -18,7 +18,7 @@ const HashtagLink = {
     }
   },
   methods: {
-    onClick () {
+    onClick() {
       const tag = this.tag || extractTagFromUrl(this.url)
       if (tag) {
         const link = this.generateTagLink(tag)
@@ -27,7 +27,7 @@ const HashtagLink = {
         window.open(this.url, '_blank')
       }
     },
-    generateTagLink (tag) {
+    generateTagLink(tag) {
       return `/tag/${tag}`
     }
   }
diff --git a/src/components/hashtag_link/hashtag_link.vue b/src/components/hashtag_link/hashtag_link.vue
index 918ed26be..ea521c57f 100644
--- a/src/components/hashtag_link/hashtag_link.vue
+++ b/src/components/hashtag_link/hashtag_link.vue
@@ -1,7 +1,5 @@
 <template>
-  <span
-    class="HashtagLink"
-  >
+  <span class="HashtagLink">
     <!-- eslint-disable vue/no-v-html -->
     <a
       :href="url"
@@ -14,6 +12,6 @@
   </span>
 </template>
 
-<script src="./hashtag_link.js"/>
+<script src="./hashtag_link.js" />
 
-<style lang="scss" src="./hashtag_link.scss"/>
+<style lang="scss" src="./hashtag_link.scss" />
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 05f6fd4cf..e5b9d66d5 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -1,13 +1,9 @@
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
 const ImageCropper = {
   props: {
@@ -21,7 +17,7 @@ const ImageCropper = {
     },
     cropperOptions: {
       type: Object,
-      default () {
+      default() {
         return {
           aspectRatio: 1,
           autoCropArea: 1,
@@ -46,7 +42,7 @@ const ImageCropper = {
       type: String
     }
   },
-  data () {
+  data() {
     return {
       cropper: undefined,
       dataUrl: undefined,
@@ -55,18 +51,21 @@ const ImageCropper = {
     }
   },
   computed: {
-    saveText () {
+    saveText() {
       return this.saveButtonLabel || this.$t('image_cropper.save')
     },
-    saveWithoutCroppingText () {
-      return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
+    saveWithoutCroppingText() {
+      return (
+        this.saveWithoutCroppingButtonlabel ||
+        this.$t('image_cropper.save_without_cropping')
+      )
     },
-    cancelText () {
+    cancelText() {
       return this.cancelButtonLabel || this.$t('image_cropper.cancel')
     }
   },
   methods: {
-    destroy () {
+    destroy() {
       if (this.cropper) {
         this.cropper.destroy()
       }
@@ -74,7 +73,7 @@ const ImageCropper = {
       this.dataUrl = undefined
       this.$emit('close')
     },
-    submit (cropping = true) {
+    submit(cropping = true) {
       this.submitting = true
       this.submitHandler(cropping && this.cropper, this.file)
         .then(() => this.destroy())
@@ -82,16 +81,18 @@ const ImageCropper = {
           this.submitting = false
         })
     },
-    pickImage () {
+    pickImage() {
       this.$refs.input.click()
     },
-    createCropper () {
+    createCropper() {
       this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
     },
-    getTriggerDOM () {
-      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
+    getTriggerDOM() {
+      return typeof this.trigger === 'object'
+        ? this.trigger
+        : document.querySelector(this.trigger)
     },
-    readFile () {
+    readFile() {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
         this.file = fileInput.files[0]
@@ -105,7 +106,7 @@ const ImageCropper = {
       }
     }
   },
-  mounted () {
+  mounted() {
     // listen for click event on trigger
     const trigger = this.getTriggerDOM()
     if (!trigger) {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 8c48a3876..cb4985342 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -7,7 +7,7 @@
           :src="dataUrl"
           alt=""
           @load.stop="createCropper"
-        >
+        />
       </div>
       <div class="image-cropper-buttons-wrapper">
         <button
@@ -43,7 +43,7 @@
       type="file"
       class="image-cropper-img-input"
       :accept="mimes"
-    >
+    />
   </div>
 </template>
 
diff --git a/src/components/importer/importer.js b/src/components/importer/importer.js
index da86a223c..fd6d7fb4b 100644
--- a/src/components/importer/importer.js
+++ b/src/components/importer/importer.js
@@ -1,13 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch,
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faTimes } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch,
-  faTimes
-)
+library.add(faCircleNotch, faTimes)
 
 const Importer = {
   props: {
@@ -19,7 +13,7 @@ const Importer = {
     successMessage: { type: String },
     errorMessage: { type: String }
   },
-  data () {
+  data() {
     return {
       file: null,
       error: false,
@@ -28,18 +22,24 @@ const Importer = {
     }
   },
   methods: {
-    change () {
+    change() {
       this.file = this.$refs.input.files[0]
     },
-    submit () {
+    submit() {
       this.dismiss()
       this.submitting = true
       this.submitHandler(this.file)
-        .then(() => { this.success = true })
-        .catch(() => { this.error = true })
-        .finally(() => { this.submitting = false })
+        .then(() => {
+          this.success = true
+        })
+        .catch(() => {
+          this.error = true
+        })
+        .finally(() => {
+          this.submitting = false
+        })
     },
-    dismiss () {
+    dismiss() {
       this.success = false
       this.error = false
     }
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index 2a63b31ac..9800a4e93 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -5,7 +5,7 @@
         ref="input"
         type="file"
         @change="change"
-      >
+      />
     </form>
     <FAIcon
       v-if="submitting"
@@ -25,9 +25,7 @@
         class="button-unstyled"
         @click="dismiss"
       >
-        <FAIcon
-          icon="times"
-        />
+        <FAIcon icon="times" />
       </button>
       {{ ' ' }}
       <span>{{ successMessage || $t('importer.success') }}</span>
@@ -37,9 +35,7 @@
         class="button-unstyled"
         @click="dismiss"
       >
-        <FAIcon
-          icon="times"
-        />
+        <FAIcon icon="times" />
       </button>
       {{ ' ' }}
       <span>{{ errorMessage || $t('importer.error') }}</span>
diff --git a/src/components/instance_specific_panel/instance_specific_panel.js b/src/components/instance_specific_panel/instance_specific_panel.js
index 09e3d0557..8ee841512 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.js
+++ b/src/components/instance_specific_panel/instance_specific_panel.js
@@ -1,6 +1,6 @@
 const InstanceSpecificPanel = {
   computed: {
-    instanceSpecificPanelContent () {
+    instanceSpecificPanelContent() {
       return this.$store.state.instance.instanceSpecificPanelContent
     }
   }
diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue
index 7448ca06f..c8ed0a2de 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.vue
+++ b/src/components/instance_specific_panel/instance_specific_panel.vue
@@ -10,4 +10,4 @@
   </div>
 </template>
 
-<script src="./instance_specific_panel.js" ></script>
+<script src="./instance_specific_panel.js"></script>
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index c5ceb63d7..dc3286835 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -9,14 +9,15 @@ const tabModeDict = {
 }
 
 const Interactions = {
-  data () {
+  data() {
     return {
-      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
+      allowFollowingMove:
+        this.$store.state.users.currentUser.allow_following_move,
       filterMode: tabModeDict['mentions']
     }
   },
   methods: {
-    onModeSwitch (key) {
+    onModeSwitch(key) {
       this.filterMode = tabModeDict[key]
     }
   },
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index 57d5d87c3..e7c8a5be4 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -2,7 +2,7 @@
   <div class="panel panel-default">
     <div class="panel-heading">
       <div class="title">
-        {{ $t("nav.interactions") }}
+        {{ $t('nav.interactions') }}
       </div>
     </div>
     <tab-switcher
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index e9ebb97ab..87f5b3be8 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -51,12 +51,14 @@ export default {
     }
   },
   computed: {
-    languages () {
+    languages() {
       return localeService.languages
     },
 
     controlledLanguage: {
-      get: function () { return this.language },
+      get: function () {
+        return this.language
+      },
       set: function (val) {
         this.setLanguage(val)
       }
@@ -64,7 +66,7 @@ export default {
   },
 
   methods: {
-    getLanguageName (code) {
+    getLanguageName(code) {
       return localeService.getLanguageName(code)
     }
   }
diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js
index add7c5631..64387b2c1 100644
--- a/src/components/link-preview/link-preview.js
+++ b/src/components/link-preview/link-preview.js
@@ -2,37 +2,31 @@ import { mapGetters } from 'vuex'
 
 const LinkPreview = {
   name: 'LinkPreview',
-  props: [
-    'card',
-    'size',
-    'nsfw'
-  ],
-  data () {
+  props: ['card', 'size', 'nsfw'],
+  data() {
     return {
       imageLoaded: false
     }
   },
   computed: {
-    useImage () {
+    useImage() {
       // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
       // as it makes sure to hide the image if somehow NSFW tagged preview can
       // exist.
       return this.card.image && !this.censored && this.size !== 'hide'
     },
-    censored () {
+    censored() {
       return this.nsfw && this.hideNsfwConfig
     },
-    useDescription () {
+    useDescription() {
       return this.card.description && /\S/.test(this.card.description)
     },
-    hideNsfwConfig () {
+    hideNsfwConfig() {
       return this.mergedConfig.hideNsfw
     },
-    ...mapGetters([
-      'mergedConfig'
-    ])
+    ...mapGetters(['mergedConfig'])
   },
-  created () {
+  created() {
     if (this.useImage) {
       const newImg = new Image()
       newImg.onload = () => {
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 220527f29..558f20985 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -10,21 +10,24 @@
         v-if="useImage && imageLoaded"
         class="card-image"
       >
-        <img :src="card.image">
+        <img :src="card.image" />
       </div>
       <div class="card-content">
         <span class="card-host faint">
           <span
             v-if="censored"
             class="nsfw-alert alert warning"
-          >{{ $t('status.nsfw') }}</span>
+            >{{ $t('status.nsfw') }}</span
+          >
           {{ card.provider_name }}
         </span>
         <h4 class="card-title">{{ card.title }}</h4>
         <p
           v-if="useDescription"
           class="card-description"
-        >{{ card.description }}</p>
+        >
+          {{ card.description }}
+        </p>
       </div>
     </a>
   </div>
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index a6223cce6..614cdfd06 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -28,7 +28,7 @@ export default {
     },
     getKey: {
       type: Function,
-      default: item => item.id
+      default: (item) => item.id
     }
   }
 }
diff --git a/src/components/list_card/list_card.js b/src/components/list_card/list_card.js
index 4668db0e5..5c607db5b 100644
--- a/src/components/list_card/list_card.js
+++ b/src/components/list_card/list_card.js
@@ -1,16 +1,10 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faEllipsisH
-} from '@fortawesome/free-solid-svg-icons'
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faEllipsisH
-)
+library.add(faEllipsisH)
 
 const ListCard = {
-  props: [
-    'list'
-  ]
+  props: ['list']
 }
 
 export default ListCard
diff --git a/src/components/list_edit/list_edit.js b/src/components/list_edit/list_edit.js
index 9d8285060..6c63cf591 100644
--- a/src/components/list_edit/list_edit.js
+++ b/src/components/list_edit/list_edit.js
@@ -3,15 +3,9 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import ListUserSearch from '../list_user_search/list_user_search.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faSearch,
-  faChevronLeft
-)
+library.add(faSearch, faChevronLeft)
 
 const ListNew = {
   components: {
@@ -19,69 +13,74 @@ const ListNew = {
     UserAvatar,
     ListUserSearch
   },
-  data () {
+  data() {
     return {
       title: '',
       userIds: [],
       selectedUserIds: []
     }
   },
-  created () {
-    this.$store.dispatch('fetchList', { id: this.id })
-      .then(() => { this.title = this.findListTitle(this.id) })
-    this.$store.dispatch('fetchListAccounts', { id: this.id })
-      .then(() => {
-        this.selectedUserIds = this.findListAccounts(this.id)
-        this.selectedUserIds.forEach(userId => {
-          this.$store.dispatch('fetchUserIfMissing', userId)
-        })
+  created() {
+    this.$store.dispatch('fetchList', { id: this.id }).then(() => {
+      this.title = this.findListTitle(this.id)
+    })
+    this.$store.dispatch('fetchListAccounts', { id: this.id }).then(() => {
+      this.selectedUserIds = this.findListAccounts(this.id)
+      this.selectedUserIds.forEach((userId) => {
+        this.$store.dispatch('fetchUserIfMissing', userId)
       })
+    })
   },
   computed: {
-    id () {
+    id() {
       return this.$route.params.id
     },
-    users () {
-      return this.userIds.map(userId => this.findUser(userId))
+    users() {
+      return this.userIds.map((userId) => this.findUser(userId))
     },
-    selectedUsers () {
-      return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
+    selectedUsers() {
+      return this.selectedUserIds
+        .map((userId) => this.findUser(userId))
+        .filter((user) => user)
     },
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
     }),
     ...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
   },
   methods: {
-    onInput () {
+    onInput() {
       this.search(this.query)
     },
-    selectUser (user) {
+    selectUser(user) {
       if (this.selectedUserIds.includes(user.id)) {
         this.removeUser(user.id)
       } else {
         this.addUser(user)
       }
     },
-    isSelected (user) {
+    isSelected(user) {
       return this.selectedUserIds.includes(user.id)
     },
-    addUser (user) {
+    addUser(user) {
       this.selectedUserIds.push(user.id)
     },
-    removeUser (userId) {
-      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    removeUser(userId) {
+      this.selectedUserIds = this.selectedUserIds.filter((id) => id !== userId)
     },
-    onResults (results) {
+    onResults(results) {
       this.userIds = results
     },
-    updateList () {
+    updateList() {
       this.$store.dispatch('setList', { id: this.id, title: this.title })
-      this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
+      this.$store.dispatch('setListAccounts', {
+        id: this.id,
+        accountIds: this.selectedUserIds
+      })
 
       this.$router.push({ name: 'list-timeline', params: { id: this.id } })
     },
-    deleteList () {
+    deleteList() {
       this.$store.dispatch('deleteList', { id: this.id })
       this.$router.push({ name: 'lists' })
     }
diff --git a/src/components/list_edit/list_edit.vue b/src/components/list_edit/list_edit.vue
index af46c4b8e..c904165fe 100644
--- a/src/components/list_edit/list_edit.vue
+++ b/src/components/list_edit/list_edit.vue
@@ -19,7 +19,7 @@
         ref="title"
         v-model="title"
         :placeholder="$t('lists.title')"
-      >
+      />
     </div>
     <div class="member-list">
       <div
diff --git a/src/components/list_new/list_new.js b/src/components/list_new/list_new.js
index 07ababe5c..e90a305be 100644
--- a/src/components/list_new/list_new.js
+++ b/src/components/list_new/list_new.js
@@ -3,15 +3,9 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import ListUserSearch from '../list_user_search/list_user_search.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faSearch,
-  faChevronLeft
-)
+library.add(faSearch, faChevronLeft)
 
 const ListNew = {
   components: {
@@ -19,7 +13,7 @@ const ListNew = {
     UserAvatar,
     ListUserSearch
   },
-  data () {
+  data() {
     return {
       title: '',
       userIds: [],
@@ -27,51 +21,53 @@ const ListNew = {
     }
   },
   computed: {
-    users () {
-      return this.userIds.map(userId => this.findUser(userId))
+    users() {
+      return this.userIds.map((userId) => this.findUser(userId))
     },
-    selectedUsers () {
-      return this.selectedUserIds.map(userId => this.findUser(userId))
+    selectedUsers() {
+      return this.selectedUserIds.map((userId) => this.findUser(userId))
     },
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
     }),
     ...mapGetters(['findUser'])
   },
   methods: {
-    goBack () {
+    goBack() {
       this.$emit('cancel')
     },
-    onInput () {
+    onInput() {
       this.search(this.query)
     },
-    selectUser (user) {
+    selectUser(user) {
       if (this.selectedUserIds.includes(user.id)) {
         this.removeUser(user.id)
       } else {
         this.addUser(user)
       }
     },
-    isSelected (user) {
+    isSelected(user) {
       return this.selectedUserIds.includes(user.id)
     },
-    addUser (user) {
+    addUser(user) {
       this.selectedUserIds.push(user.id)
     },
-    removeUser (userId) {
-      this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
+    removeUser(userId) {
+      this.selectedUserIds = this.selectedUserIds.filter((id) => id !== userId)
     },
-    onResults (results) {
+    onResults(results) {
       this.userIds = results
     },
-    createList () {
+    createList() {
       // the API has two different endpoints for "creating a list with a name"
       // and "updating the accounts on the list".
-      this.$store.dispatch('createList', { title: this.title })
-        .then((list) => {
-          this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
-          this.$router.push({ name: 'list-timeline', params: { id: list.id } })
+      this.$store.dispatch('createList', { title: this.title }).then((list) => {
+        this.$store.dispatch('setListAccounts', {
+          id: list.id,
+          accountIds: this.selectedUserIds
         })
+        this.$router.push({ name: 'list-timeline', params: { id: list.id } })
+      })
     }
   }
 }
diff --git a/src/components/list_new/list_new.vue b/src/components/list_new/list_new.vue
index a713b8522..c29e07817 100644
--- a/src/components/list_new/list_new.vue
+++ b/src/components/list_new/list_new.vue
@@ -19,7 +19,7 @@
         ref="title"
         v-model="title"
         :placeholder="$t('lists.title')"
-      >
+      />
     </div>
 
     <div class="member-list">
@@ -35,9 +35,7 @@
         />
       </div>
     </div>
-    <ListUserSearch
-      @results="onResults"
-    />
+    <ListUserSearch @results="onResults" />
     <div
       v-for="user in users"
       :key="user.id"
diff --git a/src/components/list_timeline/list_timeline.js b/src/components/list_timeline/list_timeline.js
index e17abb328..4dff24289 100644
--- a/src/components/list_timeline/list_timeline.js
+++ b/src/components/list_timeline/list_timeline.js
@@ -1,6 +1,6 @@
 import Timeline from '../timeline/timeline.vue'
 const ListTimeline = {
-  data () {
+  data() {
     return {
       listId: null
     }
@@ -9,14 +9,19 @@ const ListTimeline = {
     Timeline
   },
   computed: {
-    timeline () { return this.$store.state.statuses.timelines.list }
+    timeline() {
+      return this.$store.state.statuses.timelines.list
+    }
   },
-  created () {
+  created() {
     this.listId = this.$route.params.id
     this.$store.dispatch('fetchList', { id: this.listId })
-    this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
+    this.$store.dispatch('startFetchingTimeline', {
+      timeline: 'list',
+      listId: this.listId
+    })
   },
-  unmounted () {
+  unmounted() {
     this.$store.dispatch('stopFetchingTimeline', 'list')
     this.$store.commit('clearTimeline', { timeline: 'list' })
   }
diff --git a/src/components/list_user_search/list_user_search.js b/src/components/list_user_search/list_user_search.js
index ab349df39..5ecd8a8c2 100644
--- a/src/components/list_user_search/list_user_search.js
+++ b/src/components/list_user_search/list_user_search.js
@@ -1,21 +1,15 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faSearch,
-  faChevronLeft
-} from '@fortawesome/free-solid-svg-icons'
+import { faSearch, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
 import { debounce } from 'lodash'
 import Checkbox from '../checkbox/checkbox.vue'
 
-library.add(
-  faSearch,
-  faChevronLeft
-)
+library.add(faSearch, faChevronLeft)
 
 const ListUserSearch = {
   components: {
     Checkbox
   },
-  data () {
+  data() {
     return {
       loading: false,
       query: '',
@@ -26,7 +20,7 @@ const ListUserSearch = {
     onInput: debounce(function () {
       this.search(this.query)
     }, 2000),
-    search (query) {
+    search(query) {
       if (!query) {
         this.loading = false
         return
@@ -34,10 +28,19 @@ const ListUserSearch = {
 
       this.loading = true
       this.userIds = []
-      this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
-        .then(data => {
+      this.$store
+        .dispatch('search', {
+          q: query,
+          resolve: true,
+          type: 'accounts',
+          following: this.followingOnly
+        })
+        .then((data) => {
           this.loading = false
-          this.$emit('results', data.accounts.map(a => a.id))
+          this.$emit(
+            'results',
+            data.accounts.map((a) => a.id)
+          )
         })
     }
   }
diff --git a/src/components/list_user_search/list_user_search.vue b/src/components/list_user_search/list_user_search.vue
index fcd2f7da3..9c0e3481c 100644
--- a/src/components/list_user_search/list_user_search.vue
+++ b/src/components/list_user_search/list_user_search.vue
@@ -12,7 +12,7 @@
         v-model="query"
         :placeholder="$t('lists.search')"
         @input="onInput"
-      >
+      />
     </div>
     <div class="input-wrap">
       <Checkbox
@@ -41,5 +41,4 @@
 .search-icon {
   margin-right: 0.3em;
 }
-
 </style>
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
index 09c494079..a2dff8c71 100644
--- a/src/components/lists/lists.js
+++ b/src/components/lists/lists.js
@@ -2,7 +2,7 @@ import ListCard from '../list_card/list_card.vue'
 import ListNew from '../list_new/list_new.vue'
 
 const Lists = {
-  data () {
+  data() {
     return {
       isNew: false
     }
@@ -11,19 +11,19 @@ const Lists = {
     ListCard,
     ListNew
   },
-  created () {
+  created() {
     this.$store.dispatch('startFetchingLists')
   },
   computed: {
-    lists () {
+    lists() {
       return this.$store.state.lists.allLists
     }
   },
   methods: {
-    cancelNewList () {
+    cancelNewList() {
       this.isNew = false
     },
-    newList () {
+    newList() {
       this.isNew = true
     }
   }
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
index f11a2a026..017ea78e6 100644
--- a/src/components/lists/lists.vue
+++ b/src/components/lists/lists.vue
@@ -14,7 +14,7 @@
         class="button-default"
         @click="newList"
       >
-        {{ $t("lists.new") }}
+        {{ $t('lists.new') }}
       </button>
     </div>
     <div class="panel-body">
diff --git a/src/components/local_bubble_panel/local_bubble_panel.js b/src/components/local_bubble_panel/local_bubble_panel.js
index 7fb5ada28..95d9cd0a0 100644
--- a/src/components/local_bubble_panel/local_bubble_panel.js
+++ b/src/components/local_bubble_panel/local_bubble_panel.js
@@ -4,7 +4,7 @@ import { get } from 'lodash'
 const LocalBubblePanel = {
   computed: {
     ...mapState({
-      bubbleInstances: state => get(state, 'instance.localBubbleInstances')
+      bubbleInstances: (state) => get(state, 'instance.localBubbleInstances')
     })
   }
 }
diff --git a/src/components/local_bubble_panel/local_bubble_panel.vue b/src/components/local_bubble_panel/local_bubble_panel.vue
index 4b9eaf515..4151c5482 100644
--- a/src/components/local_bubble_panel/local_bubble_panel.vue
+++ b/src/components/local_bubble_panel/local_bubble_panel.vue
@@ -6,11 +6,11 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background">
         <div class="title">
-          {{ $t("about.bubble_instances") }}
+          {{ $t('about.bubble_instances') }}
         </div>
       </div>
       <div class="panel-body">
-        <p>{{ $t("about.bubble_instances_description")}}:</p>
+        <p>{{ $t('about.bubble_instances_description') }}:</p>
         <ul>
           <li
             v-for="instance in bubbleInstances"
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 638bd8129..7711fdd8f 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -1,13 +1,9 @@
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import oauthApi from '../../services/new_api/oauth.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes
-)
+library.add(faTimes)
 
 const LoginForm = {
   data: () => ({
@@ -15,25 +11,31 @@ const LoginForm = {
     error: false
   }),
   computed: {
-    isPasswordAuth () { return this.requiredPassword },
-    isTokenAuth () { return this.requiredToken },
+    isPasswordAuth() {
+      return this.requiredPassword
+    },
+    isTokenAuth() {
+      return this.requiredToken
+    },
     ...mapState({
-      registrationOpen: state => state.instance.registrationOpen,
-      instance: state => state.instance,
-      loggingIn: state => state.users.loggingIn,
-      oauth: state => state.oauth
+      registrationOpen: (state) => state.instance.registrationOpen,
+      instance: (state) => state.instance,
+      loggingIn: (state) => state.users.loggingIn,
+      oauth: (state) => state.oauth
     }),
-    ...mapGetters(
-      'authFlow', ['requiredPassword', 'requiredToken', 'requiredMFA']
-    )
+    ...mapGetters('authFlow', [
+      'requiredPassword',
+      'requiredToken',
+      'requiredMFA'
+    ])
   },
   methods: {
     ...mapMutations('authFlow', ['requireMFA']),
     ...mapActions({ login: 'authFlow/login' }),
-    submit () {
+    submit() {
       this.isTokenAuth ? this.submitToken() : this.submitPassword()
     },
-    submitToken () {
+    submitToken() {
       const { clientId, clientSecret } = this.oauth
       const data = {
         clientId,
@@ -42,10 +44,11 @@ const LoginForm = {
         commit: this.$store.commit
       }
 
-      oauthApi.getOrCreateApp(data)
-        .then((app) => { oauthApi.login({ ...app, ...data }) })
+      oauthApi.getOrCreateApp(data).then((app) => {
+        oauthApi.login({ ...app, ...data })
+      })
     },
-    submitPassword () {
+    submitPassword() {
       const { clientId } = this.oauth
       const data = {
         clientId,
@@ -56,33 +59,38 @@ const LoginForm = {
       this.error = false
 
       oauthApi.getOrCreateApp(data).then((app) => {
-        oauthApi.getTokenWithCredentials(
-          {
+        oauthApi
+          .getTokenWithCredentials({
             ...app,
             instance: data.instance,
             username: this.user.username,
             password: this.user.password
-          }
-        ).then((result) => {
-          if (result.error) {
-            if (result.error === 'mfa_required') {
-              this.requireMFA({ settings: result })
-            } else if (result.identifier === 'password_reset_required') {
-              this.$router.push({ name: 'password-reset', params: { passwordResetRequested: true } })
-            } else {
-              this.error = result.error
-              this.focusOnPasswordInput()
-            }
-            return
-          }
-          this.login(result).then(() => {
-            this.$router.push({ name: 'friends' })
           })
-        })
+          .then((result) => {
+            if (result.error) {
+              if (result.error === 'mfa_required') {
+                this.requireMFA({ settings: result })
+              } else if (result.identifier === 'password_reset_required') {
+                this.$router.push({
+                  name: 'password-reset',
+                  params: { passwordResetRequested: true }
+                })
+              } else {
+                this.error = result.error
+                this.focusOnPasswordInput()
+              }
+              return
+            }
+            this.login(result).then(() => {
+              this.$router.push({ name: 'friends' })
+            })
+          })
       })
     },
-    clearError () { this.error = false },
-    focusOnPasswordInput () {
+    clearError() {
+      this.error = false
+    },
+    focusOnPasswordInput() {
       let passwordInput = this.$refs.passwordInput
       passwordInput.focus()
       passwordInput.setSelectionRange(0, passwordInput.value.length)
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 21482977e..83c281087 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -20,7 +20,7 @@
               :disabled="loggingIn"
               class="form-control"
               :placeholder="$t('login.placeholder')"
-            >
+            />
           </div>
           <div class="form-group">
             <label for="password">{{ $t('login.password') }}</label>
@@ -31,10 +31,10 @@
               :disabled="loggingIn"
               class="form-control"
               type="password"
-            >
+            />
           </div>
           <div class="form-group">
-            <router-link :to="{name: 'password-reset'}">
+            <router-link :to="{ name: 'password-reset' }">
               {{ $t('password_reset.forgot_password') }}
             </router-link>
           </div>
@@ -52,7 +52,7 @@
             <div>
               <router-link
                 v-if="registrationOpen"
-                :to="{name: 'registration'}"
+                :to="{ name: 'registration' }"
                 class="register"
               >
                 {{ $t('login.register') }}
@@ -90,7 +90,7 @@
   </div>
 </template>
 
-<script src="./login_form.js" ></script>
+<script src="./login_form.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -110,7 +110,7 @@
   }
 
   .login-bottom {
-    margin-top: 1.0em;
+    margin-top: 1em;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -121,7 +121,7 @@
     display: flex;
     flex-direction: column;
     padding: 0.3em 0.5em 0.6em;
-    line-height:24px;
+    line-height: 24px;
   }
 
   .form-bottom {
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index ff9936645..c65c51803 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -14,12 +14,7 @@ import {
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faChevronLeft,
-  faChevronRight,
-  faCircleNotch,
-  faTimes
-)
+library.add(faChevronLeft, faChevronRight, faCircleNotch, faTimes)
 
 const MediaModal = {
   components: {
@@ -30,7 +25,7 @@ const MediaModal = {
     Modal,
     Flash
   },
-  data () {
+  data() {
     return {
       loading: false,
       swipeDirection: GestureService.DIRECTION_LEFT,
@@ -43,33 +38,33 @@ const MediaModal = {
     }
   },
   computed: {
-    showing () {
+    showing() {
       return this.$store.state.mediaViewer.activated
     },
-    media () {
+    media() {
       return this.$store.state.mediaViewer.media
     },
-    description () {
+    description() {
       return this.currentMedia.description
     },
-    currentIndex () {
+    currentIndex() {
       return this.$store.state.mediaViewer.currentIndex
     },
-    currentMedia () {
+    currentMedia() {
       return this.media[this.currentIndex]
     },
-    canNavigate () {
+    canNavigate() {
       return this.media.length > 1
     },
-    type () {
+    type() {
       return this.currentMedia ? this.getType(this.currentMedia) : null
     }
   },
   methods: {
-    getType (media) {
+    getType(media) {
       return fileTypeService.fileType(media.mimetype)
     },
-    hide () {
+    hide() {
       // HACK: Closing immediately via a touch will cause the click
       // to be processed on the content below the overlay
       const transitionTime = 100 // ms
@@ -77,7 +72,7 @@ const MediaModal = {
         this.$store.dispatch('closeMediaViewer')
       }, transitionTime)
     },
-    hideIfNotSwiped (event) {
+    hideIfNotSwiped(event) {
       // If we have swiped over SwipeClick, do not trigger hide
       const comp = this.$refs.swipeClick
       if (!comp) {
@@ -86,9 +81,12 @@ const MediaModal = {
         comp.$gesture.click(event)
       }
     },
-    goPrev () {
+    goPrev() {
       if (this.canNavigate) {
-        const prevIndex = this.currentIndex === 0 ? this.media.length - 1 : (this.currentIndex - 1)
+        const prevIndex =
+          this.currentIndex === 0
+            ? this.media.length - 1
+            : this.currentIndex - 1
         const newMedia = this.media[prevIndex]
         if (this.getType(newMedia) === 'image') {
           this.loading = true
@@ -96,9 +94,12 @@ const MediaModal = {
         this.$store.dispatch('setCurrentMedia', newMedia)
       }
     },
-    goNext () {
+    goNext() {
       if (this.canNavigate) {
-        const nextIndex = this.currentIndex === this.media.length - 1 ? 0 : (this.currentIndex + 1)
+        const nextIndex =
+          this.currentIndex === this.media.length - 1
+            ? 0
+            : this.currentIndex + 1
         const newMedia = this.media[nextIndex]
         if (this.getType(newMedia) === 'image') {
           this.loading = true
@@ -106,13 +107,13 @@ const MediaModal = {
         this.$store.dispatch('setCurrentMedia', newMedia)
       }
     },
-    onImageLoaded () {
+    onImageLoaded() {
       this.loading = false
     },
-    handleSwipePreview (offsets) {
+    handleSwipePreview(offsets) {
       this.$refs.pinchZoom.setTransform({ scale: 1, x: offsets[0], y: 0 })
     },
-    handleSwipeEnd (sign) {
+    handleSwipeEnd(sign) {
       this.$refs.pinchZoom.setTransform({ scale: 1, x: 0, y: 0 })
       if (sign > 0) {
         this.goNext()
@@ -120,29 +121,32 @@ const MediaModal = {
         this.goPrev()
       }
     },
-    handleKeyupEvent (e) {
-      if (this.showing && e.keyCode === 27) { // escape
+    handleKeyupEvent(e) {
+      if (this.showing && e.keyCode === 27) {
+        // escape
         this.hide()
       }
     },
-    handleKeydownEvent (e) {
+    handleKeydownEvent(e) {
       if (!this.showing) {
         return
       }
 
-      if (e.keyCode === 39) { // arrow right
+      if (e.keyCode === 39) {
+        // arrow right
         this.goNext()
-      } else if (e.keyCode === 37) { // arrow left
+      } else if (e.keyCode === 37) {
+        // arrow left
         this.goPrev()
       }
     }
   },
-  mounted () {
+  mounted() {
     window.addEventListener('popstate', this.hide)
     document.addEventListener('keyup', this.handleKeyupEvent)
     document.addEventListener('keydown', this.handleKeydownEvent)
   },
-  unmounted () {
+  unmounted() {
     window.removeEventListener('popstate', this.hide)
     document.removeEventListener('keyup', this.handleKeyupEvent)
     document.removeEventListener('keydown', this.handleKeydownEvent)
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 802a60b3c..382e73d41 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -31,7 +31,7 @@
           :alt="currentMedia.description"
           :title="currentMedia.description"
           @load="onImageLoaded"
-        >
+        />
       </PinchZoom>
     </SwipeClick>
     <VideoAttachment
@@ -94,10 +94,13 @@
     >
       {{ description }}
     </span>
-    <span
-      class="counter"
-    >
-      {{ $tc('media_modal.counter', currentIndex + 1, { current: currentIndex + 1, total: media.length }) }}
+    <span class="counter">
+      {{
+        $tc('media_modal.counter', currentIndex + 1, {
+          current: currentIndex + 1,
+          total: media.length
+        })
+      }}
     </span>
     <span
       v-if="loading"
@@ -116,7 +119,9 @@
 
 <style lang="scss">
 $modal-view-button-icon-height: 3em;
-$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
+$modal-view-button-icon-half-height: calc(
+  #{$modal-view-button-icon-height} / 2
+);
 $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
@@ -227,7 +232,7 @@ $modal-view-button-icon-margin: 0.5em;
     appearance: none;
     overflow: visible;
     cursor: pointer;
-    transition: opacity 333ms cubic-bezier(.4,0,.22,1);
+    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
     height: $modal-view-button-icon-height;
     width: $modal-view-button-icon-width;
 
@@ -237,9 +242,9 @@ $modal-view-button-icon-margin: 0.5em;
       width: $modal-view-button-icon-width;
       font-size: 1rem;
       line-height: $modal-view-button-icon-height;
-      color: #FFF;
+      color: #fff;
       text-align: center;
-      background-color: rgba(0,0,0,.3);
+      background-color: rgba(0, 0, 0, 0.3);
     }
   }
 
@@ -255,9 +260,9 @@ $modal-view-button-icon-margin: 0.5em;
       position: absolute;
       top: 0;
       line-height: $modal-view-button-icon-height;
-      color: #FFF;
+      color: #fff;
       text-align: center;
-      background-color: rgba(0,0,0,.3);
+      background-color: rgba(0, 0, 0, 0.3);
     }
 
     &--prev {
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 669d8190d..f9b77ed83 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -5,31 +5,35 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUpload, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faUpload,
-  faCircleNotch
-)
+library.add(faUpload, faCircleNotch)
 
 const mediaUpload = {
-  data () {
+  data() {
     return {
       uploadCount: 0,
       uploadReady: true
     }
   },
   computed: {
-    uploading () {
+    uploading() {
       return this.uploadCount > 0
     }
   },
   methods: {
-    uploadFile (file) {
+    uploadFile(file) {
       const self = this
       const store = this.$store
       if (file.size > store.state.instance.uploadlimit) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
-        const allowedsize = fileSizeFormatService.fileSizeFormat(store.state.instance.uploadlimit)
-        self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
+        const allowedsize = fileSizeFormatService.fileSizeFormat(
+          store.state.instance.uploadlimit
+        )
+        self.$emit('upload-failed', 'file_too_big', {
+          filesize: filesize.num,
+          filesizeunit: filesize.unit,
+          allowedsize: allowedsize.num,
+          allowedsizeunit: allowedsize.unit
+        })
         return
       }
       const formData = new FormData()
@@ -38,42 +42,42 @@ const mediaUpload = {
       self.$emit('uploading')
       self.uploadCount++
 
-      statusPosterService.uploadMedia({ store, formData })
-        .then((fileData) => {
+      statusPosterService.uploadMedia({ store, formData }).then(
+        (fileData) => {
           self.$emit('uploaded', fileData)
           self.decreaseUploadCount()
-        }, (error) => { // eslint-disable-line handle-callback-err
+        },
+        (error) => {
+          // eslint-disable-line handle-callback-err
           self.$emit('upload-failed', 'default')
           self.decreaseUploadCount()
-        })
+        }
+      )
     },
-    decreaseUploadCount () {
+    decreaseUploadCount() {
       this.uploadCount--
       if (this.uploadCount === 0) {
         this.$emit('all-uploaded')
       }
     },
-    clearFile () {
+    clearFile() {
       this.uploadReady = false
       this.$nextTick(() => {
         this.uploadReady = true
       })
     },
-    multiUpload (files) {
+    multiUpload(files) {
       for (const file of files) {
         this.uploadFile(file)
       }
     },
-    change ({ target }) {
+    change({ target }) {
       this.multiUpload(target.files)
     }
   },
-  props: [
-    'dropFiles',
-    'disabled'
-  ],
+  props: ['dropFiles', 'disabled'],
   watch: {
-    'dropFiles': function (fileInfos) {
+    dropFiles: function (fileInfos) {
       if (!this.uploading) {
         this.multiUpload(fileInfos)
       }
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 7cc59f5ab..2fda2e640 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -22,11 +22,11 @@
       type="file"
       multiple="true"
       @change="change"
-    >
+    />
   </label>
 </template>
 
-<script src="./media_upload.js" ></script>
+<script src="./media_upload.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -38,4 +38,4 @@
     display: none;
   }
 }
- </style>
+</style>
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 55eea1952..1e38e0366 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -1,15 +1,14 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters, mapState } from 'vuex'
-import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import {
+  highlightClass,
+  highlightStyle
+} from '../../services/user_highlighter/user_highlighter.js'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faAt
-} from '@fortawesome/free-solid-svg-icons'
+import { faAt } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faAt
-)
+library.add(faAt)
 
 const MentionLink = {
   name: 'MentionLink',
@@ -35,7 +34,7 @@ const MentionLink = {
     }
   },
   methods: {
-    onClick () {
+    onClick() {
       const link = generateProfileLink(
         this.userId || this.user.id,
         this.userScreenName || this.user.screen_name
@@ -44,36 +43,42 @@ const MentionLink = {
     }
   },
   computed: {
-    user () {
-      return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
+    user() {
+      return (
+        this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
+      )
     },
-    isYou () {
+    isYou() {
       // FIXME why user !== currentUser???
       return this.user && this.user.id === this.currentUser.id
     },
-    userName () {
+    userName() {
       return this.user && this.userNameFullUi.split('@')[0]
     },
-    serverName () {
+    serverName() {
       // XXX assumed that domain does not contain @
-      return this.user && (this.userNameFullUi.split('@')[1] || this.$store.getters.instanceDomain)
+      return (
+        this.user &&
+        (this.userNameFullUi.split('@')[1] ||
+          this.$store.getters.instanceDomain)
+      )
     },
-    userNameFull () {
+    userNameFull() {
       return this.user && this.user.screen_name
     },
-    userNameFullUi () {
+    userNameFullUi() {
       return this.user && this.user.screen_name_ui
     },
-    highlight () {
+    highlight() {
       return this.user && this.mergedConfig.highlight[this.user.screen_name]
     },
-    highlightType () {
-      return this.highlight && ('-' + this.highlight.type)
+    highlightType() {
+      return this.highlight && '-' + this.highlight.type
     },
-    highlightClass () {
+    highlightClass() {
       if (this.highlight) return highlightClass(this.user)
     },
-    style () {
+    style() {
       if (this.highlight) {
         const {
           backgroundColor,
@@ -84,7 +89,7 @@ const MentionLink = {
         return rest
       }
     },
-    classnames () {
+    classnames() {
       return [
         {
           '-you': this.isYou && this.shouldBoldenYou,
@@ -93,40 +98,45 @@ const MentionLink = {
         this.highlightType
       ]
     },
-    useAtIcon () {
+    useAtIcon() {
       return this.mergedConfig.useAtIcon
     },
-    isRemote () {
+    isRemote() {
       return this.userName !== this.userNameFull
     },
-    shouldShowFullUserName () {
+    shouldShowFullUserName() {
       const conf = this.mergedConfig.mentionLinkDisplay
       if (conf === 'short') {
         return false
       } else if (conf === 'full') {
         return true
-      } else { // full_for_remote
+      } else {
+        // full_for_remote
         return this.isRemote
       }
     },
-    shouldShowTooltip () {
-      return this.mergedConfig.mentionLinkShowTooltip && this.mergedConfig.mentionLinkDisplay === 'short' && this.isRemote
+    shouldShowTooltip() {
+      return (
+        this.mergedConfig.mentionLinkShowTooltip &&
+        this.mergedConfig.mentionLinkDisplay === 'short' &&
+        this.isRemote
+      )
     },
-    shouldShowAvatar () {
+    shouldShowAvatar() {
       return this.mergedConfig.mentionLinkShowAvatar
     },
-    shouldShowYous () {
+    shouldShowYous() {
       return this.mergedConfig.mentionLinkShowYous
     },
-    shouldBoldenYou () {
+    shouldBoldenYou() {
       return this.mergedConfig.mentionLinkBoldenYou
     },
-    shouldFadeDomain () {
+    shouldFadeDomain() {
       return this.mergedConfig.mentionLinkFadeDomain
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
     })
   }
 }
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index d2df9535f..f31cb5502 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -1,7 +1,5 @@
 <template>
-  <span
-    class="MentionLink"
-  >
+  <span class="MentionLink">
     <!-- eslint-disable vue/no-v-html -->
     <a
       v-if="!user"
@@ -27,29 +25,30 @@
           class="mention-avatar"
           :user="user"
         />
-        <span class="shortName">@<span
-          class="userName"
-          v-html="userName"
-        /><span
-          v-if="shouldShowFullUserName"
-          class="serverName"
-          :class="{ '-faded': shouldFadeDomain }"
-          v-html="'@' + serverName"
-        />
+        <span class="shortName"
+          >@<span
+            class="userName"
+            v-html="userName"
+          /><span
+            v-if="shouldShowFullUserName"
+            class="serverName"
+            :class="{ '-faded': shouldFadeDomain }"
+            v-html="'@' + serverName"
+          />
         </span>
         <span
           v-if="isYou && shouldShowYous"
           :class="{ '-you': shouldBoldenYou }"
-        > {{ ' ' + $t('status.you') }}</span>
-        <!-- eslint-enable vue/no-v-html -->
-      </a><span
+        >
+          {{ ' ' + $t('status.you') }}</span
+        >
+        <!-- eslint-enable vue/no-v-html --> </a
+      ><span
         v-if="shouldShowTooltip"
         class="full popover-default"
         :class="[highlightType]"
       >
-        <span
-          class="userNameFull"
-        >
+        <span class="userNameFull">
           <!-- eslint-disable vue/no-v-html -->
           @<span
             class="userName"
@@ -66,6 +65,6 @@
   </span>
 </template>
 
-<script src="./mention_link.js"/>
+<script src="./mention_link.js" />
 
-<style lang="scss" src="./mention_link.scss"/>
+<style lang="scss" src="./mention_link.scss" />
diff --git a/src/components/mentions/mentions.js b/src/components/mentions/mentions.js
index 841d5aa48..9b76ef71a 100644
--- a/src/components/mentions/mentions.js
+++ b/src/components/mentions/mentions.js
@@ -2,7 +2,7 @@ import Timeline from '../timeline/timeline.vue'
 
 const Mentions = {
   computed: {
-    timeline () {
+    timeline() {
       return this.$store.state.statuses.timelines.mentions
     }
   },
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index a4a0c7246..66c6c0978 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -16,19 +16,19 @@ const MentionsLine = {
     MentionLink
   },
   computed: {
-    mentionsComputed () {
+    mentionsComputed() {
       return this.mentions.slice(0, MENTIONS_LIMIT)
     },
-    extraMentions () {
+    extraMentions() {
       return this.mentions.slice(MENTIONS_LIMIT)
     },
-    manyMentions () {
+    manyMentions() {
       return this.extraMentions.length > 0
     },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
-    toggleShowMore () {
+    toggleShowMore() {
       this.expanded = !this.expanded
     }
   }
diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index 09b6a1d6c..9ac039ae9 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -20,14 +20,14 @@
           class="mention-link"
           :content="mention.content"
           :url="mention.url"
-        />
-      </span><button
+        /> </span
+      ><button
         v-if="!expanded"
         class="button-unstyled showMoreLess"
         @click="toggleShowMore"
       >
-        {{ $t('status.plus_more', { number: extraMentions.length }) }}
-      </button><button
+        {{ $t('status.plus_more', { number: extraMentions.length }) }}</button
+      ><button
         v-if="expanded"
         class="button-unstyled showMoreLess"
         @click="toggleShowMore"
@@ -37,5 +37,5 @@
     </span>
   </span>
 </template>
-<script src="./mentions_line.js" ></script>
+<script src="./mentions_line.js"></script>
 <style lang="scss" src="./mentions_line.scss" />
diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index 01a62a503..e89b4dec0 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@@ -1,13 +1,9 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes
-)
+library.add(faTimes)
 
 export default {
   data: () => ({
@@ -26,8 +22,10 @@ export default {
   methods: {
     ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
-    clearError () { this.error = false },
-    submit () {
+    clearError() {
+      this.error = false
+    },
+    submit() {
       const { clientId, clientSecret } = this.oauth
 
       const data = {
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index a9cf39aa5..accb589bf 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -17,7 +17,7 @@
             id="code"
             v-model="code"
             class="form-control"
-          >
+          />
         </div>
 
         <div class="form-group">
@@ -30,7 +30,7 @@
               >
                 {{ $t('login.enter_two_factor_code') }}
               </button>
-              <br>
+              <br />
               <button
                 class="button-unstyled -link"
                 type="button"
@@ -69,4 +69,4 @@
     </div>
   </div>
 </template>
-<script src="./recovery_form.js" ></script>
+<script src="./recovery_form.js"></script>
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index 6ee823ed3..3d61075ed 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -1,13 +1,9 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes
-)
+library.add(faTimes)
 
 export default {
   data: () => ({
@@ -26,8 +22,10 @@ export default {
   methods: {
     ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
-    clearError () { this.error = false },
-    submit () {
+    clearError() {
+      this.error = false
+    },
+    submit() {
       const { clientId, clientSecret } = this.oauth
 
       const data = {
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 709eb9b81..cc0d9b35e 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -19,7 +19,7 @@
             id="code"
             v-model="code"
             class="form-control"
-          >
+          />
         </div>
 
         <div class="form-group">
@@ -32,7 +32,7 @@
               >
                 {{ $t('login.enter_recovery_code') }}
               </button>
-              <br>
+              <br />
               <button
                 class="button-unstyled -link"
                 type="button"
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index bba520d40..e03539a74 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -5,17 +5,9 @@ import { unseenNotificationsFromStore } from '../../services/notification_utils/
 import GestureService from '../../services/gesture_service/gesture_service'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes,
-  faBell,
-  faBars
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes, faBell, faBars } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes,
-  faBell,
-  faBars
-)
+library.add(faTimes, faBell, faBars)
 
 const MobileNav = {
   components: {
@@ -28,7 +20,7 @@ const MobileNav = {
     notificationsOpen: false,
     showingConfirmLogout: false
   }),
-  created () {
+  created() {
     this.notificationsCloseGesture = GestureService.swipeGesture(
       GestureService.DIRECTION_RIGHT,
       this.closeMobileNotifications,
@@ -36,35 +28,37 @@ const MobileNav = {
     )
   },
   computed: {
-    currentUser () {
+    currentUser() {
       return this.$store.state.users.currentUser
     },
-    unseenNotifications () {
+    unseenNotifications() {
       return unseenNotificationsFromStore(this.$store)
     },
-    unseenNotificationsCount () {
+    unseenNotificationsCount() {
       return this.unseenNotifications.length
     },
-    mergedConfig () {
+    mergedConfig() {
       return this.$store.getters.mergedConfig
     },
-    hideSiteName () {
+    hideSiteName() {
       return this.mergedConfig.hideSiteName
     },
-    sitename () { return this.$store.state.instance.name },
-    shouldConfirmLogout () {
+    sitename() {
+      return this.$store.state.instance.name
+    },
+    shouldConfirmLogout() {
       return this.$store.getters.mergedConfig.modalOnLogout
     },
     ...mapGetters(['unreadChatCount'])
   },
   methods: {
-    toggleMobileSidebar () {
+    toggleMobileSidebar() {
       this.$refs.sideDrawer.toggleDrawer()
     },
-    openMobileNotifications () {
+    openMobileNotifications() {
       this.notificationsOpen = true
     },
-    closeMobileNotifications () {
+    closeMobileNotifications() {
       if (this.notificationsOpen) {
         // make sure to mark notifs seen only when the notifs were open and not
         // from close-calls.
@@ -72,45 +66,45 @@ const MobileNav = {
         this.markNotificationsAsSeen()
       }
     },
-    notificationsTouchStart (e) {
+    notificationsTouchStart(e) {
       GestureService.beginSwipe(e, this.notificationsCloseGesture)
     },
-    notificationsTouchMove (e) {
+    notificationsTouchMove(e) {
       GestureService.updateSwipe(e, this.notificationsCloseGesture)
     },
-    scrollToTop () {
+    scrollToTop() {
       window.scrollTo(0, 0)
     },
-    showConfirmLogout () {
+    showConfirmLogout() {
       this.showingConfirmLogout = true
     },
-    hideConfirmLogout () {
+    hideConfirmLogout() {
       this.showingConfirmLogout = false
     },
-    logout () {
+    logout() {
       if (!this.shouldConfirmLogout) {
         this.doLogout()
       } else {
         this.showConfirmLogout()
       }
     },
-    doLogout () {
+    doLogout() {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
       this.hideConfirmLogout()
     },
-    markNotificationsAsSeen () {
+    markNotificationsAsSeen() {
       // this.$refs.notifications.markAsSeen()
       this.$store.dispatch('markNotificationsAsSeen')
     },
-    onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
+    onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
       if (scrollTop + clientHeight >= scrollHeight) {
         this.$refs.notifications.fetchOlderNotifications()
       }
     }
   },
   watch: {
-    $route () {
+    $route() {
       // handles closing notificaitons when you press any router-link on the
       // notifications.
       this.closeMobileNotifications()
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index e6a8e694f..1b0dad544 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="MobileNav"
-  >
+  <div class="MobileNav">
     <nav
       id="nav"
       class="mobile-nav"
@@ -124,7 +122,7 @@
   }
 
   .site-name {
-    padding: 0 .3em;
+    padding: 0 0.3em;
     display: inline-block;
   }
 
@@ -153,7 +151,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     transition-property: transform;
     transition-duration: 0.25s;
@@ -179,7 +177,7 @@
     color: var(--topBarText);
     background-color: $fallback--fg;
     background-color: var(--topBar, $fallback--fg);
-    box-shadow: 0px 0px 4px rgba(0,0,0,.6);
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--topBarShadow);
 
     .title {
@@ -227,5 +225,4 @@
     }
   }
 }
-
 </style>
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index d08e4d65b..69ee4306e 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -1,15 +1,11 @@
 import { debounce } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faPen
-} from '@fortawesome/free-solid-svg-icons'
+import { faPen } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faPen
-)
+library.add(faPen)
 
 const MobilePostStatusButton = {
-  data () {
+  data() {
     return {
       hidden: false,
       scrollingDown: false,
@@ -18,29 +14,31 @@ const MobilePostStatusButton = {
       amountScrolled: 0
     }
   },
-  created () {
+  created() {
     if (this.autohideFloatingPostButton) {
       this.activateFloatingPostButtonAutohide()
     }
     window.addEventListener('resize', this.handleOSK)
   },
-  unmounted () {
+  unmounted() {
     if (this.autohideFloatingPostButton) {
       this.deactivateFloatingPostButtonAutohide()
     }
     window.removeEventListener('resize', this.handleOSK)
   },
   computed: {
-    isLoggedIn () {
+    isLoggedIn() {
       return !!this.$store.state.users.currentUser
     },
-    isHidden () {
-      return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
+    isHidden() {
+      return (
+        this.autohideFloatingPostButton && (this.hidden || this.inputActive)
+      )
     },
-    isPersistent () {
+    isPersistent() {
       return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton
     },
-    autohideFloatingPostButton () {
+    autohideFloatingPostButton() {
       return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
     }
   },
@@ -54,18 +52,18 @@ const MobilePostStatusButton = {
     }
   },
   methods: {
-    activateFloatingPostButtonAutohide () {
+    activateFloatingPostButtonAutohide() {
       window.addEventListener('scroll', this.handleScrollStart)
       window.addEventListener('scroll', this.handleScrollEnd)
     },
-    deactivateFloatingPostButtonAutohide () {
+    deactivateFloatingPostButtonAutohide() {
       window.removeEventListener('scroll', this.handleScrollStart)
       window.removeEventListener('scroll', this.handleScrollEnd)
     },
-    openPostForm () {
+    openPostForm() {
       this.$store.dispatch('openPostStatusModal')
     },
-    handleOSK () {
+    handleOSK() {
       // This is a big hack: we're guessing from changed window sizes if the
       // on-screen keyboard is active or not. This is only really important
       // for phones in portrait mode and it's more important to show the button
@@ -85,19 +83,27 @@ const MobilePostStatusButton = {
         this.inputActive = false
       }
     },
-    handleScrollStart: debounce(function () {
-      if (window.scrollY > this.oldScrollPos) {
-        this.hidden = true
-      } else {
-        this.hidden = false
-      }
-      this.oldScrollPos = window.scrollY
-    }, 100, { leading: true, trailing: false }),
+    handleScrollStart: debounce(
+      function () {
+        if (window.scrollY > this.oldScrollPos) {
+          this.hidden = true
+        } else {
+          this.hidden = false
+        }
+        this.oldScrollPos = window.scrollY
+      },
+      100,
+      { leading: true, trailing: false }
+    ),
 
-    handleScrollEnd: debounce(function () {
-      this.hidden = false
-      this.oldScrollPos = window.scrollY
-    }, 100, { leading: false, trailing: true })
+    handleScrollEnd: debounce(
+      function () {
+        this.hidden = false
+        this.oldScrollPos = window.scrollY
+      },
+      100,
+      { leading: false, trailing: true }
+    )
   }
 }
 
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 9fcdf6f82..2e219a264 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -2,7 +2,7 @@
   <button
     v-if="isLoggedIn"
     class="MobilePostButton button-default new-status-button"
-    :class="{ 'hidden': isHidden, 'always-show': isPersistent }"
+    :class="{ hidden: isHidden, 'always-show': isPersistent }"
     @click="openPostForm"
   >
     <FAIcon icon="pen" />
@@ -52,5 +52,4 @@
     display: none;
   }
 }
-
 </style>
diff --git a/src/components/mod_modal/mod_modal.js b/src/components/mod_modal/mod_modal.js
index fb11ef875..d07db3ae4 100644
--- a/src/components/mod_modal/mod_modal.js
+++ b/src/components/mod_modal/mod_modal.js
@@ -3,19 +3,10 @@ import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes,
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
-import {
-  faWindowMinimize
-} from '@fortawesome/free-regular-svg-icons'
+import { faTimes, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { faWindowMinimize } from '@fortawesome/free-regular-svg-icons'
 
-library.add(
-  faTimes,
-  faWindowMinimize,
-  faChevronDown
-)
+library.add(faTimes, faWindowMinimize, faChevronDown)
 
 const ModModal = {
   components: {
@@ -30,26 +21,28 @@ const ModModal = {
     )
   },
   methods: {
-    closeModal () {
+    closeModal() {
       this.$store.dispatch('closeModModal')
     },
-    peekModal () {
+    peekModal() {
       this.$store.dispatch('togglePeekModModal')
     }
   },
   computed: {
-    moderator () {
-      return this.$store.state.users.currentUser &&
+    moderator() {
+      return (
+        this.$store.state.users.currentUser &&
         (this.$store.state.users.currentUser.role === 'admin' ||
-         this.$store.state.users.currentUser.role === 'moderator')
+          this.$store.state.users.currentUser.role === 'moderator')
+      )
     },
-    modalActivated () {
+    modalActivated() {
       return this.$store.state.interface.modModalState !== 'hidden'
     },
-    modalOpenedOnce () {
+    modalOpenedOnce() {
       return this.$store.state.interface.modModalLoaded
     },
-    modalPeeked () {
+    modalPeeked() {
       return this.$store.state.interface.modModalState === 'minimized'
     }
   }
diff --git a/src/components/mod_modal/mod_modal_content.js b/src/components/mod_modal/mod_modal_content.js
index e0ba62590..853a27736 100644
--- a/src/components/mod_modal/mod_modal_content.js
+++ b/src/components/mod_modal/mod_modal_content.js
@@ -5,17 +5,9 @@ import ReportsTab from './tabs/reports_tab/reports_tab.vue'
 // import UsersTab from './tabs/users_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faFlag,
-  faMessage,
-  faUsers
-} from '@fortawesome/free-solid-svg-icons'
+import { faFlag, faMessage, faUsers } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faFlag,
-  faMessage,
-  faUsers
-)
+library.add(faFlag, faMessage, faUsers)
 
 const ModModalContent = {
   components: {
@@ -26,21 +18,23 @@ const ModModalContent = {
     // UsersTab
   },
   computed: {
-    open () {
+    open() {
       return this.$store.state.interface.modModalState !== 'hidden'
     },
-    bodyLock () {
+    bodyLock() {
       return this.$store.state.interface.modModalState === 'visible'
     }
   },
   methods: {
-    onOpen () {
+    onOpen() {
       const targetTab = this.$store.state.interface.modModalTargetTab
       // We're being told to open in specific tab
       if (targetTab) {
-        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
-          return elm.props && elm.props['data-tab-name'] === targetTab
-        })
+        const tabIndex = this.$refs.tabSwitcher.$slots
+          .default()
+          .findIndex((elm) => {
+            return elm.props && elm.props['data-tab-name'] === targetTab
+          })
         if (tabIndex >= 0) {
           this.$refs.tabSwitcher.setTab(tabIndex)
         }
@@ -50,7 +44,7 @@ const ModModalContent = {
       this.$store.dispatch('clearModModalTargetTab')
     }
   },
-  mounted () {
+  mounted() {
     this.onOpen()
   },
   watch: {
diff --git a/src/components/mod_modal/tabs/reports_tab/report_card.js b/src/components/mod_modal/tabs/reports_tab/report_card.js
index 6e6bfdaef..85bbd7c50 100644
--- a/src/components/mod_modal/tabs/reports_tab/report_card.js
+++ b/src/components/mod_modal/tabs/reports_tab/report_card.js
@@ -4,15 +4,9 @@ import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 import ReportNote from './report_note.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown,
-  faChevronUp
-} from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faChevronDown,
-  faChevronUp
-)
+library.add(faChevronDown, faChevronUp)
 
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -20,7 +14,7 @@ const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
 const SANDBOX = 'mrf_tag:sandbox'
 
 const ReportCard = {
-  data () {
+  data() {
     return {
       hidden: true,
       statusesHidden: true,
@@ -34,85 +28,100 @@ const ReportCard = {
       }
     }
   },
-  props: [
-    'account',
-    'actor',
-    'content',
-    'id',
-    'notes',
-    'state',
-    'statuses'
-  ],
+  props: ['account', 'actor', 'content', 'id', 'notes', 'state', 'statuses'],
   components: {
     ReportNote,
     Popover,
     Status,
     UserAvatar
   },
-  created () {
+  created() {
     this.$store.dispatch('fetchUser', this.account.id)
   },
   computed: {
-    isOpen () {
+    isOpen() {
       return this.state === 'open'
     },
-    tagPolicyEnabled () {
-      return this.$store.state.instance.federationPolicy.mrf_policies.includes('TagPolicy')
+    tagPolicyEnabled() {
+      return this.$store.state.instance.federationPolicy.mrf_policies.includes(
+        'TagPolicy'
+      )
     },
-    user () {
+    user() {
       return this.$store.getters.findUser(this.account.id)
     }
   },
   methods: {
-    toggleHidden () {
+    toggleHidden() {
       this.hidden = !this.hidden
     },
-    decode (content) {
+    decode(content) {
       content = content.replaceAll('<br/>', '\n')
       const textarea = document.createElement('textarea')
       textarea.innerHTML = content
       return textarea.value
     },
-    updateReportState (state) {
-      this.$store.dispatch('updateReportStates', { reports: [{ id: this.id, state }] })
+    updateReportState(state) {
+      this.$store.dispatch('updateReportStates', {
+        reports: [{ id: this.id, state }]
+      })
     },
-    toggleNotes () {
+    toggleNotes() {
       this.notesHidden = !this.notesHidden
     },
-    addNoteToReport () {
+    addNoteToReport() {
       if (this.note.length > 0) {
-        this.$store.dispatch('addNoteToReport', { id: this.id, note: this.note })
+        this.$store.dispatch('addNoteToReport', {
+          id: this.id,
+          note: this.note
+        })
         this.note = null
       }
     },
-    toggleStatuses () {
+    toggleStatuses() {
       this.statusesHidden = !this.statusesHidden
     },
-    hasTag (tag) {
+    hasTag(tag) {
       return this.user.tags.includes(tag)
     },
-    toggleTag (tag) {
+    toggleTag(tag) {
       if (this.hasTag(tag)) {
-        this.$store.state.api.backendInteractor.untagUser({ user: this.user, tag }).then(response => {
-          if (!response.ok) { return }
-          this.$store.commit('untagUser', { user: this.user, tag })
-        })
+        this.$store.state.api.backendInteractor
+          .untagUser({ user: this.user, tag })
+          .then((response) => {
+            if (!response.ok) {
+              return
+            }
+            this.$store.commit('untagUser', { user: this.user, tag })
+          })
       } else {
-        this.$store.state.api.backendInteractor.tagUser({ user: this.user, tag }).then(response => {
-          if (!response.ok) { return }
-          this.$store.commit('tagUser', { user: this.user, tag })
-        })
+        this.$store.state.api.backendInteractor
+          .tagUser({ user: this.user, tag })
+          .then((response) => {
+            if (!response.ok) {
+              return
+            }
+            this.$store.commit('tagUser', { user: this.user, tag })
+          })
       }
     },
-    toggleActivationStatus () {
+    toggleActivationStatus() {
       this.$store.dispatch('toggleActivationStatus', { user: this.user })
     },
-    deleteUser () {
-      this.$store.state.backendInteractor.deleteUser({ user: this.user })
-        .then(e => {
-          this.$store.dispatch('markStatusesAsDeleted', status => this.user.id === status.user.id)
-          const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile'
-          const isTargetUser = this.$route.params.name === this.user.name || this.$route.params.id === this.user.id
+    deleteUser() {
+      this.$store.state.backendInteractor
+        .deleteUser({ user: this.user })
+        .then((e) => {
+          this.$store.dispatch(
+            'markStatusesAsDeleted',
+            (status) => this.user.id === status.user.id
+          )
+          const isProfile =
+            this.$route.name === 'external-user-profile' ||
+            this.$route.name === 'user-profile'
+          const isTargetUser =
+            this.$route.params.name === this.user.name ||
+            this.$route.params.id === this.user.id
           if (isProfile && isTargetUser) {
             window.history.back()
           }
diff --git a/src/components/mod_modal/tabs/reports_tab/report_card.vue b/src/components/mod_modal/tabs/reports_tab/report_card.vue
index e77afa799..0a18f515a 100644
--- a/src/components/mod_modal/tabs/reports_tab/report_card.vue
+++ b/src/components/mod_modal/tabs/reports_tab/report_card.vue
@@ -4,7 +4,9 @@
       class="panel-heading"
       @click="toggleHidden"
     >
-      <h4>{{ $t('moderation.reports.report') + ' ' + this.account.screen_name }}</h4>
+      <h4>
+        {{ $t('moderation.reports.report') + ' ' + account.screen_name }}
+      </h4>
       <button
         v-if="isOpen"
         class="button-default"
@@ -24,7 +26,7 @@
         class="button-default"
         @click.stop="updateReportState('open')"
       >
-          {{ $t('moderation.reports.reopen') }}
+        {{ $t('moderation.reports.reopen') }}
       </button>
     </div>
     <div
@@ -35,7 +37,10 @@
         <div v-if="content">
           {{ decode(content) }}
         </div>
-        <i v-else class="faint">
+        <i
+          v-else
+          class="faint"
+        >
           {{ $t('moderation.reports.no_content') }}
         </i>
         <div class="report-author">
@@ -43,18 +48,22 @@
             class="small-avatar"
             :user="actor"
           />
-          {{ this.actor.screen_name }}
+          {{ actor.screen_name }}
         </div>
       </div>
       <div
+        v-if="!hidden && statuses.length > 0"
         class="dropdown"
-        v-if="!hidden && this.statuses.length > 0"
       >
         <button
           class="button button-unstyled dropdown-header"
           @click="toggleStatuses"
         >
-          {{ $tc('moderation.reports.statuses', statuses.length - 1, { count: statuses.length }) }}
+          {{
+            $tc('moderation.reports.statuses', statuses.length - 1, {
+              count: statuses.length
+            })
+          }}
           <FAIcon
             class="timelines-chevron"
             fixed-width
@@ -74,14 +83,18 @@
         </div>
       </div>
       <div
+        v-if="!hidden && notes.length > 0"
         class="dropdown"
-        v-if="!hidden && this.notes.length > 0"
       >
         <button
           class="button button-unstyled dropdown-header"
           @click="toggleNotes"
         >
-          {{ $tc('moderation.reports.notes', notes.length - 1, { count: notes.length }) }}
+          {{
+            $tc('moderation.reports.notes', notes.length - 1, {
+              count: notes.length
+            })
+          }}
           <FAIcon
             class="timelines-chevron"
             fixed-width
@@ -99,9 +112,9 @@
       </div>
       <div class="report-add-note">
         <textarea
+          v-model.trim="note"
           rows="1"
           cols="1"
-          v-model.trim="note"
           :placeholder="$t('moderation.reports.note_placeholder')"
         />
         <button
@@ -120,7 +133,13 @@
         class="btn button-default"
         @click.stop="toggleActivationStatus"
       >
-        {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
+        {{
+          $t(
+            !!user.deactivated
+              ? 'user_card.admin_menu.activate_account'
+              : 'user_card.admin_menu.deactivate_account'
+          )
+        }}
       </button>
       <button
         class="btn button-default"
@@ -134,20 +153,22 @@
         :offset="{ y: 5 }"
         remove-padding
       >
-        <template v-slot:trigger>
+        <template #trigger>
           <button
             class="btn button-default"
             :disabled="!tagPolicyEnabled"
-            :title="tagPolicyEnabled ? '' : $t('moderation.reports.account.tag_policy_notice')"
+            :title="
+              tagPolicyEnabled
+                ? ''
+                : $t('moderation.reports.account.tag_policy_notice')
+            "
           >
-            <span>{{ $t("moderation.reports.tags") }}</span>
+            <span>{{ $t('moderation.reports.tags') }}</span>
             {{ ' ' }}
-            <FAIcon
-              icon="chevron-down"
-            />
+            <FAIcon icon="chevron-down" />
           </button>
         </template>
-        <template v-slot:content="{close}">
+        <template #content="{ close }">
           <div
             class="dropdown-menu"
             :disabled="!tagPolicyEnabled"
@@ -178,7 +199,9 @@
             >
               <span
                 class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
+                :class="{
+                  'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED)
+                }"
               />
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
@@ -194,7 +217,7 @@
             </button>
           </div>
         </template>
-      </popover>
+      </Popover>
     </div>
   </div>
 </template>
diff --git a/src/components/mod_modal/tabs/reports_tab/report_note.js b/src/components/mod_modal/tabs/reports_tab/report_note.js
index efcc86649..206b3a5ee 100644
--- a/src/components/mod_modal/tabs/reports_tab/report_note.js
+++ b/src/components/mod_modal/tabs/reports_tab/report_note.js
@@ -3,32 +3,29 @@ import Timeago from 'src/components/timeago/timeago.vue'
 import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
 
 const ReportNote = {
-  data () {
+  data() {
     return {
       showingDeleteDialog: false
     }
   },
-  props: [
-    'content',
-    'created_at',
-    'user',
-    'report_id',
-    'id'
-  ],
+  props: ['content', 'created_at', 'user', 'report_id', 'id'],
   components: {
     ConfirmModal,
     Timeago,
     UserAvatar
   },
   methods: {
-    deleteNoteFromReport () {
-      this.$store.dispatch('deleteNoteFromReport', { id: this.report_id, note: this.id })
+    deleteNoteFromReport() {
+      this.$store.dispatch('deleteNoteFromReport', {
+        id: this.report_id,
+        note: this.id
+      })
       this.showingDeleteDialog = false
     },
-    showDeleteDialog () {
+    showDeleteDialog() {
       this.showingDeleteDialog = true
     },
-    hideDeleteDialog () {
+    hideDeleteDialog() {
       this.showingDeleteDialog = false
     }
   }
diff --git a/src/components/mod_modal/tabs/reports_tab/report_note.vue b/src/components/mod_modal/tabs/reports_tab/report_note.vue
index 49b3bd14a..082daea5a 100644
--- a/src/components/mod_modal/tabs/reports_tab/report_note.vue
+++ b/src/components/mod_modal/tabs/reports_tab/report_note.vue
@@ -6,7 +6,7 @@
           class="small-avatar"
           :user="user"
         />
-        {{ this.user.screen_name }}
+        {{ user.screen_name }}
       </div>
       <div class="header-right">
         <Timeago
diff --git a/src/components/mod_modal/tabs/reports_tab/reports_tab.js b/src/components/mod_modal/tabs/reports_tab/reports_tab.js
index 1babc7ca9..f5c4668a7 100644
--- a/src/components/mod_modal/tabs/reports_tab/reports_tab.js
+++ b/src/components/mod_modal/tabs/reports_tab/reports_tab.js
@@ -4,7 +4,7 @@ import ReportCard from './report_card.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 const ReportsTab = {
-  data () {
+  data() {
     return {
       showClosed: false
     }
@@ -14,10 +14,10 @@ const ReportsTab = {
     ReportCard
   },
   computed: {
-    reports () {
+    reports() {
       return this.$store.state.reports.reports
     },
-    openReports () {
+    openReports() {
       return filter(this.reports, { state: 'open' })
     }
   }
diff --git a/src/components/mod_modal/tabs/reports_tab/reports_tab.vue b/src/components/mod_modal/tabs/reports_tab/reports_tab.vue
index 54cdaed32..a8f0e5afe 100644
--- a/src/components/mod_modal/tabs/reports_tab/reports_tab.vue
+++ b/src/components/mod_modal/tabs/reports_tab/reports_tab.vue
@@ -8,11 +8,15 @@
         </Checkbox>
       </div>
       <div class="reports">
-        <div v-if="(openReports.length === 0 && !showClosed) || reports.length === 0">
+        <div
+          v-if="
+            (openReports.length === 0 && !showClosed) || reports.length === 0
+          "
+        >
           <p>{{ $t('moderation.reports.no_reports') }}</p>
         </div>
         <ReportCard
-          v-for="report in (showClosed ? reports : openReports)"
+          v-for="report in showClosed ? reports : openReports"
           :key="report.id"
           v-bind="report"
         />
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 9394efff7..b8dedc051 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -23,10 +23,10 @@ export default {
     }
   },
   computed: {
-    classes () {
+    classes() {
       return {
         'modal-background': !this.noBackground,
-        'open': this.isOpen
+        open: this.isOpen
       }
     }
   }
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 2469327af..ee10d1b09 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -15,10 +15,8 @@ const SANDBOX = 'mrf_tag:sandbox'
 const QUARANTINE = 'mrf_tag:quarantine'
 
 const ModerationTools = {
-  props: [
-    'user'
-  ],
-  data () {
+  props: ['user'],
+  data() {
     return {
       tags: {
         FORCE_NSFW,
@@ -38,66 +36,95 @@ const ModerationTools = {
     Popover
   },
   computed: {
-    tagsSet () {
+    tagsSet() {
       return new Set(this.user.tags)
     },
-    hasTagPolicy () {
+    hasTagPolicy() {
       return this.$store.state.instance.tagPolicyAvailable
     }
   },
   methods: {
-    hasTag (tagName) {
+    hasTag(tagName) {
       return this.tagsSet.has(tagName)
     },
-    toggleTag (tag) {
+    toggleTag(tag) {
       const store = this.$store
       if (this.tagsSet.has(tag)) {
-        store.state.api.backendInteractor.untagUser({ user: this.user, tag }).then(response => {
-          if (!response.ok) { return }
-          store.commit('untagUser', { user: this.user, tag })
-        })
+        store.state.api.backendInteractor
+          .untagUser({ user: this.user, tag })
+          .then((response) => {
+            if (!response.ok) {
+              return
+            }
+            store.commit('untagUser', { user: this.user, tag })
+          })
       } else {
-        store.state.api.backendInteractor.tagUser({ user: this.user, tag }).then(response => {
-          if (!response.ok) { return }
-          store.commit('tagUser', { user: this.user, tag })
-        })
+        store.state.api.backendInteractor
+          .tagUser({ user: this.user, tag })
+          .then((response) => {
+            if (!response.ok) {
+              return
+            }
+            store.commit('tagUser', { user: this.user, tag })
+          })
       }
     },
-    toggleRight (right) {
+    toggleRight(right) {
       const store = this.$store
       if (this.user.rights[right]) {
-        store.state.api.backendInteractor.deleteRight({ user: this.user, right }).then(response => {
-          if (!response.ok) { return }
-          store.commit('updateRight', { user: this.user, right, value: false })
-        })
+        store.state.api.backendInteractor
+          .deleteRight({ user: this.user, right })
+          .then((response) => {
+            if (!response.ok) {
+              return
+            }
+            store.commit('updateRight', {
+              user: this.user,
+              right,
+              value: false
+            })
+          })
       } else {
-        store.state.api.backendInteractor.addRight({ user: this.user, right }).then(response => {
-          if (!response.ok) { return }
-          store.commit('updateRight', { user: this.user, right, value: true })
-        })
+        store.state.api.backendInteractor
+          .addRight({ user: this.user, right })
+          .then((response) => {
+            if (!response.ok) {
+              return
+            }
+            store.commit('updateRight', {
+              user: this.user,
+              right,
+              value: true
+            })
+          })
       }
     },
-    toggleActivationStatus () {
+    toggleActivationStatus() {
       this.$store.dispatch('toggleActivationStatus', { user: this.user })
     },
-    deleteUserDialog (show) {
+    deleteUserDialog(show) {
       this.showDeleteUserDialog = show
     },
-    deleteUser () {
+    deleteUser() {
       const store = this.$store
       const user = this.user
       const { id, name } = user
-      store.state.api.backendInteractor.deleteUser({ user })
-        .then(e => {
-          this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
-          const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile'
-          const isTargetUser = this.$route.params.name === name || this.$route.params.id === id
-          if (isProfile && isTargetUser) {
-            window.history.back()
-          }
-        })
+      store.state.api.backendInteractor.deleteUser({ user }).then((e) => {
+        this.$store.dispatch(
+          'markStatusesAsDeleted',
+          (status) => user.id === status.user.id
+        )
+        const isProfile =
+          this.$route.name === 'external-user-profile' ||
+          this.$route.name === 'user-profile'
+        const isTargetUser =
+          this.$route.params.name === name || this.$route.params.id === id
+        if (isProfile && isTargetUser) {
+          window.history.back()
+        }
+      })
     },
-    setToggled (value) {
+    setToggled(value) {
       this.toggled = value
     }
   }
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 75ea08ccd..4648afedc 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -8,20 +8,32 @@
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
-      <template v-slot:content>
+      <template #content>
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
               class="button-default dropdown-item"
               @click="toggleRight('admin')"
             >
-              {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+              {{
+                $t(
+                  !!user.rights.admin
+                    ? 'user_card.admin_menu.revoke_admin'
+                    : 'user_card.admin_menu.grant_admin'
+                )
+              }}
             </button>
             <button
               class="button-default dropdown-item"
               @click="toggleRight('moderator')"
             >
-              {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+              {{
+                $t(
+                  !!user.rights.moderator
+                    ? 'user_card.admin_menu.revoke_moderator'
+                    : 'user_card.admin_menu.grant_moderator'
+                )
+              }}
             </button>
             <div
               role="separator"
@@ -32,7 +44,13 @@
             class="button-default dropdown-item"
             @click="toggleActivationStatus()"
           >
-            {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
+            {{
+              $t(
+                !!user.deactivated
+                  ? 'user_card.admin_menu.activate_account'
+                  : 'user_card.admin_menu.deactivate_account'
+              )
+            }}
           </button>
           <button
             class="button-default dropdown-item"
@@ -72,7 +90,9 @@
             >
               <span
                 class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
+                :class="{
+                  'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED)
+                }"
               />
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
@@ -93,7 +113,11 @@
             >
               <span
                 class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
+                :class="{
+                  'menu-checkbox-checked': hasTag(
+                    tags.DISABLE_REMOTE_SUBSCRIPTION
+                  )
+                }"
               />
               {{ $t('user_card.admin_menu.disable_remote_subscription') }}
             </button>
@@ -104,7 +128,9 @@
             >
               <span
                 class="menu-checkbox"
-                :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
+                :class="{
+                  'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION)
+                }"
               />
               {{ $t('user_card.admin_menu.disable_any_subscription') }}
             </button>
@@ -122,7 +148,7 @@
           </span>
         </div>
       </template>
-      <template v-slot:trigger>
+      <template #trigger>
         <button
           class="btn button-default btn-block moderation-tools-button"
           :class="{ toggled }"
@@ -137,11 +163,11 @@
         v-if="showDeleteUserDialog"
         :on-cancel="deleteUserDialog.bind(this, false)"
       >
-        <template v-slot:header>
+        <template #header>
           {{ $t('user_card.admin_menu.delete_user') }}
         </template>
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template v-slot:footer>
+        <template #footer>
           <button
             class="btn button-default"
             @click="deleteUserDialog(false)"
@@ -175,7 +201,8 @@
 }
 
 .moderation-tools-button {
-  svg,i {
+  svg,
+  i {
     font-size: 0.8em;
   }
 }
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.js b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
index 3fde81064..cbb546861 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.js
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
@@ -8,7 +8,7 @@ import { get } from 'lodash'
  * to add an extra "info" key.
  */
 const toInstanceReasonObject = (instances, info, key) => {
-  return instances.map(instance => {
+  return instances.map((instance) => {
     if (info[key] && info[key][instance] && info[key][instance]['reason']) {
       return { instance: instance, reason: info[key][instance]['reason'] }
     }
@@ -19,54 +19,80 @@ const toInstanceReasonObject = (instances, info, key) => {
 const MRFTransparencyPanel = {
   computed: {
     ...mapState({
-      federationPolicy: state => get(state, 'instance.federationPolicy'),
-      mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
-      quarantineInstances: state => toInstanceReasonObject(
-        get(state, 'instance.federationPolicy.quarantined_instances', []),
-        get(state, 'instance.federationPolicy.quarantined_instances_info', []),
-        'quarantined_instances'
-      ),
-      acceptInstances: state => toInstanceReasonObject(
-        get(state, 'instance.federationPolicy.mrf_simple.accept', []),
-        get(state, 'instance.federationPolicy.mrf_simple_info', []),
-        'accept'
-      ),
-      rejectInstances: state => toInstanceReasonObject(
-        get(state, 'instance.federationPolicy.mrf_simple.reject', []),
-        get(state, 'instance.federationPolicy.mrf_simple_info', []),
-        'reject'
-      ),
-      ftlRemovalInstances: state => toInstanceReasonObject(
-        get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
-        get(state, 'instance.federationPolicy.mrf_simple_info', []),
-        'federated_timeline_removal'
-      ),
-      mediaNsfwInstances: state => toInstanceReasonObject(
-        get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
-        get(state, 'instance.federationPolicy.mrf_simple_info', []),
-        'media_nsfw'
-      ),
-      mediaRemovalInstances: state => toInstanceReasonObject(
-        get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
-        get(state, 'instance.federationPolicy.mrf_simple_info', []),
-        'media_removal'
-      ),
-      keywordsFtlRemoval: state => get(state, 'instance.federationPolicy.mrf_keyword.federated_timeline_removal', []),
-      keywordsReject: state => get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
-      keywordsReplace: state => get(state, 'instance.federationPolicy.mrf_keyword.replace', [])
+      federationPolicy: (state) => get(state, 'instance.federationPolicy'),
+      mrfPolicies: (state) =>
+        get(state, 'instance.federationPolicy.mrf_policies', []),
+      quarantineInstances: (state) =>
+        toInstanceReasonObject(
+          get(state, 'instance.federationPolicy.quarantined_instances', []),
+          get(
+            state,
+            'instance.federationPolicy.quarantined_instances_info',
+            []
+          ),
+          'quarantined_instances'
+        ),
+      acceptInstances: (state) =>
+        toInstanceReasonObject(
+          get(state, 'instance.federationPolicy.mrf_simple.accept', []),
+          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          'accept'
+        ),
+      rejectInstances: (state) =>
+        toInstanceReasonObject(
+          get(state, 'instance.federationPolicy.mrf_simple.reject', []),
+          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          'reject'
+        ),
+      ftlRemovalInstances: (state) =>
+        toInstanceReasonObject(
+          get(
+            state,
+            'instance.federationPolicy.mrf_simple.federated_timeline_removal',
+            []
+          ),
+          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          'federated_timeline_removal'
+        ),
+      mediaNsfwInstances: (state) =>
+        toInstanceReasonObject(
+          get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
+          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          'media_nsfw'
+        ),
+      mediaRemovalInstances: (state) =>
+        toInstanceReasonObject(
+          get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
+          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          'media_removal'
+        ),
+      keywordsFtlRemoval: (state) =>
+        get(
+          state,
+          'instance.federationPolicy.mrf_keyword.federated_timeline_removal',
+          []
+        ),
+      keywordsReject: (state) =>
+        get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
+      keywordsReplace: (state) =>
+        get(state, 'instance.federationPolicy.mrf_keyword.replace', [])
     }),
-    hasInstanceSpecificPolicies () {
-      return this.quarantineInstances.length ||
+    hasInstanceSpecificPolicies() {
+      return (
+        this.quarantineInstances.length ||
         this.acceptInstances.length ||
         this.rejectInstances.length ||
         this.ftlRemovalInstances.length ||
         this.mediaNsfwInstances.length ||
         this.mediaRemovalInstances.length
+      )
     },
-    hasKeywordPolicies () {
-      return this.keywordsFtlRemoval.length ||
+    hasKeywordPolicies() {
+      return (
+        this.keywordsFtlRemoval.length ||
         this.keywordsReject.length ||
         this.keywordsReplace.length
+      )
     }
   }
 }
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index b05bd2988..2878cd0ad 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -6,13 +6,13 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background">
         <div class="title">
-          {{ $t("about.mrf.federation") }}
+          {{ $t('about.mrf.federation') }}
         </div>
       </div>
       <div class="panel-body">
         <div class="mrf-section">
-          <h2>{{ $t("about.mrf.mrf_policies") }}</h2>
-          <p>{{ $t("about.mrf.mrf_policies_desc") }}</p>
+          <h2>{{ $t('about.mrf.mrf_policies') }}</h2>
+          <p>{{ $t('about.mrf.mrf_policies_desc') }}</p>
 
           <ul>
             <li
@@ -23,18 +23,18 @@
           </ul>
 
           <h2 v-if="hasInstanceSpecificPolicies">
-            {{ $t("about.mrf.simple.simple_policies") }}
+            {{ $t('about.mrf.simple.simple_policies') }}
           </h2>
 
           <div v-if="acceptInstances.length">
-            <h4>{{ $t("about.mrf.simple.accept") }}</h4>
+            <h4>{{ $t('about.mrf.simple.accept') }}</h4>
 
-            <p>{{ $t("about.mrf.simple.accept_desc") }}</p>
+            <p>{{ $t('about.mrf.simple.accept_desc') }}</p>
 
             <table>
               <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
+                <th>{{ $t('about.mrf.simple.instance') }}</th>
+                <th>{{ $t('about.mrf.simple.reason') }}</th>
               </tr>
               <tr
                 v-for="entry in acceptInstances"
@@ -42,7 +42,7 @@
               >
                 <td>{{ entry.instance }}</td>
                 <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
+                  {{ $t('about.mrf.simple.not_applicable') }}
                 </td>
                 <td v-else>
                   {{ entry.reason }}
@@ -52,14 +52,14 @@
           </div>
 
           <div v-if="rejectInstances.length">
-            <h4>{{ $t("about.mrf.simple.reject") }}</h4>
+            <h4>{{ $t('about.mrf.simple.reject') }}</h4>
 
-            <p>{{ $t("about.mrf.simple.reject_desc") }}</p>
+            <p>{{ $t('about.mrf.simple.reject_desc') }}</p>
 
             <table>
               <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
+                <th>{{ $t('about.mrf.simple.instance') }}</th>
+                <th>{{ $t('about.mrf.simple.reason') }}</th>
               </tr>
               <tr
                 v-for="entry in rejectInstances"
@@ -67,7 +67,7 @@
               >
                 <td>{{ entry.instance }}</td>
                 <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
+                  {{ $t('about.mrf.simple.not_applicable') }}
                 </td>
                 <td v-else>
                   {{ entry.reason }}
@@ -77,14 +77,14 @@
           </div>
 
           <div v-if="quarantineInstances.length">
-            <h4>{{ $t("about.mrf.simple.quarantine") }}</h4>
+            <h4>{{ $t('about.mrf.simple.quarantine') }}</h4>
 
-            <p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>
+            <p>{{ $t('about.mrf.simple.quarantine_desc') }}</p>
 
             <table>
               <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
+                <th>{{ $t('about.mrf.simple.instance') }}</th>
+                <th>{{ $t('about.mrf.simple.reason') }}</th>
               </tr>
               <tr
                 v-for="entry in quarantineInstances"
@@ -92,7 +92,7 @@
               >
                 <td>{{ entry.instance }}</td>
                 <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
+                  {{ $t('about.mrf.simple.not_applicable') }}
                 </td>
                 <td v-else>
                   {{ entry.reason }}
@@ -102,14 +102,14 @@
           </div>
 
           <div v-if="ftlRemovalInstances.length">
-            <h4>{{ $t("about.mrf.simple.ftl_removal") }}</h4>
+            <h4>{{ $t('about.mrf.simple.ftl_removal') }}</h4>
 
-            <p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>
+            <p>{{ $t('about.mrf.simple.ftl_removal_desc') }}</p>
 
             <table>
               <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
+                <th>{{ $t('about.mrf.simple.instance') }}</th>
+                <th>{{ $t('about.mrf.simple.reason') }}</th>
               </tr>
               <tr
                 v-for="entry in ftlRemovalInstances"
@@ -117,7 +117,7 @@
               >
                 <td>{{ entry.instance }}</td>
                 <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
+                  {{ $t('about.mrf.simple.not_applicable') }}
                 </td>
                 <td v-else>
                   {{ entry.reason }}
@@ -127,14 +127,14 @@
           </div>
 
           <div v-if="mediaNsfwInstances.length">
-            <h4>{{ $t("about.mrf.simple.media_nsfw") }}</h4>
+            <h4>{{ $t('about.mrf.simple.media_nsfw') }}</h4>
 
-            <p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>
+            <p>{{ $t('about.mrf.simple.media_nsfw_desc') }}</p>
 
             <table>
               <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
+                <th>{{ $t('about.mrf.simple.instance') }}</th>
+                <th>{{ $t('about.mrf.simple.reason') }}</th>
               </tr>
               <tr
                 v-for="entry in mediaNsfwInstances"
@@ -142,7 +142,7 @@
               >
                 <td>{{ entry.instance }}</td>
                 <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
+                  {{ $t('about.mrf.simple.not_applicable') }}
                 </td>
                 <td v-else>
                   {{ entry.reason }}
@@ -152,14 +152,14 @@
           </div>
 
           <div v-if="mediaRemovalInstances.length">
-            <h4>{{ $t("about.mrf.simple.media_removal") }}</h4>
+            <h4>{{ $t('about.mrf.simple.media_removal') }}</h4>
 
-            <p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>
+            <p>{{ $t('about.mrf.simple.media_removal_desc') }}</p>
 
             <table>
               <tr>
-                <th>{{ $t("about.mrf.simple.instance") }}</th>
-                <th>{{ $t("about.mrf.simple.reason") }}</th>
+                <th>{{ $t('about.mrf.simple.instance') }}</th>
+                <th>{{ $t('about.mrf.simple.reason') }}</th>
               </tr>
               <tr
                 v-for="entry in mediaRemovalInstances"
@@ -167,7 +167,7 @@
               >
                 <td>{{ entry.instance }}</td>
                 <td v-if="entry.reason === ''">
-                  {{ $t("about.mrf.simple.not_applicable") }}
+                  {{ $t('about.mrf.simple.not_applicable') }}
                 </td>
                 <td v-else>
                   {{ entry.reason }}
@@ -177,11 +177,11 @@
           </div>
 
           <h2 v-if="hasKeywordPolicies">
-            {{ $t("about.mrf.keyword.keyword_policies") }}
+            {{ $t('about.mrf.keyword.keyword_policies') }}
           </h2>
 
           <div v-if="keywordsFtlRemoval.length">
-            <h4>{{ $t("about.mrf.keyword.ftl_removal") }}</h4>
+            <h4>{{ $t('about.mrf.keyword.ftl_removal') }}</h4>
 
             <ul>
               <li
@@ -193,7 +193,7 @@
           </div>
 
           <div v-if="keywordsReject.length">
-            <h4>{{ $t("about.mrf.keyword.reject") }}</h4>
+            <h4>{{ $t('about.mrf.keyword.reject') }}</h4>
 
             <ul>
               <li
@@ -205,7 +205,7 @@
           </div>
 
           <div v-if="keywordsReplace.length">
-            <h4>{{ $t("about.mrf.keyword.replace") }}</h4>
+            <h4>{{ $t('about.mrf.keyword.replace') }}</h4>
 
             <ul>
               <li
@@ -213,7 +213,7 @@
                 :key="keyword"
               >
                 {{ keyword.pattern }}
-                {{ $t("about.mrf.keyword.is_replaced_by") }}
+                {{ $t('about.mrf.keyword.is_replaced_by') }}
                 {{ keyword.replacement }}
               </li>
             </ul>
diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js
index cbec0e9bb..2c4acceae 100644
--- a/src/components/mute_card/mute_card.js
+++ b/src/components/mute_card/mute_card.js
@@ -2,19 +2,19 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const MuteCard = {
   props: ['userId'],
-  data () {
+  data() {
     return {
       progress: false
     }
   },
   computed: {
-    user () {
+    user() {
       return this.$store.getters.findUser(this.userId)
     },
-    relationship () {
+    relationship() {
       return this.$store.getters.relationship(this.userId)
     },
-    muted () {
+    muted() {
       return this.relationship.muting
     }
   },
@@ -22,13 +22,13 @@ const MuteCard = {
     BasicUserCard
   },
   methods: {
-    unmuteUser () {
+    unmuteUser() {
       this.progress = true
       this.$store.dispatch('unmuteUser', this.userId).then(() => {
         this.progress = false
       })
     },
-    muteUser () {
+    muteUser() {
       this.progress = true
       this.$store.dispatch('muteUser', this.userId).then(() => {
         this.progress = false
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index af165d476..becb205b9 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -33,7 +33,7 @@ library.add(
 )
 
 const NavPanel = {
-  created () {
+  created() {
     if (this.currentUser && this.currentUser.locked) {
       this.$store.dispatch('startFetchingFollowRequests')
     }
@@ -41,22 +41,22 @@ const NavPanel = {
   components: {
     TimelineMenuContent
   },
-  data () {
+  data() {
     return {
       showTimelines: false
     }
   },
   methods: {
-    toggleTimelines () {
+    toggleTimelines() {
       this.showTimelines = !this.showTimelines
     }
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser,
-      followRequestCount: state => state.api.followRequests.length,
-      privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
+      currentUser: (state) => state.users.currentUser,
+      followRequestCount: (state) => state.api.followRequests.length,
+      privateMode: (state) => state.instance.private,
+      federating: (state) => state.instance.federating
     }),
     ...mapGetters(['unreadAnnouncementCount'])
   }
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 66dae37a9..98aa0014e 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -11,7 +11,7 @@
               fixed-width
               class="fa-scale-110"
               icon="stream"
-            />{{ $t("nav.timelines") }}
+            />{{ $t('nav.timelines') }}
             <FAIcon
               class="timelines-chevron"
               fixed-width
@@ -34,19 +34,22 @@
               fixed-width
               class="fa-scale-110"
               icon="list"
-            />{{ $t("nav.lists") }}
+            />{{ $t('nav.lists') }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link
             class="menu-item"
-            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+            :to="{
+              name: 'interactions',
+              params: { username: currentUser.screen_name }
+            }"
           >
             <FAIcon
               fixed-width
               class="fa-scale-110"
               icon="bolt"
-            />{{ $t("nav.interactions") }}
+            />{{ $t('nav.interactions') }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
@@ -58,7 +61,7 @@
               fixed-width
               class="fa-scale-110"
               icon="user-plus"
-            />{{ $t("nav.friend_requests") }}
+            />{{ $t('nav.friend_requests') }}
             <span
               v-if="followRequestCount > 0"
               class="badge badge-notification"
@@ -76,7 +79,7 @@
               fixed-width
               class="fa-scale-110"
               icon="info-circle"
-            />{{ $t("nav.about") }}
+            />{{ $t('nav.about') }}
           </router-link>
         </li>
         <li v-if="currentUser">
@@ -102,7 +105,7 @@
   </div>
 </template>
 
-<script src="./nav_panel.js" ></script>
+<script src="./nav_panel.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index af612ccb4..2f3a31200 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -7,7 +7,10 @@ import Timeago from '../timeago/timeago.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
-import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.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 {
@@ -33,7 +36,7 @@ library.add(
 )
 
 const Notification = {
-  data () {
+  data() {
     return {
       userExpanded: false,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter,
@@ -42,7 +45,7 @@ const Notification = {
       showingDenyConfirmDialog: false
     }
   },
-  props: [ 'notification' ],
+  props: ['notification'],
   components: {
     StatusContent,
     UserAvatar,
@@ -53,103 +56,112 @@ const Notification = {
     ConfirmModal
   },
   methods: {
-    toggleUserExpanded () {
+    toggleUserExpanded() {
       this.userExpanded = !this.userExpanded
     },
-    generateUserProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    generateUserProfileLink(user) {
+      return generateProfileLink(
+        user.id,
+        user.screen_name,
+        this.$store.state.instance.restrictedNicknames
+      )
     },
-    getUser (notification) {
+    getUser(notification) {
       return this.$store.state.users.usersObject[notification.from_profile.id]
     },
-    toggleMute () {
+    toggleMute() {
       this.unmuted = !this.unmuted
     },
-    showApproveConfirmDialog () {
+    showApproveConfirmDialog() {
       this.showingApproveConfirmDialog = true
     },
-    hideApproveConfirmDialog () {
+    hideApproveConfirmDialog() {
       this.showingApproveConfirmDialog = false
     },
-    showDenyConfirmDialog () {
+    showDenyConfirmDialog() {
       this.showingDenyConfirmDialog = true
     },
-    hideDenyConfirmDialog () {
+    hideDenyConfirmDialog() {
       this.showingDenyConfirmDialog = false
     },
-    approveUser () {
+    approveUser() {
       if (this.shouldConfirmApprove) {
         this.showApproveConfirmDialog()
       } else {
         this.doApprove()
       }
     },
-    doApprove () {
+    doApprove() {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
-      this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
+      this.$store.dispatch('markSingleNotificationAsSeen', {
+        id: this.notification.id
+      })
       this.$store.dispatch('updateNotification', {
         id: this.notification.id,
-        updater: notification => {
+        updater: (notification) => {
           notification.type = 'follow'
         }
       })
       this.hideApproveConfirmDialog()
     },
-    denyUser () {
+    denyUser() {
       if (this.shouldConfirmDeny) {
         this.showDenyConfirmDialog()
       } else {
         this.doDeny()
       }
     },
-    doDeny () {
-      this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
+    doDeny() {
+      this.$store.state.api.backendInteractor
+        .denyUser({ id: this.user.id })
         .then(() => {
-          this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
+          this.$store.dispatch('dismissNotificationLocal', {
+            id: this.notification.id
+          })
           this.$store.dispatch('removeFollowRequest', this.user)
         })
       this.hideDenyConfirmDialog()
     }
   },
   computed: {
-    userClass () {
+    userClass() {
       return highlightClass(this.notification.from_profile)
     },
-    userStyle () {
+    userStyle() {
       const highlight = this.$store.getters.mergedConfig.highlight
       const user = this.notification.from_profile
       return highlightStyle(highlight[user.screen_name])
     },
-    user () {
+    user() {
       return this.$store.getters.findUser(this.notification.from_profile.id)
     },
-    userProfileLink () {
+    userProfileLink() {
       return this.generateUserProfileLink(this.user)
     },
-    targetUser () {
+    targetUser() {
       return this.$store.getters.findUser(this.notification.target.id)
     },
-    targetUserProfileLink () {
+    targetUserProfileLink() {
       return this.generateUserProfileLink(this.targetUser)
     },
-    needMute () {
+    needMute() {
       return this.$store.getters.relationship(this.user.id).muting
     },
-    isStatusNotification () {
+    isStatusNotification() {
       return isStatusNotification(this.notification.type)
     },
-    mergedConfig () {
+    mergedConfig() {
       return this.$store.getters.mergedConfig
     },
-    shouldConfirmApprove () {
+    shouldConfirmApprove() {
       return this.mergedConfig.modalOnApproveFollow
     },
-    shouldConfirmDeny () {
+    shouldConfirmDeny() {
       return this.mergedConfig.modalOnDenyFollow
     },
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
     })
   }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 761018650..53ad39f8e 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -28,8 +28,12 @@
     <div
       v-else
       class="Notification non-mention"
-      :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
-      :style="[ userStyle ]"
+      :class="[
+        userClass,
+        { highlighted: userStyle },
+        '-type--' + notification.type
+      ]"
+      :style="[userStyle]"
     >
       <a
         class="avatar-container"
@@ -55,7 +59,7 @@
             <bdi v-if="!!notification.from_profile.name_html">
               <RichContent
                 class="username"
-                :title="'@'+notification.from_profile.screen_name_ui"
+                :title="'@' + notification.from_profile.screen_name_ui"
                 :html="notification.from_profile.name_html"
                 :emoji="notification.from_profile.emoji"
               />
@@ -64,7 +68,7 @@
             <span
               v-else
               class="username"
-              :title="'@'+notification.from_profile.screen_name_ui"
+              :title="'@' + notification.from_profile.screen_name_ui"
             >
               {{ notification.from_profile.name }}
             </span>
@@ -121,7 +125,7 @@
                     class="notification-reaction-emoji"
                     :src="notification.emoji_url"
                     :name="notification.emoji"
-                  >
+                  />
                   <span
                     v-else
                     class="emoji-reaction-emoji"
@@ -146,7 +150,10 @@
           >
             <router-link
               v-if="notification.status"
-              :to="{ name: 'conversation', params: { id: notification.status.id } }"
+              :to="{
+                name: 'conversation',
+                params: { id: notification.status.id }
+              }"
               class="faint-link"
             >
               <Timeago
@@ -179,7 +186,10 @@
           </button>
         </span>
         <div
-          v-if="notification.type === 'follow' || notification.type === 'follow_request'"
+          v-if="
+            notification.type === 'follow' ||
+            notification.type === 'follow_request'
+          "
           class="follow-text"
         >
           <router-link
@@ -190,7 +200,7 @@
           </router-link>
           <div
             v-if="notification.type === 'follow_request'"
-            style="white-space: nowrap;"
+            style="white-space: nowrap"
           >
             <button
               class="button-unstyled"
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 00a531b3f..93343ede0 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -5,7 +5,7 @@
     placement="bottom"
     :bound-to="{ x: 'container' }"
   >
-    <template v-slot:content>
+    <template #content>
       <div class="dropdown-menu">
         <button
           class="button-default dropdown-item"
@@ -72,7 +72,7 @@
         </button>
       </div>
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <button class="filter-trigger-button button-unstyled">
         <FAIcon icon="filter" />
       </button>
@@ -85,19 +85,17 @@ import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faFilter
-)
+library.add(faFilter)
 
 export default {
   components: { Popover },
   computed: {
-    filters () {
+    filters() {
       return this.$store.getters.mergedConfig.notificationVisibility
     }
   },
   methods: {
-    toggleNotificationFilter (type) {
+    toggleNotificationFilter(type) {
       this.$store.dispatch('setOption', {
         name: 'notificationVisibility',
         value: {
@@ -111,7 +109,6 @@ export default {
 </script>
 
 <style lang="scss">
-
 .NotificationFilters {
   align-self: stretch;
 
@@ -126,5 +123,4 @@ export default {
     }
   }
 }
-
 </style>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 21f90b483..85ace19d6 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -11,9 +11,7 @@ import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 
@@ -31,7 +29,7 @@ const Notifications = {
     // Disable teleporting (i.e. for /users/user/notifications)
     disableTeleport: Boolean
   },
-  data () {
+  data() {
     return {
       bottomedOut: false,
       // How many seen notifications to display in the list. The more there are,
@@ -41,35 +39,35 @@ const Notifications = {
     }
   },
   computed: {
-    mainClass () {
+    mainClass() {
       return this.minimalMode ? '' : 'panel panel-default'
     },
-    notifications () {
+    notifications() {
       return notificationsFromStore(this.$store)
     },
-    error () {
+    error() {
       return this.$store.state.statuses.notifications.error
     },
-    unseenNotifications () {
+    unseenNotifications() {
       return unseenNotificationsFromStore(this.$store)
     },
-    filteredNotifications () {
+    filteredNotifications() {
       return filteredNotificationsFromStore(this.$store, this.filterMode)
     },
-    unseenCount () {
+    unseenCount() {
       return this.unseenNotifications.length
     },
-    unseenCountTitle () {
+    unseenCountTitle() {
       return this.unseenCount + this.unreadAnnouncementCount
     },
-    loading () {
+    loading() {
       return this.$store.state.statuses.notifications.loading
     },
-    noHeading () {
+    noHeading() {
       const { layoutType } = this.$store.state.interface
       return this.minimalMode || layoutType === 'mobile'
     },
-    teleportTarget () {
+    teleportTarget() {
       const { layoutType } = this.$store.state.interface
       const map = {
         wide: '#notifs-column',
@@ -77,13 +75,16 @@ const Notifications = {
       }
       return map[layoutType] || '#notifs-sidebar'
     },
-    notificationsToDisplay () {
-      return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
+    notificationsToDisplay() {
+      return this.filteredNotifications.slice(
+        0,
+        this.unseenCount + this.seenToDisplayCount
+      )
     },
     ...mapGetters(['unreadAnnouncementCount'])
   },
   watch: {
-    unseenCountTitle (count) {
+    unseenCountTitle(count) {
       if (count > 0) {
         FaviconService.drawFaviconBadge()
         this.$store.dispatch('setPageTitle', `(${count})`)
@@ -94,18 +95,21 @@ const Notifications = {
     }
   },
   methods: {
-    markAsSeen () {
+    markAsSeen() {
       this.$store.dispatch('markNotificationsAsSeen')
       this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
     },
-    fetchOlderNotifications () {
+    fetchOlderNotifications() {
       if (this.loading) {
         return
       }
 
       const seenCount = this.filteredNotifications.length - this.unseenCount
       if (this.seenToDisplayCount < seenCount) {
-        this.seenToDisplayCount = Math.min(this.seenToDisplayCount + 20, seenCount)
+        this.seenToDisplayCount = Math.min(
+          this.seenToDisplayCount + 20,
+          seenCount
+        )
         return
       } else if (this.seenToDisplayCount > seenCount) {
         this.seenToDisplayCount = seenCount
@@ -114,17 +118,19 @@ const Notifications = {
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
       store.commit('setNotificationsLoading', { value: true })
-      notificationsFetcher.fetchAndUpdate({
-        store,
-        credentials,
-        older: true
-      }).then(notifs => {
-        store.commit('setNotificationsLoading', { value: false })
-        if (notifs.length === 0) {
-          this.bottomedOut = true
-        }
-        this.seenToDisplayCount += notifs.length
-      })
+      notificationsFetcher
+        .fetchAndUpdate({
+          store,
+          credentials,
+          older: true
+        })
+        .then((notifs) => {
+          store.commit('setNotificationsLoading', { value: false })
+          if (notifs.length === 0) {
+            this.bottomedOut = true
+          }
+          this.seenToDisplayCount += notifs.length
+        })
     }
   }
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index e778e27b4..fde0f65ec 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -17,7 +17,8 @@
             <span
               v-if="unseenCount"
               class="badge badge-notification unseen-count"
-            >{{ unseenCount }}</span>
+              >{{ unseenCount }}</span
+            >
           </div>
           <button
             v-if="unseenCount"
@@ -33,7 +34,7 @@
             v-for="notification in notificationsToDisplay"
             :key="notification.id"
             class="notification"
-            :class="{unseen: !minimalMode && !notification.seen}"
+            :class="{ unseen: !minimalMode && !notification.seen }"
           >
             <div class="notification-overlay" />
             <notification :notification="notification" />
@@ -52,7 +53,11 @@
             @click.prevent="fetchOlderNotifications()"
           >
             <div class="new-status-notification text-center">
-              {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+              {{
+                minimalMode
+                  ? $t('interactions.load_older')
+                  : $t('notifications.load_older')
+              }}
             </div>
           </button>
           <div
diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js
index a3c7b7f98..053f7c8c1 100644
--- a/src/components/oauth_callback/oauth_callback.js
+++ b/src/components/oauth_callback/oauth_callback.js
@@ -2,20 +2,22 @@ import oauth from '../../services/new_api/oauth.js'
 
 const oac = {
   props: ['code'],
-  mounted () {
+  mounted() {
     if (this.code) {
       const { clientId, clientSecret } = this.$store.state.oauth
 
-      oauth.getToken({
-        clientId,
-        clientSecret,
-        instance: this.$store.state.instance.server,
-        code: this.code
-      }).then((result) => {
-        this.$store.commit('setToken', result.access_token)
-        this.$store.dispatch('loginUser', result.access_token)
-        this.$router.push({ name: 'friends' })
-      })
+      oauth
+        .getToken({
+          clientId,
+          clientSecret,
+          instance: this.$store.state.instance.server,
+          code: this.code
+        })
+        .then((result) => {
+          this.$store.commit('setToken', result.access_token)
+          this.$store.dispatch('loginUser', result.access_token)
+          this.$router.push({ name: 'friends' })
+        })
     }
   }
 }
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index 15d08e04a..24adfa2cf 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -14,7 +14,9 @@
       :model-value="present"
       :disabled="disabled"
       class="opt"
-      @update:modelValue="$emit('update:modelValue', !present ? fallback : undefined)"
+      @update:modelValue="
+        $emit('update:modelValue', !present ? fallback : undefined)
+      "
     />
     <input
       :id="name"
@@ -26,7 +28,7 @@
       min="0"
       step=".05"
       @input="$emit('update:modelValue', $event.target.value)"
-    >
+    />
   </div>
 </template>
 
@@ -36,12 +38,10 @@ export default {
   components: {
     Checkbox
   },
-  props: [
-    'name', 'modelValue', 'fallback', 'disabled'
-  ],
+  props: ['name', 'modelValue', 'fallback', 'disabled'],
   emits: ['update:modelValue'],
   computed: {
-    present () {
+    present() {
       return typeof this.modelValue !== 'undefined'
     }
   }
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index d916d8a69..846faac32 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -15,9 +15,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
 export default {}
 </script>
diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
index 3d94f5e72..f3df3f62e 100644
--- a/src/components/password_reset/password_reset.js
+++ b/src/components/password_reset/password_reset.js
@@ -1,13 +1,9 @@
 import { mapState } from 'vuex'
 import passwordResetApi from '../../services/new_api/password_reset.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes
-)
+library.add(faTimes)
 
 const passwordReset = {
   data: () => ({
@@ -22,13 +18,13 @@ const passwordReset = {
   computed: {
     ...mapState({
       signedIn: (state) => !!state.users.currentUser,
-      instance: state => state.instance
+      instance: (state) => state.instance
     }),
-    mailerEnabled () {
+    mailerEnabled() {
       return this.instance.mailerEnabled
     }
   },
-  created () {
+  created() {
     if (this.signedIn) {
       this.$router.push({ name: 'root' })
     }
@@ -40,30 +36,32 @@ const passwordReset = {
     }
   },
   methods: {
-    dismissError () {
+    dismissError() {
       this.error = null
     },
-    submit () {
+    submit() {
       this.isPending = true
       const email = this.user.email
       const instance = this.instance.server
 
-      passwordResetApi({ instance, email }).then(({ status }) => {
-        this.isPending = false
-        this.user.email = ''
+      passwordResetApi({ instance, email })
+        .then(({ status }) => {
+          this.isPending = false
+          this.user.email = ''
 
-        if (status === 204) {
-          this.success = true
-          this.error = null
-        } else if (status === 429) {
-          this.throttled = true
-          this.error = this.$t('password_reset.too_many_requests')
-        }
-      }).catch(() => {
-        this.isPending = false
-        this.user.email = ''
-        this.error = this.$t('general.generic_error')
-      })
+          if (status === 204) {
+            this.success = true
+            this.error = null
+          } else if (status === 429) {
+            this.throttled = true
+            this.error = this.$t('password_reset.too_many_requests')
+          }
+        })
+        .catch(() => {
+          this.isPending = false
+          this.user.email = ''
+          this.error = this.$t('general.generic_error')
+        })
     }
   }
 }
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 90673f443..2704a034e 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -11,7 +11,11 @@
         <div class="container">
           <div v-if="!mailerEnabled">
             <p v-if="passwordResetRequested">
-              {{ $t('password_reset.password_reset_required_but_mailer_is_disabled') }}
+              {{
+                $t(
+                  'password_reset.password_reset_required_but_mailer_is_disabled'
+                )
+              }}
             </p>
             <p v-else>
               {{ $t('password_reset.password_reset_disabled') }}
@@ -22,7 +26,7 @@
               {{ $t('password_reset.check_email') }}
             </p>
             <div class="form-group text-center">
-              <router-link :to="{name: 'root'}">
+              <router-link :to="{ name: 'root' }">
                 {{ $t('password_reset.return_home') }}
               </router-link>
             </div>
@@ -45,7 +49,7 @@
                 :placeholder="$t('password_reset.placeholder')"
                 class="form-control"
                 type="input"
-              >
+              />
             </div>
             <div class="form-group">
               <button
@@ -130,5 +134,4 @@
     cursor: pointer;
   }
 }
-
 </style>
diff --git a/src/components/pinch_zoom/pinch_zoom.js b/src/components/pinch_zoom/pinch_zoom.js
index 82670ddfa..b691c6414 100644
--- a/src/components/pinch_zoom/pinch_zoom.js
+++ b/src/components/pinch_zoom/pinch_zoom.js
@@ -2,12 +2,12 @@ import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
 
 export default {
   methods: {
-    setTransform ({ scale, x, y }) {
+    setTransform({ scale, x, y }) {
       this.$el.setTransform({ scale, x, y })
     }
   },
-  created () {
+  created() {
     // Make lint happy
-    (() => PinchZoom)()
+    ;(() => PinchZoom)()
   }
 }
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index eda1733a0..c942a8442 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -9,76 +9,83 @@ export default {
     Timeago,
     RichContent
   },
-  data () {
+  data() {
     return {
       loading: false,
       choices: []
     }
   },
-  created () {
+  created() {
     if (!this.$store.state.polls.pollsObject[this.pollId]) {
       this.$store.dispatch('mergeOrAddPoll', this.basePoll)
     }
     this.$store.dispatch('trackPoll', this.pollId)
   },
-  unmounted () {
+  unmounted() {
     this.$store.dispatch('untrackPoll', this.pollId)
   },
   computed: {
-    pollId () {
+    pollId() {
       return this.basePoll.id
     },
-    poll () {
+    poll() {
       const storePoll = this.$store.state.polls.pollsObject[this.pollId]
       return storePoll || {}
     },
-    options () {
+    options() {
       return (this.poll && this.poll.options) || []
     },
-    expiresAt () {
+    expiresAt() {
       return (this.poll && this.poll.expires_at) || 0
     },
-    expired () {
+    expired() {
       return (this.poll && this.poll.expired) || false
     },
-    loggedIn () {
+    loggedIn() {
       return this.$store.state.users.currentUser
     },
-    showResults () {
+    showResults() {
       return this.poll.voted || this.expired || !this.loggedIn
     },
-    totalVotesCount () {
+    totalVotesCount() {
       return this.poll.votes_count
     },
-    containerClass () {
+    containerClass() {
       return {
         loading: this.loading
       }
     },
-    choiceIndices () {
+    choiceIndices() {
       // Convert array of booleans into an array of indices of the
       // items that were 'true', so [true, false, false, true] becomes
       // [0, 3].
       return this.choices
         .map((entry, index) => entry && index)
-        .filter(value => typeof value === 'number')
+        .filter((value) => typeof value === 'number')
     },
-    isDisabled () {
+    isDisabled() {
       const noChoice = this.choiceIndices.length === 0
       return this.loading || noChoice
     }
   },
   methods: {
-    percentageForOption (count) {
-      return this.totalVotesCount === 0 ? 0 : Math.round(count / this.totalVotesCount * 100)
+    percentageForOption(count) {
+      return this.totalVotesCount === 0
+        ? 0
+        : Math.round((count / this.totalVotesCount) * 100)
     },
-    resultTitle (option) {
-      return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}`
+    resultTitle(option) {
+      return `${option.votes_count}/${this.totalVotesCount} ${this.$t(
+        'polls.votes'
+      )}`
     },
-    fetchPoll () {
-      this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id })
+    fetchPoll() {
+      this.$store.dispatch('refreshPoll', {
+        id: this.statusId,
+        pollId: this.poll.id
+      })
     },
-    activateOption (index) {
+    activateOption(index) {
       // forgive me father: doing checking the radio/checkboxes
       // in code because of customized input elements need either
       // a) an extra element for the actual graphic, or b) use a
@@ -94,23 +101,28 @@ export default {
         clickedElement.checked = !clickedElement.checked
       } else {
         // Radio button, uncheck everything and check the clicked one
-        forEach(allElements, element => { element.checked = false })
+        forEach(allElements, (element) => {
+          element.checked = false
+        })
         clickedElement.checked = true
       }
-      this.choices = map(allElements, e => e.checked)
+      this.choices = map(allElements, (e) => e.checked)
     },
-    optionId (index) {
+    optionId(index) {
       return `poll${this.poll.id}-${index}`
     },
-    vote () {
+    vote() {
       if (this.choiceIndices.length === 0) return
       this.loading = true
-      this.$store.dispatch(
-        'votePoll',
-        { id: this.statusId, pollId: this.poll.id, choices: this.choiceIndices }
-      ).then(poll => {
-        this.loading = false
-      })
+      this.$store
+        .dispatch('votePoll', {
+          id: this.statusId,
+          pollId: this.poll.id,
+          choices: this.choiceIndices
+        })
+        .then((poll) => {
+          this.loading = false
+        })
     }
   }
 }
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index f6b12a542..b459c4986 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -25,7 +25,7 @@
         </div>
         <div
           class="result-fill"
-          :style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
+          :style="{ width: `${percentageForOption(option.votes_count)}%` }"
         />
       </div>
       <div
@@ -37,13 +37,13 @@
           type="checkbox"
           :disabled="loading"
           :value="index"
-        >
+        />
         <input
           v-else
           type="radio"
           :disabled="loading"
           :value="index"
-        >
+        />
         <label class="option-vote">
           <RichContent
             :html="option.title_html"
@@ -65,10 +65,18 @@
       </button>
       <div class="total">
         <template v-if="typeof poll.voters_count === 'number'">
-          {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}&nbsp;·&nbsp;
+          {{
+            $tc('polls.people_voted_count', poll.voters_count, {
+              count: poll.voters_count
+            })
+          }}&nbsp;·&nbsp;
         </template>
         <template v-else>
-          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
+          {{
+            $tc('polls.votes_count', poll.votes_count, {
+              count: poll.votes_count
+            })
+          }}&nbsp;·&nbsp;
         </template>
       </div>
       <span>
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index e30645c34..67bc0d207 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -2,15 +2,9 @@ import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import Select from '../select/select.vue'
-import {
-  faTimes,
-  faPlus
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes, faPlus } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes,
-  faPlus
-)
+library.add(faTimes, faPlus)
 
 export default {
   components: {
@@ -25,23 +19,23 @@ export default {
     expiryUnit: 'minutes'
   }),
   computed: {
-    pollLimits () {
+    pollLimits() {
       return this.$store.state.instance.pollLimits
     },
-    maxOptions () {
+    maxOptions() {
       return this.pollLimits.max_options
     },
-    maxLength () {
+    maxLength() {
       return this.pollLimits.max_option_chars
     },
-    expiryUnits () {
+    expiryUnits() {
       const allUnits = ['minutes', 'hours', 'days']
       const expiry = this.convertExpiryFromUnit
       return allUnits.filter(
-        unit => this.pollLimits.max_expiration >= expiry(unit, 1)
+        (unit) => this.pollLimits.max_expiration >= expiry(unit, 1)
       )
     },
-    minExpirationInCurrentUnit () {
+    minExpirationInCurrentUnit() {
       return Math.ceil(
         this.convertExpiryToUnit(
           this.expiryUnit,
@@ -49,7 +43,7 @@ export default {
         )
       )
     },
-    maxExpirationInCurrentUnit () {
+    maxExpirationInCurrentUnit() {
       return Math.floor(
         this.convertExpiryToUnit(
           this.expiryUnit,
@@ -59,13 +53,13 @@ export default {
     }
   },
   methods: {
-    clear () {
+    clear() {
       this.pollType = 'single'
       this.options = ['', '']
       this.expiryAmount = 10
       this.expiryUnit = 'minutes'
     },
-    nextOption (index) {
+    nextOption(index) {
       const element = this.$el.querySelector(`#poll-${index + 1}`)
       if (element) {
         element.focus()
@@ -79,51 +73,63 @@ export default {
         }
       }
     },
-    addOption () {
+    addOption() {
       if (this.options.length < this.maxOptions) {
         this.options.push('')
         return true
       }
       return false
     },
-    deleteOption (index, event) {
+    deleteOption(index, event) {
       if (this.options.length > 2) {
         this.options.splice(index, 1)
         this.updatePollToParent()
       }
     },
-    convertExpiryToUnit (unit, amount) {
+    convertExpiryToUnit(unit, amount) {
       // Note: we want seconds and not milliseconds
       switch (unit) {
-        case 'minutes': return (1000 * amount) / DateUtils.MINUTE
-        case 'hours': return (1000 * amount) / DateUtils.HOUR
-        case 'days': return (1000 * amount) / DateUtils.DAY
+        case 'minutes':
+          return (1000 * amount) / DateUtils.MINUTE
+        case 'hours':
+          return (1000 * amount) / DateUtils.HOUR
+        case 'days':
+          return (1000 * amount) / DateUtils.DAY
       }
     },
-    convertExpiryFromUnit (unit, amount) {
+    convertExpiryFromUnit(unit, amount) {
       // Note: we want seconds and not milliseconds
       switch (unit) {
-        case 'minutes': return 0.001 * amount * DateUtils.MINUTE
-        case 'hours': return 0.001 * amount * DateUtils.HOUR
-        case 'days': return 0.001 * amount * DateUtils.DAY
+        case 'minutes':
+          return 0.001 * amount * DateUtils.MINUTE
+        case 'hours':
+          return 0.001 * amount * DateUtils.HOUR
+        case 'days':
+          return 0.001 * amount * DateUtils.DAY
       }
     },
-    expiryAmountChange () {
-      this.expiryAmount =
-        Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
-      this.expiryAmount =
-        Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
+    expiryAmountChange() {
+      this.expiryAmount = Math.max(
+        this.minExpirationInCurrentUnit,
+        this.expiryAmount
+      )
+      this.expiryAmount = Math.min(
+        this.maxExpirationInCurrentUnit,
+        this.expiryAmount
+      )
       this.updatePollToParent()
     },
-    updatePollToParent () {
+    updatePollToParent() {
       const expiresIn = this.convertExpiryFromUnit(
         this.expiryUnit,
         this.expiryAmount
       )
 
-      const options = uniq(this.options.filter(option => option !== ''))
+      const options = uniq(this.options.filter((option) => option !== ''))
       if (options.length < 2) {
-        this.$emit('update-poll', { error: this.$t('polls.not_enough_options') })
+        this.$emit('update-poll', {
+          error: this.$t('polls.not_enough_options')
+        })
         return
       }
       this.$emit('update-poll', {
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 146754db8..7325e0ae6 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -19,7 +19,7 @@
           :maxlength="maxLength"
           @change="updatePollToParent"
           @keydown.enter.stop.prevent="nextOption(index)"
-        >
+        />
       </div>
       <button
         v-if="options.length > 2"
@@ -39,7 +39,7 @@
         size="sm"
       />
 
-      {{ $t("polls.add_option") }}
+      {{ $t('polls.add_option') }}
     </button>
     <div class="poll-type-expiry">
       <div
@@ -71,7 +71,7 @@
           :min="minExpirationInCurrentUnit"
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
-        >
+        />
         {{ ' ' }}
         <Select
           v-model="expiryUnit"
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index a30a37c9d..9e89cfe2a 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -33,7 +33,7 @@ const Popover = {
     // use it when popover offset looks to be different on top vs bottom.
     removePadding: Boolean
   },
-  data () {
+  data() {
     return {
       hidden: true,
       styles: { opacity: 0 },
@@ -41,11 +41,13 @@ const Popover = {
     }
   },
   methods: {
-    containerBoundingClientRect () {
-      const container = this.boundToSelector ? this.$el.closest(this.boundToSelector) : this.$el.offsetParent
+    containerBoundingClientRect() {
+      const container = this.boundToSelector
+        ? this.$el.closest(this.boundToSelector)
+        : this.$el.offsetParent
       return container.getBoundingClientRect()
     },
-    updateStyles () {
+    updateStyles() {
       if (this.hidden) {
         this.styles = {
           opacity: 0
@@ -55,16 +57,21 @@ const Popover = {
 
       // Popover will be anchored around this element, trigger ref is the container, so
       // its children are what are inside the slot. Expect only one v-slot:trigger.
-      const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
+      const anchorEl =
+        (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
       // SVGs don't have offsetWidth/Height, use fallback
       const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
       const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
       const screenBox = anchorEl.getBoundingClientRect()
       // Screen position of the origin point for popover
-      const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
+      const origin = {
+        x: screenBox.left + screenBox.width * 0.5,
+        y: screenBox.top
+      }
       const content = this.$refs.content
       // Minor optimization, don't call a slow reflow call if we don't have to
-      const parentBounds = this.boundTo &&
+      const parentBounds =
+        this.boundTo &&
         (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
         this.containerBoundingClientRect()
 
@@ -72,32 +79,39 @@ const Popover = {
 
       // What are the screen bounds for the popover? Viewport vs container
       // when using viewport, using default margin values to dodge the navbar
-      const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
-        min: parentBounds.left + (margin.left || 0),
-        max: parentBounds.right - (margin.right || 0)
-      } : {
-        min: 0 + (margin.left || 10),
-        max: window.innerWidth - (margin.right || 10)
-      }
+      const xBounds =
+        this.boundTo && this.boundTo.x === 'container'
+          ? {
+              min: parentBounds.left + (margin.left || 0),
+              max: parentBounds.right - (margin.right || 0)
+            }
+          : {
+              min: 0 + (margin.left || 10),
+              max: window.innerWidth - (margin.right || 10)
+            }
 
-      const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
-        min: parentBounds.top + (margin.top || 0),
-        max: parentBounds.bottom - (margin.bottom || 0)
-      } : {
-        min: 0 + (margin.top || 50),
-        max: window.innerHeight - (margin.bottom || 5)
-      }
+      const yBounds =
+        this.boundTo && this.boundTo.y === 'container'
+          ? {
+              min: parentBounds.top + (margin.top || 0),
+              max: parentBounds.bottom - (margin.bottom || 0)
+            }
+          : {
+              min: 0 + (margin.top || 50),
+              max: window.innerHeight - (margin.bottom || 5)
+            }
 
       let horizOffset = 0
 
       // If overflowing from left, move it so that it doesn't
-      if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
+      if (origin.x - content.offsetWidth * 0.5 < xBounds.min) {
         horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
       }
 
       // If overflowing from right, move it so that it doesn't
-      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
-        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
+      if (origin.x + horizOffset + content.offsetWidth * 0.5 > xBounds.max) {
+        horizOffset -=
+          origin.x + horizOffset + content.offsetWidth * 0.5 - xBounds.max
       }
 
       // Default to whatever user wished with placement prop
@@ -112,7 +126,9 @@ const Popover = {
       let vPadding = 0
       if (this.removePadding && usingTop) {
         const anchorStyle = getComputedStyle(anchorEl)
-        vPadding = parseFloat(anchorStyle.paddingTop) + parseFloat(anchorStyle.paddingBottom)
+        vPadding =
+          parseFloat(anchorStyle.paddingTop) +
+          parseFloat(anchorStyle.paddingBottom)
       }
 
       const yOffset = (this.offset && this.offset.y) || 0
@@ -121,16 +137,19 @@ const Popover = {
         : yOffset
 
       const xOffset = (this.offset && this.offset.x) || 0
-      const translateX = anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
+      const translateX =
+        anchorWidth * 0.5 - content.offsetWidth * 0.5 + horizOffset + xOffset
 
       // Note, separate translateX and translateY avoids blurry text on chromium,
       // single translate or translate3d resulted in blurry text.
       this.styles = {
         opacity: 1,
-        transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)`
+        transform: `translateX(${Math.round(
+          translateX
+        )}px) translateY(${Math.round(translateY)}px)`
       }
     },
-    showPopover () {
+    showPopover() {
       const wasHidden = this.hidden
       this.hidden = false
       this.$nextTick(() => {
@@ -138,18 +157,18 @@ const Popover = {
         this.updateStyles()
       })
     },
-    hidePopover () {
+    hidePopover() {
       if (!this.hidden) this.$emit('close')
       this.hidden = true
       this.styles = { opacity: 0 }
     },
-    onMouseenter (e) {
+    onMouseenter(e) {
       if (this.trigger === 'hover') this.showPopover()
     },
-    onMouseleave (e) {
+    onMouseleave(e) {
       if (this.trigger === 'hover') this.hidePopover()
     },
-    onClick (e) {
+    onClick(e) {
       if (this.trigger === 'click') {
         if (this.hidden) {
           this.showPopover()
@@ -158,27 +177,33 @@ const Popover = {
         }
       }
     },
-    onClickOutside (e) {
+    onClickOutside(e) {
       if (this.hidden) return
       if (this.$el.contains(e.target)) return
       this.hidePopover()
     }
   },
-  updated () {
+  updated() {
     // Monitor changes to content size, update styles only when content sizes have changed,
     // that should be the only time we need to move the popover box if we don't care about scroll
     // or resize
     const content = this.$refs.content
     if (!content) return
-    if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
+    if (
+      this.oldSize.width !== content.offsetWidth ||
+      this.oldSize.height !== content.offsetHeight
+    ) {
       this.updateStyles()
-      this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
+      this.oldSize = {
+        width: content.offsetWidth,
+        height: content.offsetHeight
+      }
     }
   },
-  created () {
+  created() {
     document.addEventListener('click', this.onClickOutside)
   },
-  unmounted () {
+  unmounted() {
     document.removeEventListener('click', this.onClickOutside)
     this.hidePopover()
   }
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index c2a3e8016..fdb64e2ca 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -75,7 +75,7 @@
 
 .dropdown-menu {
   display: block;
-  padding: .5rem 0;
+  padding: 0.5rem 0;
   font-size: 1em;
   text-align: left;
   list-style: none;
@@ -85,7 +85,7 @@
 
   .dropdown-divider {
     height: 0;
-    margin: .5rem 0;
+    margin: 0.5rem 0;
     overflow: hidden;
     border-top: 1px solid $fallback--border;
     border-top: 1px solid var(--border, $fallback--border);
@@ -114,11 +114,12 @@
       svg {
         width: 22px;
         margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon)
+        color: var(--menuPopoverIcon, $fallback--icon);
       }
     }
 
-    &:active, &:hover {
+    &:active,
+    &:hover {
       background-color: $fallback--lightBg;
       background-color: var(--selectedMenuPopover, $fallback--lightBg);
       box-shadow: none;
@@ -163,12 +164,11 @@
         }
       }
     }
-
   }
 
   .button-default.dropdown-item {
     &,
-    i[class*=icon-] {
+    i[class*='icon-'] {
       color: $fallback--text;
       color: var(--btnText, $fallback--text);
     }
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index c9f492c31..d5019a279 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -24,14 +24,7 @@ import {
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faSmileBeam,
-  faPollH,
-  faUpload,
-  faBan,
-  faTimes,
-  faCircleNotch
-)
+library.add(faSmileBeam, faPollH, faUpload, faBan, faTimes, faCircleNotch)
 
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
   let allAttentions = [...attentions]
@@ -89,12 +82,7 @@ const PostStatusForm = {
     'optimisticPosting',
     'isRedraft'
   ],
-  emits: [
-    'posted',
-    'resize',
-    'mediaplay',
-    'mediapause'
-  ],
+  emits: ['posted', 'resize', 'mediaplay', 'mediapause'],
   components: {
     MediaUpload,
     EmojiInput,
@@ -106,7 +94,7 @@ const PostStatusForm = {
     StatusContent,
     Gallery
   },
-  mounted () {
+  mounted() {
     this.updateIdempotencyKey()
     this.resize(this.$refs.textarea)
 
@@ -119,16 +107,23 @@ const PostStatusForm = {
       this.$refs.textarea.focus()
     }
   },
-  data () {
+  data() {
     const preset = this.$route.query.message
     let statusText = preset || ''
 
     if (this.replyTo || this.quoteId) {
       const currentUser = this.$store.state.users.currentUser
-      statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
+      statusText = buildMentionsString(
+        { user: this.repliedUser, attentions: this.attentions },
+        currentUser
+      )
     }
 
-    const { postContentType: contentType, sensitiveByDefault, sensitiveIfSubject } = this.$store.getters.mergedConfig
+    const {
+      postContentType: contentType,
+      sensitiveByDefault,
+      sensitiveIfSubject
+    } = this.$store.getters.mergedConfig
 
     let statusParams = {
       spoilerText: this.subject || '',
@@ -148,7 +143,10 @@ const PostStatusForm = {
         spoilerText: this.subject || '',
         status: this.statusText || '',
         sensitiveIfSubject,
-        nsfw: this.statusIsSensitive || (sensitiveIfSubject && this.subject) || !!sensitiveByDefault,
+        nsfw:
+          this.statusIsSensitive ||
+          (sensitiveIfSubject && this.subject) ||
+          !!sensitiveByDefault,
         files: this.statusFiles || [],
         poll: this.statusPoll || {},
         mediaDescriptions: this.statusMediaDescriptions || {},
@@ -175,13 +173,13 @@ const PostStatusForm = {
     }
   },
   computed: {
-    users () {
+    users() {
       return this.$store.state.users.users
     },
-    userDefaultScope () {
+    userDefaultScope() {
       return this.$store.state.users.currentUser.default_scope
     },
-    emojiUserSuggestor () {
+    emojiUserSuggestor() {
       return suggestor({
         emoji: [
           ...this.$store.state.instance.emoji,
@@ -190,7 +188,7 @@ const PostStatusForm = {
         store: this.$store
       })
     },
-    emojiSuggestor () {
+    emojiSuggestor() {
       return suggestor({
         emoji: [
           ...this.$store.state.instance.emoji,
@@ -198,83 +196,95 @@ const PostStatusForm = {
         ]
       })
     },
-    emoji () {
+    emoji() {
       return this.$store.state.instance.emoji || []
     },
-    customEmoji () {
+    customEmoji() {
       return this.$store.state.instance.customEmoji || []
     },
-    statusLength () {
+    statusLength() {
       return this.newStatus.status.length
     },
-    spoilerTextLength () {
+    spoilerTextLength() {
       return this.newStatus.spoilerText.length
     },
-    statusLengthLimit () {
+    statusLengthLimit() {
       return this.$store.state.instance.textlimit
     },
-    hasStatusLengthLimit () {
+    hasStatusLengthLimit() {
       return this.statusLengthLimit > 0
     },
-    charactersLeft () {
-      return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
+    charactersLeft() {
+      return (
+        this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
+      )
     },
-    isOverLengthLimit () {
-      return this.hasStatusLengthLimit && (this.charactersLeft < 0)
+    isOverLengthLimit() {
+      return this.hasStatusLengthLimit && this.charactersLeft < 0
     },
-    alwaysShowSubject () {
+    alwaysShowSubject() {
       return this.mergedConfig.alwaysShowSubjectInput
     },
-    postFormats () {
+    postFormats() {
       return this.$store.state.instance.postFormats || []
     },
-    safeDMEnabled () {
+    safeDMEnabled() {
       return this.$store.state.instance.safeDM
     },
-    pollsAvailable () {
-      return this.$store.state.instance.pollsAvailable &&
+    pollsAvailable() {
+      return (
+        this.$store.state.instance.pollsAvailable &&
         this.$store.state.instance.pollLimits.max_options >= 2 &&
         this.disablePolls !== true
+      )
     },
-    hideScopeNotice () {
-      return this.disableNotice || this.$store.getters.mergedConfig.hideScopeNotice
+    hideScopeNotice() {
+      return (
+        this.disableNotice || this.$store.getters.mergedConfig.hideScopeNotice
+      )
     },
-    pollContentError () {
-      return this.pollFormVisible &&
-        this.newStatus.poll &&
-        this.newStatus.poll.error
+    pollContentError() {
+      return (
+        this.pollFormVisible && this.newStatus.poll && this.newStatus.poll.error
+      )
     },
-    showPreview () {
+    showPreview() {
       return !this.disablePreview && (!!this.preview || this.previewLoading)
     },
-    emptyStatus () {
-      return this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
+    emptyStatus() {
+      return (
+        this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
+      )
     },
-    uploadFileLimitReached () {
+    uploadFileLimitReached() {
       return this.newStatus.files.length >= this.fileLimit
     },
-    isEdit () {
-      return typeof this.statusId !== 'undefined' && this.statusId.trim() !== '' && !this.isRedraft
+    isEdit() {
+      return (
+        typeof this.statusId !== 'undefined' &&
+        this.statusId.trim() !== '' &&
+        !this.isRedraft
+      )
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
-      mobileLayout: state => state.interface.mobileLayout
+      mobileLayout: (state) => state.interface.mobileLayout
     })
   },
   watch: {
-    'newStatus': {
+    newStatus: {
       deep: true,
-      handler () {
+      handler() {
         this.statusChanged()
       }
     }
   },
   methods: {
-    statusChanged () {
+    statusChanged() {
       this.autoPreview()
       this.updateIdempotencyKey()
     },
-    clearStatus () {
+    clearStatus() {
       const newStatus = this.newStatus
       this.newStatus = {
         status: '',
@@ -299,16 +309,27 @@ const PostStatusForm = {
       this.error = null
       if (this.preview) this.previewStatus()
     },
-    async postStatus (event, newStatus, opts = {}) {
-      if (this.posting && !this.optimisticPosting) { return }
-      if (this.disableSubmit) { return }
-      if (this.emojiInputShown) { return }
+    async postStatus(event, newStatus, opts = {}) {
+      if (this.posting && !this.optimisticPosting) {
+        return
+      }
+      if (this.disableSubmit) {
+        return
+      }
+      if (this.emojiInputShown) {
+        return
+      }
       if (this.submitOnEnter) {
         event.stopPropagation()
         event.preventDefault()
       }
 
-      if (this.optimisticPosting && (this.emptyStatus || this.isOverLengthLimit)) { return }
+      if (
+        this.optimisticPosting &&
+        (this.emptyStatus || this.isOverLengthLimit)
+      ) {
+        return
+      }
 
       if (this.emptyStatus) {
         this.error = this.$t('post_status.empty_status_error')
@@ -345,7 +366,9 @@ const PostStatusForm = {
         idempotencyKey: this.idempotencyKey
       }
 
-      const postHandler = this.postHandler ? this.postHandler : statusPoster.postStatus
+      const postHandler = this.postHandler
+        ? this.postHandler
+        : statusPoster.postStatus
 
       postHandler(postingOptions).then((data) => {
         if (!data.error) {
@@ -357,7 +380,7 @@ const PostStatusForm = {
         this.posting = false
       })
     },
-    previewStatus () {
+    previewStatus() {
       if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
         this.preview = { error: this.$t('post_status.preview_empty') }
         this.previewLoading = false
@@ -365,93 +388,105 @@ const PostStatusForm = {
       }
       const newStatus = this.newStatus
       this.previewLoading = true
-      statusPoster.postStatus({
-        status: newStatus.status,
-        spoilerText: newStatus.spoilerText || null,
-        visibility: newStatus.visibility,
-        sensitive: newStatus.nsfw,
-        media: [],
-        store: this.$store,
-        inReplyToStatusId: this.replyTo,
-        quoteId: this.quoteId,
-        contentType: newStatus.contentType,
-        poll: {},
-        preview: true
-      }).then((data) => {
-        // Don't apply preview if not loading, because it means
-        // user has closed the preview manually.
-        if (!this.previewLoading) return
-        if (!data.error) {
-          this.preview = data
-        } else {
-          this.preview = { error: data.error }
-        }
-      }).catch((error) => {
-        this.preview = { error }
-      }).finally(() => {
-        this.previewLoading = false
-      })
+      statusPoster
+        .postStatus({
+          status: newStatus.status,
+          spoilerText: newStatus.spoilerText || null,
+          visibility: newStatus.visibility,
+          sensitive: newStatus.nsfw,
+          media: [],
+          store: this.$store,
+          inReplyToStatusId: this.replyTo,
+          quoteId: this.quoteId,
+          contentType: newStatus.contentType,
+          poll: {},
+          preview: true
+        })
+        .then((data) => {
+          // Don't apply preview if not loading, because it means
+          // user has closed the preview manually.
+          if (!this.previewLoading) return
+          if (!data.error) {
+            this.preview = data
+          } else {
+            this.preview = { error: data.error }
+          }
+        })
+        .catch((error) => {
+          this.preview = { error }
+        })
+        .finally(() => {
+          this.previewLoading = false
+        })
     },
-    debouncePreviewStatus: debounce(function () { this.previewStatus() }, 500),
-    autoPreview () {
+    debouncePreviewStatus: debounce(function () {
+      this.previewStatus()
+    }, 500),
+    autoPreview() {
       if (!this.preview) return
       this.previewLoading = true
       this.debouncePreviewStatus()
     },
-    closePreview () {
+    closePreview() {
       this.preview = null
       this.previewLoading = false
     },
-    togglePreview () {
+    togglePreview() {
       if (this.showPreview) {
         this.closePreview()
       } else {
         this.previewStatus()
       }
     },
-    addMediaFile (fileInfo) {
+    addMediaFile(fileInfo) {
       this.newStatus.files.push(fileInfo)
 
-      if (this.$store.getters.mergedConfig.sensitiveIfSubject && this.newStatus.spoilerText !== '') {
+      if (
+        this.$store.getters.mergedConfig.sensitiveIfSubject &&
+        this.newStatus.spoilerText !== ''
+      ) {
         this.newStatus.nsfw = true
       }
       this.$emit('resize', { delayed: true })
     },
-    removeMediaFile (fileInfo) {
+    removeMediaFile(fileInfo) {
       let index = this.newStatus.files.indexOf(fileInfo)
       this.newStatus.files.splice(index, 1)
       this.$emit('resize')
     },
-    editAttachment (fileInfo, newText) {
+    editAttachment(fileInfo, newText) {
       this.newStatus.mediaDescriptions[fileInfo.id] = newText
     },
-    shiftUpMediaFile (fileInfo) {
+    shiftUpMediaFile(fileInfo) {
       const { files } = this.newStatus
       const index = this.newStatus.files.indexOf(fileInfo)
       files.splice(index, 1)
       files.splice(index - 1, 0, fileInfo)
     },
-    shiftDnMediaFile (fileInfo) {
+    shiftDnMediaFile(fileInfo) {
       const { files } = this.newStatus
       const index = this.newStatus.files.indexOf(fileInfo)
       files.splice(index, 1)
       files.splice(index + 1, 0, fileInfo)
     },
-    uploadFailed (errString, templateArgs) {
+    uploadFailed(errString, templateArgs) {
       templateArgs = templateArgs || {}
-      this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
+      this.error =
+        this.$t('upload.error.base') +
+        ' ' +
+        this.$t('upload.error.' + errString, templateArgs)
     },
-    startedUploadingFiles () {
+    startedUploadingFiles() {
       this.uploadingFiles = true
     },
-    finishedUploadingFiles () {
+    finishedUploadingFiles() {
       this.$emit('resize')
       this.uploadingFiles = false
     },
-    type (fileInfo) {
+    type(fileInfo) {
       return fileTypeService.fileType(fileInfo.mimetype)
     },
-    paste (e) {
+    paste(e) {
       this.autoPreview()
       this.resize(e)
       if (e.clipboardData.files.length > 0) {
@@ -463,7 +498,7 @@ const PostStatusForm = {
         this.dropFiles = [e.clipboardData.files[0]]
       }
     },
-    fileDrop (e) {
+    fileDrop(e) {
       if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
         e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
@@ -471,7 +506,7 @@ const PostStatusForm = {
         this.showDropIcon = 'hide'
       }
     },
-    fileDragStop (e) {
+    fileDragStop(e) {
       // The false-setting is done with delay because just using leave-events
       // directly caused unwanted flickering, this is not perfect either but
       // much less noticable.
@@ -479,26 +514,28 @@ const PostStatusForm = {
       this.showDropIcon = 'fade'
       this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
     },
-    fileDrag (e) {
+    fileDrag(e) {
       e.dataTransfer.dropEffect = this.uploadFileLimitReached ? 'none' : 'copy'
       if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
         clearTimeout(this.dropStopTimeout)
         this.showDropIcon = 'show'
       }
     },
-    onEmojiInputInput (e) {
+    onEmojiInputInput(e) {
       this.$nextTick(() => {
         this.resize(this.$refs['textarea'])
       })
     },
-    onSubjectInput (e) {
+    onSubjectInput(e) {
       if (this.$store.getters.mergedConfig.sensitiveIfSubject) {
         this.newStatus.nsfw = true
       }
     },
-    resize (e) {
+    resize(e) {
       const target = e.target || e
-      if (!(target instanceof window.Element)) { return }
+      if (!(target instanceof window.Element)) {
+        return
+      }
 
       // Reset to default height for empty form, nothing else to do here.
       if (target.value === '') {
@@ -514,12 +551,14 @@ const PostStatusForm = {
        * replies in notifs) or mobile post form. Note that getting and setting
        * scroll is different for `Window` and `Element`s
        */
-      const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
+      const bottomBottomPaddingStr =
+        window.getComputedStyle(bottomRef)['padding-bottom']
       const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)
 
-      const scrollerRef = this.$el.closest('.column.-scrollable') ||
-            this.$el.closest('.post-form-modal-view') ||
-            window
+      const scrollerRef =
+        this.$el.closest('.column.-scrollable') ||
+        this.$el.closest('.post-form-modal-view') ||
+        window
 
       // Getting info about padding we have to account for, removing 'px' part
       const topPaddingStr = window.getComputedStyle(target)['padding-top']
@@ -548,18 +587,20 @@ const PostStatusForm = {
        */
 
       // this part has to be BEFORE the content size update
-      const currentScroll = scrollerRef === window
-        ? scrollerRef.scrollY
-        : scrollerRef.scrollTop
-      const scrollerHeight = scrollerRef === window
-        ? scrollerRef.innerHeight
-        : scrollerRef.offsetHeight
+      const currentScroll =
+        scrollerRef === window ? scrollerRef.scrollY : scrollerRef.scrollTop
+      const scrollerHeight =
+        scrollerRef === window
+          ? scrollerRef.innerHeight
+          : scrollerRef.offsetHeight
       const scrollerBottomBorder = currentScroll + scrollerHeight
 
       // BEGIN content size update
       target.style.height = 'auto'
       const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
-      let newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
+      let newHeight = this.maxHeight
+        ? Math.min(heightWithoutPadding, this.maxHeight)
+        : heightWithoutPadding
       // This is a bit of a hack to combat target.scrollHeight being different on every other input
       // on some browsers for whatever reason. Don't change the height if difference is 1px or less.
       if (Math.abs(newHeight - oldHeight) <= 1) {
@@ -571,7 +612,10 @@ const PostStatusForm = {
 
       // We check where the bottom border of form-bottom element is, this uses findOffset
       // to find offset relative to scrollable container (scroller)
-      const bottomBottomBorder = bottomRef.offsetHeight + findOffset(bottomRef, scrollerRef).top + bottomBottomPadding
+      const bottomBottomBorder =
+        bottomRef.offsetHeight +
+        findOffset(bottomRef, scrollerRef).top +
+        bottomBottomPadding
 
       const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
       const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
@@ -580,9 +624,13 @@ const PostStatusForm = {
       // Keep form-bottom always visible so that submit button is in view EXCEPT
       // if form element bigger than scroller and caret isn't at the end, so that
       // if you scroll up and edit middle of text you won't get scrolled back to bottom
-      const shouldScrollToBottom = isBottomObstructed &&
-            !(isFormBiggerThanScroller &&
-              this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
+      const shouldScrollToBottom =
+        isBottomObstructed &&
+        !(
+          isFormBiggerThanScroller &&
+          this.$refs.textarea.selectionStart !==
+            this.$refs.textarea.value.length
+        )
       const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
       const targetScroll = Math.round(currentScroll + totalDelta)
 
@@ -594,54 +642,64 @@ const PostStatusForm = {
 
       this.$refs['emoji-input'].resize()
     },
-    showEmojiPicker () {
+    showEmojiPicker() {
       this.$refs['textarea'].focus()
       this.$refs['emoji-input'].triggerShowPicker()
     },
-    clearError () {
+    clearError() {
       this.error = null
     },
-    changeVis (visibility) {
+    changeVis(visibility) {
       this.newStatus.visibility = visibility
     },
-    togglePollForm () {
+    togglePollForm() {
       this.pollFormVisible = !this.pollFormVisible
     },
-    setPoll (poll) {
+    setPoll(poll) {
       this.newStatus.poll = poll
     },
-    clearPollForm () {
+    clearPollForm() {
       if (this.$refs.pollForm) {
         this.$refs.pollForm.clear()
       }
     },
-    dismissScopeNotice () {
-      this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
+    dismissScopeNotice() {
+      this.$store.dispatch('setOption', {
+        name: 'hideScopeNotice',
+        value: true
+      })
     },
-    setMediaDescription (id) {
+    setMediaDescription(id) {
       const description = this.newStatus.mediaDescriptions[id]
       if (!description || description.trim() === '') return
-      return statusPoster.setMediaDescription({ store: this.$store, id, description })
+      return statusPoster.setMediaDescription({
+        store: this.$store,
+        id,
+        description
+      })
     },
-    setAllMediaDescriptions () {
-      const ids = this.newStatus.files.map(file => file.id)
-      return Promise.all(ids.map(id => this.setMediaDescription(id)))
+    setAllMediaDescriptions() {
+      const ids = this.newStatus.files.map((file) => file.id)
+      return Promise.all(ids.map((id) => this.setMediaDescription(id)))
     },
-    handleEmojiInputShow (value) {
+    handleEmojiInputShow(value) {
       this.emojiInputShown = value
     },
-    updateIdempotencyKey () {
+    updateIdempotencyKey() {
       this.idempotencyKey = Date.now().toString()
     },
-    openProfileTab () {
+    openProfileTab() {
       this.$store.dispatch('openSettingsModalTab', 'profile')
     },
-    suggestedVisibility () {
+    suggestedVisibility() {
       if (this.copyMessageScope) {
         if (this.copyMessageScope === 'direct') {
           return this.copyMessageScope
         }
-        if (this.copyMessageScope !== 'public' && this.$store.state.users.currentUser.default_scope !== 'private') {
+        if (
+          this.copyMessageScope !== 'public' &&
+          this.$store.state.users.currentUser.default_scope !== 'private'
+        ) {
           return this.copyMessageScope
         }
       }
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index b65165855..8a9463c69 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -10,7 +10,11 @@
     >
       <div class="form-group">
         <i18n-t
-          v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
+          v-if="
+            !$store.state.users.currentUser.locked &&
+            newStatus.visibility == 'private' &&
+            !disableLockWarning
+          "
           keypath="post_status.account_not_locked_warning"
           tag="p"
           class="visibility-notice"
@@ -48,7 +52,11 @@
           </a>
         </p>
         <p
-          v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
+          v-else-if="
+            !hideScopeNotice &&
+            newStatus.visibility === 'private' &&
+            $store.state.users.currentUser.locked
+          "
           class="visibility-notice notice-dismissible"
         >
           <span>{{ $t('post_status.scope_notice.private') }}</span>
@@ -63,7 +71,9 @@
           v-else-if="newStatus.visibility === 'direct'"
           class="visibility-notice"
         >
-          <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
+          <span v-if="safeDMEnabled">{{
+            $t('post_status.direct_warning_to_first_only')
+          }}</span>
           <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
         </p>
         <div
@@ -132,10 +142,14 @@
             size="1"
             class="form-post-subject"
             @input="onSubjectInput"
-          >
+          />
         </EmojiInput>
         <i18n-t
-          v-if="newStatus.files.length !== 0 && newStatus.nsfw === false && newStatus.spoilerText !== ''"
+          v-if="
+            newStatus.files.length !== 0 &&
+            newStatus.nsfw === false &&
+            newStatus.spoilerText !== ''
+          "
           keypath="post_status.media_not_sensitive_warning"
           tag="p"
           class="visibility-notice"
@@ -167,9 +181,13 @@
             :disabled="posting && !optimisticPosting"
             class="form-post-body"
             :class="{ 'scrollable-form': !!maxHeight }"
-            @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
+            @keydown.exact.enter="
+              submitOnEnter && postStatus($event, newStatus)
+            "
             @keydown.meta.enter="postStatus($event, newStatus)"
-            @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
+            @keydown.ctrl.enter="
+              !submitOnEnter && postStatus($event, newStatus)
+            "
             @input="resize"
             @compositionupdate="resize"
             @paste="paste"
@@ -287,7 +305,9 @@
       </div>
       <div
         v-show="showDropIcon !== 'hide'"
-        :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
+        :style="{
+          animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s'
+        }"
         class="drop-indicator"
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
@@ -387,7 +407,8 @@
     &:hover {
       text-decoration: underline;
     }
-    svg, i {
+    svg,
+    i {
       margin-left: 0.2em;
       font-size: 0.8em;
       transform: rotate(90deg);
@@ -437,7 +458,9 @@
     }
   }
 
-  .media-upload-icon, .poll-icon, .emoji-icon {
+  .media-upload-icon,
+  .poll-icon,
+  .emoji-icon {
     font-size: 1.85em;
     line-height: 1.1;
     flex: 1;
@@ -445,16 +468,20 @@
     display: flex;
     align-items: center;
 
-    &.selected, &:hover {
+    &.selected,
+    &:hover {
       // needs to be specific to override icon default color
-      svg, i, label {
+      svg,
+      i,
+      label {
         color: $fallback--lightText;
         color: var(--lightText, $fallback--lightText);
       }
     }
 
     &.disabled {
-      svg, i {
+      svg,
+      i {
         cursor: not-allowed;
         color: $fallback--icon;
         color: var(--btnDisabledText, $fallback--icon);
@@ -488,11 +515,12 @@
   }
 
   .media-upload-wrapper {
-    margin-right: .2em;
-    margin-bottom: .5em;
+    margin-right: 0.2em;
+    margin-bottom: 0.5em;
     width: 18em;
 
-    img, video {
+    img,
+    video {
       object-fit: contain;
       max-height: 10em;
     }
@@ -571,13 +599,21 @@
   }
 
   @keyframes fade-in {
-    from { opacity: 0; }
-    to   { opacity: 0.6; }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 0.6;
+    }
   }
 
   @keyframes fade-out {
-    from { opacity: 0.6; }
-    to   { opacity: 0; }
+    from {
+      opacity: 0.6;
+    }
+    to {
+      opacity: 0;
+    }
   }
 
   .drop-indicator {
diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index cf9c7af0e..af536c748 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -7,43 +7,47 @@ const PostStatusModal = {
     PostStatusForm,
     Modal
   },
-  data () {
+  data() {
     return {
       resettingForm: false
     }
   },
   computed: {
-    isLoggedIn () {
+    isLoggedIn() {
       return !!this.$store.state.users.currentUser
     },
-    modalActivated () {
+    modalActivated() {
       return this.$store.state.postStatus.modalActivated
     },
-    isFormVisible () {
+    isFormVisible() {
       return this.isLoggedIn && !this.resettingForm && this.modalActivated
     },
-    params () {
+    params() {
       return this.$store.state.postStatus.params || {}
     }
   },
   watch: {
-    params (newVal, oldVal) {
-      if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id') ||
-          get(newVal, 'statusId') !== get(oldVal, 'statusId')) {
+    params(newVal, oldVal) {
+      if (
+        get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id') ||
+        get(newVal, 'statusId') !== get(oldVal, 'statusId')
+      ) {
         this.resettingForm = true
         this.$nextTick(() => {
           this.resettingForm = false
         })
       }
     },
-    isFormVisible (val) {
+    isFormVisible(val) {
       if (val) {
-        this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus())
+        this.$nextTick(
+          () => this.$el && this.$el.querySelector('textarea').focus()
+        )
       }
     }
   },
   methods: {
-    closeModal () {
+    closeModal() {
       this.$store.dispatch('closePostStatusModal')
     }
   }
diff --git a/src/components/progress_button/progress_button.vue b/src/components/progress_button/progress_button.vue
index 283a51af5..352fb229c 100644
--- a/src/components/progress_button/progress_button.vue
+++ b/src/components/progress_button/progress_button.vue
@@ -18,20 +18,23 @@ export default {
     disabled: {
       type: Boolean
     },
-    click: { // click event handler. Must return a promise
+    click: {
+      // click event handler. Must return a promise
       type: Function,
       default: () => Promise.resolve()
     }
   },
-  data () {
+  data() {
     return {
       progress: false
     }
   },
   methods: {
-    onClick () {
+    onClick() {
       this.progress = true
-      this.click().then(() => { this.progress = false })
+      this.click().then(() => {
+        this.progress = false
+      })
     }
   }
 }
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.js b/src/components/public_and_external_timeline/public_and_external_timeline.js
index bfcce6ae6..efce70d81 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.js
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.js
@@ -4,12 +4,16 @@ const PublicAndExternalTimeline = {
     Timeline
   },
   computed: {
-    timeline () { return this.$store.state.statuses.timelines.publicAndExternal }
+    timeline() {
+      return this.$store.state.statuses.timelines.publicAndExternal
+    }
   },
-  created () {
-    this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
+  created() {
+    this.$store.dispatch('startFetchingTimeline', {
+      timeline: 'publicAndExternal'
+    })
   },
-  unmounted () {
+  unmounted() {
     this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
   }
 }
diff --git a/src/components/public_timeline/public_timeline.js b/src/components/public_timeline/public_timeline.js
index 306935445..30f6f4de7 100644
--- a/src/components/public_timeline/public_timeline.js
+++ b/src/components/public_timeline/public_timeline.js
@@ -4,15 +4,16 @@ const PublicTimeline = {
     Timeline
   },
   computed: {
-    timeline () { return this.$store.state.statuses.timelines.public }
+    timeline() {
+      return this.$store.state.statuses.timelines.public
+    }
   },
-  created () {
+  created() {
     this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
   },
-  unmounted () {
+  unmounted() {
     this.$store.dispatch('stopFetchingTimeline', 'public')
   }
-
 }
 
 export default PublicTimeline
diff --git a/src/components/quote_button/quote_button.js b/src/components/quote_button/quote_button.js
index f5bf7e3a3..2ef70f683 100644
--- a/src/components/quote_button/quote_button.js
+++ b/src/components/quote_button/quote_button.js
@@ -7,7 +7,7 @@ const QuoteButton = {
   name: 'QuoteButton',
   props: ['status', 'quoting', 'visibility'],
   computed: {
-    loggedIn () {
+    loggedIn() {
       return !!this.$store.state.users.currentUser
     }
   }
diff --git a/src/components/quote_button/quote_button.vue b/src/components/quote_button/quote_button.vue
index 4367f495f..55bab415f 100644
--- a/src/components/quote_button/quote_button.vue
+++ b/src/components/quote_button/quote_button.vue
@@ -5,7 +5,7 @@
   >
     <button
       class="button-unstyled interactive"
-      :class="{'-active': quoting}"
+      :class="{ '-active': quoting }"
       :title="$t('tool_tip.quote')"
       @click.prevent="$emit('toggle')"
     >
@@ -42,6 +42,5 @@
       color: var(--cBlue, $fallback--cBlue);
     }
   }
-
 }
 </style>
diff --git a/src/components/quote_card/quote_card.js b/src/components/quote_card/quote_card.js
index 48fdbe422..b300ba04c 100644
--- a/src/components/quote_card/quote_card.js
+++ b/src/components/quote_card/quote_card.js
@@ -3,18 +3,14 @@ import QuoteCardContent from '../quote_card_content/quote_card_content.vue'
 
 const QuoteCard = {
   name: 'QuoteCard',
-  props: [
-    'status'
-  ],
-  data () {
+  props: ['status'],
+  data() {
     return {
       imageLoaded: false
     }
   },
   computed: {
-    ...mapGetters([
-      'mergedConfig'
-    ])
+    ...mapGetters(['mergedConfig'])
   },
   components: {
     QuoteCardContent
diff --git a/src/components/quote_card/quote_card.vue b/src/components/quote_card/quote_card.vue
index 8cd7eb236..e314d7e65 100644
--- a/src/components/quote_card/quote_card.vue
+++ b/src/components/quote_card/quote_card.vue
@@ -4,9 +4,7 @@
       class="quote-card"
       :to="{ name: 'conversation', params: { id: status.id } }"
     >
-      <QuoteCardContent
-        :status="status"
-      />
+      <QuoteCardContent :status="status" />
     </router-link>
   </div>
 </template>
diff --git a/src/components/quote_card_content/quote_card_content.vue b/src/components/quote_card_content/quote_card_content.vue
index c59505471..236ef4e0d 100644
--- a/src/components/quote_card_content/quote_card_content.vue
+++ b/src/components/quote_card_content/quote_card_content.vue
@@ -15,8 +15,6 @@ export default {
   components: {
     Status: defineAsyncComponent(() => import('../status/status.vue'))
   },
-  props: [
-    'status'
-  ]
+  props: ['status']
 }
 </script>
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index 1e7e42d58..1189d8309 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -16,7 +16,7 @@
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
-    >
+    />
     <label
       v-if="typeof fallback !== 'undefined'"
       class="opt-l"
@@ -32,7 +32,7 @@
       :min="min || hardMin || 0"
       :step="step || 1"
       @input="$emit('update:modelValue', $event.target.value)"
-    >
+    />
     <input
       :id="name"
       class="input-number"
@@ -43,18 +43,27 @@
       :min="hardMin"
       :step="step || 1"
       @input="$emit('update:modelValue', $event.target.value)"
-    >
+    />
   </div>
 </template>
 
 <script>
 export default {
   props: [
-    'name', 'modelValue', 'fallback', 'disabled', 'label', 'max', 'min', 'step', 'hardMin', 'hardMax'
+    'name',
+    'modelValue',
+    'fallback',
+    'disabled',
+    'label',
+    'max',
+    'min',
+    'step',
+    'hardMin',
+    'hardMax'
   ],
   emits: ['update:modelValue'],
   computed: {
-    present () {
+    present() {
       return typeof this.modelValue !== 'undefined'
     }
   }
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index d4d08d6f3..ae8069197 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -7,7 +7,7 @@ library.add(faSmileBeam)
 
 const ReactButton = {
   props: ['status'],
-  data () {
+  data() {
     return {
       filterWord: ''
     }
@@ -17,9 +17,11 @@ const ReactButton = {
     EmojiPicker
   },
   methods: {
-    addReaction (event, close) {
+    addReaction(event, close) {
       const emoji = event.insertion
-      const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
+      const existingReaction = this.status.emoji_reactions.find(
+        (r) => r.name === emoji
+      )
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
       } else {
@@ -27,7 +29,7 @@ const ReactButton = {
       }
       close()
     },
-    focusInput () {
+    focusInput() {
       this.$nextTick(() => {
         const input = this.$el.querySelector('input')
         if (input) input.focus()
@@ -35,7 +37,7 @@ const ReactButton = {
     }
   },
   computed: {
-    mergedConfig () {
+    mergedConfig() {
       return this.$store.getters.mergedConfig
     }
   }
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c196417c7..fa635b7e7 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -8,13 +8,13 @@
     remove-padding
     @show="focusInput"
   >
-    <template v-slot:content="{close}">
+    <template #content="{ close }">
       <EmojiPicker
         :enable-sticker-picker="false"
         @emoji="addReaction($event, close)"
       />
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <button
         class="button-unstyled popover-trigger"
         :title="$t('tool_tip.add_reaction')"
@@ -28,7 +28,7 @@
   </Popover>
 </template>
 
-<script src="./react_button.js" ></script>
+<script src="./react_button.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -67,8 +67,8 @@
     user-select: none;
 
     mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
-          linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
-          linear-gradient(to top, white, white);
+      linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+      linear-gradient(to top, white, white);
     transition: mask-size 150ms;
     mask-size: 100% 20px, 100% 20px, auto;
 
@@ -109,5 +109,4 @@
     min-width: 70%;
   }
 }
-
 </style>
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 9778a2f38..318f4a249 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -5,7 +5,9 @@ import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_
 import localeService from '../../services/locale/locale.service.js'
 
 const registration = {
-  setup () { return { v$: useVuelidate() } },
+  setup() {
+    return { v$: useVuelidate() }
+  },
   data: () => ({
     user: {
       email: '',
@@ -21,7 +23,7 @@ const registration = {
   components: {
     InterfaceLanguageSwitcher
   },
-  validations () {
+  validations() {
     return {
       user: {
         email: { required: requiredIf(() => this.accountActivationRequired) },
@@ -37,7 +39,7 @@ const registration = {
       }
     }
   },
-  created () {
+  created() {
     if ((!this.registrationOpen && !this.token) || this.signedIn) {
       this.$router.push({ name: 'root' })
     }
@@ -45,11 +47,13 @@ const registration = {
     this.setCaptcha()
   },
   computed: {
-    token () { return this.$route.params.token },
-    bioPlaceholder () {
+    token() {
+      return this.$route.params.token
+    },
+    bioPlaceholder() {
       return this.replaceNewlines(this.$t('registration.bio_placeholder'))
     },
-    reasonPlaceholder () {
+    reasonPlaceholder() {
       return this.replaceNewlines(this.$t('registration.reason_placeholder'))
     },
     ...mapState({
@@ -58,13 +62,14 @@ const registration = {
       isPending: (state) => state.users.signUpPending,
       serverValidationErrors: (state) => state.users.signUpErrors,
       termsOfService: (state) => state.instance.tos,
-      accountActivationRequired: (state) => state.instance.accountActivationRequired,
+      accountActivationRequired: (state) =>
+        state.instance.accountActivationRequired,
       accountApprovalRequired: (state) => state.instance.accountApprovalRequired
     })
   },
   methods: {
     ...mapActions(['signUp', 'getCaptcha']),
-    async submit () {
+    async submit() {
       this.user.nickname = this.user.username
       this.user.token = this.token
 
@@ -72,7 +77,9 @@ const registration = {
       this.user.captcha_token = this.captcha.token
       this.user.captcha_answer_data = this.captcha.answer_data
       if (this.user.language) {
-        this.user.language = localeService.internalToBackendLocale(this.user.language)
+        this.user.language = localeService.internalToBackendLocale(
+          this.user.language
+        )
       }
 
       this.v$.$touch()
@@ -95,10 +102,12 @@ const registration = {
         }
       }
     },
-    setCaptcha () {
-      this.getCaptcha().then(cpt => { this.captcha = cpt })
+    setCaptcha() {
+      this.getCaptcha().then((cpt) => {
+        this.captcha = cpt
+      })
     },
-    replaceNewlines (str) {
+    replaceNewlines(str) {
       return str.replace(/\s*\n\s*/g, ' \n')
     }
   }
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 9a88d68d8..776f9c768 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -17,14 +17,15 @@
               <label
                 class="form--label"
                 for="sign-up-username"
-              >{{ $t('login.username') }}</label>
+                >{{ $t('login.username') }}</label
+              >
               <input
                 id="sign-up-username"
                 v-model.trim="v$.user.username.$model"
                 :disabled="isPending"
                 class="form-control"
                 :placeholder="$t('registration.username_placeholder')"
-              >
+              />
             </div>
             <div
               v-if="v$.user.username.$dirty"
@@ -32,7 +33,9 @@
             >
               <ul>
                 <li v-if="!v$.user.username.required">
-                  <span>{{ $t('registration.validations.username_required') }}</span>
+                  <span>{{
+                    $t('registration.validations.username_required')
+                  }}</span>
                 </li>
               </ul>
             </div>
@@ -44,14 +47,15 @@
               <label
                 class="form--label"
                 for="sign-up-fullname"
-              >{{ $t('registration.fullname') }}</label>
+                >{{ $t('registration.fullname') }}</label
+              >
               <input
                 id="sign-up-fullname"
                 v-model.trim="v$.user.fullname.$model"
                 :disabled="isPending"
                 class="form-control"
                 :placeholder="$t('registration.fullname_placeholder')"
-              >
+              />
             </div>
             <div
               v-if="v$.user.fullname.$dirty"
@@ -59,7 +63,9 @@
             >
               <ul>
                 <li v-if="!v$.user.fullname.required">
-                  <span>{{ $t('registration.validations.fullname_required') }}</span>
+                  <span>{{
+                    $t('registration.validations.fullname_required')
+                  }}</span>
                 </li>
               </ul>
             </div>
@@ -71,14 +77,15 @@
               <label
                 class="form--label"
                 for="email"
-              >{{ $t('registration.email') }}</label>
+                >{{ $t('registration.email') }}</label
+              >
               <input
                 id="email"
                 v-model="v$.user.email.$model"
                 :disabled="isPending"
                 class="form-control"
                 type="email"
-              >
+              />
             </div>
             <div
               v-if="v$.user.email.$dirty"
@@ -86,7 +93,9 @@
             >
               <ul>
                 <li v-if="!v$.user.email.required">
-                  <span>{{ $t('registration.validations.email_required') }}</span>
+                  <span>{{
+                    $t('registration.validations.email_required')
+                  }}</span>
                 </li>
               </ul>
             </div>
@@ -95,7 +104,10 @@
               <label
                 class="form--label"
                 for="bio"
-              >{{ $t('registration.bio') }} ({{ $t('general.optional') }})</label>
+                >{{ $t('registration.bio') }} ({{
+                  $t('general.optional')
+                }})</label
+              >
               <textarea
                 id="bio"
                 v-model="user.bio"
@@ -112,14 +124,15 @@
               <label
                 class="form--label"
                 for="sign-up-password"
-              >{{ $t('login.password') }}</label>
+                >{{ $t('login.password') }}</label
+              >
               <input
                 id="sign-up-password"
                 v-model="user.password"
                 :disabled="isPending"
                 class="form-control"
                 type="password"
-              >
+              />
             </div>
             <div
               v-if="v$.user.password.$dirty"
@@ -127,7 +140,9 @@
             >
               <ul>
                 <li v-if="!v$.user.password.required">
-                  <span>{{ $t('registration.validations.password_required') }}</span>
+                  <span>{{
+                    $t('registration.validations.password_required')
+                  }}</span>
                 </li>
               </ul>
             </div>
@@ -139,14 +154,15 @@
               <label
                 class="form--label"
                 for="sign-up-password-confirmation"
-              >{{ $t('registration.password_confirm') }}</label>
+                >{{ $t('registration.password_confirm') }}</label
+              >
               <input
                 id="sign-up-password-confirmation"
                 v-model="user.confirm"
                 :disabled="isPending"
                 class="form-control"
                 type="password"
-              >
+              />
             </div>
             <div
               v-if="v$.user.confirm.$dirty"
@@ -154,10 +170,16 @@
             >
               <ul>
                 <li v-if="!v$.user.confirm.required">
-                  <span>{{ $t('registration.validations.password_confirmation_required') }}</span>
+                  <span>{{
+                    $t(
+                      'registration.validations.password_confirmation_required'
+                    )
+                  }}</span>
                 </li>
                 <li v-if="!v$.user.confirm.sameAsPassword">
-                  <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
+                  <span>{{
+                    $t('registration.validations.password_confirmation_match')
+                  }}</span>
                 </li>
               </ul>
             </div>
@@ -170,7 +192,7 @@
                 for="email-language"
                 :prompt-text="$t('registration.email_language')"
                 :language="v$.user.language.$model"
-                :set-language="val => v$.user.language.$model = val"
+                :set-language="(val) => (v$.user.language.$model = val)"
               />
             </div>
 
@@ -182,7 +204,8 @@
               <label
                 class="form--label"
                 for="reason"
-              >{{ $t('registration.reason') }}</label>
+                >{{ $t('registration.reason') }}</label
+              >
               <textarea
                 id="reason"
                 v-model="user.reason"
@@ -200,13 +223,14 @@
               <label
                 class="form--label"
                 for="captcha-label"
-              >{{ $t('registration.captcha') }}</label>
+                >{{ $t('registration.captcha') }}</label
+              >
 
               <template v-if="['kocaptcha', 'native'].includes(captcha.type)">
                 <img
                   :src="captcha.url"
                   @click="setCaptcha"
-                >
+                />
 
                 <sub>{{ $t('registration.new_captcha') }}</sub>
 
@@ -220,7 +244,7 @@
                   autocorrect="off"
                   autocapitalize="off"
                   spellcheck="false"
-                >
+                />
               </template>
             </div>
 
@@ -235,7 +259,7 @@
                 disabled="true"
                 class="form-control"
                 type="text"
-              >
+              />
             </div>
             <div class="form-group">
               <button
@@ -263,7 +287,8 @@
             <span
               v-for="error in serverValidationErrors"
               :key="error"
-            >{{ error }}</span>
+              >{{ error }}</span
+            >
           </div>
         </div>
       </form>
@@ -317,7 +342,7 @@ $validations-cRed: #f04124;
 
   .form-group--error {
     animation-name: shakeError;
-    animation-duration: .6s;
+    animation-duration: 0.6s;
     animation-timing-function: ease-in-out;
   }
 
@@ -341,12 +366,12 @@ $validations-cRed: #f04124;
     margin-top: 0;
 
     li::before {
-      content: "• ";
+      content: '• ';
     }
   }
 
   form textarea {
-    line-height:16px;
+    line-height: 16px;
     resize: vertical;
   }
 
diff --git a/src/components/registration_request_sent/registration_request_sent.js b/src/components/registration_request_sent/registration_request_sent.js
index 3809de4a8..a28b30e70 100644
--- a/src/components/registration_request_sent/registration_request_sent.js
+++ b/src/components/registration_request_sent/registration_request_sent.js
@@ -1,4 +1,3 @@
 export default {
-  computed: {
-  }
+  computed: {}
 }
diff --git a/src/components/remote_follow/remote_follow.js b/src/components/remote_follow/remote_follow.js
index 461d58c9c..e4becd30f 100644
--- a/src/components/remote_follow/remote_follow.js
+++ b/src/components/remote_follow/remote_follow.js
@@ -1,7 +1,7 @@
 export default {
-  props: [ 'user' ],
+  props: ['user'],
   computed: {
-    subscribeUrl () {
+    subscribeUrl() {
       // eslint-disable-next-line no-undef
       const serverUrl = new URL(this.user.statusnet_profile_url)
       return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
index e17aa2e92..9b6fab440 100644
--- a/src/components/remote_follow/remote_follow.vue
+++ b/src/components/remote_follow/remote_follow.vue
@@ -8,12 +8,12 @@
         type="hidden"
         name="nickname"
         :value="user.screen_name"
-      >
+      />
       <input
         type="hidden"
         name="profile"
         value=""
-      >
+      />
       <button
         click="submit"
         class="button-default remote-button"
diff --git a/src/components/remote_user_resolver/remote_user_resolver.js b/src/components/remote_user_resolver/remote_user_resolver.js
index 9b5e511e0..312dc011c 100644
--- a/src/components/remote_user_resolver/remote_user_resolver.js
+++ b/src/components/remote_user_resolver/remote_user_resolver.js
@@ -2,13 +2,15 @@ const RemoteUserResolver = {
   data: () => ({
     error: false
   }),
-  mounted () {
+  mounted() {
     this.redirect()
   },
   methods: {
-    redirect () {
-      const acct = this.$route.params.username + '@' + this.$route.params.hostname
-      this.$store.state.api.backendInteractor.fetchUser({ id: acct })
+    redirect() {
+      const acct =
+        this.$route.params.username + '@' + this.$route.params.hostname
+      this.$store.state.api.backendInteractor
+        .fetchUser({ id: acct })
         .then((externalUser) => {
           if (externalUser.error) {
             this.error = true
diff --git a/src/components/remote_user_resolver/remote_user_resolver.vue b/src/components/remote_user_resolver/remote_user_resolver.vue
index f8945225e..9d6e2000e 100644
--- a/src/components/remote_user_resolver/remote_user_resolver.vue
+++ b/src/components/remote_user_resolver/remote_user_resolver.vue
@@ -5,7 +5,9 @@
     </div>
     <div class="panel-body">
       <p>
-        {{ $t('remote_user_resolver.searching_for') }} @{{ $route.params.username }}@{{ $route.params.hostname }}
+        {{ $t('remote_user_resolver.searching_for') }} @{{
+          $route.params.username
+        }}@{{ $route.params.hostname }}
       </p>
       <p v-if="error">
         {{ $t('remote_user_resolver.error') }}
@@ -16,5 +18,4 @@
 
 <script src="./remote_user_resolver.js"></script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/components/remove_follower_button/remove_follower_button.js b/src/components/remove_follower_button/remove_follower_button.js
index e1a7531bf..9d0f24d24 100644
--- a/src/components/remove_follower_button/remove_follower_button.js
+++ b/src/components/remove_follower_button/remove_follower_button.js
@@ -1,12 +1,12 @@
 export default {
   props: ['relationship'],
-  data () {
+  data() {
     return {
       inProgress: false
     }
   },
   computed: {
-    label () {
+    label() {
       if (this.inProgress) {
         return this.$t('user_card.follow_progress')
       } else {
@@ -15,11 +15,13 @@ export default {
     }
   },
   methods: {
-    onClick () {
+    onClick() {
       this.inProgress = true
-      this.$store.dispatch('removeUserFromFollowers', this.relationship.id).then(() => {
-        this.inProgress = false
-      })
+      this.$store
+        .dispatch('removeUserFromFollowers', this.relationship.id)
+        .then(() => {
+          this.inProgress = false
+        })
     }
   }
 }
diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js
index fb1c43cff..f8faf8372 100644
--- a/src/components/reply_button/reply_button.js
+++ b/src/components/reply_button/reply_button.js
@@ -7,11 +7,13 @@ const ReplyButton = {
   name: 'ReplyButton',
   props: ['status', 'replying'],
   computed: {
-    loggedIn () {
+    loggedIn() {
       return !!this.$store.state.users.currentUser
     },
-    remoteInteractionLink () {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    remoteInteractionLink() {
+      return this.$store.getters.remoteInteractionLink({
+        statusId: this.status.id
+      })
     }
   }
 }
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index ab493311c..60e375a22 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -3,7 +3,7 @@
     <button
       v-if="loggedIn"
       class="button-unstyled interactive"
-      :class="{'-active': replying}"
+      :class="{ '-active': replying }"
       :title="$t('tool_tip.reply')"
       @click.prevent="$emit('toggle')"
     >
@@ -59,6 +59,5 @@
       color: var(--cBlue, $fallback--cBlue);
     }
   }
-
 }
 </style>
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 15542a11d..2bc77c32d 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -9,21 +9,21 @@ const RetweetButton = {
   components: {
     ConfirmModal
   },
-  data () {
+  data() {
     return {
       animated: false,
       showingConfirmDialog: false
     }
   },
   methods: {
-    retweet () {
+    retweet() {
       if (!this.status.repeated && this.shouldConfirmRepeat) {
         this.showConfirmDialog()
       } else {
         this.doRetweet()
       }
     },
-    doRetweet () {
+    doRetweet() {
       if (!this.status.repeated) {
         this.$store.dispatch('retweet', { id: this.status.id })
       } else {
@@ -35,25 +35,27 @@ const RetweetButton = {
       }, 500)
       this.hideConfirmDialog()
     },
-    showConfirmDialog () {
+    showConfirmDialog() {
       this.showingConfirmDialog = true
     },
-    hideConfirmDialog () {
+    hideConfirmDialog() {
       this.showingConfirmDialog = false
     }
   },
   computed: {
-    isOwn () {
+    isOwn() {
       return this.status.user.id === this.$store.state.users.currentUser.id
     },
-    mergedConfig () {
+    mergedConfig() {
       return this.$store.getters.mergedConfig
     },
-    shouldConfirmRepeat () {
+    shouldConfirmRepeat() {
       return this.mergedConfig.modalOnRepeat
     },
-    remoteInteractionLink () {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    remoteInteractionLink() {
+      return this.$store.getters.remoteInteractionLink({
+        statusId: this.status.id
+      })
     }
   }
 }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index c574f4cb0..05d67dcb5 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="RetweetButton">
     <button
-      v-if="(visibility !== 'private' || isOwn) && visibility !== 'direct' && loggedIn"
+      v-if="
+        (visibility !== 'private' || isOwn) &&
+        visibility !== 'direct' &&
+        loggedIn
+      "
       class="button-unstyled interactive"
       :class="status.repeated && '-repeated'"
       :title="$t('tool_tip.repeat')"
@@ -54,7 +58,7 @@
   </div>
 </template>
 
-<script src="./retweet_button.js" ></script>
+<script src="./retweet_button.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 8ec7d3326..28850557b 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -6,19 +6,14 @@ import {
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faEnvelope,
-  faGlobe,
-  faLock,
-  faLockOpen
-)
+library.add(faEnvelope, faGlobe, faLock, faLockOpen)
 
 const SCOPE_LEVELS = {
-  'direct': 0,
-  'private': 1,
-  'local': 2,
-  'unlisted': 2,
-  'public': 3
+  direct: 0,
+  private: 1,
+  local: 2,
+  unlisted: 2,
+  public: 3
 }
 
 const ScopeSelector = {
@@ -29,31 +24,36 @@ const ScopeSelector = {
     'initialScope',
     'onScopeChange'
   ],
-  data () {
+  data() {
     return {
       currentScope: this.initialScope
     }
   },
   computed: {
-    showNothing () {
-      return !this.showPublic && !this.showUnlisted && !this.showPrivate && !this.showDirect
+    showNothing() {
+      return (
+        !this.showPublic &&
+        !this.showUnlisted &&
+        !this.showPrivate &&
+        !this.showDirect
+      )
     },
-    showPublic () {
+    showPublic() {
       return this.originalScope !== 'direct' && this.shouldShow('public')
     },
-    showLocal () {
+    showLocal() {
       return this.originalScope !== 'direct' && this.shouldShow('local')
     },
-    showUnlisted () {
+    showUnlisted() {
       return this.originalScope !== 'direct' && this.shouldShow('unlisted')
     },
-    showPrivate () {
+    showPrivate() {
       return this.originalScope !== 'direct' && this.shouldShow('private')
     },
-    showDirect () {
+    showDirect() {
       return this.shouldShow('direct')
     },
-    css () {
+    css() {
       return {
         public: { selected: this.currentScope === 'public' },
         unlisted: { selected: this.currentScope === 'unlisted' },
@@ -64,7 +64,7 @@ const ScopeSelector = {
     }
   },
   methods: {
-    shouldShow (scope) {
+    shouldShow(scope) {
       if (!this.originalScope) {
         return true
       }
@@ -75,7 +75,7 @@ const ScopeSelector = {
 
       return SCOPE_LEVELS[scope] <= SCOPE_LEVELS[this.originalScope]
     },
-    changeVis (scope) {
+    changeVis(scope) {
       this.currentScope = scope
       this.onScopeChange && this.onScopeChange(scope)
     }
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 64c34fb15..47de69001 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -77,7 +77,6 @@
 @import '../../_variables.scss';
 
 .ScopeSelector {
-
   .scope {
     display: inline-block;
     cursor: pointer;
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 76ac30ef3..86f3c4391 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -4,15 +4,9 @@ import Status from '../status/status.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import map from 'lodash/map'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch,
-  faSearch
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faSearch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch,
-  faSearch
-)
+library.add(faCircleNotch, faSearch)
 
 const Search = {
   components: {
@@ -21,10 +15,8 @@ const Search = {
     Status,
     TabSwitcher
   },
-  props: [
-    'query'
-  ],
-  data () {
+  props: ['query'],
+  data() {
     return {
       loaded: false,
       loading: false,
@@ -36,32 +28,33 @@ const Search = {
     }
   },
   computed: {
-    users () {
-      return this.userIds.map(userId => this.$store.getters.findUser(userId))
+    users() {
+      return this.userIds.map((userId) => this.$store.getters.findUser(userId))
     },
-    visibleStatuses () {
+    visibleStatuses() {
       const allStatusesObject = this.$store.state.statuses.allStatusesObject
 
-      return this.statuses.filter(status =>
-        allStatusesObject[status.id] && !allStatusesObject[status.id].deleted
+      return this.statuses.filter(
+        (status) =>
+          allStatusesObject[status.id] && !allStatusesObject[status.id].deleted
       )
     }
   },
-  mounted () {
+  mounted() {
     this.search(this.query)
   },
   watch: {
-    query (newValue) {
+    query(newValue) {
       this.searchTerm = newValue
       this.search(newValue)
     }
   },
   methods: {
-    newQuery (query) {
+    newQuery(query) {
       this.$router.push({ name: 'search', query: { query } })
       this.$refs.searchInput.focus()
     },
-    search (query) {
+    search(query) {
       if (!query) {
         this.loading = false
         return
@@ -73,8 +66,9 @@ const Search = {
       this.hashtags = []
       this.$refs.searchInput.blur()
 
-      this.$store.dispatch('search', { q: query, resolve: true })
-        .then(data => {
+      this.$store
+        .dispatch('search', { q: query, resolve: true })
+        .then((data) => {
           this.loading = false
           this.userIds = map(data.accounts, 'id')
           this.statuses = data.statuses
@@ -83,14 +77,14 @@ const Search = {
           this.loaded = true
         })
     },
-    resultCount (tabName) {
+    resultCount(tabName) {
       const length = this[tabName].length
       return length === 0 ? '' : ` (${length})`
     },
-    onResultTabSwitch (key) {
+    onResultTabSwitch(key) {
       this.currenResultTab = key
     },
-    getActiveTab () {
+    getActiveTab() {
       if (this.visibleStatuses.length > 0) {
         return 'statuses'
       } else if (this.users.length > 0) {
@@ -101,7 +95,7 @@ const Search = {
 
       return 'statuses'
     },
-    lastHistoryRecord (hashtag) {
+    lastHistoryRecord(hashtag) {
       return hashtag.history && hashtag.history[0]
     }
   }
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index b7bfc1f39..b623ee7a7 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -12,7 +12,7 @@
         class="search-input"
         :placeholder="$t('nav.search')"
         @keyup.enter="newQuery(searchTerm)"
-      >
+      />
       <button
         class="btn button-default search-button"
         type="submit"
@@ -99,15 +99,25 @@
           class="status trend search-result"
         >
           <div class="hashtag">
-            <router-link :to="{ name: 'tag-timeline', params: { tag: hashtag.name } }">
+            <router-link
+              :to="{ name: 'tag-timeline', params: { tag: hashtag.name } }"
+            >
               #{{ hashtag.name }}
             </router-link>
             <div v-if="lastHistoryRecord(hashtag)">
               <span v-if="lastHistoryRecord(hashtag).accounts == 1">
-                {{ $t('search.person_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
+                {{
+                  $t('search.person_talking', {
+                    count: lastHistoryRecord(hashtag).accounts
+                  })
+                }}
               </span>
               <span v-else>
-                {{ $t('search.people_talking', { count: lastHistoryRecord(hashtag).accounts }) }}
+                {{
+                  $t('search.people_talking', {
+                    count: lastHistoryRecord(hashtag).accounts
+                  })
+                }}
               </span>
             </div>
           </div>
@@ -209,5 +219,4 @@
     color: var(--text, $fallback--text);
   }
 }
-
 </style>
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index 73dd3ca54..e6ccf6fc8 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -1,13 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faTimes,
-  faSearch
-} from '@fortawesome/free-solid-svg-icons'
+import { faTimes, faSearch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes,
-  faSearch
-)
+library.add(faTimes, faSearch)
 
 const SearchBar = {
   data: () => ({
@@ -16,18 +10,18 @@ const SearchBar = {
     error: false
   }),
   watch: {
-    '$route': function (route) {
+    $route: function (route) {
       if (route.name === 'search') {
         this.searchTerm = route.query.query
       }
     }
   },
   methods: {
-    find (searchTerm) {
+    find(searchTerm) {
       this.$router.push({ name: 'search', query: { query: searchTerm } })
       this.$refs.searchInput.focus()
     },
-    toggleHidden () {
+    toggleHidden() {
       this.hidden = !this.hidden
       this.$emit('toggled', this.hidden)
       this.$nextTick(() => {
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 831c47ae1..508aaa92b 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -25,7 +25,7 @@
         :placeholder="$t('nav.search')"
         type="text"
         @keyup.enter="find(searchTerm)"
-      >
+      />
       <button
         class="button-default search-button"
         type="submit"
@@ -85,5 +85,4 @@
     color: var(--btnTopBarText, $fallback--text);
   }
 }
-
 </style>
diff --git a/src/components/select/select.js b/src/components/select/select.js
index ec571a14f..fbaf633f0 100644
--- a/src/components/select/select.js
+++ b/src/components/select/select.js
@@ -1,18 +1,9 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faChevronDown
-)
+library.add(faChevronDown)
 
 export default {
   emits: ['update:modelValue'],
-  props: [
-    'modelValue',
-    'disabled',
-    'unstyled',
-    'kind'
-  ]
+  props: ['modelValue', 'disabled', 'unstyled', 'kind']
 }
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 92493b0b7..f0457272d 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -18,7 +18,7 @@
   </label>
 </template>
 
-<script src="./select.js"> </script>
+<script src="./select.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -36,7 +36,7 @@ label.Select {
     color: $fallback--text;
     color: var(--inputText, --text, $fallback--text);
     margin: 0;
-    padding: 0 2em 0 .2em;
+    padding: 0 2em 0 0.2em;
     font-family: sans-serif;
     font-family: var(--inputFont, sans-serif);
     font-size: 1em;
@@ -59,6 +59,5 @@ label.Select {
     z-index: 0;
     pointer-events: none;
   }
-
 }
 </style>
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 10980d46a..e6dd16652 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -13,36 +13,36 @@ const SelectableList = {
     },
     getKey: {
       type: Function,
-      default: item => item.id
+      default: (item) => item.id
     }
   },
-  data () {
+  data() {
     return {
       selected: []
     }
   },
   computed: {
-    allKeys () {
+    allKeys() {
       return this.items.map(this.getKey)
     },
-    filteredSelected () {
-      return this.allKeys.filter(key => this.selected.indexOf(key) !== -1)
+    filteredSelected() {
+      return this.allKeys.filter((key) => this.selected.indexOf(key) !== -1)
     },
-    allSelected () {
+    allSelected() {
       return this.filteredSelected.length === this.items.length
     },
-    noneSelected () {
+    noneSelected() {
       return this.filteredSelected.length === 0
     },
-    someSelected () {
+    someSelected() {
       return !this.allSelected && !this.noneSelected
     }
   },
   methods: {
-    isSelected (item) {
+    isSelected(item) {
       return this.filteredSelected.indexOf(this.getKey(item)) !== -1
     },
-    toggle (checked, item) {
+    toggle(checked, item) {
       const key = this.getKey(item)
       const oldChecked = this.isSelected(key)
       if (checked !== oldChecked) {
@@ -53,7 +53,7 @@ const SelectableList = {
         }
       }
     },
-    toggleAll (value) {
+    toggleAll(value) {
       if (value) {
         this.selected = this.allKeys.slice(0)
       } else {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 3c80660ed..1ac9c8783 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -24,7 +24,7 @@
       :items="items"
       :get-key="getKey"
     >
-      <template v-slot:item="{item}">
+      <template #item="{ item }">
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@@ -32,7 +32,7 @@
           <div class="selectable-list-checkbox-wrapper">
             <Checkbox
               :model-value="isSelected(item)"
-              @update:model-value="checked => toggle(checked, item)"
+              @update:model-value="(checked) => toggle(checked, item)"
             />
           </div>
           <slot
@@ -41,7 +41,7 @@
           />
         </div>
       </template>
-      <template v-slot:empty>
+      <template #empty>
         <slot name="empty" />
       </template>
     </List>
diff --git a/src/components/settings_modal/helpers/boolean_setting.js b/src/components/settings_modal/helpers/boolean_setting.js
index 353e551c9..745190090 100644
--- a/src/components/settings_modal/helpers/boolean_setting.js
+++ b/src/components/settings_modal/helpers/boolean_setting.js
@@ -8,17 +8,13 @@ export default {
     ModifiedIndicator,
     ServerSideIndicator
   },
-  props: [
-    'path',
-    'disabled',
-    'expert'
-  ],
+  props: ['path', 'disabled', 'expert'],
   computed: {
-    pathDefault () {
+    pathDefault() {
       const [firstSegment, ...rest] = this.path.split('.')
       return [firstSegment + 'DefaultValue', ...rest].join('.')
     },
-    state () {
+    state() {
       const value = get(this.$parent, this.path)
       if (value === undefined) {
         return this.defaultState
@@ -26,21 +22,23 @@ export default {
         return value
       }
     },
-    defaultState () {
+    defaultState() {
       return get(this.$parent, this.pathDefault)
     },
-    isServerSide () {
+    isServerSide() {
       return this.path.startsWith('serverSide_')
     },
-    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
+    isChanged() {
+      return (
+        !this.path.startsWith('serverSide_') && this.state !== this.defaultState
+      )
     },
-    matchesExpertLevel () {
+    matchesExpertLevel() {
       return (this.expert || 0) <= this.$parent.expertLevel
     }
   },
   methods: {
-    update (e) {
+    update(e) {
       set(this.$parent, this.path, e)
     }
   }
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 695848083..7ab64c7cc 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -15,7 +15,10 @@
         <slot />
       </span>
       {{ ' ' }}
-      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
+      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator
+        :server-side="isServerSide"
+      />
+    </Checkbox>
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index 48cee3489..e49157cce 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -8,19 +8,13 @@ export default {
     ModifiedIndicator,
     ServerSideIndicator
   },
-  props: [
-    'path',
-    'disabled',
-    'options',
-    'expert',
-    'hideDefaultLabel'
-  ],
+  props: ['path', 'disabled', 'options', 'expert', 'hideDefaultLabel'],
   computed: {
-    pathDefault () {
+    pathDefault() {
       const [firstSegment, ...rest] = this.path.split('.')
       return [firstSegment + 'DefaultValue', ...rest].join('.')
     },
-    state () {
+    state() {
       const value = get(this.$parent, this.path)
       if (value === undefined) {
         return this.defaultState
@@ -28,21 +22,23 @@ export default {
         return value
       }
     },
-    defaultState () {
+    defaultState() {
       return get(this.$parent, this.pathDefault)
     },
-    isServerSide () {
+    isServerSide() {
       return this.path.startsWith('serverSide_')
     },
-    isChanged () {
-      return !this.path.startsWith('serverSide_') && this.state !== this.defaultState
+    isChanged() {
+      return (
+        !this.path.startsWith('serverSide_') && this.state !== this.defaultState
+      )
     },
-    matchesExpertLevel () {
+    matchesExpertLevel() {
       return (this.expert || 0) <= this.$parent.expertLevel
     }
   },
   methods: {
-    update (e) {
+    update(e) {
       set(this.$parent, this.path, e)
     }
   }
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 8b1dd6147..ce302fdbf 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -16,10 +16,12 @@
         :value="option.value"
       >
         {{ option.label }}
-        <template
-          v-if="hideDefaultLabel !== true"
-        >
-          {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
+        <template v-if="hideDefaultLabel !== true">
+          {{
+            option.value === defaultState
+              ? $t('settings.instance_default_simple')
+              : ''
+          }}
         </template>
       </option>
     </Select>
diff --git a/src/components/settings_modal/helpers/integer_setting.js b/src/components/settings_modal/helpers/integer_setting.js
index 17dc0e7b8..4b17ae0f7 100644
--- a/src/components/settings_modal/helpers/integer_setting.js
+++ b/src/components/settings_modal/helpers/integer_setting.js
@@ -11,11 +11,11 @@ export default {
     expert: [Number, String]
   },
   computed: {
-    pathDefault () {
+    pathDefault() {
       const [firstSegment, ...rest] = this.path.split('.')
       return [firstSegment + 'DefaultValue', ...rest].join('.')
     },
-    state () {
+    state() {
       const value = get(this.$parent, this.path)
       if (value === undefined) {
         return this.defaultState
@@ -23,18 +23,18 @@ export default {
         return value
       }
     },
-    defaultState () {
+    defaultState() {
       return get(this.$parent, this.pathDefault)
     },
-    isChanged () {
+    isChanged() {
       return this.state !== this.defaultState
     },
-    matchesExpertLevel () {
+    matchesExpertLevel() {
       return (this.expert || 0) <= this.$parent.expertLevel
     }
   },
   methods: {
-    update (e) {
+    update(e) {
       set(this.$parent, this.path, parseInt(e.target.value))
     }
   }
diff --git a/src/components/settings_modal/helpers/integer_setting.vue b/src/components/settings_modal/helpers/integer_setting.vue
index e661a025f..4d3f67da4 100644
--- a/src/components/settings_modal/helpers/integer_setting.vue
+++ b/src/components/settings_modal/helpers/integer_setting.vue
@@ -15,7 +15,7 @@
       :min="min || 0"
       :value="state"
       @change="update"
-    >
+    />
     {{ ' ' }}
     <ModifiedIndicator :changed="isChanged" />
   </span>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index ad212db96..b242dc9c2 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -3,17 +3,15 @@
     v-if="changed"
     class="ModifiedIndicator"
   >
-    <Popover
-      trigger="hover"
-    >
-      <template v-slot:trigger>
+    <Popover trigger="hover">
+      <template #trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
           :aria-label="$t('settings.setting_changed')"
         />
       </template>
-      <template v-slot:content>
+      <template #content>
         <div class="modified-tooltip">
           {{ $t('settings.setting_changed') }}
         </div>
@@ -27,9 +25,7 @@ import Popover from 'src/components/popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faWrench } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faWrench
-)
+library.add(faWrench)
 
 export default {
   components: { Popover },
diff --git a/src/components/settings_modal/helpers/server_side_indicator.vue b/src/components/settings_modal/helpers/server_side_indicator.vue
index 143a86a16..33c9d6a1c 100644
--- a/src/components/settings_modal/helpers/server_side_indicator.vue
+++ b/src/components/settings_modal/helpers/server_side_indicator.vue
@@ -3,17 +3,15 @@
     v-if="serverSide"
     class="ServerSideIndicator"
   >
-    <Popover
-      trigger="hover"
-    >
-      <template v-slot:trigger>
+    <Popover trigger="hover">
+      <template #trigger>
         &nbsp;
         <FAIcon
           icon="server"
           :aria-label="$t('settings.setting_server_side')"
         />
       </template>
-      <template v-slot:content>
+      <template #content>
         <div class="serverside-tooltip">
           {{ $t('settings.setting_server_side') }}
         </div>
@@ -27,9 +25,7 @@ import Popover from 'src/components/popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faServer } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faServer
-)
+library.add(faServer)
 
 export default {
   components: { Popover },
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index 3f40f6e59..df4f443b2 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -2,12 +2,12 @@ import { defaultState as configDefaultState } from 'src/modules/config.js'
 import { defaultState as serverSideConfigDefaultState } from 'src/modules/serverSideConfig.js'
 
 const SharedComputedObject = () => ({
-  user () {
+  user() {
     return this.$store.state.users.currentUser
   },
   // Getting values for default properties
   ...Object.keys(configDefaultState)
-    .map(key => [
+    .map((key) => [
       key + 'DefaultValue',
       function () {
         return this.$store.getters.defaultConfig[key]
@@ -16,36 +16,57 @@ const SharedComputedObject = () => ({
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
   // Generating computed values for vuex properties
   ...Object.keys(configDefaultState)
-    .map(key => [key, {
-      get () { return this.$store.getters.mergedConfig[key] },
-      set (value) {
-        this.$store.dispatch('setOption', { name: key, value, manual: true })
+    .map((key) => [
+      key,
+      {
+        get() {
+          return this.$store.getters.mergedConfig[key]
+        },
+        set(value) {
+          this.$store.dispatch('setOption', { name: key, value, manual: true })
+        }
       }
-    }])
+    ])
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
   ...Object.keys(serverSideConfigDefaultState)
-    .map(key => ['serverSide_' + key, {
-      get () { return this.$store.state.serverSideConfig[key] },
-      set (value) {
-        this.$store.dispatch('setServerSideOption', { name: key, value, manual: true })
+    .map((key) => [
+      'serverSide_' + key,
+      {
+        get() {
+          return this.$store.state.serverSideConfig[key]
+        },
+        set(value) {
+          this.$store.dispatch('setServerSideOption', {
+            name: key,
+            value,
+            manual: true
+          })
+        }
       }
-    }])
+    ])
     .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
   // Special cases (need to transform values or perform actions first)
   useStreamingApi: {
-    get () { return this.$store.getters.mergedConfig.useStreamingApi },
-    set (value) {
+    get() {
+      return this.$store.getters.mergedConfig.useStreamingApi
+    },
+    set(value) {
       const promise = value
         ? this.$store.dispatch('enableMastoSockets')
         : this.$store.dispatch('disableMastoSockets')
 
-      promise.then(() => {
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
-      }).catch((e) => {
-        console.error('Failed starting MastoAPI Streaming socket', e)
-        this.$store.dispatch('disableMastoSockets')
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
-      })
+      promise
+        .then(() => {
+          this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
+        })
+        .catch((e) => {
+          console.error('Failed starting MastoAPI Streaming socket', e)
+          this.$store.dispatch('disableMastoSockets')
+          this.$store.dispatch('setOption', {
+            name: 'useStreamingApi',
+            value: false
+          })
+        })
     }
   }
 })
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 27dab3ec9..6d45d4dfa 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -17,9 +17,7 @@ import {
   faSignOutAlt,
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
-import {
-  faWindowMinimize
-} from '@fortawesome/free-regular-svg-icons'
+import { faWindowMinimize } from '@fortawesome/free-regular-svg-icons'
 
 const PLEROMAFE_SETTINGS_MAJOR_VERSION = 1
 const PLEROMAFE_SETTINGS_MINOR_VERSION = 0
@@ -34,7 +32,7 @@ library.add(
 )
 
 const SettingsModal = {
-  data () {
+  data() {
     return {
       dataImporter: newImporter({
         validator: this.importValidator,
@@ -65,18 +63,18 @@ const SettingsModal = {
     )
   },
   methods: {
-    closeModal () {
+    closeModal() {
       this.$store.dispatch('closeSettingsModal')
     },
-    logout () {
+    logout() {
       this.$router.replace('/main/public')
       this.$store.dispatch('closeSettingsModal')
       this.$store.dispatch('logout')
     },
-    peekModal () {
+    peekModal() {
       this.$store.dispatch('togglePeekSettingsModal')
     },
-    importValidator (data) {
+    importValidator(data) {
       if (!Array.isArray(data._pleroma_settings_version)) {
         return {
           messageKey: 'settings.file_import_export.invalid_file'
@@ -114,26 +112,34 @@ const SettingsModal = {
 
       return true
     },
-    onImportFailure (result) {
+    onImportFailure(result) {
       if (result.error) {
-        this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_settings_imported', level: 'error' })
+        this.$store.dispatch('pushGlobalNotice', {
+          messageKey: 'settings.invalid_settings_imported',
+          level: 'error'
+        })
       } else {
-        this.$store.dispatch('pushGlobalNotice', { ...result.validationResult, level: 'error' })
+        this.$store.dispatch('pushGlobalNotice', {
+          ...result.validationResult,
+          level: 'error'
+        })
       }
     },
-    onImport (data) {
-      if (data) { this.$store.dispatch('loadSettings', data) }
+    onImport(data) {
+      if (data) {
+        this.$store.dispatch('loadSettings', data)
+      }
     },
-    restore () {
+    restore() {
       this.dataImporter.importData()
     },
-    backup () {
+    backup() {
       this.dataExporter.exportData()
     },
-    backupWithTheme () {
+    backupWithTheme() {
       this.dataThemeExporter.exportData()
     },
-    generateExport (theme = false) {
+    generateExport(theme = false) {
       const { config } = this.$store.state
       let sample = config
       if (!theme) {
@@ -143,9 +149,7 @@ const SettingsModal = {
           'colors'
         ])
         sample = Object.fromEntries(
-          Object
-            .entries(sample)
-            .filter(([key]) => !ignoreList.has(key))
+          Object.entries(sample).filter(([key]) => !ignoreList.has(key))
         )
       }
       const clone = cloneDeep(sample)
@@ -157,25 +161,30 @@ const SettingsModal = {
     }
   },
   computed: {
-    currentUser () { return this.$store.state.users.currentUser },
-    currentSaveStateNotice () {
+    currentUser() {
+      return this.$store.state.users.currentUser
+    },
+    currentSaveStateNotice() {
       return this.$store.state.interface.settings.currentSaveStateNotice
     },
-    modalActivated () {
+    modalActivated() {
       return this.$store.state.interface.settingsModalState !== 'hidden'
     },
-    modalOpenedOnce () {
+    modalOpenedOnce() {
       return this.$store.state.interface.settingsModalLoaded
     },
-    modalPeeked () {
+    modalPeeked() {
       return this.$store.state.interface.settingsModalState === 'minimized'
     },
     expertLevel: {
-      get () {
+      get() {
         return this.$store.state.config.expertLevel > 0
       },
-      set (value) {
-        this.$store.dispatch('setOption', { name: 'expertLevel', value: value ? 1 : 0 })
+      set(value) {
+        this.$store.dispatch('setOption', {
+          name: 'expertLevel',
+          value: value ? 1 : 0
+        })
       }
     }
   }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 7cd493e46..d8c7ee1af 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -14,10 +14,17 @@
           <div
             v-if="currentSaveStateNotice"
             class="alert"
-            :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
+            :class="{
+              transparent: !currentSaveStateNotice.error,
+              error: currentSaveStateNotice.error
+            }"
             @click.prevent
           >
-            {{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}
+            {{
+              currentSaveStateNotice.error
+                ? $t('settings.saving_err')
+                : $t('settings.saving_ok')
+            }}
           </div>
         </transition>
         <button
@@ -62,14 +69,14 @@
               class="btn button-default"
               :title="$t('general.close')"
             >
-              <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
+              <span>{{
+                $t('settings.file_export_import.backup_restore')
+              }}</span>
               {{ ' ' }}
-              <FAIcon
-                icon="chevron-down"
-              />
+              <FAIcon icon="chevron-down" />
             </button>
           </template>
-          <template #content="{close}">
+          <template #content="{ close }">
             <div class="dropdown-menu">
               <button
                 class="button-default dropdown-item dropdown-item-icon"
@@ -79,7 +86,9 @@
                 <FAIcon
                   icon="file-download"
                   fixed-width
-                /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
+                /><span>{{
+                  $t('settings.file_export_import.backup_settings')
+                }}</span>
               </button>
               <button
                 class="button-default dropdown-item dropdown-item-icon"
@@ -89,7 +98,9 @@
                 <FAIcon
                   icon="file-download"
                   fixed-width
-                /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
+                /><span>{{
+                  $t('settings.file_export_import.backup_settings_theme')
+                }}</span>
               </button>
               <button
                 class="button-default dropdown-item dropdown-item-icon"
@@ -99,7 +110,9 @@
                 <FAIcon
                   icon="file-upload"
                   fixed-width
-                /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
+                /><span>{{
+                  $t('settings.file_export_import.restore_settings')
+                }}</span>
               </button>
             </div>
           </template>
@@ -110,7 +123,7 @@
           class="expertMode"
           @update:modelValue="expertLevel = Number($event)"
         >
-          {{ $t("settings.expert_mode") }}
+          {{ $t('settings.expert_mode') }}
         </Checkbox>
         <button
           v-if="currentUser"
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index 9ac0301f6..7bea42acb 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -48,24 +48,26 @@ const SettingsModalContent = {
     ThemeTab
   },
   computed: {
-    isLoggedIn () {
+    isLoggedIn() {
       return !!this.$store.state.users.currentUser
     },
-    open () {
+    open() {
       return this.$store.state.interface.settingsModalState !== 'hidden'
     },
-    bodyLock () {
+    bodyLock() {
       return this.$store.state.interface.settingsModalState === 'visible'
     }
   },
   methods: {
-    onOpen () {
+    onOpen() {
       const targetTab = this.$store.state.interface.settingsModalTargetTab
       // We're being told to open in specific tab
       if (targetTab) {
-        const tabIndex = this.$refs.tabSwitcher.$slots.default().findIndex(elm => {
-          return elm.props && elm.props['data-tab-name'] === targetTab
-        })
+        const tabIndex = this.$refs.tabSwitcher.$slots
+          .default()
+          .findIndex((elm) => {
+            return elm.props && elm.props['data-tab-name'] === targetTab
+          })
         if (tabIndex >= 0) {
           this.$refs.tabSwitcher.setTab(tabIndex)
         }
@@ -75,7 +77,7 @@ const SettingsModalContent = {
       this.$store.dispatch('clearSettingsModalTargetTab')
     }
   },
-  mounted () {
+  mounted() {
     this.onOpen()
   },
   watch: {
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js
index 4895733c9..559aebbcc 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.js
+++ b/src/components/settings_modal/tabs/data_import_export_tab.js
@@ -4,7 +4,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { mapState } from 'vuex'
 
 const DataImportExportTab = {
-  data () {
+  data() {
     return {
       activeTab: 'profile',
       newDomainToMute: '',
@@ -14,7 +14,7 @@ const DataImportExportTab = {
       backups: []
     }
   },
-  created () {
+  created() {
     this.$store.dispatch('fetchTokens')
     this.fetchBackups()
   },
@@ -30,56 +30,59 @@ const DataImportExportTab = {
     })
   },
   methods: {
-    getFollowsContent () {
-      return this.backendInteractor.exportFriends({ id: this.user.id })
+    getFollowsContent() {
+      return this.backendInteractor
+        .exportFriends({ id: this.user.id })
         .then(this.generateExportableUsersContent)
     },
-    getBlocksContent () {
-      return this.backendInteractor.fetchBlocks()
+    getBlocksContent() {
+      return this.backendInteractor
+        .fetchBlocks()
         .then(this.generateExportableUsersContent)
     },
-    getMutesContent () {
-      return this.backendInteractor.fetchMutes()
+    getMutesContent() {
+      return this.backendInteractor
+        .fetchMutes()
         .then(this.generateExportableUsersContent)
     },
-    importFollows (file) {
-      return this.backendInteractor.importFollows({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    importBlocks (file) {
-      return this.backendInteractor.importBlocks({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    importMutes (file) {
-      return this.backendInteractor.importMutes({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    generateExportableUsersContent (users) {
-      // Get addresses
-      return users.map((user) => {
-        // check is it's a local user
-        if (user && user.is_local) {
-          // append the instance address
-          // eslint-disable-next-line no-undef
-          return user.screen_name + '@' + location.hostname
+    importFollows(file) {
+      return this.backendInteractor.importFollows({ file }).then((status) => {
+        if (!status) {
+          throw new Error('failed')
         }
-        return user.screen_name
-      }).join('\n')
+      })
     },
-    addBackup () {
-      this.$store.state.api.backendInteractor.addBackup()
+    importBlocks(file) {
+      return this.backendInteractor.importBlocks({ file }).then((status) => {
+        if (!status) {
+          throw new Error('failed')
+        }
+      })
+    },
+    importMutes(file) {
+      return this.backendInteractor.importMutes({ file }).then((status) => {
+        if (!status) {
+          throw new Error('failed')
+        }
+      })
+    },
+    generateExportableUsersContent(users) {
+      // Get addresses
+      return users
+        .map((user) => {
+          // check is it's a local user
+          if (user && user.is_local) {
+            // append the instance address
+            // eslint-disable-next-line no-undef
+            return user.screen_name + '@' + location.hostname
+          }
+          return user.screen_name
+        })
+        .join('\n')
+    },
+    addBackup() {
+      this.$store.state.api.backendInteractor
+        .addBackup()
         .then((res) => {
           this.addedBackup = true
           this.addBackupError = false
@@ -90,8 +93,9 @@ const DataImportExportTab = {
         })
         .then(() => this.fetchBackups())
     },
-    fetchBackups () {
-      this.$store.state.api.backendInteractor.listBackups()
+    fetchBackups() {
+      this.$store.state.api.backendInteractor
+        .listBackups()
         .then((res) => {
           this.backups = res
           this.listBackupsError = false
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index e3b7f407c..b7e8435ed 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    :label="$t('settings.data_import_export_tab')"
-  >
+  <div :label="$t('settings.data_import_export_tab')">
     <div class="setting-item">
       <h2>{{ $t('settings.follow_import') }}</h2>
       <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
@@ -77,9 +75,7 @@
               >
                 {{ $t('settings.download_backup') }}
               </a>
-              <span
-                v-else
-              >
+              <span v-else>
                 {{ $t('settings.backup_not_ready') }}
               </span>
             </td>
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index d3bb40c37..e509c786f 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -6,10 +6,11 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const FilteringTab = {
-  data () {
+  data() {
     return {
-      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n'),
-      replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
+      muteWordsStringLocal:
+        this.$store.getters.mergedConfig.muteWords.join('\n'),
+      replyVisibilityOptions: ['all', 'following', 'self'].map((mode) => ({
         key: mode,
         value: mode,
         label: this.$t(`settings.reply_visibility_${mode}`)
@@ -24,7 +25,7 @@ const FilteringTab = {
   computed: {
     ...SharedComputedObject(),
     muteWordsString: {
-      get () {
+      get() {
         return this.muteWordsStringLocal
       },
       set: debounce(function (value) {
@@ -39,7 +40,7 @@ const FilteringTab = {
   // Updating nested properties
   watch: {
     notificationVisibility: {
-      handler (value) {
+      handler(value) {
         this.$store.dispatch('setOption', {
           name: 'notificationVisibility',
           value: this.$store.getters.mergedConfig.notificationVisibility
@@ -47,7 +48,7 @@ const FilteringTab = {
       },
       deep: true
     },
-    replyVisibility () {
+    replyVisibility() {
       this.$store.dispatch('queueFlushAll')
     }
   }
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 7160b1fd2..03f1dd18b 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -9,7 +9,7 @@
           </BooleanSetting>
           <ul
             class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
+            :class="[{ disabled: !streaming }]"
           >
             <li>
               <BooleanSetting
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 763a588de..9a1ab071e 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -7,44 +7,47 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ServerSideIndicator from '../helpers/server_side_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faGlobe, faSync
-} from '@fortawesome/free-solid-svg-icons'
+import { faGlobe, faSync } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faGlobe,
-  faSync
-)
+library.add(faGlobe, faSync)
 
 const GeneralTab = {
-  data () {
+  data() {
     return {
-      subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
+      subjectLineOptions: ['email', 'noop', 'masto'].map((mode) => ({
         key: mode,
         value: mode,
-        label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
+        label: this.$t(
+          `settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`
+        )
       })),
-      conversationDisplayOptions: ['tree', 'linear'].map(mode => ({
+      conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
         key: mode,
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
       })),
-      conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
-        key: mode,
-        value: mode,
-        label: this.$t(`settings.conversation_other_replies_button_${mode}`)
-      })),
-      mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(mode => ({
-        key: mode,
-        value: mode,
-        label: this.$t(`settings.mention_link_display_${mode}`)
-      })),
-      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
-        key: mode,
-        value: mode,
-        label: this.$t(`settings.third_column_mode_${mode}`)
-      })),
-      userProfileDefaultTabOptions: ['statuses', 'replies'].map(tab => ({
+      conversationOtherRepliesButtonOptions: ['below', 'inside'].map(
+        (mode) => ({
+          key: mode,
+          value: mode,
+          label: this.$t(`settings.conversation_other_replies_button_${mode}`)
+        })
+      ),
+      mentionLinkDisplayOptions: ['short', 'full_for_remote', 'full'].map(
+        (mode) => ({
+          key: mode,
+          value: mode,
+          label: this.$t(`settings.mention_link_display_${mode}`)
+        })
+      ),
+      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(
+        (mode) => ({
+          key: mode,
+          value: mode,
+          label: this.$t(`settings.third_column_mode_${mode}`)
+        })
+      ),
+      userProfileDefaultTabOptions: ['statuses', 'replies'].map((tab) => ({
         key: tab,
         value: tab,
         label: this.$t(`user_card.${tab}`)
@@ -52,13 +55,21 @@ const GeneralTab = {
       profilesExpanded: false,
       newProfileName: '',
       loopSilentAvailable:
-      // Firefox
-      Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
-      // Chrome-likes
-      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
-      // Future spec, still not supported in Nightly 63 as of 08/2018
-      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
-
+        // Firefox
+        Object.getOwnPropertyDescriptor(
+          HTMLVideoElement.prototype,
+          'mozHasAudio'
+        ) ||
+        // Chrome-likes
+        Object.getOwnPropertyDescriptor(
+          HTMLMediaElement.prototype,
+          'webkitAudioDecodedByteCount'
+        ) ||
+        // Future spec, still not supported in Nightly 63 as of 08/2018
+        Object.getOwnPropertyDescriptor(
+          HTMLMediaElement.prototype,
+          'audioTracks'
+        )
     }
   },
   components: {
@@ -70,83 +81,109 @@ const GeneralTab = {
     ServerSideIndicator
   },
   computed: {
-    postFormats () {
+    postFormats() {
       return this.$store.state.instance.postFormats || []
     },
-    postContentOptions () {
-      return this.postFormats.map(format => ({
+    postContentOptions() {
+      return this.postFormats.map((format) => ({
         key: format,
         value: format,
         label: this.$t(`post_status.content_type["${format}"]`)
       }))
     },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
-    instanceWallpaperUsed () {
-      return this.$store.state.instance.background &&
+    instanceSpecificPanelPresent() {
+      return this.$store.state.instance.showInstanceSpecificPanel
+    },
+    instanceWallpaperUsed() {
+      return (
+        this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
+      )
     },
     language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      get: function () {
+        return this.$store.getters.mergedConfig.interfaceLanguage
+      },
       set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.$store.dispatch('setOption', {
+          name: 'interfaceLanguage',
+          value: val
+        })
       }
     },
-    settingsProfiles () {
-      return (this.$store.state.instance.settingsProfiles || [])
+    settingsProfiles() {
+      return this.$store.state.instance.settingsProfiles || []
     },
     settingsProfile: {
-      get: function () { return this.$store.getters.mergedConfig.profile },
+      get: function () {
+        return this.$store.getters.mergedConfig.profile
+      },
       set: function (val) {
         this.$store.dispatch('setOption', { name: 'profile', value: val })
         this.$store.dispatch('getSettingsProfile')
       }
     },
-    settingsVersion () {
+    settingsVersion() {
       return this.$store.getters.mergedConfig.profileVersion
     },
-    translationLanguages () {
+    translationLanguages() {
       const langs = this.$store.state.instance.supportedTranslationLanguages
       if (langs && langs.source) {
-        return langs.source.map(lang => ({ key: lang.code, value: lang.code, label: lang.name }))
+        return langs.source.map((lang) => ({
+          key: lang.code,
+          value: lang.code,
+          label: lang.name
+        }))
       }
 
       return []
     },
     translationLanguage: {
-      get: function () { return this.$store.getters.mergedConfig.translationLanguage },
+      get: function () {
+        return this.$store.getters.mergedConfig.translationLanguage
+      },
       set: function (val) {
-        this.$store.dispatch('setOption', { name: 'translationLanguage', value: val })
+        this.$store.dispatch('setOption', {
+          name: 'translationLanguage',
+          value: val
+        })
       }
     },
     ...SharedComputedObject()
   },
   methods: {
-    changeDefaultScope (value) {
-      this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
+    changeDefaultScope(value) {
+      this.$store.dispatch('setServerSideOption', {
+        name: 'defaultScope',
+        value
+      })
     },
-    setTranslationLanguage (value) {
+    setTranslationLanguage(value) {
       this.$store.dispatch('setOption', { name: 'translationLanguage', value })
     },
-    toggleExpandedSettings () {
+    toggleExpandedSettings() {
       this.profilesExpanded = !this.profilesExpanded
     },
-    loadSettingsProfile (name) {
+    loadSettingsProfile(name) {
       this.$store.commit('setOption', { name: 'profile', value: name })
       this.$store.dispatch('getSettingsProfile', true)
     },
-    createSettingsProfile () {
-      this.$store.dispatch('setOption', { name: 'profile', value: this.newProfileName })
+    createSettingsProfile() {
+      this.$store.dispatch('setOption', {
+        name: 'profile',
+        value: this.newProfileName
+      })
       this.$store.dispatch('setOption', { name: 'profileVersion', value: 1 })
       this.$store.dispatch('syncSettings')
       this.newProfileName = ''
     },
-    forceSync () {
+    forceSync() {
       this.$store.dispatch('getSettingsProfile')
     },
-    refreshProfiles () {
+    refreshProfiles() {
       this.$store.dispatch('listSettingsProfiles')
     },
-    deleteSettingsProfile (name) {
+    deleteSettingsProfile(name) {
       if (confirm(this.$t('settings.settings_profile_delete_confirm'))) {
         this.$store.dispatch('deleteSettingsProfile', name)
       }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2fa20742a..634215afb 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -6,60 +6,49 @@
           <interface-language-switcher
             :prompt-text="$t('settings.interfaceLanguage')"
             :language="language"
-            :set-language="val => language = val"
+            :set-language="(val) => (language = val)"
           />
         </li>
-        <li
-          v-if="user && (settingsProfiles.length > 0)"
-        >
+        <li v-if="user && settingsProfiles.length > 0">
           <h2>{{ $t('settings.settings_profile') }}</h2>
           <p>
-            {{ $t('settings.settings_profile_currently', { name: settingsProfile, version: settingsVersion }) }}
+            {{
+              $t('settings.settings_profile_currently', {
+                name: settingsProfile,
+                version: settingsVersion
+              })
+            }}
             <button
               class="btn button-default"
               @click="forceSync()"
             >
               {{ $t('settings.settings_profile_force_sync') }}
             </button>
-
           </p>
-          <div
-            @click="toggleExpandedSettings"
-          >
-            <template
-              v-if="profilesExpanded"
-            >
+          <div @click="toggleExpandedSettings">
+            <template v-if="profilesExpanded">
               <button class="btn button-default">
                 {{ $t('settings.settings_profiles_unshow') }}
               </button>
             </template>
-            <template
-              v-else
-            >
+            <template v-else>
               <button class="btn button-default">
                 {{ $t('settings.settings_profiles_show') }}
               </button>
             </template>
           </div>
-          <br>
-          <template
-            v-if="profilesExpanded"
-          >
-
+          <br />
+          <template v-if="profilesExpanded">
             <div
               v-for="profile in settingsProfiles"
               :key="profile.id"
               class="settings-profile"
             >
               <h4>{{ profile.name }} ({{ profile.version }})</h4>
-              <template
-                v-if="settingsProfile === profile.name"
-              >
+              <template v-if="settingsProfile === profile.name">
                 {{ $t('settings.settings_profile_in_use') }}
               </template>
-              <template
-                v-else
-              >
+              <template v-else>
                 <button
                   class="btn button-default"
                   @click="loadSettingsProfile(profile.name)"
@@ -74,15 +63,24 @@
                 </button>
               </template>
             </div>
-            <button class="btn button-default" @click="refreshProfiles()">
+            <button
+              class="btn button-default"
+              @click="refreshProfiles()"
+            >
               {{ $t('settings.settings_profiles_refresh') }}
-              <FAIcon icon="sync" @click="refreshProfiles()" />
+              <FAIcon
+                icon="sync"
+                @click="refreshProfiles()"
+              />
             </button>
             <h3>{{ $t('settings.settings_profile_creation') }}</h3>
             <label for="settings-profile-new-name">
               {{ $t('settings.settings_profile_creation_new_name_label') }}
             </label>
-            <input v-model="newProfileName" id="settings-profile-new-name">
+            <input
+              id="settings-profile-new-name"
+              v-model="newProfileName"
+            />
             <button
               class="btn button-default"
               @click="createSettingsProfile"
@@ -158,7 +156,7 @@
           </BooleanSetting>
           <ul
             class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
+            :class="[{ disabled: !streaming }]"
           >
             <li>
               <BooleanSetting
@@ -191,9 +189,7 @@
           <BooleanSetting path="renderMisskeyMarkdown">
             {{ $t('settings.render_mfm') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="renderMfmOnHover"
@@ -215,7 +211,7 @@
         </li>
         <li>
           <ChoiceSetting
-            v-if="user && (translationLanguages.length > 0)"
+            v-if="user && translationLanguages.length > 0"
             id="translationLanguage"
             path="translationLanguage"
             :options="translationLanguages"
@@ -426,7 +422,7 @@
           </BooleanSetting>
           <ul
             class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
+            :class="[{ disabled: !streaming }]"
           >
             <li>
               <BooleanSetting
@@ -440,7 +436,8 @@
                 v-if="!loopSilentAvailable"
                 class="unavailable"
               >
-                <FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
+                <FAIcon icon="globe" />!
+                {{ $t('settings.limited_availability') }}
               </div>
             </li>
           </ul>
@@ -463,9 +460,7 @@
             {{ $t('settings.mention_link_display') }}
           </ChoiceSetting>
         </li>
-        <ul
-          class="setting-list suboptions"
-        >
+        <ul class="setting-list suboptions">
           <li v-if="mentionLinkDisplay === 'short'">
             <BooleanSetting
               path="mentionLinkShowTooltip"
@@ -534,7 +529,8 @@
       <ul class="setting-list">
         <li>
           <label for="default-vis">
-            {{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
+            {{ $t('settings.default_vis') }}
+            <ServerSideIndicator :server-side="true" />
             <ScopeSelector
               class="scope-selector"
               :user-default="serverSide_defaultScope"
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
index 6cfeea35a..ffd4ae53a 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
@@ -13,7 +13,8 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 const BlockList = withSubscription({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
-  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  select: (props, $store) =>
+    get($store.state.users.currentUser, 'blockIds', []),
   childPropName: 'items'
 })(SelectableList)
 
@@ -25,17 +26,18 @@ const MuteList = withSubscription({
 
 const DomainMuteList = withSubscription({
   fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
-  select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
+  select: (props, $store) =>
+    get($store.state.users.currentUser, 'domainMutes', []),
   childPropName: 'items'
 })(SelectableList)
 
 const MutesAndBlocks = {
-  data () {
+  data() {
     return {
       activeTab: 'profile'
     }
   },
-  created () {
+  created() {
     this.$store.dispatch('fetchTokens')
     this.$store.dispatch('getKnownDomains')
   },
@@ -52,82 +54,89 @@ const MutesAndBlocks = {
     Checkbox
   },
   computed: {
-    knownDomains () {
+    knownDomains() {
       return this.$store.state.instance.knownDomains
     },
-    user () {
+    user() {
       return this.$store.state.users.currentUser
     }
   },
   methods: {
-    importFollows (file) {
-      return this.$store.state.api.backendInteractor.importFollows({ file })
+    importFollows(file) {
+      return this.$store.state.api.backendInteractor
+        .importFollows({ file })
         .then((status) => {
           if (!status) {
             throw new Error('failed')
           }
         })
     },
-    importBlocks (file) {
-      return this.$store.state.api.backendInteractor.importBlocks({ file })
+    importBlocks(file) {
+      return this.$store.state.api.backendInteractor
+        .importBlocks({ file })
         .then((status) => {
           if (!status) {
             throw new Error('failed')
           }
         })
     },
-    generateExportableUsersContent (users) {
+    generateExportableUsersContent(users) {
       // Get addresses
-      return users.map((user) => {
-        // check is it's a local user
-        if (user && user.is_local) {
-          // append the instance address
-          // eslint-disable-next-line no-undef
-          return user.screen_name + '@' + location.hostname
-        }
-        return user.screen_name
-      }).join('\n')
+      return users
+        .map((user) => {
+          // check is it's a local user
+          if (user && user.is_local) {
+            // append the instance address
+            // eslint-disable-next-line no-undef
+            return user.screen_name + '@' + location.hostname
+          }
+          return user.screen_name
+        })
+        .join('\n')
     },
-    activateTab (tabName) {
+    activateTab(tabName) {
       this.activeTab = tabName
     },
-    filterUnblockedUsers (userIds) {
+    filterUnblockedUsers(userIds) {
       return reject(userIds, (userId) => {
         const relationship = this.$store.getters.relationship(this.userId)
         return relationship.blocking || userId === this.user.id
       })
     },
-    filterUnMutedUsers (userIds) {
+    filterUnMutedUsers(userIds) {
       return reject(userIds, (userId) => {
         const relationship = this.$store.getters.relationship(this.userId)
         return relationship.muting || userId === this.user.id
       })
     },
-    queryUserIds (query) {
-      return this.$store.dispatch('searchUsers', { query })
+    queryUserIds(query) {
+      return this.$store
+        .dispatch('searchUsers', { query })
         .then((users) => map(users, 'id'))
     },
-    blockUsers (ids) {
+    blockUsers(ids) {
       return this.$store.dispatch('blockUsers', ids)
     },
-    unblockUsers (ids) {
+    unblockUsers(ids) {
       return this.$store.dispatch('unblockUsers', ids)
     },
-    muteUsers (ids) {
+    muteUsers(ids) {
       return this.$store.dispatch('muteUsers', ids)
     },
-    unmuteUsers (ids) {
+    unmuteUsers(ids) {
       return this.$store.dispatch('unmuteUsers', ids)
     },
-    filterUnMutedDomains (urls) {
-      return urls.filter(url => !this.user.domainMutes.includes(url))
+    filterUnMutedDomains(urls) {
+      return urls.filter((url) => !this.user.domainMutes.includes(url))
     },
-    queryKnownDomains (query) {
+    queryKnownDomains(query) {
       return new Promise((resolve, reject) => {
-        resolve(this.knownDomains.filter(url => url.toLowerCase().includes(query)))
+        resolve(
+          this.knownDomains.filter((url) => url.toLowerCase().includes(query))
+        )
       })
     },
-    unmuteDomains (domains) {
+    unmuteDomains(domains) {
       return this.$store.dispatch('unmuteDomains', domains)
     }
   }
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 32a21415c..90b272376 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -10,18 +10,16 @@
           :query="queryUserIds"
           :placeholder="$t('settings.search_user_to_block')"
         >
-          <template v-slot="row">
-            <BlockCard
-              :user-id="row.item"
-            />
+          <template #default="row">
+            <BlockCard :user-id="row.item" />
           </template>
         </Autosuggest>
       </div>
       <BlockList
         :refresh="true"
-        :get-key="i => i"
+        :get-key="(i) => i"
       >
-        <template v-slot:header="{selected}">
+        <template #header="{ selected }">
           <div class="bulk-actions">
             <ProgressButton
               v-if="selected.length > 0"
@@ -29,7 +27,7 @@
               :click="() => blockUsers(selected)"
             >
               {{ $t('user_card.block') }}
-              <template v-slot:progress>
+              <template #progress>
                 {{ $t('user_card.block_progress') }}
               </template>
             </ProgressButton>
@@ -39,16 +37,16 @@
               :click="() => unblockUsers(selected)"
             >
               {{ $t('user_card.unblock') }}
-              <template v-slot:progress>
+              <template #progress>
                 {{ $t('user_card.unblock_progress') }}
               </template>
             </ProgressButton>
           </div>
         </template>
-        <template v-slot:item="{item}">
+        <template #item="{ item }">
           <BlockCard :user-id="item" />
         </template>
-        <template v-slot:empty>
+        <template #empty>
           {{ $t('settings.no_blocks') }}
         </template>
       </BlockList>
@@ -63,18 +61,16 @@
               :query="queryUserIds"
               :placeholder="$t('settings.search_user_to_mute')"
             >
-              <template v-slot="row">
-                <MuteCard
-                  :user-id="row.item"
-                />
+              <template #default="row">
+                <MuteCard :user-id="row.item" />
               </template>
             </Autosuggest>
           </div>
           <MuteList
             :refresh="true"
-            :get-key="i => i"
+            :get-key="(i) => i"
           >
-            <template v-slot:header="{selected}">
+            <template #header="{ selected }">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -82,7 +78,7 @@
                   :click="() => muteUsers(selected)"
                 >
                   {{ $t('user_card.mute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                     {{ $t('user_card.mute_progress') }}
                   </template>
                 </ProgressButton>
@@ -92,16 +88,16 @@
                   :click="() => unmuteUsers(selected)"
                 >
                   {{ $t('user_card.unmute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                     {{ $t('user_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template v-slot:item="{item}">
+            <template #item="{ item }">
               <MuteCard :user-id="item" />
             </template>
-            <template v-slot:empty>
+            <template #empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </MuteList>
@@ -114,18 +110,16 @@
               :query="queryKnownDomains"
               :placeholder="$t('settings.type_domains_to_mute')"
             >
-              <template v-slot="row">
-                <DomainMuteCard
-                  :domain="row.item"
-                />
+              <template #default="row">
+                <DomainMuteCard :domain="row.item" />
               </template>
             </Autosuggest>
           </div>
           <DomainMuteList
             :refresh="true"
-            :get-key="i => i"
+            :get-key="(i) => i"
           >
-            <template v-slot:header="{selected}">
+            <template #header="{ selected }">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -133,16 +127,16 @@
                   :click="() => unmuteDomains(selected)"
                 >
                   {{ $t('domain_mute_card.unmute') }}
-                  <template v-slot:progress>
+                  <template #progress>
                     {{ $t('domain_mute_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template v-slot:item="{item}">
+            <template #item="{ item }">
               <DomainMuteCard :domain="item" />
             </template>
-            <template v-slot:empty>
+            <template #empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </DomainMuteList>
diff --git a/src/components/settings_modal/tabs/notifications_tab.js b/src/components/settings_modal/tabs/notifications_tab.js
index 3c6ab87fe..b1da50c8d 100644
--- a/src/components/settings_modal/tabs/notifications_tab.js
+++ b/src/components/settings_modal/tabs/notifications_tab.js
@@ -2,10 +2,11 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const NotificationsTab = {
-  data () {
+  data() {
     return {
       activeTab: 'profile',
-      notificationSettings: this.$store.state.users.currentUser.notification_settings,
+      notificationSettings:
+        this.$store.state.users.currentUser.notification_settings,
       newDomainToMute: ''
     }
   },
@@ -13,15 +14,16 @@ const NotificationsTab = {
     BooleanSetting
   },
   computed: {
-    user () {
+    user() {
       return this.$store.state.users.currentUser
     },
     ...SharedComputedObject()
   },
   methods: {
-    updateNotificationSettings () {
-      this.$store.state.api.backendInteractor
-        .updateNotificationSettings({ settings: this.notificationSettings })
+    updateNotificationSettings() {
+      this.$store.state.api.backendInteractor.updateNotificationSettings({
+        settings: this.notificationSettings
+      })
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 5b3a62a9c..c77c8b012 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -9,7 +9,9 @@
           </BooleanSetting>
         </li>
         <li class="select-multiple">
-          <span class="label">{{ $t('settings.notification_visibility') }}</span>
+          <span class="label">{{
+            $t('settings.notification_visibility')
+          }}</span>
           <ul class="option-list">
             <li>
               <BooleanSetting path="notificationVisibility.likes">
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index c29e8d2ac..e6232106c 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -20,19 +20,18 @@ import {
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes,
-  faPlus,
-  faCircleNotch
-)
+library.add(faTimes, faPlus, faCircleNotch)
 
 const ProfileTab = {
-  data () {
+  data() {
     return {
       newName: this.$store.state.users.currentUser.name_unescaped,
       newBio: unescape(this.$store.state.users.currentUser.description),
       newLocked: this.$store.state.users.currentUser.locked,
-      newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
+      newFields: this.$store.state.users.currentUser.fields.map((field) => ({
+        name: field.name,
+        value: field.value
+      })),
       showRole: this.$store.state.users.currentUser.show_role,
       role: this.$store.state.users.currentUser.role,
       bot: this.$store.state.users.currentUser.bot,
@@ -45,7 +44,7 @@ const ProfileTab = {
       backgroundPreview: null,
       emailLanguage: this.$store.state.users.currentUser.language || '',
       newPostTTLDays: this.$store.state.users.currentUser.status_ttl_days,
-      expirePosts: this.$store.state.users.currentUser.status_ttl_days !== null,
+      expirePosts: this.$store.state.users.currentUser.status_ttl_days !== null
     }
   },
   components: {
@@ -59,11 +58,11 @@ const ProfileTab = {
     InterfaceLanguageSwitcher
   },
   computed: {
-    user () {
+    user() {
       return this.$store.state.users.currentUser
     },
     ...SharedComputedObject(),
-    emojiUserSuggestor () {
+    emojiUserSuggestor() {
       return suggestor({
         emoji: [
           ...this.$store.state.instance.emoji,
@@ -72,58 +71,72 @@ const ProfileTab = {
         store: this.$store
       })
     },
-    emojiSuggestor () {
-      return suggestor({ emoji: [
-        ...this.$store.state.instance.emoji,
-        ...this.$store.state.instance.customEmoji
-      ] })
+    emojiSuggestor() {
+      return suggestor({
+        emoji: [
+          ...this.$store.state.instance.emoji,
+          ...this.$store.state.instance.customEmoji
+        ]
+      })
     },
-    userSuggestor () {
+    userSuggestor() {
       return suggestor({ store: this.$store })
     },
-    fieldsLimits () {
+    fieldsLimits() {
       return this.$store.state.instance.fieldsLimits
     },
-    maxFields () {
+    maxFields() {
       return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
     },
-    defaultAvatar () {
-      return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
+    defaultAvatar() {
+      return (
+        this.$store.state.instance.server +
+        this.$store.state.instance.defaultAvatar
+      )
     },
-    defaultBanner () {
-      return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
+    defaultBanner() {
+      return (
+        this.$store.state.instance.server +
+        this.$store.state.instance.defaultBanner
+      )
     },
-    isDefaultAvatar () {
+    isDefaultAvatar() {
       const baseAvatar = this.$store.state.instance.defaultAvatar
-      return !(this.$store.state.users.currentUser.profile_image_url) ||
-      this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
+      return (
+        !this.$store.state.users.currentUser.profile_image_url ||
+        this.$store.state.users.currentUser.profile_image_url.includes(
+          baseAvatar
+        )
+      )
     },
-    isDefaultBanner () {
+    isDefaultBanner() {
       const baseBanner = this.$store.state.instance.defaultBanner
-      return !(this.$store.state.users.currentUser.cover_photo) ||
-      this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
+      return (
+        !this.$store.state.users.currentUser.cover_photo ||
+        this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
+      )
     },
-    isDefaultBackground () {
-      return !(this.$store.state.users.currentUser.background_image)
+    isDefaultBackground() {
+      return !this.$store.state.users.currentUser.background_image
     },
-    avatarImgSrc () {
+    avatarImgSrc() {
       const src = this.$store.state.users.currentUser.profile_image_url_original
-      return (!src) ? this.defaultAvatar : src
+      return !src ? this.defaultAvatar : src
     },
-    bannerImgSrc () {
+    bannerImgSrc() {
       const src = this.$store.state.users.currentUser.cover_photo
-      return (!src) ? this.defaultBanner : src
+      return !src ? this.defaultBanner : src
     }
   },
   methods: {
-    updateProfile () {
+    updateProfile() {
       const params = {
         note: this.newBio,
         locked: this.newLocked,
         // Backend notation.
         /* eslint-disable camelcase */
         display_name: this.newName,
-        fields_attributes: this.newFields.filter(el => el != null),
+        fields_attributes: this.newFields.filter((el) => el != null),
         bot: this.bot,
         show_role: this.showRole,
         status_ttl_days: this.expirePosts ? this.newPostTTLDays : -1
@@ -131,7 +144,9 @@ const ProfileTab = {
       }
 
       if (this.emailLanguage) {
-        params.language = localeService.internalToBackendLocale(this.emailLanguage)
+        params.language = localeService.internalToBackendLocale(
+          this.emailLanguage
+        )
       }
 
       this.$store.state.api.backendInteractor
@@ -143,25 +158,29 @@ const ProfileTab = {
           this.$store.commit('setCurrentUser', user)
         })
     },
-    changeVis (visibility) {
+    changeVis(visibility) {
       this.newDefaultScope = visibility
     },
-    addField () {
+    addField() {
       if (this.newFields.length < this.maxFields) {
         this.newFields.push({ name: '', value: '' })
         return true
       }
       return false
     },
-    deleteField (index, event) {
+    deleteField(index, event) {
       this.newFields.splice(index, 1)
     },
-    uploadFile (slot, e) {
+    uploadFile(slot, e) {
       const file = e.target.files[0]
-      if (!file) { return }
+      if (!file) {
+        return
+      }
       if (file.size > this.$store.state.instance[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
-        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
+        const allowedsize = fileSizeFormatService.fileSizeFormat(
+          this.$store.state.instance[slot + 'limit']
+        )
         this.$store.dispatch('pushGlobalNotice', {
           messageKey: 'upload.error.message',
           messageArgs: [
@@ -185,29 +204,32 @@ const ProfileTab = {
       }
       reader.readAsDataURL(file)
     },
-    resetAvatar () {
+    resetAvatar() {
       const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
       if (confirmed) {
         this.submitAvatar(undefined, '')
       }
     },
-    resetBanner () {
+    resetBanner() {
       const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
       if (confirmed) {
         this.submitBanner('')
       }
     },
-    resetBackground () {
-      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
+    resetBackground() {
+      const confirmed = window.confirm(
+        this.$t('settings.reset_background_confirm')
+      )
       if (confirmed) {
         this.submitBackground('')
       }
     },
-    submitAvatar (cropper, file) {
+    submitAvatar(cropper, file) {
       const that = this
       return new Promise((resolve, reject) => {
-        function updateAvatar (avatar, avatarName) {
-          that.$store.state.api.backendInteractor.updateProfileImages({ avatar, avatarName })
+        function updateAvatar(avatar, avatarName) {
+          that.$store.state.api.backendInteractor
+            .updateProfileImages({ avatar, avatarName })
             .then((user) => {
               that.$store.commit('addNewUsers', [user])
               that.$store.commit('setCurrentUser', user)
@@ -220,39 +242,51 @@ const ProfileTab = {
         }
 
         if (cropper) {
-          cropper.getCroppedCanvas().toBlob((data) => updateAvatar(data, file.name), file.type)
+          cropper
+            .getCroppedCanvas()
+            .toBlob((data) => updateAvatar(data, file.name), file.type)
         } else {
           updateAvatar(file, file.name)
         }
       })
     },
-    submitBanner (banner) {
-      if (!this.bannerPreview && banner !== '') { return }
+    submitBanner(banner) {
+      if (!this.bannerPreview && banner !== '') {
+        return
+      }
 
       this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ banner })
+      this.$store.state.api.backendInteractor
+        .updateProfileImages({ banner })
         .then((user) => {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
           this.bannerPreview = null
         })
         .catch(this.displayUploadError)
-        .finally(() => { this.bannerUploading = false })
+        .finally(() => {
+          this.bannerUploading = false
+        })
     },
-    submitBackground (background) {
-      if (!this.backgroundPreview && background !== '') { return }
+    submitBackground(background) {
+      if (!this.backgroundPreview && background !== '') {
+        return
+      }
 
       this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ background })
+      this.$store.state.api.backendInteractor
+        .updateProfileImages({ background })
         .then((data) => {
           this.$store.commit('addNewUsers', [data])
           this.$store.commit('setCurrentUser', data)
           this.backgroundPreview = null
         })
         .catch(this.displayUploadError)
-        .finally(() => { this.backgroundUploading = false })
+        .finally(() => {
+          this.backgroundUploading = false
+        })
     },
-    displayUploadError (error) {
+    displayUploadError(error) {
       this.$store.dispatch('pushGlobalNotice', {
         messageKey: 'upload.error.message',
         messageArgs: [error.message],
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 8748b6856..fd266ab64 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -12,7 +12,7 @@
           id="username"
           v-model="newName"
           class="name-changer"
-        >
+        />
       </EmojiInput>
       <p>{{ $t('settings.bio') }}</p>
       <EmojiInput
@@ -51,7 +51,7 @@
             <input
               v-model="newFields[i].name"
               :placeholder="$t('settings.profile_fields.name')"
-            >
+            />
           </EmojiInput>
           <EmojiInput
             v-model="newFields[i].value"
@@ -62,7 +62,7 @@
             <input
               v-model="newFields[i].value"
               :placeholder="$t('settings.profile_fields.value')"
-            >
+            />
           </EmojiInput>
           <button
             class="delete-field button-unstyled -hover-highlight"
@@ -81,7 +81,7 @@
           @click="addField"
         >
           <FAIcon icon="plus" />
-          {{ $t("settings.profile_fields.add_field") }}
+          {{ $t('settings.profile_fields.add_field') }}
         </button>
       </div>
       <p>
@@ -107,7 +107,7 @@
         <interface-language-switcher
           :prompt-text="$t('settings.email_language')"
           :language="emailLanguage"
-          :set-language="val => emailLanguage = val"
+          :set-language="(val) => (emailLanguage = val)"
         />
       </p>
       <button
@@ -127,7 +127,7 @@
         <img
           :src="user.profile_image_url_original"
           class="current-avatar"
-        >
+        />
         <button
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
@@ -152,14 +152,14 @@
       <image-cropper
         trigger="#pick-avatar"
         :submit-handler="submitAvatar"
-        @open="pickAvatarBtnVisible=false"
-        @close="pickAvatarBtnVisible=true"
+        @open="pickAvatarBtnVisible = false"
+        @close="pickAvatarBtnVisible = true"
       />
     </div>
     <div class="setting-item">
       <h2>{{ $t('settings.profile_banner') }}</h2>
       <div class="banner-background-preview">
-        <img :src="user.cover_photo">
+        <img :src="user.cover_photo" />
         <button
           v-if="!isDefaultBanner"
           class="button-unstyled reset-button"
@@ -177,12 +177,12 @@
         v-if="bannerPreview"
         class="banner-background-preview"
         :src="bannerPreview"
-      >
+      />
       <div>
         <input
           type="file"
           @change="uploadFile('banner', $event)"
-        >
+        />
       </div>
       <FAIcon
         v-if="bannerUploading"
@@ -201,7 +201,7 @@
     <div class="setting-item">
       <h2>{{ $t('settings.profile_background') }}</h2>
       <div class="banner-background-preview">
-        <img :src="user.background_image">
+        <img :src="user.background_image" />
         <button
           v-if="!isDefaultBackground"
           class="button-unstyled reset-button"
@@ -219,12 +219,12 @@
         v-if="backgroundPreview"
         class="banner-background-preview"
         :src="backgroundPreview"
-      >
+      />
       <div>
         <input
           type="file"
           @change="uploadFile('background', $event)"
-        >
+        />
       </div>
       <FAIcon
         v-if="backgroundUploading"
@@ -269,7 +269,7 @@
           </BooleanSetting>
           <ul
             class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollowers}]"
+            :class="[{ disabled: !serverSide_hideFollowers }]"
           >
             <li>
               <BooleanSetting
@@ -287,7 +287,7 @@
           </BooleanSetting>
           <ul
             class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollows}]"
+            :class="[{ disabled: !serverSide_hideFollows }]"
           >
             <li>
               <BooleanSetting
diff --git a/src/components/settings_modal/tabs/security_tab/confirm.js b/src/components/settings_modal/tabs/security_tab/confirm.js
index 0f4ddfc9b..1af701177 100644
--- a/src/components/settings_modal/tabs/security_tab/confirm.js
+++ b/src/components/settings_modal/tabs/security_tab/confirm.js
@@ -2,8 +2,12 @@ const Confirm = {
   props: ['disabled'],
   data: () => ({}),
   methods: {
-    confirm () { this.$emit('confirm') },
-    cancel () { this.$emit('cancel') }
+    confirm() {
+      this.$emit('confirm')
+    },
+    cancel() {
+      this.$emit('cancel')
+    }
   }
 }
 export default Confirm
diff --git a/src/components/settings_modal/tabs/security_tab/confirm.vue b/src/components/settings_modal/tabs/security_tab/confirm.vue
index 38c2a6101..085c260c8 100644
--- a/src/components/settings_modal/tabs/security_tab/confirm.vue
+++ b/src/components/settings_modal/tabs/security_tab/confirm.vue
@@ -18,5 +18,4 @@
   </div>
 </template>
 
-<script src="./confirm.js">
-</script>
+<script src="./confirm.js"></script>
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.js b/src/components/settings_modal/tabs/security_tab/mfa.js
index abf37062f..aa4f32f56 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.js
+++ b/src/components/settings_modal/tabs/security_tab/mfa.js
@@ -6,12 +6,14 @@ import { mapState } from 'vuex'
 
 const Mfa = {
   data: () => ({
-    settings: { // current settings of MFA
+    settings: {
+      // current settings of MFA
       available: false,
       enabled: false,
       totp: false
     },
-    setupState: { // setup mfa
+    setupState: {
+      // setup mfa
       state: '', // state of setup. '' -> 'getBackupCodes' -> 'setupOTP' -> 'complete'
       setupOTPState: '' // state of setup otp. '' -> 'prepare' -> 'confirm' -> 'complete'
     },
@@ -20,7 +22,8 @@ const Mfa = {
       inProgress: false, //  progress of fetch codes
       codes: []
     },
-    otpSettings: { // pre-setup setting of OTP. secret key, qrcode url.
+    otpSettings: {
+      // pre-setup setting of OTP. secret key, qrcode url.
       provisioning_uri: '',
       key: ''
     },
@@ -32,35 +35,39 @@ const Mfa = {
   components: {
     'recovery-codes': RecoveryCodes,
     'totp-item': TOTP,
-    'qrcode': VueQrcode,
-    'confirm': Confirm
+    qrcode: VueQrcode,
+    confirm: Confirm
   },
   computed: {
-    canSetupOTP () {
+    canSetupOTP() {
       return (
-        (this.setupInProgress && this.backupCodesPrepared) ||
-          this.settings.enabled
-      ) && !this.settings.totp && !this.setupOTPInProgress
+        ((this.setupInProgress && this.backupCodesPrepared) ||
+          this.settings.enabled) &&
+        !this.settings.totp &&
+        !this.setupOTPInProgress
+      )
     },
-    setupInProgress () {
-      return this.setupState.state !== '' && this.setupState.state !== 'complete'
+    setupInProgress() {
+      return (
+        this.setupState.state !== '' && this.setupState.state !== 'complete'
+      )
     },
-    setupOTPInProgress () {
+    setupOTPInProgress() {
       return this.setupState.state === 'setupOTP' && !this.completedOTP
     },
-    prepareOTP () {
+    prepareOTP() {
       return this.setupState.setupOTPState === 'prepare'
     },
-    confirmOTP () {
+    confirmOTP() {
       return this.setupState.setupOTPState === 'confirm'
     },
-    completedOTP () {
+    completedOTP() {
       return this.setupState.setupOTPState === 'completed'
     },
-    backupCodesPrepared () {
+    backupCodesPrepared() {
       return !this.backupCodes.inProgress && this.backupCodes.codes.length > 0
     },
-    confirmNewBackupCodes () {
+    confirmNewBackupCodes() {
       return this.backupCodes.getNewCodes
     },
     ...mapState({
@@ -69,50 +76,54 @@ const Mfa = {
   },
 
   methods: {
-    activateOTP () {
+    activateOTP() {
       if (!this.settings.enabled) {
         this.setupState.state = 'getBackupcodes'
         this.fetchBackupCodes()
       }
     },
-    fetchBackupCodes () {
+    fetchBackupCodes() {
       this.backupCodes.inProgress = true
       this.backupCodes.codes = []
 
-      return this.backendInteractor.generateMfaBackupCodes()
-        .then((res) => {
-          this.backupCodes.codes = res.codes
-          this.backupCodes.inProgress = false
-        })
+      return this.backendInteractor.generateMfaBackupCodes().then((res) => {
+        this.backupCodes.codes = res.codes
+        this.backupCodes.inProgress = false
+      })
     },
-    getBackupCodes () { // get a new backup codes
+    getBackupCodes() {
+      // get a new backup codes
       this.backupCodes.getNewCodes = true
     },
-    confirmBackupCodes () { // confirm getting new backup codes
+    confirmBackupCodes() {
+      // confirm getting new backup codes
       this.fetchBackupCodes().then((res) => {
         this.backupCodes.getNewCodes = false
       })
     },
-    cancelBackupCodes () { // cancel confirm form of new backup codes
+    cancelBackupCodes() {
+      // cancel confirm form of new backup codes
       this.backupCodes.getNewCodes = false
     },
 
     // Setup OTP
-    setupOTP () { // prepare setup OTP
+    setupOTP() {
+      // prepare setup OTP
       this.setupState.state = 'setupOTP'
       this.setupState.setupOTPState = 'prepare'
-      this.backendInteractor.mfaSetupOTP()
-        .then((res) => {
-          this.otpSettings = res
-          this.setupState.setupOTPState = 'confirm'
-        })
-    },
-    doConfirmOTP () { // handler confirm enable OTP
-      this.error = null
-      this.backendInteractor.mfaConfirmOTP({
-        token: this.otpConfirmToken,
-        password: this.currentPassword
+      this.backendInteractor.mfaSetupOTP().then((res) => {
+        this.otpSettings = res
+        this.setupState.setupOTPState = 'confirm'
       })
+    },
+    doConfirmOTP() {
+      // handler confirm enable OTP
+      this.error = null
+      this.backendInteractor
+        .mfaConfirmOTP({
+          token: this.otpConfirmToken,
+          password: this.currentPassword
+        })
         .then((res) => {
           if (res.error) {
             this.error = res.error
@@ -122,14 +133,15 @@ const Mfa = {
         })
     },
 
-    completeSetup () {
+    completeSetup() {
       this.setupState.setupOTPState = 'complete'
       this.setupState.state = 'complete'
       this.currentPassword = null
       this.error = null
       this.fetchSettings()
     },
-    cancelSetup () { // cancel setup
+    cancelSetup() {
+      // cancel setup
       this.setupState.setupOTPState = ''
       this.setupState.state = ''
       this.currentPassword = null
@@ -138,7 +150,7 @@ const Mfa = {
     // end Setup OTP
 
     // fetch settings from server
-    async fetchSettings () {
+    async fetchSettings() {
       let result = await this.backendInteractor.settingsMFA()
       if (result.error) return
       this.settings = result.settings
@@ -146,7 +158,7 @@ const Mfa = {
       return result
     }
   },
-  mounted () {
+  mounted() {
     this.fetchSettings().then(() => {
       this.readyInit = true
     })
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index 455d17b6a..3e1dce108 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -19,7 +19,7 @@
           @deactivate="fetchSettings"
           @activate="activateOTP"
         />
-        <br>
+        <br />
 
         <div v-if="settings.enabled">
           <!-- backup codes block-->
@@ -99,13 +99,13 @@
                 <input
                   v-model="otpConfirmToken"
                   type="text"
-                >
+                />
 
                 <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
                 <input
                   v-model="currentPassword"
                   type="password"
-                >
+                />
                 <div class="confirm-otp-actions">
                   <button
                     class="btn button-default"
@@ -139,7 +139,8 @@
 <style lang="scss">
 @import '../../../../_variables.scss';
 .mfa-settings {
-  .mfa-heading, .method-item {
+  .mfa-heading,
+  .method-item {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -159,14 +160,17 @@
       flex: 1;
       padding-right: 10px;
     }
-    .verify { flex: 1; }
-    .error { margin: 4px 0 0 0; }
+    .verify {
+      flex: 1;
+    }
+    .error {
+      margin: 4px 0 0 0;
+    }
     .confirm-otp-actions {
       button {
         width: 15em;
         margin-top: 5px;
       }
-
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js
index f0a984ecd..f29ac6501 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js
@@ -10,8 +10,14 @@ export default {
   },
   data: () => ({}),
   computed: {
-    inProgress () { return this.backupCodes.inProgress },
-    ready () { return this.backupCodes.codes.length > 0 },
-    displayTitle () { return this.inProgress || this.ready }
+    inProgress() {
+      return this.backupCodes.inProgress
+    },
+    ready() {
+      return this.backupCodes.codes.length > 0
+    },
+    displayTitle() {
+      return this.inProgress || this.ready
+    }
   }
 }
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.js b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
index 8408d8e92..0c5ae2455 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.js
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
@@ -10,10 +10,10 @@ export default {
     inProgress: false // progress peform request to disable otp method
   }),
   components: {
-    'confirm': Confirm
+    confirm: Confirm
   },
   computed: {
-    isActivated () {
+    isActivated() {
       return this.settings.totp
     },
     ...mapState({
@@ -21,20 +21,24 @@ export default {
     })
   },
   methods: {
-    doActivate () {
+    doActivate() {
       this.$emit('activate')
     },
-    cancelDeactivate () { this.deactivate = false },
-    doDeactivate () {
+    cancelDeactivate() {
+      this.deactivate = false
+    },
+    doDeactivate() {
       this.error = null
       this.deactivate = true
     },
-    confirmDeactivate () { // confirm deactivate TOTP method
+    confirmDeactivate() {
+      // confirm deactivate TOTP method
       this.error = null
       this.inProgress = true
-      this.backendInteractor.mfaDisableOTP({
-        password: this.currentPassword
-      })
+      this.backendInteractor
+        .mfaDisableOTP({
+          password: this.currentPassword
+        })
         .then((res) => {
           this.inProgress = false
           if (res.error) {
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
index 8e767bd02..79d3d8215 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
@@ -30,7 +30,7 @@
       <input
         v-model="currentPassword"
         type="password"
-      >
+      />
     </confirm>
     <div
       v-if="error"
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.js b/src/components/settings_modal/tabs/security_tab/security_tab.js
index fc7329366..ac9a4fcb5 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
@@ -4,7 +4,7 @@ import Mfa from './mfa.vue'
 import localeService from 'src/services/locale/locale.service.js'
 
 const SecurityTab = {
-  data () {
+  data() {
     return {
       newEmail: '',
       changeEmailError: false,
@@ -13,7 +13,7 @@ const SecurityTab = {
       deletingAccount: false,
       deleteAccountConfirmPasswordInput: '',
       deleteAccountError: false,
-      changePasswordInputs: [ '', '', '' ],
+      changePasswordInputs: ['', '', ''],
       changedPassword: false,
       changePasswordError: false,
       moveAccountTarget: '',
@@ -27,7 +27,7 @@ const SecurityTab = {
       addAliasError: false
     }
   },
-  created () {
+  created() {
     this.$store.dispatch('fetchTokens')
     this.fetchAliases()
   },
@@ -37,28 +37,31 @@ const SecurityTab = {
     Checkbox
   },
   computed: {
-    user () {
+    user() {
       return this.$store.state.users.currentUser
     },
-    pleromaBackend () {
+    pleromaBackend() {
       return this.$store.state.instance.pleromaBackend
     },
-    oauthTokens () {
-      return this.$store.state.oauthTokens.tokens.map(oauthToken => {
+    oauthTokens() {
+      return this.$store.state.oauthTokens.tokens.map((oauthToken) => {
         return {
           id: oauthToken.id,
           appName: oauthToken.app_name,
-          validUntil: new Date(oauthToken.valid_until).toLocaleDateString(localeService.internalToBrowserLocale(this.$i18n.locale))
+          validUntil: new Date(oauthToken.valid_until).toLocaleDateString(
+            localeService.internalToBrowserLocale(this.$i18n.locale)
+          )
         }
       })
     }
   },
   methods: {
-    confirmDelete () {
+    confirmDelete() {
       this.deletingAccount = true
     },
-    deleteAccount () {
-      this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
+    deleteAccount() {
+      this.$store.state.api.backendInteractor
+        .deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
         .then((res) => {
           if (res.status === 'success') {
             this.$store.dispatch('logout')
@@ -68,13 +71,14 @@ const SecurityTab = {
           }
         })
     },
-    changePassword () {
+    changePassword() {
       const params = {
         password: this.changePasswordInputs[0],
         newPassword: this.changePasswordInputs[1],
         newPasswordConfirmation: this.changePasswordInputs[2]
       }
-      this.$store.state.api.backendInteractor.changePassword(params)
+      this.$store.state.api.backendInteractor
+        .changePassword(params)
         .then((res) => {
           if (res.status === 'success') {
             this.changedPassword = true
@@ -86,12 +90,13 @@ const SecurityTab = {
           }
         })
     },
-    changeEmail () {
+    changeEmail() {
       const params = {
         email: this.newEmail,
         password: this.changeEmailPassword
       }
-      this.$store.state.api.backendInteractor.changeEmail(params)
+      this.$store.state.api.backendInteractor
+        .changeEmail(params)
         .then((res) => {
           if (res.status === 'success') {
             this.changedEmail = true
@@ -102,12 +107,13 @@ const SecurityTab = {
           }
         })
     },
-    moveAccount () {
+    moveAccount() {
       const params = {
         targetAccount: this.moveAccountTarget,
         password: this.moveAccountPassword
       }
-      this.$store.state.api.backendInteractor.moveAccount(params)
+      this.$store.state.api.backendInteractor
+        .moveAccount(params)
         .then((res) => {
           if (res.status === 'success') {
             this.movedAccount = true
@@ -118,12 +124,14 @@ const SecurityTab = {
           }
         })
     },
-    removeAlias (alias) {
-      this.$store.state.api.backendInteractor.deleteAlias({ alias })
+    removeAlias(alias) {
+      this.$store.state.api.backendInteractor
+        .deleteAlias({ alias })
         .then(() => this.fetchAliases())
     },
-    addAlias () {
-      this.$store.state.api.backendInteractor.addAlias({ alias: this.addAliasTarget })
+    addAlias() {
+      this.$store.state.api.backendInteractor
+        .addAlias({ alias: this.addAliasTarget })
         .then((res) => {
           this.addedAlias = true
           this.addAliasError = false
@@ -135,8 +143,9 @@ const SecurityTab = {
         })
         .then(() => this.fetchAliases())
     },
-    fetchAliases () {
-      this.$store.state.api.backendInteractor.listAliases()
+    fetchAliases() {
+      this.$store.state.api.backendInteractor
+        .listAliases()
         .then((res) => {
           this.aliases = res.aliases
           this.listAliasesError = false
@@ -145,11 +154,11 @@ const SecurityTab = {
           this.listAliasesError = error.error
         })
     },
-    logout () {
+    logout() {
       this.$store.dispatch('logout')
       this.$router.replace('/')
     },
-    revokeToken (id) {
+    revokeToken(id) {
       if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
         this.$store.dispatch('revokeToken', id)
       }
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index c74a0c671..7809e276e 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -8,7 +8,7 @@
           v-model="newEmail"
           type="email"
           autocomplete="email"
-        >
+        />
       </div>
       <div>
         <p>{{ $t('settings.current_password') }}</p>
@@ -16,7 +16,7 @@
           v-model="changeEmailPassword"
           type="password"
           autocomplete="current-password"
-        >
+        />
       </div>
       <button
         class="btn button-default"
@@ -40,21 +40,21 @@
         <input
           v-model="changePasswordInputs[0]"
           type="password"
-        >
+        />
       </div>
       <div>
         <p>{{ $t('settings.new_password') }}</p>
         <input
           v-model="changePasswordInputs[1]"
           type="password"
-        >
+        />
       </div>
       <div>
         <p>{{ $t('settings.confirm_new_password') }}</p>
         <input
           v-model="changePasswordInputs[2]"
           type="password"
-        >
+        />
       </div>
       <button
         class="btn button-default"
@@ -147,15 +147,9 @@
           path="settings.new_alias_target"
           tag="p"
         >
-          <code
-            place="example"
-          >
-            foo@example.org
-          </code>
+          <code place="example"> foo@example.org </code>
         </i18n>
-        <input
-          v-model="addAliasTarget"
-        >
+        <input v-model="addAliasTarget" />
       </div>
       <button
         class="btn button-default"
@@ -179,15 +173,9 @@
           path="settings.move_account_target"
           tag="p"
         >
-          <code
-            place="example"
-          >
-            foo@example.org
-          </code>
+          <code place="example"> foo@example.org </code>
         </i18n>
-        <input
-          v-model="moveAccountTarget"
-        >
+        <input v-model="moveAccountTarget" />
       </div>
       <div>
         <p>{{ $t('settings.current_password') }}</p>
@@ -195,7 +183,7 @@
           v-model="moveAccountPassword"
           type="password"
           autocomplete="current-password"
-        >
+        />
       </div>
       <button
         class="btn button-default"
@@ -207,7 +195,9 @@
         {{ $t('settings.moved_account') }}
       </p>
       <template v-if="moveAccountError !== false">
-        <p>{{ $t('settings.move_account_error', { error: moveAccountError }) }}</p>
+        <p>
+          {{ $t('settings.move_account_error', { error: moveAccountError }) }}
+        </p>
       </template>
     </div>
 
@@ -222,7 +212,7 @@
         <input
           v-model="deleteAccountConfirmPasswordInput"
           type="password"
-        >
+        />
         <button
           class="btn button-default"
           @click="deleteAccount"
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index ba6bd5297..ede2da6cd 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -5,9 +5,7 @@
       <div class="panel-heading">
         <div class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
-            99
-          </span>
+          <span class="badge badge-notification"> 99 </span>
         </div>
         <span class="faint">
           {{ $t('settings.style.preview.header_faint') }}
@@ -21,9 +19,7 @@
       </div>
       <div class="panel-body theme-preview-content">
         <div class="post">
-          <div class="avatar still-image">
-            ( ͡° ͜ʖ ͡°)
-          </div>
+          <div class="avatar still-image">( ͡° ͜ʖ ͡°)</div>
           <div class="content">
             <h4>
               {{ $t('settings.style.preview.content') }}
@@ -71,9 +67,7 @@
         </div>
 
         <div class="after-post">
-          <div class="avatar-alt">
-            :^)
-          </div>
+          <div class="avatar-alt">:^)</div>
           <div class="content">
             <i18n-t
               keypath="settings.style.preview.fine_print"
@@ -95,7 +89,7 @@
         <input
           :value="$t('settings.style.preview.input')"
           type="text"
-        >
+        />
 
         <div class="actions">
           <span class="checkbox">
@@ -103,8 +97,10 @@
               id="preview_checkbox"
               checked="very yes"
               type="checkbox"
-            >
-            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+            />
+            <label for="preview_checkbox">{{
+              $t('settings.style.preview.checkbox')
+            }}</label>
           </span>
           <button class="btn button-default">
             {{ $t('settings.style.preview.button') }}
@@ -124,12 +120,7 @@ import {
   faReply
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faTimes,
-  faStar,
-  faRetweet,
-  faReply
-)
+library.add(faTimes, faStar, faRetweet, faReply)
 
 export default {}
 </script>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index d6ccd5eae..ce9b9ae64 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -18,9 +18,7 @@ import {
   newImporter,
   newExporter
 } from 'src/services/export_import/export_import.js'
-import {
-  SLOT_INHERITANCE
-} from 'src/services/theme_data/pleromafe.js'
+import { SLOT_INHERITANCE } from 'src/services/theme_data/pleromafe.js'
 import {
   CURRENT_VERSION,
   OPACITIES,
@@ -49,7 +47,7 @@ const v1OnlyNames = [
   'cGreen',
   'cBlue',
   'cOrange'
-].map(_ => _ + 'ColorLocal')
+].map((_) => _ + 'ColorLocal')
 
 // if color doesn't match regex, it's not a color
 const isColor = (color) => /^#[0-9a-f]{6}$/i.test(color)
@@ -63,7 +61,7 @@ const colorConvert = (color) => {
 }
 
 export default {
-  data () {
+  data() {
     return {
       themeImporter: newImporter({
         validator: this.importValidator,
@@ -97,12 +95,18 @@ export default {
       keepFonts: false,
 
       ...Object.keys(SLOT_INHERITANCE)
-        .map(key => [key, ''])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
+        .map((key) => [key, ''])
+        .reduce(
+          (acc, [key, val]) => ({ ...acc, [key + 'ColorLocal']: val }),
+          {}
+        ),
 
       ...Object.keys(OPACITIES)
-        .map(key => [key, ''])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
+        .map((key) => [key, ''])
+        .reduce(
+          (acc, [key, val]) => ({ ...acc, [key + 'OpacityLocal']: val }),
+          {}
+        ),
 
       shadowSelected: undefined,
       shadowsLocal: {},
@@ -118,67 +122,66 @@ export default {
       tooltipRadiusLocal: ''
     }
   },
-  created () {
+  created() {
     const self = this
 
     getThemes()
       .then((promises) => {
         return Promise.all(
-          Object.entries(promises)
-            .map(([k, v]) => v.then(res => [k, res]))
+          Object.entries(promises).map(([k, v]) => v.then((res) => [k, res]))
         )
       })
-      .then(themes => themes.reduce((acc, [k, v]) => {
-        if (v) {
-          return {
-            ...acc,
-            [k]: v
+      .then((themes) =>
+        themes.reduce((acc, [k, v]) => {
+          if (v) {
+            return {
+              ...acc,
+              [k]: v
+            }
+          } else {
+            return acc
           }
-        } else {
-          return acc
-        }
-      }, {}))
+        }, {})
+      )
       .then((themesComplete) => {
         self.availableStyles = themesComplete
       })
   },
-  mounted () {
+  mounted() {
     this.loadThemeFromLocalStorage()
     if (typeof this.shadowSelected === 'undefined') {
       this.shadowSelected = this.shadowsAvailable[0]
     }
   },
   computed: {
-    themeWarningHelp () {
+    themeWarningHelp() {
       if (!this.themeWarning) return
       const t = this.$t
       const pre = 'settings.style.switcher.help.'
-      const {
-        origin,
-        themeEngineVersion,
-        type,
-        noActionsPossible
-      } = this.themeWarning
+      const { origin, themeEngineVersion, type, noActionsPossible } =
+        this.themeWarning
       if (origin === 'file') {
         // Loaded v2 theme from file
         if (themeEngineVersion === 2 && type === 'wrong_version') {
           return t(pre + 'v2_imported')
         }
         if (themeEngineVersion > CURRENT_VERSION) {
-          return t(pre + 'future_version_imported') + ' ' +
-            (
-              noActionsPossible
-                ? t(pre + 'snapshot_missing')
-                : t(pre + 'snapshot_present')
-            )
+          return (
+            t(pre + 'future_version_imported') +
+            ' ' +
+            (noActionsPossible
+              ? t(pre + 'snapshot_missing')
+              : t(pre + 'snapshot_present'))
+          )
         }
         if (themeEngineVersion < CURRENT_VERSION) {
-          return t(pre + 'future_version_imported') + ' ' +
-            (
-              noActionsPossible
-                ? t(pre + 'snapshot_missing')
-                : t(pre + 'snapshot_present')
-            )
+          return (
+            t(pre + 'future_version_imported') +
+            ' ' +
+            (noActionsPossible
+              ? t(pre + 'snapshot_missing')
+              : t(pre + 'snapshot_present'))
+          )
         }
       } else if (origin === 'localStorage') {
         if (type === 'snapshot_source_mismatch') {
@@ -190,38 +193,40 @@ export default {
         }
         // Admin downgraded FE
         if (themeEngineVersion > CURRENT_VERSION) {
-          return t(pre + 'fe_downgraded') + ' ' +
-            (
-              noActionsPossible
-                ? t(pre + 'migration_snapshot_ok')
-                : t(pre + 'migration_snapshot_gone')
-            )
+          return (
+            t(pre + 'fe_downgraded') +
+            ' ' +
+            (noActionsPossible
+              ? t(pre + 'migration_snapshot_ok')
+              : t(pre + 'migration_snapshot_gone'))
+          )
         }
         // Admin upgraded FE
         if (themeEngineVersion < CURRENT_VERSION) {
-          return t(pre + 'fe_upgraded') + ' ' +
-            (
-              noActionsPossible
-                ? t(pre + 'migration_snapshot_ok')
-                : t(pre + 'migration_snapshot_gone')
-            )
+          return (
+            t(pre + 'fe_upgraded') +
+            ' ' +
+            (noActionsPossible
+              ? t(pre + 'migration_snapshot_ok')
+              : t(pre + 'migration_snapshot_gone'))
+          )
         }
       }
     },
-    selectedVersion () {
+    selectedVersion() {
       return Array.isArray(this.selectedTheme) ? 1 : 2
     },
-    currentColors () {
+    currentColors() {
       return Object.keys(SLOT_INHERITANCE)
-        .map(key => [key, this[key + 'ColorLocal']])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
+        .map((key) => [key, this[key + 'ColorLocal']])
+        .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
     },
-    currentOpacity () {
+    currentOpacity() {
       return Object.keys(OPACITIES)
-        .map(key => [key, this[key + 'OpacityLocal']])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
+        .map((key) => [key, this[key + 'OpacityLocal']])
+        .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {})
     },
-    currentRadii () {
+    currentRadii() {
       return {
         btn: this.btnRadiusLocal,
         input: this.inputRadiusLocal,
@@ -233,15 +238,21 @@ export default {
         attachment: this.attachmentRadiusLocal
       }
     },
-    preview () {
-      return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
+    preview() {
+      return composePreset(
+        this.previewColors,
+        this.previewRadii,
+        this.previewShadows,
+        this.previewFonts
+      )
     },
-    previewTheme () {
-      if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
+    previewTheme() {
+      if (!this.preview.theme.colors)
+        return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
       return this.preview.theme
     },
     // This needs optimization maybe
-    previewContrast () {
+    previewContrast() {
       try {
         if (!this.previewTheme.colors.bg) return {}
         const colors = this.previewTheme.colors
@@ -257,54 +268,65 @@ export default {
           laa: ratio >= 3,
           laaa: ratio >= 4.5
         })
-        const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
+        const colorsConverted = Object.entries(colors).reduce(
+          (acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }),
+          {}
+        )
 
-        const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
-          const slotIsBaseText = key === 'text' || key === 'link'
-          const slotIsText = slotIsBaseText || (
-            typeof value === 'object' && value !== null && value.textColor
-          )
-          if (!slotIsText) return acc
-          const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
-          const background = variant || layer
-          const opacitySlot = getOpacitySlot(background)
-          const textColors = [
-            key,
-            ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
-          ]
+        const ratios = Object.entries(SLOT_INHERITANCE).reduce(
+          (acc, [key, value]) => {
+            const slotIsBaseText = key === 'text' || key === 'link'
+            const slotIsText =
+              slotIsBaseText ||
+              (typeof value === 'object' && value !== null && value.textColor)
+            if (!slotIsText) return acc
+            const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
+            const background = variant || layer
+            const opacitySlot = getOpacitySlot(background)
+            const textColors = [
+              key,
+              ...(background === 'bg'
+                ? ['cRed', 'cGreen', 'cBlue', 'cOrange']
+                : [])
+            ]
 
-          const layers = getLayers(
-            layer,
-            variant || layer,
-            opacitySlot,
-            colorsConverted,
-            opacity
-          )
+            const layers = getLayers(
+              layer,
+              variant || layer,
+              opacitySlot,
+              colorsConverted,
+              opacity
+            )
 
-          return {
-            ...acc,
-            ...textColors.reduce((acc, textColorKey) => {
-              const newKey = slotIsBaseText
-                ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
-                : textColorKey
-              return {
-                ...acc,
-                [newKey]: getContrastRatioLayers(
-                  colorsConverted[textColorKey],
-                  layers,
-                  colorsConverted[textColorKey]
-                )
-              }
-            }, {})
-          }
+            return {
+              ...acc,
+              ...textColors.reduce((acc, textColorKey) => {
+                const newKey = slotIsBaseText
+                  ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
+                  : textColorKey
+                return {
+                  ...acc,
+                  [newKey]: getContrastRatioLayers(
+                    colorsConverted[textColorKey],
+                    layers,
+                    colorsConverted[textColorKey]
+                  )
+                }
+              }, {})
+            }
+          },
+          {}
+        )
+
+        return Object.entries(ratios).reduce((acc, [k, v]) => {
+          acc[k] = hints(v)
+          return acc
         }, {})
-
-        return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
       } catch (e) {
         console.warn('Failure computing contrasts', e)
       }
     },
-    previewRules () {
+    previewRules() {
       if (!this.preview.rules) return ''
       return [
         ...Object.values(this.preview.rules),
@@ -312,43 +334,43 @@ export default {
         'font-family: var(--interfaceFont, sans-serif)'
       ].join(';')
     },
-    shadowsAvailable () {
+    shadowsAvailable() {
       return Object.keys(DEFAULT_SHADOWS).sort()
     },
     currentShadowOverriden: {
-      get () {
+      get() {
         return !!this.currentShadow
       },
-      set (val) {
+      set(val) {
         if (val) {
-          this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
+          this.shadowsLocal[this.shadowSelected] =
+            this.currentShadowFallback.map((_) => Object.assign({}, _))
         } else {
           delete this.shadowsLocal[this.shadowSelected]
         }
       }
     },
-    currentShadowFallback () {
+    currentShadowFallback() {
       return (this.previewTheme.shadows || {})[this.shadowSelected]
     },
     currentShadow: {
-      get () {
+      get() {
         return this.shadowsLocal[this.shadowSelected]
       },
-      set (v) {
+      set(v) {
         this.shadowsLocal[this.shadowSelected] = v
       }
     },
-    themeValid () {
+    themeValid() {
       return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
     },
-    exportedTheme () {
-      const saveEverything = (
+    exportedTheme() {
+      const saveEverything =
         !this.keepFonts &&
         !this.keepShadows &&
         !this.keepOpacity &&
         !this.keepRoundness &&
         !this.keepColor
-      )
 
       const source = {
         themeEngineVersion: CURRENT_VERSION
@@ -377,10 +399,12 @@ export default {
 
       return {
         // To separate from other random JSON files and possible future source formats
-        _pleroma_theme_version: 2, theme, source
+        _pleroma_theme_version: 2,
+        theme,
+        source
       }
     },
-    isActive () {
+    isActive() {
       const tabSwitcher = this.$parent
       return tabSwitcher ? tabSwitcher.isActive('theme') : false
     }
@@ -398,37 +422,32 @@ export default {
     Select
   },
   methods: {
-    loadTheme (
-      {
-        theme,
-        source,
-        _pleroma_theme_version: fileVersion
-      },
+    loadTheme(
+      { theme, source, _pleroma_theme_version: fileVersion },
       origin,
       forceUseSource = false
     ) {
       this.dismissWarning()
       if (!source && !theme) {
-        throw new Error('Can\'t load theme: empty')
+        throw new Error("Can't load theme: empty")
       }
-      const version = (origin === 'localStorage' && !theme.colors)
-        ? 'l1'
-        : fileVersion
+      const version =
+        origin === 'localStorage' && !theme.colors ? 'l1' : fileVersion
       const snapshotEngineVersion = (theme || {}).themeEngineVersion
       const themeEngineVersion = (source || {}).themeEngineVersion || 2
       const versionsMatch = themeEngineVersion === CURRENT_VERSION
-      const sourceSnapshotMismatch = (
+      const sourceSnapshotMismatch =
         theme !== undefined &&
-          source !== undefined &&
-          themeEngineVersion !== snapshotEngineVersion
-      )
+        source !== undefined &&
+        themeEngineVersion !== snapshotEngineVersion
       // Force loading of source if user requested it or if snapshot
       // is unavailable
       const forcedSourceLoad = (source && forceUseSource) || !theme
-      if (!(versionsMatch && !sourceSnapshotMismatch) &&
-          !forcedSourceLoad &&
-          version !== 'l1' &&
-          origin !== 'defaults'
+      if (
+        !(versionsMatch && !sourceSnapshotMismatch) &&
+        !forcedSourceLoad &&
+        version !== 'l1' &&
+        origin !== 'defaults'
       ) {
         if (sourceSnapshotMismatch && origin === 'localStorage') {
           this.themeWarning = {
@@ -454,14 +473,14 @@ export default {
       }
       this.normalizeLocalState(theme, version, source, forcedSourceLoad)
     },
-    forceLoadLocalStorage () {
+    forceLoadLocalStorage() {
       this.loadThemeFromLocalStorage(true)
     },
-    dismissWarning () {
+    dismissWarning() {
       this.themeWarning = undefined
       this.tempImportFile = undefined
     },
-    forceLoad () {
+    forceLoad() {
       const { origin } = this.themeWarning
       switch (origin) {
         case 'localStorage':
@@ -473,7 +492,7 @@ export default {
       }
       this.dismissWarning()
     },
-    forceSnapshot () {
+    forceSnapshot() {
       const { origin } = this.themeWarning
       switch (origin) {
         case 'localStorage':
@@ -485,11 +504,12 @@ export default {
       }
       this.dismissWarning()
     },
-    loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
-      const {
-        customTheme: theme,
-        customThemeSource: source
-      } = this.$store.getters.mergedConfig
+    loadThemeFromLocalStorage(
+      confirmLoadSource = false,
+      forceSnapshot = false
+    ) {
+      const { customTheme: theme, customThemeSource: source } =
+        this.$store.getters.mergedConfig
       if (!theme && !source) {
         // Anon user or never touched themes
         this.loadTheme(
@@ -508,7 +528,7 @@ export default {
         )
       }
     },
-    setCustomTheme () {
+    setCustomTheme() {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
         value: {
@@ -528,65 +548,76 @@ export default {
         }
       })
     },
-    updatePreviewColorsAndShadows () {
+    updatePreviewColorsAndShadows() {
       this.previewColors = generateColors({
         opacity: this.currentOpacity,
         colors: this.currentColors
       })
       this.previewShadows = generateShadows(
-        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
+        {
+          shadows: this.shadowsLocal,
+          opacity: this.previewTheme.opacity,
+          themeEngineVersion: this.engineVersion
+        },
         this.previewColors.theme.colors,
         this.previewColors.mod
       )
     },
-    importTheme () { this.themeImporter.importData() },
-    exportTheme () { this.themeExporter.exportData() },
-    onImport (parsed, forceSource = false) {
+    importTheme() {
+      this.themeImporter.importData()
+    },
+    exportTheme() {
+      this.themeExporter.exportData()
+    },
+    onImport(parsed, forceSource = false) {
       this.tempImportFile = parsed
       this.loadTheme(parsed, 'file', forceSource)
     },
-    onImportFailure (result) {
-      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+    onImportFailure(result) {
+      this.$store.dispatch('pushGlobalNotice', {
+        messageKey: 'settings.invalid_theme_imported',
+        level: 'error'
+      })
     },
-    importValidator (parsed) {
+    importValidator(parsed) {
       const version = parsed._pleroma_theme_version
       return version >= 1 || version <= 2
     },
-    clearAll () {
+    clearAll() {
       this.loadThemeFromLocalStorage()
     },
 
     // Clears all the extra stuff when loading V1 theme
-    clearV1 () {
+    clearV1() {
       Object.keys(this.$data)
-        .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
-        .filter(_ => !v1OnlyNames.includes(_))
-        .forEach(key => {
+        .filter((_) => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
+        .filter((_) => !v1OnlyNames.includes(_))
+        .forEach((key) => {
           this.$data[key] = undefined
         })
     },
 
-    clearRoundness () {
+    clearRoundness() {
       Object.keys(this.$data)
-        .filter(_ => _.endsWith('RadiusLocal'))
-        .forEach(key => {
+        .filter((_) => _.endsWith('RadiusLocal'))
+        .forEach((key) => {
           this.$data[key] = undefined
         })
     },
 
-    clearOpacity () {
+    clearOpacity() {
       Object.keys(this.$data)
-        .filter(_ => _.endsWith('OpacityLocal'))
-        .forEach(key => {
+        .filter((_) => _.endsWith('OpacityLocal'))
+        .forEach((key) => {
           this.$data[key] = undefined
         })
     },
 
-    clearShadows () {
+    clearShadows() {
       this.shadowsLocal = {}
     },
 
-    clearFonts () {
+    clearFonts() {
       this.fontsLocal = {}
     },
 
@@ -603,7 +634,7 @@ export default {
      * @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
      *                           this allows importing source anyway
      */
-    normalizeLocalState (theme, version = 0, source, forceSource = false) {
+    normalizeLocalState(theme, version = 0, source, forceSource = false) {
       let input
       if (typeof source !== 'undefined') {
         if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
@@ -627,11 +658,17 @@ export default {
       if (version === 0) {
         if (input.version) version = input.version
         // Old v1 naming: fg is text, btn is foreground
-        if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
+        if (
+          typeof colors.text === 'undefined' &&
+          typeof colors.fg !== 'undefined'
+        ) {
           version = 1
         }
         // New v2 naming: text is text, fg is foreground
-        if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
+        if (
+          typeof colors.text !== 'undefined' &&
+          typeof colors.fg !== 'undefined'
+        ) {
           version = 2
         }
       }
@@ -657,7 +694,7 @@ export default {
             .add('cOrange')
         }
 
-        keys.forEach(key => {
+        keys.forEach((key) => {
           const color = colors[key]
           const hex = rgb2hex(colors[key])
           this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
@@ -698,7 +735,7 @@ export default {
     }
   },
   watch: {
-    currentRadii () {
+    currentRadii() {
       try {
         this.previewRadii = generateRadii({ radii: this.currentRadii })
         this.radiiInvalid = false
@@ -708,7 +745,7 @@ export default {
       }
     },
     shadowsLocal: {
-      handler () {
+      handler() {
         if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
         try {
           this.updatePreviewColorsAndShadows()
@@ -721,7 +758,7 @@ export default {
       deep: true
     },
     fontsLocal: {
-      handler () {
+      handler() {
         try {
           this.previewFonts = generateFonts({ fonts: this.fontsLocal })
           this.fontsInvalid = false
@@ -732,7 +769,7 @@ export default {
       },
       deep: true
     },
-    currentColors () {
+    currentColors() {
       try {
         this.updatePreviewColorsAndShadows()
         this.colorsInvalid = false
@@ -743,23 +780,25 @@ export default {
         console.warn(e)
       }
     },
-    currentOpacity () {
+    currentOpacity() {
       try {
         this.updatePreviewColorsAndShadows()
       } catch (e) {
         console.warn(e)
       }
     },
-    selected () {
-      this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
-        if (Array.isArray(s)) {
-          return s[0] === this.selected
-        } else {
-          return s.name === this.selected
+    selected() {
+      this.selectedTheme = Object.entries(this.availableStyles).find(
+        ([k, s]) => {
+          if (Array.isArray(s)) {
+            return s[0] === this.selected
+          } else {
+            return s.name === this.selected
+          }
         }
-      })[1]
+      )[1]
     },
-    selectedTheme () {
+    selectedTheme() {
       this.dismissWarning()
       if (this.selectedVersion === 1) {
         if (!this.keepRoundness) {
@@ -787,7 +826,11 @@ export default {
           this.cOrangeColorLocal = this.selectedTheme[8]
         }
       } else if (this.selectedVersion >= 2) {
-        this.normalizeLocalState(this.selectedTheme.theme, 2, this.selectedTheme.source)
+        this.normalizeLocalState(
+          this.selectedTheme.theme,
+          2,
+          this.selectedTheme.source
+        )
       }
     }
   }
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 39b724786..f3babc1c8 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -65,7 +65,8 @@
                   :key="style.name"
                   :value="style.name || style[0]"
                   :style="{
-                    backgroundColor: style[1] || (style.theme || style.source).colors.bg,
+                    backgroundColor:
+                      style[1] || (style.theme || style.source).colors.bg,
                     color: style[3] || (style.theme || style.source).colors.text
                   }"
                 >
@@ -865,7 +866,7 @@
                 name="override"
                 class="input-override"
                 type="checkbox"
-              >
+              />
               <label
                 class="checkbox-label"
                 for="override"
@@ -883,7 +884,11 @@
             :ready="!!currentShadowFallback"
             :fallback="currentShadowFallback"
           />
-          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
+          <div
+            v-if="
+              shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'
+            "
+          >
             <i18n-t
               scope="global"
               keypath="settings.style.shadows.filter_hint.always_drop_shadow"
diff --git a/src/components/settings_modal/tabs/version_tab.js b/src/components/settings_modal/tabs/version_tab.js
index d69b131d1..826d54c7a 100644
--- a/src/components/settings_modal/tabs/version_tab.js
+++ b/src/components/settings_modal/tabs/version_tab.js
@@ -4,7 +4,7 @@ const pleromaFeCommitUrl = 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/'
 const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commit/'
 
 const VersionTab = {
-  data () {
+  data() {
     const instance = this.$store.state.instance
     return {
       backendVersion: instance.backendVersion,
@@ -12,10 +12,10 @@ const VersionTab = {
     }
   },
   computed: {
-    frontendVersionLink () {
+    frontendVersionLink() {
       return pleromaFeCommitUrl + this.frontendVersion
     },
-    backendVersionLink () {
+    backendVersionLink() {
       return pleromaBeCommitUrl + extractCommit(this.backendVersion)
     }
   }
diff --git a/src/components/settings_modal/tabs/version_tab.vue b/src/components/settings_modal/tabs/version_tab.vue
index 0330d49f8..8669e53ee 100644
--- a/src/components/settings_modal/tabs/version_tab.vue
+++ b/src/components/settings_modal/tabs/version_tab.vue
@@ -9,7 +9,8 @@
               <a
                 :href="backendVersionLink"
                 target="_blank"
-              >{{ backendVersion }}</a>
+                >{{ backendVersion }}</a
+              >
             </li>
           </ul>
         </li>
@@ -20,7 +21,8 @@
               <a
                 :href="frontendVersionLink"
                 target="_blank"
-              >{{ frontendVersion }}</a>
+                >{{ frontendVersion }}</a
+              >
             </li>
           </ul>
         </li>
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 386a57568..47bae31ef 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -11,12 +11,7 @@ import {
   faPlus
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faChevronDown,
-  faChevronUp,
-  faTimes,
-  faPlus
-)
+library.add(faChevronDown, faChevronUp, faTimes, faPlus)
 
 const toModel = (object = {}) => ({
   x: 0,
@@ -34,11 +29,9 @@ export default {
   // initially vue won't detect it when they become something else
   // therefore i'm using "ready" which should be passed as true when
   // data becomes available
-  props: [
-    'modelValue', 'fallback', 'ready'
-  ],
+  props: ['modelValue', 'fallback', 'ready'],
   emits: ['update:modelValue'],
-  data () {
+  data() {
     return {
       selectedId: 0,
       // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
@@ -51,70 +44,75 @@ export default {
     Select
   },
   methods: {
-    add () {
+    add() {
       this.cValue.push(toModel(this.selected))
       this.selectedId = this.cValue.length - 1
     },
-    del () {
+    del() {
       this.cValue.splice(this.selectedId, 1)
-      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
+      this.selectedId =
+        this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
     },
-    moveUp () {
+    moveUp() {
       const movable = this.cValue.splice(this.selectedId, 1)[0]
       this.cValue.splice(this.selectedId - 1, 0, movable)
       this.selectedId -= 1
     },
-    moveDn () {
+    moveDn() {
       const movable = this.cValue.splice(this.selectedId, 1)[0]
       this.cValue.splice(this.selectedId + 1, 0, movable)
       this.selectedId += 1
     }
   },
-  beforeUpdate () {
+  beforeUpdate() {
     this.cValue = this.modelValue || this.fallback
   },
   computed: {
-    anyShadows () {
+    anyShadows() {
       return this.cValue.length > 0
     },
-    anyShadowsFallback () {
+    anyShadowsFallback() {
       return this.fallback.length > 0
     },
-    selected () {
+    selected() {
       if (this.ready && this.anyShadows) {
         return this.cValue[this.selectedId]
       } else {
         return toModel({})
       }
     },
-    currentFallback () {
+    currentFallback() {
       if (this.ready && this.anyShadowsFallback) {
         return this.fallback[this.selectedId]
       } else {
         return toModel({})
       }
     },
-    moveUpValid () {
+    moveUpValid() {
       return this.ready && this.selectedId > 0
     },
-    moveDnValid () {
+    moveDnValid() {
       return this.ready && this.selectedId < this.cValue.length - 1
     },
-    present () {
-      return this.ready &&
+    present() {
+      return (
+        this.ready &&
         typeof this.cValue[this.selectedId] !== 'undefined' &&
         !this.usingFallback
+      )
     },
-    usingFallback () {
+    usingFallback() {
       return typeof this.modelValue === 'undefined'
     },
-    rgb () {
+    rgb() {
       return hex2rgb(this.selected.color)
     },
-    style () {
-      return this.ready ? {
-        boxShadow: getCssShadow(this.fallback)
-      } : {}
+    style() {
+      return this.ready
+        ? {
+            boxShadow: getCssShadow(this.fallback)
+          }
+        : {}
     }
   }
 }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index f2fc7b99c..4f22cd7f0 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -13,7 +13,7 @@
           :disabled="!present"
           class="input-number"
           type="number"
-        >
+        />
         <div class="wrap">
           <input
             v-model="selected.y"
@@ -22,7 +22,7 @@
             type="range"
             max="20"
             min="-20"
-          >
+          />
         </div>
       </div>
       <div class="preview-window">
@@ -40,7 +40,7 @@
           :disabled="!present"
           class="input-number"
           type="number"
-        >
+        />
         <div class="wrap">
           <input
             v-model="selected.x"
@@ -49,7 +49,7 @@
             type="range"
             max="20"
             min="-20"
-          >
+          />
         </div>
       </div>
     </div>
@@ -131,7 +131,7 @@
           name="inset"
           class="input-inset"
           type="checkbox"
-        >
+        />
         <label
           class="checkbox-label"
           for="inset"
@@ -156,14 +156,14 @@
           type="range"
           max="20"
           min="0"
-        >
+        />
         <input
           v-model="selected.blur"
           :disabled="!present"
           class="input-number"
           type="number"
           min="0"
-        >
+        />
       </div>
       <div
         :disabled="!present"
@@ -184,13 +184,13 @@
           type="range"
           max="20"
           min="-20"
-        >
+        />
         <input
           v-model="selected.spread"
           :disabled="!present"
           class="input-number"
           type="number"
-        >
+        />
       </div>
       <ColorInput
         v-model="selected.color"
@@ -215,7 +215,7 @@
   </div>
 </template>
 
-<script src="./shadow_control.js" ></script>
+<script src="./shadow_control.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -236,7 +236,7 @@
 
     $side: 15em;
 
-    input[type=number] {
+    input[type='number'] {
       width: 5em;
       min-width: 2em;
     }
@@ -245,10 +245,9 @@
       display: flex;
       flex: 0;
 
-      &[disabled=disabled] *{
-        opacity: .5
+      &[disabled='disabled'] * {
+        opacity: 0.5;
       }
-
     }
 
     .x-shift-control {
@@ -256,7 +255,7 @@
     }
 
     .x-shift-control .wrap,
-    input[type=range] {
+    input[type='range'] {
       margin: 0;
       width: $side;
       height: 2em;
@@ -268,7 +267,7 @@
         width: 2em;
         height: $side;
       }
-      input[type=range] {
+      input[type='range'] {
         transform-origin: 1em 1em;
         transform: rotate(90deg);
       }
@@ -279,13 +278,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background-image:
-      linear-gradient(45deg, #666666 25%, transparent 25%),
-      linear-gradient(-45deg, #666666 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, #666666 75%),
-      linear-gradient(-45deg, transparent 75%, #666666 75%);
+      background-image: linear-gradient(45deg, #666666 25%, transparent 25%),
+        linear-gradient(-45deg, #666666 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #666666 75%),
+        linear-gradient(-45deg, transparent 75%, #666666 75%);
       background-size: 20px 20px;
-      background-position:0 0, 0 10px, 10px -10px, -10px 0;
+      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
 
       border-radius: $fallback--inputRadius;
       border-radius: var(--inputRadius, $fallback--inputRadius);
@@ -312,14 +310,15 @@
         flex: 1;
       }
 
-      .shadow-switcher, .btn {
+      .shadow-switcher,
+      .btn {
         min-width: 1px;
         margin-right: 5px;
       }
 
       .btn {
-        padding: 0 .4em;
-        margin: 0 .1em;
+        padding: 0 0.4em;
+        margin: 0 0.1em;
       }
     }
   }
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 4e6e9eddd..5bcce7528 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -36,13 +36,16 @@ library.add(
 )
 
 const SideDrawer = {
-  props: [ 'logout' ],
+  props: ['logout'],
   data: () => ({
     closed: true,
     closeGesture: undefined
   }),
-  created () {
-    this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)
+  created() {
+    this.closeGesture = GestureService.swipeGesture(
+      GestureService.DIRECTION_LEFT,
+      this.toggleDrawer
+    )
 
     if (this.currentUser && this.currentUser.locked) {
       this.$store.dispatch('startFetchingFollowRequests')
@@ -50,37 +53,37 @@ const SideDrawer = {
   },
   components: { UserCard },
   computed: {
-    currentUser () {
+    currentUser() {
       return this.$store.state.users.currentUser
     },
-    unseenNotifications () {
+    unseenNotifications() {
       return unseenNotificationsFromStore(this.$store)
     },
-    unseenNotificationsCount () {
+    unseenNotificationsCount() {
       return this.unseenNotifications.length
     },
-    suggestionsEnabled () {
+    suggestionsEnabled() {
       return this.$store.state.instance.suggestionsEnabled
     },
-    logo () {
+    logo() {
       return this.$store.state.instance.logo
     },
-    hideSitename () {
+    hideSitename() {
       return this.$store.state.instance.hideSitename
     },
-    sitename () {
+    sitename() {
       return this.$store.state.instance.name
     },
-    followRequestCount () {
+    followRequestCount() {
       return this.$store.state.api.followRequests.length
     },
-    privateMode () {
+    privateMode() {
       return this.$store.state.instance.private
     },
-    federating () {
+    federating() {
       return this.$store.state.instance.federating
     },
-    timelinesRoute () {
+    timelinesRoute() {
       if (this.$store.state.interface.lastTimeline) {
         return this.$store.state.interface.lastTimeline
       }
@@ -89,23 +92,23 @@ const SideDrawer = {
     ...mapGetters(['unreadAnnouncementCount'])
   },
   methods: {
-    toggleDrawer () {
+    toggleDrawer() {
       this.closed = !this.closed
     },
-    doLogout () {
+    doLogout() {
       this.logout()
       this.toggleDrawer()
     },
-    touchStart (e) {
+    touchStart(e) {
       GestureService.beginSwipe(e, this.closeGesture)
     },
-    touchMove (e) {
+    touchMove(e) {
       GestureService.updateSwipe(e, this.closeGesture)
     },
-    openSettingsModal () {
+    openSettingsModal() {
       this.$store.dispatch('openSettingsModal')
     },
-    openModModal () {
+    openModModal() {
       this.$store.dispatch('openModModal')
     }
   }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 86943e276..a602ac9a7 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,15 +1,18 @@
 <template>
   <div
     class="side-drawer-container"
-    :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
+    :class="{
+      'side-drawer-container-closed': closed,
+      'side-drawer-container-open': !closed
+    }"
   >
     <div
       class="side-drawer-darken"
-      :class="{ 'side-drawer-darken-closed': closed}"
+      :class="{ 'side-drawer-darken-closed': closed }"
     />
     <div
       class="side-drawer"
-      :class="{'side-drawer-closed': closed}"
+      :class="{ 'side-drawer-closed': closed }"
       @touchstart="touchStart"
       @touchmove="touchMove"
     >
@@ -26,7 +29,7 @@
           v-else
           class="side-drawer-logo-wrapper"
         >
-          <img :src="logo">
+          <img :src="logo" />
           <span v-if="!hideSitename">{{ sitename }}</span>
         </div>
       </div>
@@ -40,7 +43,8 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="sign-in-alt"
-            /> {{ $t("login.login") }}
+            />
+            {{ $t('login.login') }}
           </router-link>
         </li>
         <li
@@ -52,7 +56,8 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="home"
-            /> {{ $t("nav.timelines") }}
+            />
+            {{ $t('nav.timelines') }}
           </router-link>
         </li>
         <li
@@ -64,18 +69,25 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="list"
-            /> {{ $t("nav.lists") }}
+            />
+            {{ $t('nav.lists') }}
           </router-link>
         </li>
       </ul>
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+          <router-link
+            :to="{
+              name: 'interactions',
+              params: { username: currentUser.screen_name }
+            }"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="bolt"
-            /> {{ $t("nav.interactions") }}
+            />
+            {{ $t('nav.interactions') }}
           </router-link>
         </li>
         <li
@@ -87,7 +99,8 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="user-plus"
-            /> {{ $t("nav.friend_requests") }}
+            />
+            {{ $t('nav.friend_requests') }}
             <span
               v-if="followRequestCount > 0"
               class="badge badge-notification"
@@ -107,7 +120,8 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="search"
-            /> {{ $t("nav.search") }}
+            />
+            {{ $t('nav.search') }}
           </router-link>
         </li>
         <li
@@ -119,7 +133,8 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="user-plus"
-            /> {{ $t("nav.who_to_follow") }}
+            />
+            {{ $t('nav.who_to_follow') }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
@@ -131,20 +146,25 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="cog"
-            /> {{ $t("settings.settings") }}
+            />
+            {{ $t('settings.settings') }}
           </button>
         </li>
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'about'}">
+          <router-link :to="{ name: 'about' }">
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="info-circle"
-            /> {{ $t("nav.about") }}
+            />
+            {{ $t('nav.about') }}
           </router-link>
         </li>
         <li
-          v-if="currentUser && currentUser.role === 'admin' || currentUser.role === 'moderator'"
+          v-if="
+            (currentUser && currentUser.role === 'admin') ||
+            currentUser.role === 'moderator'
+          "
           @click="toggleDrawer"
         >
           <button
@@ -155,7 +175,8 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="user-tie"
-            /> {{ $t("nav.moderation") }}
+            />
+            {{ $t('nav.moderation') }}
           </button>
         </li>
         <li
@@ -170,21 +191,21 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="tachometer-alt"
-            /> {{ $t("nav.administration") }}
+            />
+            {{ $t('nav.administration') }}
           </a>
         </li>
         <li
           v-if="currentUser"
           @click="toggleDrawer"
         >
-          <router-link
-            :to="{ name: 'announcements' }"
-          >
+          <router-link :to="{ name: 'announcements' }">
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="bullhorn"
-            /> {{ $t("nav.announcements") }}
+            />
+            {{ $t('nav.announcements') }}
             <span
               v-if="unreadAnnouncementCount"
               class="badge badge-notification"
@@ -205,20 +226,21 @@
               fixed-width
               class="fa-scale-110 fa-old-padding"
               icon="sign-out-alt"
-            /> {{ $t("login.logout") }}
+            />
+            {{ $t('login.logout') }}
           </button>
         </li>
       </ul>
     </div>
     <div
       class="side-drawer-click-outside"
-      :class="{'side-drawer-click-outside-closed': closed}"
+      :class="{ 'side-drawer-click-outside-closed': closed }"
       @click.stop.prevent="toggleDrawer"
     />
   </div>
 </template>
 
-<script src="./side_drawer.js" ></script>
+<script src="./side_drawer.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -343,7 +365,8 @@
 .side-drawer li {
   padding: 0;
 
-  a, button {
+  a,
+  button {
     box-sizing: border-box;
     display: block;
     height: 3em;
diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
index b9561bf19..22f32aa28 100644
--- a/src/components/staff_panel/staff_panel.js
+++ b/src/components/staff_panel/staff_panel.js
@@ -4,28 +4,30 @@ import { mapGetters, mapState } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const StaffPanel = {
-  created () {
+  created() {
     const nicknames = this.$store.state.instance.staffAccounts
-    nicknames.forEach(nickname => this.$store.dispatch('fetchUserIfMissing', nickname))
+    nicknames.forEach((nickname) =>
+      this.$store.dispatch('fetchUserIfMissing', nickname)
+    )
   },
   components: {
     BasicUserCard
   },
   computed: {
-    groupedStaffAccounts () {
-      const staffAccounts = map(this.staffAccounts, this.findUser).filter(_ => _)
+    groupedStaffAccounts() {
+      const staffAccounts = map(this.staffAccounts, this.findUser).filter(
+        (_) => _
+      )
       const groupedStaffAccounts = groupBy(staffAccounts, 'role')
 
       return [
         { role: 'admin', users: groupedStaffAccounts['admin'] },
         { role: 'moderator', users: groupedStaffAccounts['moderator'] }
-      ].filter(group => group.users)
+      ].filter((group) => group.users)
     },
-    ...mapGetters([
-      'findUser'
-    ]),
+    ...mapGetters(['findUser']),
     ...mapState({
-      staffAccounts: state => state.instance.staffAccounts
+      staffAccounts: (state) => state.instance.staffAccounts
     })
   }
 }
diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue
index c52ade425..50111395a 100644
--- a/src/components/staff_panel/staff_panel.vue
+++ b/src/components/staff_panel/staff_panel.vue
@@ -3,7 +3,7 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background">
         <div class="title">
-          {{ $t("about.staff") }}
+          {{ $t('about.staff') }}
         </div>
       </div>
       <div class="panel-body">
@@ -24,10 +24,9 @@
   </div>
 </template>
 
-<script src="./staff_panel.js" ></script>
+<script src="./staff_panel.js"></script>
 
 <style lang="scss">
-
 .staff-group {
   padding-left: 1em;
   padding-top: 1em;
@@ -36,5 +35,4 @@
     padding-left: 0;
   }
 }
-
 </style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index a35b50848..bb9530dd6 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -17,7 +17,10 @@ import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
-import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
+import {
+  highlightClass,
+  highlightStyle
+} from '../../services/user_highlighter/user_highlighter.js'
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
 import { unescape, uniqBy } from 'lodash'
 
@@ -62,18 +65,23 @@ library.add(
   faAngleDoubleRight
 )
 
-const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
+const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
 
-const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
-  const camelized = camelCase(name)
-  const toggle = `controlledToggle${camelized}`
-  const controlledName = `controlled${camelized}`
-  const uncontrolledName = `uncontrolled${camelized}`
-  res[name] = function () {
-    return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
-  }
-  return res
-}, {})
+const controlledOrUncontrolledGetters = (list) =>
+  list.reduce((res, name) => {
+    const camelized = camelCase(name)
+    const toggle = `controlledToggle${camelized}`
+    const controlledName = `controlled${camelized}`
+    const uncontrolledName = `uncontrolled${camelized}`
+    res[name] = function () {
+      return (this.$data[toggle] !== undefined ||
+        this.$props[toggle] !== undefined) &&
+        this[toggle]
+        ? this[controlledName]
+        : this[uncontrolledName]
+    }
+    return res
+  }, {})
 
 const controlledOrUncontrolledToggle = (obj, name) => {
   const camelized = camelCase(name)
@@ -153,7 +161,7 @@ const Status = {
     'controlledSetMediaPlaying',
     'dive'
   ],
-  data () {
+  data() {
     return {
       uncontrolledReplying: false,
       uncontrolledQuoting: false,
@@ -167,101 +175,131 @@ const Status = {
   },
   computed: {
     ...controlledOrUncontrolledGetters(['replying', 'quoting', 'mediaPlaying']),
-    muteWords () {
+    muteWords() {
       return this.mergedConfig.muteWords
     },
-    showReasonMutedThread () {
+    showReasonMutedThread() {
       return (
-        this.status.thread_muted ||
-          (this.status.reblog && this.status.reblog.thread_muted)
-      ) && !this.inConversation
+        (this.status.thread_muted ||
+          (this.status.reblog && this.status.reblog.thread_muted)) &&
+        !this.inConversation
+      )
     },
-    repeaterClass () {
+    repeaterClass() {
       const user = this.statusoid.user
       return highlightClass(user)
     },
-    userClass () {
-      const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
+    userClass() {
+      const user = this.retweet
+        ? this.statusoid.retweeted_status.user
+        : this.statusoid.user
       return highlightClass(user)
     },
-    deleted () {
+    deleted() {
       return this.statusoid.deleted
     },
-    repeaterStyle () {
+    repeaterStyle() {
       const user = this.statusoid.user
       const highlight = this.mergedConfig.highlight
       return highlightStyle(highlight[user.screen_name])
     },
-    userStyle () {
+    userStyle() {
       if (this.noHeading) return
-      const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
+      const user = this.retweet
+        ? this.statusoid.retweeted_status.user
+        : this.statusoid.user
       const highlight = this.mergedConfig.highlight
       return highlightStyle(highlight[user.screen_name])
     },
-    userProfileLink () {
-      return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
+    userProfileLink() {
+      return this.generateUserProfileLink(
+        this.status.user.id,
+        this.status.user.screen_name
+      )
     },
-    replyProfileLink () {
+    replyProfileLink() {
       if (this.isReply) {
-        const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
+        const user = this.$store.getters.findUser(
+          this.status.in_reply_to_user_id
+        )
         // FIXME Why user not found sometimes???
         return user ? user.statusnet_profile_url : 'NOT_FOUND'
       }
     },
-    retweet () { return !!this.statusoid.retweeted_status },
-    retweeterUser () { return this.statusoid.user },
-    retweeter () { return this.statusoid.user.name || this.statusoid.user.screen_name_ui },
-    retweeterHtml () { return this.statusoid.user.name },
-    retweeterProfileLink () { return this.generateUserProfileLink(this.statusoid.user.id, this.statusoid.user.screen_name) },
-    status () {
+    retweet() {
+      return !!this.statusoid.retweeted_status
+    },
+    retweeterUser() {
+      return this.statusoid.user
+    },
+    retweeter() {
+      return this.statusoid.user.name || this.statusoid.user.screen_name_ui
+    },
+    retweeterHtml() {
+      return this.statusoid.user.name
+    },
+    retweeterProfileLink() {
+      return this.generateUserProfileLink(
+        this.statusoid.user.id,
+        this.statusoid.user.screen_name
+      )
+    },
+    status() {
       if (this.retweet) {
         return this.statusoid.retweeted_status
       } else {
         return this.statusoid
       }
     },
-    statusFromGlobalRepository () {
+    statusFromGlobalRepository() {
       // NOTE: Consider to replace status with statusFromGlobalRepository
       return this.$store.state.statuses.allStatusesObject[this.status.id]
     },
-    loggedIn () {
+    loggedIn() {
       return !!this.currentUser
     },
-    muteWordHits () {
+    muteWordHits() {
       return muteWordHits(this.status, this.muteWords)
     },
-    rtBotStatus () {
+    rtBotStatus() {
       return this.statusoid.user.bot
     },
-    botStatus () {
+    botStatus() {
       return this.status.user.bot
     },
-    botIndicator () {
+    botIndicator() {
       return this.botStatus && !this.hideBotIndication
     },
-    rtBotIndicator () {
+    rtBotIndicator() {
       return this.rtBotStatus && !this.hideBotIndication
     },
-    mentionsLine () {
+    mentionsLine() {
       if (!this.headTailLinks) return []
-      const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
-      return this.status.attentions.filter(attn => {
-        // no reply user
-        return attn.id !== this.status.in_reply_to_user_id &&
-          // no self-replies
-          attn.statusnet_profile_url !== this.status.user.statusnet_profile_url &&
-          // don't include if mentions is written
-          !writtenSet.has(attn.statusnet_profile_url)
-      }).map(attn => ({
-        url: attn.statusnet_profile_url,
-        content: attn.screen_name,
-        userId: attn.id
-      }))
+      const writtenSet = new Set(
+        this.headTailLinks.writtenMentions.map((_) => _.url)
+      )
+      return this.status.attentions
+        .filter((attn) => {
+          // no reply user
+          return (
+            attn.id !== this.status.in_reply_to_user_id &&
+            // no self-replies
+            attn.statusnet_profile_url !==
+              this.status.user.statusnet_profile_url &&
+            // don't include if mentions is written
+            !writtenSet.has(attn.statusnet_profile_url)
+          )
+        })
+        .map((attn) => ({
+          url: attn.statusnet_profile_url,
+          content: attn.screen_name,
+          userId: attn.id
+        }))
     },
-    hasMentionsLine () {
+    hasMentionsLine() {
       return this.mentionsLine.length > 0
     },
-    mentionsBlockedUser () {
+    mentionsBlockedUser() {
       // XXX: doesn't work on domain blocks, because users from blocked domains
       // don't appear in `attentions' and therefore cannot be filtered.
       let mentions = false
@@ -277,7 +315,7 @@ const Status = {
 
       return mentions
     },
-    mentionsMutedUser () {
+    mentionsMutedUser() {
       // XXX: doesn't work on domain blocks, because users from blocked domains
       // don't appear in `attentions' and therefore cannot be filtered.
       let mentions = false
@@ -293,9 +331,10 @@ const Status = {
 
       return mentions
     },
-    muted () {
+    muted() {
       if (this.statusoid.user.id === this.currentUser.id) return false
-      const reasonsToMute = this.userIsMuted ||
+      const reasonsToMute =
+        this.userIsMuted ||
         // Thread is muted
         status.thread_muted ||
         // Wordfiltered
@@ -308,62 +347,65 @@ const Status = {
         this.mentionsMutedUser
       return !this.unmuted && !this.shouldNotMute && reasonsToMute
     },
-    userIsMuted () {
+    userIsMuted() {
       if (this.statusoid.user.id === this.currentUser.id) return false
       const { status } = this
       const { reblog } = status
       const relationship = this.$store.getters.relationship(status.user.id)
-      const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
-      return status.muted ||
+      const relationshipReblog =
+        reblog && this.$store.getters.relationship(reblog.user.id)
+      return (
+        status.muted ||
         // Reprööt of a muted post according to BE
         (reblog && reblog.muted) ||
         // Muted user
         relationship.muting ||
         // Muted user of a reprööt
         (relationshipReblog && relationshipReblog.muting)
+      )
     },
-    shouldNotMute () {
+    shouldNotMute() {
       const { status } = this
       const { reblog } = status
       return (
-        (
-          this.inProfile && (
-            // Don't mute user's posts on user timeline (except reblogs)
-            (!reblog && status.user.id === this.profileUserId) ||
+        ((this.inProfile &&
+          // Don't mute user's posts on user timeline (except reblogs)
+          ((!reblog && status.user.id === this.profileUserId) ||
             // Same as above but also allow self-reblogs
-            (reblog && reblog.user.id === this.profileUserId)
-          )
-        ) ||
-        // Don't mute statuses in muted conversation when said conversation is opened
-        (this.inConversation && status.thread_muted)
+            (reblog && reblog.user.id === this.profileUserId))) ||
+          // Don't mute statuses in muted conversation when said conversation is opened
+          (this.inConversation && status.thread_muted)) &&
         // No excuses if post has muted words
-      ) && !this.muteWordHits.length > 0
-    },
-    hideMutedUsers () {
-      return this.mergedConfig.hideMutedPosts
-    },
-    hideMutedThreads () {
-      return this.mergedConfig.hideMutedThreads
-    },
-    hideFilteredStatuses () {
-      return this.mergedConfig.hideFilteredStatuses
-    },
-    hideThreadsWithBlockedUsers () {
-      return this.mergedConfig.hideThreadsWithBlockedUsers
-    },
-    hideWordFilteredPosts () {
-      return this.mergedConfig.hideWordFilteredPosts
-    },
-    hideStatus () {
-      return (!this.shouldNotMute) && (
-        (this.muted && this.hideFilteredStatuses) ||
-        (this.userIsMuted && this.hideMutedUsers) ||
-        ((this.status.thread_muted || this.mentionsMutedUser) && this.hideMutedThreads) ||
-        (this.muteWordHits.length > 0 && this.hideWordFilteredPosts) ||
-        (this.mentionsBlockedUser && this.hideThreadsWithBlockedUsers)
+        !this.muteWordHits.length > 0
       )
     },
-    isFocused () {
+    hideMutedUsers() {
+      return this.mergedConfig.hideMutedPosts
+    },
+    hideMutedThreads() {
+      return this.mergedConfig.hideMutedThreads
+    },
+    hideFilteredStatuses() {
+      return this.mergedConfig.hideFilteredStatuses
+    },
+    hideThreadsWithBlockedUsers() {
+      return this.mergedConfig.hideThreadsWithBlockedUsers
+    },
+    hideWordFilteredPosts() {
+      return this.mergedConfig.hideWordFilteredPosts
+    },
+    hideStatus() {
+      return (
+        !this.shouldNotMute &&
+        ((this.muted && this.hideFilteredStatuses) ||
+          (this.userIsMuted && this.hideMutedUsers) ||
+          ((this.status.thread_muted || this.mentionsMutedUser) &&
+            this.hideMutedThreads) ||
+          (this.muteWordHits.length > 0 && this.hideWordFilteredPosts) ||
+          (this.mentionsBlockedUser && this.hideThreadsWithBlockedUsers))
+      )
+    },
+    isFocused() {
       // retweet or root of an expanded conversation
       if (this.focused) {
         return true
@@ -373,18 +415,22 @@ const Status = {
       // use conversation highlight only when in conversation
       return this.status.id === this.highlight
     },
-    isReply () {
-      return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
+    isReply() {
+      return !!(
+        this.status.in_reply_to_status_id && this.status.in_reply_to_user_id
+      )
     },
-    replyToName () {
+    replyToName() {
       if (this.status.in_reply_to_screen_name) {
         return this.status.in_reply_to_screen_name
       } else {
-        const user = this.$store.getters.findUser(this.status.in_reply_to_user_id)
+        const user = this.$store.getters.findUser(
+          this.status.in_reply_to_user_id
+        )
         return user && user.screen_name_ui
       }
     },
-    replySubject () {
+    replySubject() {
       if (!this.status.summary) return ''
       const decodedSummary = unescape(this.status.summary)
       const behavior = this.mergedConfig.subjectLineBehavior
@@ -397,7 +443,7 @@ const Status = {
         return ''
       }
     },
-    combinedFavsAndRepeatsUsers () {
+    combinedFavsAndRepeatsUsers() {
       // Use the status from the global status repository since favs and repeats are saved in it
       const combinedUsers = [].concat(
         this.statusFromGlobalRepository.favoritedBy,
@@ -405,48 +451,51 @@ const Status = {
       )
       return uniqBy(combinedUsers, 'id')
     },
-    tags () {
-      return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
+    tags() {
+      return this.status.tags
+        .filter((tagObj) => tagObj.hasOwnProperty('name'))
+        .map((tagObj) => tagObj.name)
+        .join(' ')
     },
-    hidePostStats () {
+    hidePostStats() {
       return this.mergedConfig.hidePostStats
     },
-    muteBotStatuses () {
+    muteBotStatuses() {
       return this.mergedConfig.muteBotStatuses
     },
-    hideBotIndication () {
+    hideBotIndication() {
       return this.mergedConfig.hideBotIndication
     },
-    currentUser () {
+    currentUser() {
       return this.$store.state.users.currentUser
     },
-    betterShadow () {
+    betterShadow() {
       return this.$store.state.interface.browserSupport.cssFilter
     },
-    mergedConfig () {
+    mergedConfig() {
       return this.$store.getters.mergedConfig
     },
-    isSuspendable () {
+    isSuspendable() {
       return !this.replying && this.mediaPlaying.length === 0
     },
-    inThreadForest () {
+    inThreadForest() {
       return !!this.controlledThreadDisplayStatus
     },
-    threadShowing () {
+    threadShowing() {
       return this.controlledThreadDisplayStatus === 'showing'
     },
-    visibilityLocalized () {
+    visibilityLocalized() {
       return this.$i18n.t('general.scope_in_timeline.' + this.status.visibility)
     },
-    isEdited () {
+    isEdited() {
       return this.status.edited_at !== null
     },
-    editingAvailable () {
+    editingAvailable() {
       return this.$store.state.instance.editingAvailable
     }
   },
   methods: {
-    visibilityIcon (visibility) {
+    visibilityIcon(visibility) {
       switch (visibility) {
         case 'private':
           return 'lock'
@@ -460,65 +509,83 @@ const Status = {
           return 'globe'
       }
     },
-    faviconAlt (status) {
+    faviconAlt(status) {
       if (!status.user.instance) {
         return ''
       }
-      const software = ((status.user.instance) && (status.user.instance.nodeinfo) && (status.user.instance.nodeinfo.software)) || {}
+      const software =
+        (status.user.instance &&
+          status.user.instance.nodeinfo &&
+          status.user.instance.nodeinfo.software) ||
+        {}
       if (software.name) {
-        return `${status.user.instance.name} (${software.name || ''} ${software.version || ''})`
+        return `${status.user.instance.name} (${software.name || ''} ${
+          software.version || ''
+        })`
       }
       return ''
     },
-    showError (error) {
+    showError(error) {
       this.error = error
     },
-    clearError () {
+    clearError() {
       this.error = undefined
     },
-    toggleReplying () {
+    toggleReplying() {
       controlledOrUncontrolledToggle(this, 'replying')
     },
-    toggleQuoting () {
+    toggleQuoting() {
       controlledOrUncontrolledToggle(this, 'quoting')
     },
-    gotoOriginal (id) {
+    gotoOriginal(id) {
       if (this.inConversation) {
         this.$emit('goto', id)
       }
     },
-    toggleExpanded () {
+    toggleExpanded() {
       this.$emit('toggleExpanded')
     },
-    toggleMute () {
+    toggleMute() {
       this.unmuted = !this.unmuted
     },
-    toggleUserExpanded () {
+    toggleUserExpanded() {
       this.userExpanded = !this.userExpanded
     },
-    generateUserProfileLink (id, name) {
-      return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
+    generateUserProfileLink(id, name) {
+      return generateProfileLink(
+        id,
+        name,
+        this.$store.state.instance.restrictedNicknames
+      )
     },
-    addMediaPlaying (id) {
-      controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.concat(id))
+    addMediaPlaying(id) {
+      controlledOrUncontrolledSet(
+        this,
+        'mediaPlaying',
+        this.mediaPlaying.concat(id)
+      )
     },
-    removeMediaPlaying (id) {
-      controlledOrUncontrolledSet(this, 'mediaPlaying', this.mediaPlaying.filter(mediaId => mediaId !== id))
+    removeMediaPlaying(id) {
+      controlledOrUncontrolledSet(
+        this,
+        'mediaPlaying',
+        this.mediaPlaying.filter((mediaId) => mediaId !== id)
+      )
     },
-    setHeadTailLinks (headTailLinks) {
+    setHeadTailLinks(headTailLinks) {
       this.headTailLinks = headTailLinks
     },
-    toggleThreadDisplay () {
+    toggleThreadDisplay() {
       this.controlledToggleThreadDisplay()
     },
-    scrollIfHighlighted (highlightId) {
+    scrollIfHighlighted(highlightId) {
       const id = highlightId
       if (this.status.id === id) {
         let rect = this.$el.getBoundingClientRect()
         if (rect.top < 100) {
           // Post is above screen, match its top to screen top
           window.scrollBy(0, rect.top - 100)
-        } else if (rect.height >= (window.innerHeight - 50)) {
+        } else if (rect.height >= window.innerHeight - 50) {
           // Post we want to see is taller than screen so match its top to screen top
           window.scrollBy(0, rect.top - 100)
         } else if (rect.bottom > window.innerHeight - 50) {
@@ -529,22 +596,30 @@ const Status = {
     }
   },
   watch: {
-    'highlight': function (id) {
+    highlight: function (id) {
       this.scrollIfHighlighted(id)
     },
     'status.repeat_num': function (num) {
       // refetch repeats when repeat_num is changed in any way
-      if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) {
+      if (
+        this.isFocused &&
+        this.statusFromGlobalRepository.rebloggedBy &&
+        this.statusFromGlobalRepository.rebloggedBy.length !== num
+      ) {
         this.$store.dispatch('fetchRepeats', this.status.id)
       }
     },
     'status.fave_num': function (num) {
       // refetch favs when fave_num is changed in any way
-      if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) {
+      if (
+        this.isFocused &&
+        this.statusFromGlobalRepository.favoritedBy &&
+        this.statusFromGlobalRepository.favoritedBy.length !== num
+      ) {
         this.$store.dispatch('fetchFavs', this.status.id)
       }
     },
-    'isSuspendable': function (val) {
+    isSuspendable: function (val) {
       this.suspendable = val
     }
   }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c9ce4a8af..f6c019495 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -99,7 +99,8 @@
             <router-link
               v-else
               :to="retweeterProfileLink"
-            >{{ retweeter }}</router-link>
+              >{{ retweeter }}</router-link
+            >
           </span>
           {{ ' ' }}
           <FAIcon
@@ -113,8 +114,11 @@
 
       <div
         v-if="!deleted"
-        :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
-        :style="[ userStyle ]"
+        :class="[
+          userClass,
+          { highlighted: userStyle, '-repeat': retweet && !inConversation }
+        ]"
+        :style="[userStyle]"
         class="status-container"
         :data-tags="tags"
       >
@@ -179,7 +183,7 @@
                     class="status-favicon"
                     :src="status.user.favicon"
                     :title="faviconAlt(status)"
-                  >
+                  />
                 </span>
               </div>
 
@@ -229,9 +233,15 @@
                   />
                 </button>
                 <button
-                  v-if="inThreadForest && replies && replies.length && !simpleTree"
+                  v-if="
+                    inThreadForest && replies && replies.length && !simpleTree
+                  "
                   class="button-unstyled"
-                  :title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
+                  :title="
+                    threadShowing
+                      ? $t('status.thread_hide')
+                      : $t('status.thread_show')
+                  "
                   :aria-expanded="threadShowing ? 'true' : 'false'"
                   @click.prevent="toggleThreadDisplay"
                 >
@@ -265,7 +275,9 @@
               >
                 <StatusPopover
                   v-if="!isPreview"
-                  :status-id="status.parent_visible && status.in_reply_to_status_id"
+                  :status-id="
+                    status.parent_visible && status.in_reply_to_status_id
+                  "
                   class="reply-to-popover"
                   style="min-width: 0"
                   :class="{ '-strikethrough': !status.parent_visible }"
@@ -281,9 +293,7 @@
                       flip="horizontal"
                     />
                     {{ ' ' }}
-                    <span
-                      class="reply-to-text"
-                    >
+                    <span class="reply-to-text">
                       {{ $t('status.reply_to') }}
                     </span>
                   </button>
@@ -314,9 +324,7 @@
                   :aria-label="$t('tool_tip.mentions')"
                   @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                 >
-                  <span
-                    class="mentions-text"
-                  >
+                  <span class="mentions-text">
                     {{ $t('status.mentions') }}
                   </span>
                 </span>
@@ -364,8 +372,12 @@
               :controlled-expanding-subject="controlledExpandingSubject"
               :controlled-showing-long-subject="controlledShowingLongSubject"
               :controlled-toggle-showing-tall="controlledToggleShowingTall"
-              :controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
-              :controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
+              :controlled-toggle-expanding-subject="
+                controlledToggleExpandingSubject
+              "
+              :controlled-toggle-showing-long-subject="
+                controlledToggleShowingLongSubject
+              "
               @mediaplay="addMediaPlaying($event)"
               @mediapause="removeMediaPlaying($event)"
               @parseReady="setHeadTailLinks"
@@ -379,10 +391,18 @@
             <button
               v-if="showOtherRepliesAsButton && replies.length > 1"
               class="button-unstyled -link faint"
-              :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
+              :title="
+                $tc('status.ancestor_follow', replies.length - 1, {
+                  numReplies: replies.length - 1
+                })
+              "
               @click.prevent="dive"
             >
-              {{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
+              {{
+                $tc('status.replies_list_with_others', replies.length - 1, {
+                  numReplies: replies.length - 1
+                })
+              }}
             </button>
             <span
               v-else
@@ -406,12 +426,19 @@
 
           <transition name="fade">
             <div
-              v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
+              v-if="
+                !hidePostStats &&
+                isFocused &&
+                combinedFavsAndRepeatsUsers.length > 0
+              "
               class="favs-repeated-users"
             >
               <div class="stats">
                 <UserListPopover
-                  v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
+                  v-if="
+                    statusFromGlobalRepository.rebloggedBy &&
+                    statusFromGlobalRepository.rebloggedBy.length > 0
+                  "
                   :users="statusFromGlobalRepository.rebloggedBy"
                 >
                   <div class="stat-count">
@@ -422,12 +449,13 @@
                   </div>
                 </UserListPopover>
                 <UserListPopover
-                  v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
+                  v-if="
+                    statusFromGlobalRepository.favoritedBy &&
+                    statusFromGlobalRepository.favoritedBy.length > 0
+                  "
                   :users="statusFromGlobalRepository.favoritedBy"
                 >
-                  <div
-                    class="stat-count"
-                  >
+                  <div class="stat-count">
                     <a class="stat-title">{{ $t('status.favorites') }}</a>
                     <div class="stat-number">
                       {{ statusFromGlobalRepository.favoritedBy.length }}
@@ -442,7 +470,11 @@
           </transition>
 
           <EmojiReactions
-            v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
+            v-if="
+              (mergedConfig.emojiReactionsOnTimeline || isFocused) &&
+              !noHeading &&
+              !isPreview
+            "
             :status="status"
           />
 
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 19cec6c6e..95f8099cb 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -11,13 +11,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import Select from 'src/components/select/select.vue'
 
-library.add(
-  faFile,
-  faMusic,
-  faImage,
-  faLink,
-  faPollH
-)
+library.add(faFile, faMusic, faImage, faLink, faPollH)
 
 const StatusContent = {
   name: 'StatusContent',
@@ -35,7 +29,7 @@ const StatusContent = {
     'toggleExpandingSubject',
     'toggleShowingLongSubject'
   ],
-  data () {
+  data() {
     const { renderMisskeyMarkdown } = this.$store.getters.mergedConfig
     return {
       postLength: this.status.text.length,
@@ -45,7 +39,7 @@ const StatusContent = {
     }
   },
   computed: {
-    localCollapseSubjectDefault () {
+    localCollapseSubjectDefault() {
       return this.mergedConfig.collapseMessageWithSubject
     },
     // This is a bit hacky, but we want to approximate post height before rendering
@@ -55,35 +49,46 @@ const StatusContent = {
     //
     // Using max-height + overflow: auto for status components resulted in false positives
     // very often with japanese characters, and it was very annoying.
-    tallStatus () {
+    tallStatus() {
       if (this.singleLine || this.compact) return false
-      const lengthScore = this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
+      const lengthScore =
+        this.status.raw_html.split(/<p|<br/).length + this.postLength / 80
       return lengthScore > 20
     },
-    longSubject () {
+    longSubject() {
       return this.status.summary.length > 240
     },
     // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
-    mightHideBecauseSubject () {
+    mightHideBecauseSubject() {
       return !!this.status.summary && this.localCollapseSubjectDefault
     },
-    mightHideBecauseTall () {
-      return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault)
+    mightHideBecauseTall() {
+      return (
+        this.tallStatus &&
+        !(this.status.summary && this.localCollapseSubjectDefault)
+      )
     },
-    hideSubjectStatus () {
+    hideSubjectStatus() {
       return this.mightHideBecauseSubject && !this.expandingSubject
     },
-    hideTallStatus () {
+    hideTallStatus() {
       return this.mightHideBecauseTall && !this.showingTall
     },
-    showingMore () {
-      return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
+    showingMore() {
+      return (
+        (this.mightHideBecauseTall && this.showingTall) ||
+        (this.mightHideBecauseSubject && this.expandingSubject)
+      )
     },
-    attachmentTypes () {
-      return this.status.attachments.map(file => fileType.fileType(file.mimetype))
+    attachmentTypes() {
+      return this.status.attachments.map((file) =>
+        fileType.fileType(file.mimetype)
+      )
     },
-    translationLanguages () {
-      return (this.$store.state.instance.supportedTranslationLanguages.source || []).map(lang => ({ key: lang.code, value: lang.code, label: lang.name }))
+    translationLanguages() {
+      return (
+        this.$store.state.instance.supportedTranslationLanguages.source || []
+      ).map((lang) => ({ key: lang.code, value: lang.code, label: lang.name }))
     },
     ...mapGetters(['mergedConfig'])
   },
@@ -91,21 +96,22 @@ const StatusContent = {
     RichContent,
     Select
   },
-  mounted () {
-    this.status.attentions && this.status.attentions.forEach(attn => {
-      const { id } = attn
-      this.$store.dispatch('fetchUserIfMissing', id)
-    })
+  mounted() {
+    this.status.attentions &&
+      this.status.attentions.forEach((attn) => {
+        const { id } = attn
+        this.$store.dispatch('fetchUserIfMissing', id)
+      })
   },
   methods: {
-    onParseReady (event) {
+    onParseReady(event) {
       if (this.parseReadyDone) return
       this.parseReadyDone = true
       this.$emit('parseReady', event)
       const { writtenMentions, invisibleMentions } = event
       writtenMentions
-        .filter(mention => !mention.notifying)
-        .forEach(mention => {
+        .filter((mention) => !mention.notifying)
+        .forEach((mention) => {
           const { content, url } = mention
           const cleanedString = content.replace(/<[^>]+?>/gi, '') // remove all tags
           if (!cleanedString.startsWith('@')) return
@@ -123,19 +129,25 @@ const StatusContent = {
         return acc - mention.textContent.length - 1
       }, this.postLength)
     },
-    toggleShowMore () {
+    toggleShowMore() {
       if (this.mightHideBecauseTall) {
         this.toggleShowingTall()
       } else if (this.mightHideBecauseSubject) {
         this.toggleExpandingSubject()
       }
     },
-    generateTagLink (tag) {
+    generateTagLink(tag) {
       return `/tag/${tag}`
     },
-    translateStatus () {
-      const translateTo = this.$store.getters.mergedConfig.translationLanguage || this.$store.state.instance.interfaceLanguage
-      this.$store.dispatch('translateStatus', { id: this.status.id, language: translateTo, from: this.translateFrom })
+    translateStatus() {
+      const translateTo =
+        this.$store.getters.mergedConfig.translationLanguage ||
+        this.$store.state.instance.interfaceLanguage
+      this.$store.dispatch('translateStatus', {
+        id: this.status.id,
+        language: translateTo,
+        from: this.translateFrom
+      })
     }
   }
 }
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index dc281f65a..a8912dab3 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -7,7 +7,7 @@
       <div
         v-if="status.summary_raw_html"
         class="summary-wrapper"
-        :class="{ '-tall': (longSubject && !showingLongSubject) }"
+        :class="{ '-tall': longSubject && !showingLongSubject }"
       >
         <RichContent
           class="media-body summary"
@@ -19,18 +19,18 @@
           class="button-unstyled -link tall-subject-hider"
           @click.prevent="toggleShowingLongSubject"
         >
-          {{ $t("status.hide_full_subject") }}
+          {{ $t('status.hide_full_subject') }}
         </button>
         <button
           v-show="longSubject && !showingLongSubject"
           class="button-unstyled -link tall-subject-hider"
           @click.prevent="toggleShowingLongSubject"
         >
-          {{ $t("status.show_full_subject") }}
+          {{ $t('status.show_full_subject') }}
         </button>
       </div>
       <div
-        :class="{'-tall-status': hideTallStatus}"
+        :class="{ '-tall-status': hideTallStatus }"
         class="text-wrapper"
       >
         <button
@@ -39,7 +39,7 @@
           :class="{ '-focused': focused }"
           @click.prevent="toggleShowMore"
         >
-          {{ $t("general.show_more") }}
+          {{ $t('general.show_more') }}
         </button>
         <div
           v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)"
@@ -51,7 +51,10 @@
             :html="status.raw_html"
             :emoji="status.emojis"
             :handle-links="true"
-            :mfm="renderMisskeyMarkdown && (status.media_type === 'text/x.misskeymarkdown')"
+            :mfm="
+              renderMisskeyMarkdown &&
+              status.media_type === 'text/x.misskeymarkdown'
+            "
             :greentext="mergedConfig.greentext"
             :attentions="status.attentions"
             @parseReady="onParseReady"
@@ -60,20 +63,31 @@
             v-if="status.translation"
             class="translation"
           >
-            <h4>{{ $t(`languages.translated_from.${status.translation.detected_language.toLowerCase()}`) }}</h4>
+            <h4>
+              {{
+                $t(
+                  `languages.translated_from.${status.translation.detected_language.toLowerCase()}`
+                )
+              }}
+            </h4>
             <RichContent
               :class="{ '-single-line': singleLine }"
               class="text media-body"
               :html="status.translation.text"
               :emoji="status.emojis"
               :handle-links="true"
-              :mfm="renderMisskeyMarkdown && (status.media_type === 'text/x.misskeymarkdown')"
+              :mfm="
+                renderMisskeyMarkdown &&
+                status.media_type === 'text/x.misskeymarkdown'
+              "
               :greentext="mergedConfig.greentext"
               :attentions="status.attentions"
               @parseReady="onParseReady"
             />
             <div>
-              <label class="label">{{ $t('status.override_translation_source_language') }}</label>
+              <label class="label">{{
+                $t('status.override_translation_source_language')
+              }}</label>
               {{ ' ' }}
               <Select
                 id="source-language-switcher"
@@ -89,7 +103,10 @@
                 </option>
               </Select>
               {{ ' ' }}
-              <button @click="translateStatus" class="btn button-default">
+              <button
+                class="btn button-default"
+                @click="translateStatus"
+              >
                 {{ $t('status.translate') }}
               </button>
             </div>
@@ -100,7 +117,7 @@
           class="button-unstyled -link cw-status-hider"
           @click.prevent="toggleShowMore"
         >
-          {{ $t("status.show_content") }}
+          {{ $t('status.show_content') }}
           <FAIcon
             v-if="attachmentTypes.includes('image')"
             icon="image"
@@ -131,12 +148,12 @@
           class="button-unstyled -link status-unhider"
           @click.prevent="toggleShowMore"
         >
-          {{ tallStatus ? $t("general.show_less") : $t("status.hide_content") }}
+          {{ tallStatus ? $t('general.show_less') : $t('status.hide_content') }}
         </button>
       </div>
     </div>
     <slot v-if="!hideSubjectStatus" />
   </div>
 </template>
-<script src="./status_body.js" ></script>
+<script src="./status_body.js"></script>
 <style lang="scss" src="./status_body.scss" />
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 81e40b0b4..73dad385e 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -15,27 +15,25 @@ import {
   faPollH
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch,
-  faFile,
-  faMusic,
-  faImage,
-  faLink,
-  faPollH
-)
+library.add(faCircleNotch, faFile, faMusic, faImage, faLink, faPollH)
 
-const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
+const camelCase = (name) => name.charAt(0).toUpperCase() + name.slice(1)
 
-const controlledOrUncontrolledGetters = list => list.reduce((res, name) => {
-  const camelized = camelCase(name)
-  const toggle = `controlledToggle${camelized}`
-  const controlledName = `controlled${camelized}`
-  const uncontrolledName = `uncontrolled${camelized}`
-  res[name] = function () {
-    return ((this.$data[toggle] !== undefined || this.$props[toggle] !== undefined) && this[toggle]) ? this[controlledName] : this[uncontrolledName]
-  }
-  return res
-}, {})
+const controlledOrUncontrolledGetters = (list) =>
+  list.reduce((res, name) => {
+    const camelized = camelCase(name)
+    const toggle = `controlledToggle${camelized}`
+    const controlledName = `controlled${camelized}`
+    const uncontrolledName = `uncontrolled${camelized}`
+    res[name] = function () {
+      return (this.$data[toggle] !== undefined ||
+        this.$props[toggle] !== undefined) &&
+        this[toggle]
+        ? this[controlledName]
+        : this[uncontrolledName]
+    }
+    return res
+  }, {})
 
 const controlledOrUncontrolledToggle = (obj, name) => {
   const camelized = camelCase(name)
@@ -64,21 +62,29 @@ const StatusContent = {
     'controlledShowingLongSubject',
     'controlledToggleShowingLongSubject'
   ],
-  data () {
+  data() {
     return {
-      uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),
+      uncontrolledShowingTall:
+        this.fullContent || (this.inConversation && this.focused),
       uncontrolledShowingLongSubject: false,
       // not as computed because it sets the initial state which will be changed later
-      uncontrolledExpandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+      uncontrolledExpandingSubject:
+        !this.$store.getters.mergedConfig.collapseMessageWithSubject
     }
   },
   computed: {
-    ...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']),
-    hideAttachments () {
-      return (this.mergedConfig.hideAttachments && !this.inConversation) ||
+    ...controlledOrUncontrolledGetters([
+      'showingTall',
+      'expandingSubject',
+      'showingLongSubject'
+    ]),
+    hideAttachments() {
+      return (
+        (this.mergedConfig.hideAttachments && !this.inConversation) ||
         (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
+      )
     },
-    nsfwClickthrough () {
+    nsfwClickthrough() {
       if (!this.status.nsfw) {
         return false
       }
@@ -87,28 +93,30 @@ const StatusContent = {
       }
       return true
     },
-    attachmentSize () {
+    attachmentSize() {
       if (this.compact) {
         return 'small'
-      } else if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
+      } else if (
+        (this.mergedConfig.hideAttachments && !this.inConversation) ||
         (this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
-        (this.status.attachments.length > this.maxThumbnails)) {
+        this.status.attachments.length > this.maxThumbnails
+      ) {
         return 'hide'
       }
       return 'normal'
     },
-    maxThumbnails () {
+    maxThumbnails() {
       return this.mergedConfig.maxThumbnails
     },
-    renderMfmOnHover () {
+    renderMfmOnHover() {
       return this.mergedConfig.renderMfmOnHover
     },
-    renderMisskeyMarkdown () {
+    renderMisskeyMarkdown() {
       return this.mergedConfig.renderMisskeyMarkdown
     },
     ...mapGetters(['mergedConfig']),
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser
     })
   },
   components: {
@@ -120,17 +128,20 @@ const StatusContent = {
     QuoteCard
   },
   methods: {
-    toggleShowingTall () {
+    toggleShowingTall() {
       controlledOrUncontrolledToggle(this, 'showingTall')
     },
-    toggleExpandingSubject () {
+    toggleExpandingSubject() {
       controlledOrUncontrolledToggle(this, 'expandingSubject')
     },
-    toggleShowingLongSubject () {
+    toggleShowingLongSubject() {
       controlledOrUncontrolledToggle(this, 'showingLongSubject')
     },
-    setMedia () {
-      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
+    setMedia() {
+      const attachments =
+        this.attachmentSize === 'hide'
+          ? this.status.attachments
+          : this.galleryAttachments
       return () => this.$store.dispatch('setMedia', attachments)
     }
   }
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index ab13141ed..90aeda5d8 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -1,7 +1,11 @@
 <template>
   <div
     class="StatusContent"
-    :class="{ '-compact': compact, 'mfm-hover': renderMfmOnHover, 'mfm-disabled': !renderMisskeyMarkdown }"
+    :class="{
+      '-compact': compact,
+      'mfm-hover': renderMfmOnHover,
+      'mfm-disabled': !renderMisskeyMarkdown
+    }"
   >
     <slot name="header" />
     <StatusBody
@@ -44,9 +48,7 @@
         v-if="status.quote && !compact"
         class="quote"
       >
-        <QuoteCard
-          :status="status.quote"
-        />
+        <QuoteCard :status="status.quote" />
       </div>
       <div
         v-if="status.card && !noHeading && !compact"
@@ -63,13 +65,14 @@
   </div>
 </template>
 
-<script src="./status_content.js" ></script>
+<script src="./status_content.js"></script>
 <style lang="scss">
 .StatusContent {
   flex: 1;
   min-width: 0;
 
-  img, video {
+  img,
+  video {
     &.emoji {
       width: 50px;
       height: 50px;
@@ -99,5 +102,4 @@
 .quote + .link-preview {
   display: none;
 }
-
 </style>
diff --git a/src/components/status_history_modal/status_history_modal.js b/src/components/status_history_modal/status_history_modal.js
index 3941a56f8..940528460 100644
--- a/src/components/status_history_modal/status_history_modal.js
+++ b/src/components/status_history_modal/status_history_modal.js
@@ -7,51 +7,53 @@ const StatusHistoryModal = {
     Modal,
     Status
   },
-  data () {
+  data() {
     return {
       statuses: []
     }
   },
   computed: {
-    modalActivated () {
+    modalActivated() {
       return this.$store.state.statusHistory.modalActivated
     },
-    params () {
+    params() {
       return this.$store.state.statusHistory.params
     },
-    statusId () {
+    statusId() {
       return this.params.id
     },
-    historyCount () {
+    historyCount() {
       return this.statuses.length
     },
-    history () {
+    history() {
       return this.statuses
     }
   },
   watch: {
-    params (newVal, oldVal) {
+    params(newVal, oldVal) {
       const newStatusId = get(newVal, 'id') !== get(oldVal, 'id')
       if (newStatusId) {
         this.resetHistory()
       }
 
-      if (newStatusId || get(newVal, 'edited_at') !== get(oldVal, 'edited_at')) {
+      if (
+        newStatusId ||
+        get(newVal, 'edited_at') !== get(oldVal, 'edited_at')
+      ) {
         this.fetchStatusHistory()
       }
     }
   },
   methods: {
-    resetHistory () {
+    resetHistory() {
       this.statuses = []
     },
-    fetchStatusHistory () {
-      this.$store.dispatch('fetchStatusHistory', this.params)
-        .then(data => {
-          this.statuses = data
-        })
+    fetchStatusHistory() {
+      this.$store.dispatch('fetchStatusHistory', this.params).then((data) => {
+        this.statuses = data
+      })
     },
-    closeModal () {
+    closeModal() {
       this.$store.dispatch('closeStatusHistoryModal')
     }
   }
diff --git a/src/components/status_history_modal/status_history_modal.vue b/src/components/status_history_modal/status_history_modal.vue
index e27293697..27a2404f9 100644
--- a/src/components/status_history_modal/status_history_modal.vue
+++ b/src/components/status_history_modal/status_history_modal.vue
@@ -6,7 +6,11 @@
   >
     <div class="status-history-modal-panel panel">
       <div class="panel-heading">
-        {{ $tc('status.edit_history_modal_title', historyCount - 1, { historyCount: historyCount - 1 }) }}
+        {{
+          $tc('status.edit_history_modal_title', historyCount - 1, {
+            historyCount: historyCount - 1
+          })
+        }}
       </div>
       <div class="panel-body">
         <div
@@ -17,9 +21,9 @@
             v-for="status in history"
             :key="status.id"
             :statusoid="status"
-            :isPreview="true"
+            :is-preview="true"
             class="conversation-status status-fadein panel-body"
-        />
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index e0962ccdf..531852b1f 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -3,23 +3,21 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 import { defineAsyncComponent } from 'vue'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
 const StatusPopover = {
   name: 'StatusPopover',
-  props: [
-    'statusId'
-  ],
-  data () {
+  props: ['statusId'],
+  data() {
     return {
       error: false
     }
   },
   computed: {
-    status () {
-      return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
+    status() {
+      return find(this.$store.state.statuses.allStatuses, {
+        id: this.statusId
+      })
     }
   },
   components: {
@@ -27,15 +25,16 @@ const StatusPopover = {
     Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
   },
   methods: {
-    enter () {
+    enter() {
       if (!this.status) {
         if (!this.statusId) {
           this.error = true
           return
         }
-        this.$store.dispatch('fetchStatus', this.statusId)
-          .then(data => (this.error = false))
-          .catch(e => (this.error = true))
+        this.$store
+          .dispatch('fetchStatus', this.statusId)
+          .then((data) => (this.error = false))
+          .catch((e) => (this.error = true))
       }
     }
   }
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index fdca8c9ce..8a773329c 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -5,10 +5,10 @@
     :bound-to="{ x: 'container' }"
     @show="enter"
   >
-    <template v-slot:trigger>
+    <template #trigger>
       <slot />
     </template>
-    <template v-slot:content>
+    <template #content>
       <Status
         v-if="status"
         :is-preview="true"
@@ -35,7 +35,7 @@
   </Popover>
 </template>
 
-<script src="./status_popover.js" ></script>
+<script src="./status_popover.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -69,5 +69,4 @@
     }
   }
 }
-
 </style>
diff --git a/src/components/sticker_picker/sticker_picker.js b/src/components/sticker_picker/sticker_picker.js
index 3a2d39145..4d3700abd 100644
--- a/src/components/sticker_picker/sticker_picker.js
+++ b/src/components/sticker_picker/sticker_picker.js
@@ -6,7 +6,7 @@ const StickerPicker = {
   components: {
     TabSwitcher
   },
-  data () {
+  data() {
     return {
       meta: {
         stickers: []
@@ -15,36 +15,37 @@ const StickerPicker = {
     }
   },
   computed: {
-    pack () {
+    pack() {
       return this.$store.state.instance.stickers || []
     }
   },
   methods: {
-    clear () {
+    clear() {
       this.meta = {
         stickers: []
       }
     },
-    pick (sticker, name) {
+    pick(sticker, name) {
       const store = this.$store
       // TODO remove this workaround by finding a way to bypass reuploads
-      fetch(sticker)
-        .then((res) => {
-          res.blob().then((blob) => {
-            var file = new File([blob], name, { mimetype: 'image/png' })
-            var formData = new FormData()
-            formData.append('file', file)
-            statusPosterService.uploadMedia({ store, formData })
-              .then((fileData) => {
-                this.$emit('uploaded', fileData)
-                this.clear()
-              }, (error) => {
-                console.warn("Can't attach sticker")
-                console.warn(error)
-                this.$emit('upload-failed', 'default')
-              })
-          })
+      fetch(sticker).then((res) => {
+        res.blob().then((blob) => {
+          var file = new File([blob], name, { mimetype: 'image/png' })
+          var formData = new FormData()
+          formData.append('file', file)
+          statusPosterService.uploadMedia({ store, formData }).then(
+            (fileData) => {
+              this.$emit('uploaded', fileData)
+              this.clear()
+            },
+            (error) => {
+              console.warn("Can't attach sticker")
+              console.warn(error)
+              this.$emit('upload-failed', 'default')
+            }
+          )
         })
+      })
     }
   }
 }
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index bca1588c5..98682d9b1 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="sticker-picker"
-  >
+  <div class="sticker-picker">
     <tab-switcher
       class="tab-switcher"
       :render-only-focused="true"
@@ -18,11 +16,11 @@
           v-for="sticker in stickerpack.meta.stickers"
           :key="sticker"
           class="sticker"
-          @click.stop.prevent="pick(stickerpack.path + sticker, stickerpack.meta.title)"
+          @click.stop.prevent="
+            pick(stickerpack.path + sticker, stickerpack.meta.title)
+          "
         >
-          <img
-            :src="stickerpack.path + sticker"
-          >
+          <img :src="stickerpack.path + sticker" />
         </div>
       </div>
     </tab-switcher>
@@ -74,5 +72,4 @@
     }
   }
 }
-
 </style>
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index 480de9faf..0a4c51364 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -9,18 +9,18 @@ const StillImage = {
     'height',
     'width'
   ],
-  data () {
+  data() {
     return {
       stopGifs: this.$store.getters.mergedConfig.stopGifs,
       isAnimated: false
     }
   },
   computed: {
-    animated () {
+    animated() {
       return this.stopGifs && this.isAnimated
     },
-    style () {
-      const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
+    style() {
+      const appendPx = (str) => (/\d$/.test(str) ? str + 'px' : str)
       return {
         height: this.height ? appendPx(this.height) : null,
         width: this.width ? appendPx(this.width) : null
@@ -28,17 +28,17 @@ const StillImage = {
     }
   },
   methods: {
-    onLoad () {
+    onLoad() {
       const image = this.$refs.src
       if (!image) return
       this.imageLoadHandler && this.imageLoadHandler(image)
       this.detectAnimation(image)
       this.drawThumbnail()
     },
-    onError () {
+    onError() {
       this.imageLoadError && this.imageLoadError()
     },
-    detectAnimation (image) {
+    detectAnimation(image) {
       if (this.mimetype === 'image/gif' || this.src.endsWith('.gif')) {
         this.isAnimated = true
         return
@@ -51,15 +51,23 @@ const StillImage = {
       fetch(image.src, {
         referrerPolicy: 'same-origin'
       })
-        .then(data => {
+        .then((data) => {
           // We don't need to read the whole file so only call it once
-          data.body.getReader().read()
-            .then(reader => {
-              if (this.src.endsWith('.webp') && this.isAnimatedWEBP(reader.value)) {
+          data.body
+            .getReader()
+            .read()
+            .then((reader) => {
+              if (
+                this.src.endsWith('.webp') &&
+                this.isAnimatedWEBP(reader.value)
+              ) {
                 this.isAnimated = true
                 return
               }
-              if (this.src.endsWith('.png') && this.isAnimatedPNG(reader.value)) {
+              if (
+                this.src.endsWith('.png') &&
+                this.isAnimatedPNG(reader.value)
+              ) {
                 this.isAnimated = true
               }
             })
@@ -68,7 +76,7 @@ const StillImage = {
           // this.imageLoadError && this.imageLoadError()
         })
     },
-    isAnimatedWEBP (data) {
+    isAnimatedWEBP(data) {
       /**
        * WEBP HEADER CHUNK
        * === START HEADER ===
@@ -82,7 +90,7 @@ const StillImage = {
        *  A → Animated bit
        */
       // Relevant bytes
-      const segment = data.slice(4 * 3, (4 * 5) + 1)
+      const segment = data.slice(4 * 3, 4 * 5 + 1)
       // Check for VP8X string
       if (segment.join('').includes(['86805688'])) {
         // Check for Animation bit
@@ -91,7 +99,7 @@ const StillImage = {
       // No VP8X = Not Animated (X is for Extended)
       return false
     },
-    isAnimatedPNG (data) {
+    isAnimatedPNG(data) {
       // Find acTL before IDAT in PNG; if found it is animated
       const segment = []
       for (let i = 0; i < data.length; i++) {
@@ -99,9 +107,9 @@ const StillImage = {
       }
       const str = segment.join('')
       const idatPos = str.indexOf('IDAT')
-      return (str.substring(0, idatPos > 0 ? idatPos : 0).indexOf('acTL') > 0)
+      return str.substring(0, idatPos > 0 ? idatPos : 0).indexOf('acTL') > 0
     },
-    drawThumbnail () {
+    drawThumbnail() {
       const canvas = this.$refs.canvas
       if (!this.$refs.canvas) return
       const image = this.$refs.src
@@ -112,7 +120,7 @@ const StillImage = {
       canvas.getContext('2d').drawImage(image, 0, 0, width, height)
     }
   },
-  updated () {
+  updated() {
     // On computed animated change
     this.drawThumbnail()
   }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index fa3edacf4..56004e1ec 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -18,7 +18,7 @@
       :referrerpolicy="referrerpolicy"
       @load="onLoad"
       @error="onError"
-    >
+    />
     <slot />
   </div>
 </template>
diff --git a/src/components/swipe_click/swipe_click.js b/src/components/swipe_click/swipe_click.js
index 238e6df89..2bf841e2e 100644
--- a/src/components/swipe_click/swipe_click.js
+++ b/src/components/swipe_click/swipe_click.js
@@ -40,35 +40,35 @@ const SwipeClick = {
     }
   },
   methods: {
-    handlePointerDown (event) {
+    handlePointerDown(event) {
       this.$gesture.start(event)
     },
-    handlePointerMove (event) {
+    handlePointerMove(event) {
       this.$gesture.move(event)
     },
-    handlePointerUp (event) {
+    handlePointerUp(event) {
       this.$gesture.end(event)
     },
-    handlePointerCancel (event) {
+    handlePointerCancel(event) {
       this.$gesture.cancel(event)
     },
-    handleNativeClick (event) {
+    handleNativeClick(event) {
       this.$gesture.click(event)
     },
-    preview (offsets) {
+    preview(offsets) {
       this.$emit('preview-requested', offsets)
     },
-    end (sign) {
+    end(sign) {
       this.$emit('swipe-finished', sign)
     },
-    click () {
+    click() {
       this.$emit('swipeless-clicked')
     },
-    cancel () {
+    cancel() {
       this.$emit('swipe-canceled')
     }
   },
-  created () {
+  created() {
     this.$gesture = new GestureService.SwipeAndClickGesture({
       direction: this.direction,
       threshold: this.threshold,
diff --git a/src/components/tag_timeline/tag_timeline.js b/src/components/tag_timeline/tag_timeline.js
index bda61ae09..3c188ead0 100644
--- a/src/components/tag_timeline/tag_timeline.js
+++ b/src/components/tag_timeline/tag_timeline.js
@@ -1,24 +1,34 @@
 import Timeline from '../timeline/timeline.vue'
 
 const TagTimeline = {
-  created () {
+  created() {
     this.$store.commit('clearTimeline', { timeline: 'tag' })
-    this.$store.dispatch('startFetchingTimeline', { timeline: 'tag', tag: this.tag })
+    this.$store.dispatch('startFetchingTimeline', {
+      timeline: 'tag',
+      tag: this.tag
+    })
   },
   components: {
     Timeline
   },
   computed: {
-    tag () { return this.$route.params.tag },
-    timeline () { return this.$store.state.statuses.timelines.tag }
-  },
-  watch: {
-    tag () {
-      this.$store.commit('clearTimeline', { timeline: 'tag' })
-      this.$store.dispatch('startFetchingTimeline', { timeline: 'tag', tag: this.tag })
+    tag() {
+      return this.$route.params.tag
+    },
+    timeline() {
+      return this.$store.state.statuses.timelines.tag
     }
   },
-  unmounted () {
+  watch: {
+    tag() {
+      this.$store.commit('clearTimeline', { timeline: 'tag' })
+      this.$store.dispatch('startFetchingTimeline', {
+        timeline: 'tag',
+        tag: this.tag
+      })
+    }
+  },
+  unmounted() {
     this.$store.dispatch('stopFetchingTimeline', 'tag')
   }
 }
diff --git a/src/components/tag_timeline/tag_timeline.vue b/src/components/tag_timeline/tag_timeline.vue
index ace96c3fa..e3c1c6108 100644
--- a/src/components/tag_timeline/tag_timeline.vue
+++ b/src/components/tag_timeline/tag_timeline.vue
@@ -7,4 +7,4 @@
   />
 </template>
 
-<script src='./tag_timeline.js'></script>
+<script src="./tag_timeline.js"></script>
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.js b/src/components/terms_of_service_panel/terms_of_service_panel.js
index 4276f8f77..cc055a760 100644
--- a/src/components/terms_of_service_panel/terms_of_service_panel.js
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.js
@@ -1,6 +1,6 @@
 const TermsOfServicePanel = {
   computed: {
-    content () {
+    content() {
       return this.$store.state.instance.tos
     }
   }
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.vue b/src/components/terms_of_service_panel/terms_of_service_panel.vue
index 63dc58b87..ea03b7415 100644
--- a/src/components/terms_of_service_panel/terms_of_service_panel.vue
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.vue
@@ -7,16 +7,16 @@
           class="tos-content"
           v-html="content"
         />
-      <!-- eslint-enable vue/no-v-html -->
+        <!-- eslint-enable vue/no-v-html -->
       </div>
     </div>
   </div>
 </template>
 
-<script src="./terms_of_service_panel.js" ></script>
+<script src="./terms_of_service_panel.js"></script>
 
 <style lang="scss">
 .tos-content {
-  margin: 1em
+  margin: 1em;
 }
 </style>
diff --git a/src/components/thread_tree/thread_tree.js b/src/components/thread_tree/thread_tree.js
index 71e637254..2e172deca 100644
--- a/src/components/thread_tree/thread_tree.js
+++ b/src/components/thread_tree/thread_tree.js
@@ -6,10 +6,7 @@ import {
   faAngleDoubleRight
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faAngleDoubleDown,
-  faAngleDoubleRight
-)
+library.add(faAngleDoubleDown, faAngleDoubleRight)
 
 const ThreadTree = {
   components: {
@@ -45,43 +42,47 @@ const ThreadTree = {
     dive: Function
   },
   computed: {
-    suspendable () {
-      const selfSuspendable = this.$refs.statusComponent ? this.$refs.statusComponent.suspendable : true
+    suspendable() {
+      const selfSuspendable = this.$refs.statusComponent
+        ? this.$refs.statusComponent.suspendable
+        : true
       if (this.$refs.childComponent) {
-        return selfSuspendable && this.$refs.childComponent.every(s => s.suspendable)
+        return (
+          selfSuspendable &&
+          this.$refs.childComponent.every((s) => s.suspendable)
+        )
       }
       return selfSuspendable
     },
-    reverseLookupTable () {
+    reverseLookupTable() {
       return this.conversation.reduce((table, status, index) => {
         table[status.id] = index
         return table
       }, {})
     },
-    currentReplies () {
-      return this.getReplies(this.status.id).map(({ id }) => this.statusById(id))
+    currentReplies() {
+      return this.getReplies(this.status.id).map(({ id }) =>
+        this.statusById(id)
+      )
     },
-    threadShowing () {
+    threadShowing() {
       return this.threadDisplayStatus[this.status.id] === 'showing'
     },
-    currentProp () {
+    currentProp() {
       return this.statusContentProperties[this.status.id]
     }
   },
   methods: {
-    statusById (id) {
+    statusById(id) {
       return this.conversation[this.reverseLookupTable[id]]
     },
-    collapseThread () {
-    },
-    showThread () {
-    },
-    showAllSubthreads () {
-    },
-    toggleCurrentProp (name) {
+    collapseThread() {},
+    showThread() {},
+    showAllSubthreads() {},
+    toggleCurrentProp(name) {
       this.toggleStatusContentProperty(this.status.id, name)
     },
-    setCurrentProp (name, newVal) {
+    setCurrentProp(name, newVal) {
       this.setStatusContentProperty(this.status.id, name)
     }
   }
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 4eaf597dc..6ea073d1c 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -14,23 +14,26 @@
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
       class="conversation-status conversation-status-treeview status-fadein panel-body"
-
       :simple-tree="simple"
       :controlled-thread-display-status="threadDisplayStatus[status.id]"
       :controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"
-
       :controlled-showing-tall="currentProp.showingTall"
       :controlled-expanding-subject="currentProp.expandingSubject"
       :controlled-showing-long-subject="currentProp.showingLongSubject"
       :controlled-replying="currentProp.replying"
       :controlled-media-playing="currentProp.mediaPlaying"
       :controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
-      :controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
-      :controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
+      :controlled-toggle-expanding-subject="
+        () => toggleCurrentProp('expandingSubject')
+      "
+      :controlled-toggle-showing-long-subject="
+        () => toggleCurrentProp('showingLongSubject')
+      "
       :controlled-toggle-replying="() => toggleCurrentProp('replying')"
-      :controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
+      :controlled-set-media-playing="
+        (newVal) => setCurrentProp('mediaPlaying', newVal)
+      "
       :dive="dive ? () => dive(status.id) : undefined"
-
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"
     />
@@ -44,20 +47,17 @@
         ref="childComponent"
         :depth="depth + 1"
         :status="replyStatus"
-
         :in-profile="inProfile"
         :conversation="conversation"
         :collapsable="collapsable"
         :is-expanded="isExpanded"
         :pinned-status-ids-object="pinnedStatusIdsObject"
         :profile-user-id="profileUserId"
-
         :focused="focused"
         :get-replies="getReplies"
         :highlight="highlight"
         :set-highlight="setHighlight"
         :toggle-expanded="toggleExpanded"
-
         :simple="simple"
         :toggle-thread-display="toggleThreadDisplay"
         :thread-display-status="threadDisplayStatus"
@@ -83,13 +83,15 @@
         @click.prevent="dive(status.id)"
       >
         <template #icon>
-          <FAIcon
-            icon="angle-double-right"
-          />
+          <FAIcon icon="angle-double-right" />
         </template>
         <template #text>
           <span>
-            {{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
+            {{
+              $tc('status.thread_follow', totalReplyCount[status.id], {
+                numStatus: totalReplyCount[status.id]
+              })
+            }}
           </span>
         </template>
       </i18n-t>
@@ -102,13 +104,16 @@
         @click.prevent="showThreadRecursively(status.id)"
       >
         <template #icon>
-          <FAIcon
-            icon="angle-double-down"
-          />
+          <FAIcon icon="angle-double-down" />
         </template>
         <template #text>
           <span>
-            {{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
+            {{
+              $tc('status.thread_show_full', totalReplyCount[status.id], {
+                numStatus: totalReplyCount[status.id],
+                depth: totalReplyDepth[status.id]
+              })
+            }}
           </span>
         </template>
       </i18n-t>
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index e042a30a8..9e5cf6418 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -4,13 +4,13 @@
     :title="localeDateString"
     :class="{ warning: relativeTime.direction === 'time.in_future' }"
   >
-    <template
-      v-if="withDirection"
-    >
+    <template v-if="withDirection">
       {{
-        relativeTime.direction === '' ?
-          $tc(relativeTime.key, relativeTime.num, [relativeTime.num]) :
-          $t(relativeTime.direction, [$tc(relativeTime.key, relativeTime.num, [relativeTime.num])])
+        relativeTime.direction === ''
+          ? $tc(relativeTime.key, relativeTime.num, [relativeTime.num])
+          : $t(relativeTime.direction, [
+              $tc(relativeTime.key, relativeTime.num, [relativeTime.num])
+            ])
       }}
     </template>
     <template v-else>
@@ -26,29 +26,32 @@ import localeService from 'src/services/locale/locale.service.js'
 export default {
   name: 'Timeago',
   props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'withDirection'],
-  data () {
+  data() {
     return {
       relativeTime: { key: 'time.now', num: 0 },
       interval: null
     }
   },
   computed: {
-    localeDateString () {
-      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+    localeDateString() {
+      const browserLocale = localeService.internalToBrowserLocale(
+        this.$i18n.locale
+      )
       return typeof this.time === 'string'
         ? new Date(Date.parse(this.time)).toLocaleString(browserLocale)
         : this.time.toLocaleString(browserLocale)
     }
   },
-  created () {
+  created() {
     this.refreshRelativeTimeObject()
   },
-  unmounted () {
+  unmounted() {
     clearTimeout(this.interval)
   },
   methods: {
-    refreshRelativeTimeObject () {
-      const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
+    refreshRelativeTimeObject() {
+      const nowThreshold =
+        typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
       this.relativeTime = this.longFormat
         ? DateUtils.relativeTime(this.time, nowThreshold)
         : DateUtils.relativeTimeShort(this.time, nowThreshold)
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index cdb35e082..f57747af9 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -6,14 +6,14 @@ import TimelineMenuTabs from '../timeline_menu_tabs/timeline_menu_tabs.vue'
 import TimelineQuickSettings from './timeline_quick_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch, faCog, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
-
-library.add(
+import {
   faCircleNotch,
   faCog,
   faPlus,
   faMinus
-)
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(faCircleNotch, faCog, faPlus, faMinus)
 
 const Timeline = {
   props: [
@@ -29,7 +29,7 @@ const Timeline = {
     'inProfile',
     'footerSlipgate' // reference to an element where we should put our footer
   ],
-  data () {
+  data() {
     return {
       paused: false,
       unfocused: false,
@@ -46,71 +46,87 @@ const Timeline = {
     TimelineQuickSettings
   },
   computed: {
-    filteredVisibleStatuses () {
-      return this.timeline.visibleStatuses.filter(status => this.timelineName !== 'user' || (status.id >= this.timeline.minId && status.id <= this.timeline.maxId))
+    filteredVisibleStatuses() {
+      return this.timeline.visibleStatuses.filter(
+        (status) =>
+          this.timelineName !== 'user' ||
+          (status.id >= this.timeline.minId && status.id <= this.timeline.maxId)
+      )
     },
-    filteredPinnedStatusIds () {
-      return (this.pinnedStatusIds || []).filter(statusId => this.timeline.statusesObject[statusId])
+    filteredPinnedStatusIds() {
+      return (this.pinnedStatusIds || []).filter(
+        (statusId) => this.timeline.statusesObject[statusId]
+      )
     },
-    newStatusCount () {
+    newStatusCount() {
       return this.timeline.newStatusCount
     },
-    showLoadButton () {
+    showLoadButton() {
       return this.timeline.newStatusCount > 0 || this.timeline.flushMarker !== 0
     },
-    loadButtonString () {
+    loadButtonString() {
       if (this.timeline.flushMarker !== 0) {
         return this.$t('timeline.reload')
       } else {
         return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
       }
     },
-    classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
-      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
+    classes() {
+      let rootClasses = !this.embedded
+        ? ['panel', 'panel-default']
+        : ['-nonpanel']
+      if (this.blockingClicks)
+        rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
+        header: ['timeline-heading'].concat(
+          !this.embedded ? ['panel-heading', '-sticky'] : []
+        ),
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
-        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
+        footer: ['timeline-footer'].concat(
+          !this.embedded ? ['panel-footer'] : []
+        )
       }
     },
     // id map of statuses which need to be hidden in the main list due to pinning logic
-    pinnedStatusIdsObject () {
+    pinnedStatusIdsObject() {
       return keyBy(this.pinnedStatusIds)
     },
-    statusesToDisplay () {
+    statusesToDisplay() {
       const amount = this.timeline.visibleStatuses.length
       const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
-      const nonPinnedIndex = this.virtualScrollIndex - this.filteredPinnedStatusIds.length
+      const nonPinnedIndex =
+        this.virtualScrollIndex - this.filteredPinnedStatusIds.length
       const min = Math.max(0, nonPinnedIndex - statusesPerSide)
       const max = Math.min(amount, nonPinnedIndex + statusesPerSide)
-      return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
+      return this.timeline.visibleStatuses.slice(min, max).map((_) => _.id)
     },
-    virtualScrollingEnabled () {
+    virtualScrollingEnabled() {
       return this.$store.getters.mergedConfig.virtualScrolling
     },
-    showPanelNavShortcuts () {
+    showPanelNavShortcuts() {
       return this.$store.getters.mergedConfig.showPanelNavShortcuts
     },
-    currentUser () {
+    currentUser() {
       return this.$store.state.users.currentUser
     },
-    tagData () {
+    tagData() {
       return this.$store.state.tags.tags[this.tag]
     },
-    tagFollowed () {
+    tagFollowed() {
       return this.$store.state.tags.tags[this.tag]?.following
     }
   },
-  created () {
+  created() {
     const store = this.$store
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
     window.addEventListener('scroll', this.handleScroll)
 
-    if (store.state.api.fetchers[this.timelineName]) { return false }
+    if (store.state.api.fetchers[this.timelineName]) {
+      return false
+    }
 
     timelineFetcher.fetchAndUpdate({
       store,
@@ -122,9 +138,13 @@ const Timeline = {
       tag: this.tag
     })
   },
-  mounted () {
+  mounted() {
     if (typeof document.hidden !== 'undefined') {
-      document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
+      document.addEventListener(
+        'visibilitychange',
+        this.handleVisibilityChange,
+        false
+      )
       this.unfocused = document.hidden
     }
     window.addEventListener('keydown', this.handleShortKey)
@@ -134,31 +154,45 @@ const Timeline = {
       this.$store.dispatch('getTag', this.tag)
     }
   },
-  unmounted () {
+  unmounted() {
     window.removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('keydown', this.handleShortKey)
-    if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
-    this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
+    if (typeof document.hidden !== 'undefined')
+      document.removeEventListener(
+        'visibilitychange',
+        this.handleVisibilityChange,
+        false
+      )
+    this.$store.commit('setLoading', {
+      timeline: this.timelineName,
+      value: false
+    })
   },
   methods: {
-    stopBlockingClicks: debounce( function()  {
+    stopBlockingClicks: debounce(function () {
       this.blockingClicks = false
     }, 1000),
-    blockClicksTemporarily () {
+    blockClicksTemporarily() {
       if (!this.blockingClicks) {
         this.blockingClicks = true
       }
       this.stopBlockingClicks()
     },
-    handleShortKey (e) {
+    handleShortKey(e) {
       // Ignore when input fields are focused
       if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
       if (e.key === '.') this.showNewStatuses()
     },
-    showNewStatuses () {
+    showNewStatuses() {
       if (this.timeline.flushMarker !== 0) {
-        this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
-        this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
+        this.$store.commit('clearTimeline', {
+          timeline: this.timelineName,
+          excludeUserId: true
+        })
+        this.$store.commit('queueFlush', {
+          timeline: this.timelineName,
+          id: 0
+        })
         this.fetchOlderStatuses()
       } else {
         this.blockClicksTemporarily()
@@ -169,39 +203,55 @@ const Timeline = {
         window.scrollTo({ top: 0 })
       }
     },
-    fetchOlderStatuses: throttle( function () {
-      const store = this.$store
-      const credentials = store.state.users.currentUser.credentials
-      store.commit('setLoading', { timeline: this.timelineName, value: true })
-      timelineFetcher.fetchAndUpdate({
-        store,
-        credentials,
-        timeline: this.timelineName,
-        older: true,
-        showImmediately: true,
-        userId: this.userId,
-        listId: this.listId,
-        tag: this.tag
-      }).then(({ statuses }) => {
-        if (statuses && statuses.length === 0) {
-          this.bottomedOut = true
-        }
-      }).finally(() =>
-        store.commit('setLoading', { timeline: this.timelineName, value: false })
-      )
-    }, 1000, this),
-    determineVisibleStatuses () {
+    fetchOlderStatuses: throttle(
+      function () {
+        const store = this.$store
+        const credentials = store.state.users.currentUser.credentials
+        store.commit('setLoading', {
+          timeline: this.timelineName,
+          value: true
+        })
+        timelineFetcher
+          .fetchAndUpdate({
+            store,
+            credentials,
+            timeline: this.timelineName,
+            older: true,
+            showImmediately: true,
+            userId: this.userId,
+            listId: this.listId,
+            tag: this.tag
+          })
+          .then(({ statuses }) => {
+            if (statuses && statuses.length === 0) {
+              this.bottomedOut = true
+            }
+          })
+          .finally(() =>
+            store.commit('setLoading', {
+              timeline: this.timelineName,
+              value: false
+            })
+          )
+      },
+      1000,
+      this
+    ),
+    determineVisibleStatuses() {
       if (!this.$refs.timeline) return
       if (!this.virtualScrollingEnabled) return
 
       const statuses = this.$refs.timeline.children
-      const cappedScrollIndex = Math.max(0, Math.min(this.virtualScrollIndex, statuses.length - 1))
+      const cappedScrollIndex = Math.max(
+        0,
+        Math.min(this.virtualScrollIndex, statuses.length - 1)
+      )
 
       if (statuses.length === 0) return
 
       const height = Math.max(document.body.offsetHeight, window.pageYOffset)
 
-      const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5)
+      const centerOfScreen = window.pageYOffset + window.innerHeight * 0.5
 
       // Start from approximating the index of some visible status by using
       // the center of the screen on the timeline.
@@ -211,7 +261,8 @@ const Timeline = {
       // if we have a previous scroll index that can be used, test if it's
       // closer than the previous approximation, use it if so
 
-      const virtualScrollIndexY = statuses[cappedScrollIndex].getBoundingClientRect().y
+      const virtualScrollIndexY =
+        statuses[cappedScrollIndex].getBoundingClientRect().y
       if (Math.abs(err) > virtualScrollIndexY) {
         approxIndex = cappedScrollIndex
         err = virtualScrollIndexY
@@ -232,31 +283,33 @@ const Timeline = {
       // statuses will be nearby statuses before and after it
       this.virtualScrollIndex = approxIndex
     },
-    scrollLoad (e) {
+    scrollLoad(e) {
       const bodyBRect = document.body.getBoundingClientRect()
-      const height = Math.max(bodyBRect.height, -(bodyBRect.y))
-      if (this.timeline.loading === false &&
-          this.$el.offsetHeight > 0 &&
-          (window.innerHeight + window.pageYOffset) >= (height - 750)) {
+      const height = Math.max(bodyBRect.height, -bodyBRect.y)
+      if (
+        this.timeline.loading === false &&
+        this.$el.offsetHeight > 0 &&
+        window.innerHeight + window.pageYOffset >= height - 750
+      ) {
         this.fetchOlderStatuses()
       }
     },
-    handleScroll: throttle( function (e)  {
+    handleScroll: throttle(function (e) {
       this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
-    handleVisibilityChange () {
+    handleVisibilityChange() {
       this.unfocused = document.hidden
     },
-    followTag (tag) {
+    followTag(tag) {
       return this.$store.dispatch('followTag', tag)
     },
-    unfollowTag (tag) {
+    unfollowTag(tag) {
       return this.$store.dispatch('unfollowTag', tag)
     }
   },
   watch: {
-    newStatusCount (count) {
+    newStatusCount(count) {
       if (!this.$store.getters.mergedConfig.streaming) {
         return
       }
@@ -264,9 +317,10 @@ const Timeline = {
         // only 'stream' them when you're scrolled to the top
         const doc = document.documentElement
         const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
-        if (top < 15 &&
-            !this.paused &&
-            !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
+        if (
+          top < 15 &&
+          !this.paused &&
+          !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
         ) {
           this.showNewStatuses()
         } else {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 9302cce6a..c2e669cd8 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -75,7 +75,9 @@
           :collapsable="true"
           :in-profile="inProfile"
           :profile-user-id="userId"
-          :virtual-hidden="virtualScrollingEnabled && !statusesToDisplay.includes(status.id)"
+          :virtual-hidden="
+            virtualScrollingEnabled && !statusesToDisplay.includes(status.id)
+          "
         />
       </div>
     </div>
@@ -85,7 +87,7 @@
         :disabled="!embedded || !footerSlipgate"
       >
         <div
-          v-if="count===0"
+          v-if="count === 0"
           class="new-status-notification text-center faint"
         >
           {{ $t('timeline.no_statuses') }}
@@ -122,4 +124,4 @@
 
 <script src="./timeline.js"></script>
 
-<style src="./timeline.scss" lang="scss"> </style>
+<style src="./timeline.scss" lang="scss"></style>
diff --git a/src/components/timeline/timeline_quick_settings.js b/src/components/timeline/timeline_quick_settings.js
index 92d5ac146..222cc6e59 100644
--- a/src/components/timeline/timeline_quick_settings.js
+++ b/src/components/timeline/timeline_quick_settings.js
@@ -3,60 +3,86 @@ import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faFilter,
-  faFont,
-  faWrench
-)
+library.add(faFilter, faFont, faWrench)
 
 const TimelineQuickSettings = {
   components: {
     Popover
   },
   methods: {
-    setReplyVisibility (visibility) {
-      this.$store.dispatch('setOption', { name: 'replyVisibility', value: visibility })
+    setReplyVisibility(visibility) {
+      this.$store.dispatch('setOption', {
+        name: 'replyVisibility',
+        value: visibility
+      })
       this.$store.dispatch('queueFlushAll')
     },
-    openTab (tab) {
+    openTab(tab) {
       this.$store.dispatch('openSettingsModalTab', tab)
     }
   },
   computed: {
     ...mapGetters(['mergedConfig']),
-    loggedIn () {
+    loggedIn() {
       return !!this.$store.state.users.currentUser
     },
     replyVisibilitySelf: {
-      get () { return this.mergedConfig.replyVisibility === 'self' },
-      set () { this.setReplyVisibility('self') }
+      get() {
+        return this.mergedConfig.replyVisibility === 'self'
+      },
+      set() {
+        this.setReplyVisibility('self')
+      }
     },
     replyVisibilityFollowing: {
-      get () { return this.mergedConfig.replyVisibility === 'following' },
-      set () { this.setReplyVisibility('following') }
+      get() {
+        return this.mergedConfig.replyVisibility === 'following'
+      },
+      set() {
+        this.setReplyVisibility('following')
+      }
     },
     replyVisibilityAll: {
-      get () { return this.mergedConfig.replyVisibility === 'all' },
-      set () { this.setReplyVisibility('all') }
+      get() {
+        return this.mergedConfig.replyVisibility === 'all'
+      },
+      set() {
+        this.setReplyVisibility('all')
+      }
     },
     hideMedia: {
-      get () { return this.mergedConfig.hideAttachments || this.mergedConfig.hideAttachmentsInConv },
-      set () {
+      get() {
+        return (
+          this.mergedConfig.hideAttachments ||
+          this.mergedConfig.hideAttachmentsInConv
+        )
+      },
+      set() {
         const value = !this.hideMedia
         this.$store.dispatch('setOption', { name: 'hideAttachments', value })
-        this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
+        this.$store.dispatch('setOption', {
+          name: 'hideAttachmentsInConv',
+          value
+        })
       }
     },
     hideMutedPosts: {
-      get () { return this.mergedConfig.hideFilteredStatuses },
-      set () {
+      get() {
+        return this.mergedConfig.hideFilteredStatuses
+      },
+      set() {
         const value = !this.hideMutedPosts
-        this.$store.dispatch('setOption', { name: 'hideFilteredStatuses', value })
+        this.$store.dispatch('setOption', {
+          name: 'hideFilteredStatuses',
+          value
+        })
       }
     },
     muteBotStatuses: {
-      get () { return this.mergedConfig.muteBotStatuses },
-      set () {
+      get() {
+        return this.mergedConfig.muteBotStatuses
+      },
+      set() {
         const value = !this.muteBotStatuses
         this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
       }
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 98fab9268..c308ec76b 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -4,7 +4,7 @@
     class="TimelineQuickSettings"
     :bound-to="{ x: 'container' }"
   >
-    <template v-slot:content>
+    <template #content>
       <div class="dropdown-menu">
         <div v-if="loggedIn">
           <button
@@ -80,7 +80,7 @@
         </button>
       </div>
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <button class="button-unstyled">
         <FAIcon icon="filter" />
       </button>
@@ -91,9 +91,7 @@
 <script src="./timeline_quick_settings.js"></script>
 
 <style lang="scss">
-
 .TimelineQuickSettings {
-
   > button {
     line-height: 100%;
     height: 100%;
@@ -105,5 +103,4 @@
     }
   }
 }
-
 </style>
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index a3cb968eb..bd004f215 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -1,9 +1,7 @@
 import Popover from '../popover/popover.vue'
 import TimelineMenuContent from './timeline_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faChevronDown)
 
@@ -11,9 +9,9 @@ library.add(faChevronDown)
 // because nav panel benefits from the same information.
 export const timelineNames = () => {
   return {
-    'friends': 'nav.home_timeline',
-    'bookmarks': 'nav.bookmarks',
-    'dms': 'nav.dms',
+    friends: 'nav.home_timeline',
+    bookmarks: 'nav.bookmarks',
+    dms: 'nav.dms',
     'public-timeline': 'nav.public_tl',
     'public-external-timeline': 'nav.twkn',
     'bubble-timeline': 'nav.bubble_timeline'
@@ -25,18 +23,18 @@ const TimelineMenu = {
     Popover,
     TimelineMenuContent
   },
-  data () {
+  data() {
     return {
       isOpen: false
     }
   },
-  created () {
+  created() {
     if (timelineNames()[this.$route.name]) {
       this.$store.dispatch('setLastTimeline', this.$route.name)
     }
   },
   methods: {
-    openMenu () {
+    openMenu() {
       // $nextTick is too fast, animation won't play back but
       // instead starts in fully open position. Low values
       // like 1-5 work on fast machines but not on mobile, 25
@@ -46,7 +44,7 @@ const TimelineMenu = {
         this.isOpen = true
       }, 25)
     },
-    blockOpen (event) {
+    blockOpen(event) {
       // For the blank area inside the button element.
       // Just setting @click.stop="" makes unintuitive behavior when
       // menu is open and clicking on the blank area doesn't close it.
@@ -54,7 +52,7 @@ const TimelineMenu = {
         event.stopPropagation()
       }
     },
-    timelineName () {
+    timelineName() {
       const route = this.$route.name
       if (route === 'tag-timeline') {
         return '#' + this.$route.params.tag
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 611194820..7bf26632c 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -2,19 +2,19 @@
   <Popover
     trigger="click"
     class="TimelineMenu"
-    :class="{ 'open': isOpen }"
+    :class="{ open: isOpen }"
     :margin="{ left: -15, right: -200 }"
     :bound-to="{ x: 'container' }"
     popover-class="timeline-menu-popover-wrap"
     @show="openMenu"
-    @close="() => isOpen = false"
+    @close="() => (isOpen = false)"
   >
-    <template v-slot:content>
+    <template #content>
       <div class="timeline-menu-popover popover-default">
         <TimelineMenuContent />
       </div>
     </template>
-    <template v-slot:trigger>
+    <template #trigger>
       <button class="button-unstyled title timeline-menu-title">
         <span class="timeline-title">{{ timelineName() }}</span>
         <span>
@@ -32,7 +32,7 @@
   </Popover>
 </template>
 
-<script src="./timeline_menu.js" ></script>
+<script src="./timeline_menu.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -169,5 +169,4 @@
     }
   }
 }
-
 </style>
diff --git a/src/components/timeline_menu/timeline_menu_content.js b/src/components/timeline_menu/timeline_menu_content.js
index df15030be..b2ed17194 100644
--- a/src/components/timeline_menu/timeline_menu_content.js
+++ b/src/components/timeline_menu/timeline_menu_content.js
@@ -9,22 +9,16 @@ import {
   faCircle
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome,
-  faCircle
-)
+library.add(faUsers, faGlobe, faBookmark, faEnvelope, faHome, faCircle)
 
 const TimelineMenuContent = {
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser,
-      privateMode: state => state.instance.private,
-      federating: state => state.instance.federating,
-      showBubbleTimeline: state => (state.instance.localBubbleInstances.length > 0)
+      currentUser: (state) => state.users.currentUser,
+      privateMode: (state) => state.instance.private,
+      federating: (state) => state.instance.federating,
+      showBubbleTimeline: (state) =>
+        state.instance.localBubbleInstances.length > 0
     })
   }
 }
diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
index 27aece22c..e7a76e6f4 100644
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ b/src/components/timeline_menu/timeline_menu_content.vue
@@ -7,13 +7,14 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="home"
         />
         <span
           :title="$t('nav.home_timeline_description')"
           :aria-label="$t('nav.home_timeline_description')"
-        >{{ $t("nav.home_timeline") }}</span>
+          >{{ $t('nav.home_timeline') }}</span
+        >
       </router-link>
     </li>
     <li v-if="currentUser && showBubbleTimeline">
@@ -23,13 +24,14 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="circle"
         />
         <span
           :title="$t('nav.bubble_timeline_description')"
           :aria-label="$t('nav.bubble_timeline_description')"
-        >{{ $t("nav.bubble_timeline") }}</span>
+          >{{ $t('nav.bubble_timeline') }}</span
+        >
       </router-link>
     </li>
     <li v-if="currentUser || !privateMode">
@@ -39,13 +41,14 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="users"
         />
         <span
           :title="$t('nav.public_timeline_description')"
           :aria-label="$t('nav.public_timeline_description')"
-        >{{ $t("nav.public_tl") }}</span>
+          >{{ $t('nav.public_tl') }}</span
+        >
       </router-link>
     </li>
     <li v-if="federating && (currentUser || !privateMode)">
@@ -55,29 +58,31 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="globe"
         />
         <span
           :title="$t('nav.twkn_timeline_description')"
           :aria-label="$t('nav.twkn_timeline_description')"
-        >{{ $t("nav.twkn") }}</span>
+          >{{ $t('nav.twkn') }}</span
+        >
       </router-link>
     </li>
     <li v-if="currentUser">
       <router-link
         class="menu-item"
-        :to="{ name: 'bookmarks'}"
+        :to="{ name: 'bookmarks' }"
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="bookmark"
         />
         <span
           :title="$t('nav.bookmarks')"
           :aria-label="$t('nav.bookmarks')"
-        >{{ $t("nav.bookmarks") }}</span>
+          >{{ $t('nav.bookmarks') }}</span
+        >
       </router-link>
     </li>
     <li v-if="currentUser">
@@ -87,22 +92,23 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="envelope"
         />
         <span
           :title="$t('nav.dms')"
           :aria-label="$t('nav.dms')"
-        >{{ $t("nav.dms") }}</span>
+          >{{ $t('nav.dms') }}</span
+        >
       </router-link>
     </li>
   </ul>
 </template>
 
-<script src="./timeline_menu_content.js" ></script>
+<script src="./timeline_menu_content.js"></script>
 
 <style lang="scss">
-@import "../../_variables.scss";
+@import '../../_variables.scss';
 .timeline-desc {
   text-decoration: none;
   color: var(--text, $fallback--text);
diff --git a/src/components/timeline_menu_tabs/timeline_menu_content.js b/src/components/timeline_menu_tabs/timeline_menu_content.js
index 9c2ef0c98..45e44fff8 100644
--- a/src/components/timeline_menu_tabs/timeline_menu_content.js
+++ b/src/components/timeline_menu_tabs/timeline_menu_content.js
@@ -8,21 +8,14 @@ import {
   faHome
 } from '@fortawesome/free-solid-svg-icons'
 import { faCircle } from '@fortawesome/free-regular-svg-icons'
-library.add(
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome,
-  faCircle
-)
+library.add(faUsers, faGlobe, faBookmark, faEnvelope, faHome, faCircle)
 
 const TimelineMenuContent = {
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser,
-      privateMode: state => state.instance.private,
-      federating: state => state.instance.federating
+      currentUser: (state) => state.users.currentUser,
+      privateMode: (state) => state.instance.private,
+      federating: (state) => state.instance.federating
     })
   }
 }
diff --git a/src/components/timeline_menu_tabs/timeline_menu_content.vue b/src/components/timeline_menu_tabs/timeline_menu_content.vue
index 32548c49e..316712c6c 100644
--- a/src/components/timeline_menu_tabs/timeline_menu_content.vue
+++ b/src/components/timeline_menu_tabs/timeline_menu_content.vue
@@ -7,13 +7,14 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="home"
         />
         <span
           :title="$t('nav.home_timeline_description')"
           :aria-label="$t('nav.home_timeline_description')"
-        >{{ $t("nav.home_timeline") }}</span>
+          >{{ $t('nav.home_timeline') }}</span
+        >
       </router-link>
     </li>
     <li v-if="currentUser">
@@ -23,13 +24,14 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           :icon="['far', 'circle']"
         />
         <span
           :title="$t('nav.bubble_timeline_description')"
           :aria-label="$t('nav.bubble_timeline_description')"
-        >{{ $t("nav.bubble_timeline") }}</span>
+          >{{ $t('nav.bubble_timeline') }}</span
+        >
       </router-link>
     </li>
     <li v-if="currentUser || !privateMode">
@@ -39,13 +41,14 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="users"
         />
         <span
           :title="$t('nav.public_timeline_description')"
           :aria-label="$t('nav.public_timeline_description')"
-        >{{ $t("nav.public_tl") }}</span>
+          >{{ $t('nav.public_tl') }}</span
+        >
       </router-link>
     </li>
     <li v-if="federating && (currentUser || !privateMode)">
@@ -55,29 +58,31 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="globe"
         />
         <span
           :title="$t('nav.twkn_timeline_description')"
           :aria-label="$t('nav.twkn_timeline_description')"
-        >{{ $t("nav.twkn") }}</span>
+          >{{ $t('nav.twkn') }}</span
+        >
       </router-link>
     </li>
     <li v-if="currentUser">
       <router-link
         class="menu-item"
-        :to="{ name: 'bookmarks'}"
+        :to="{ name: 'bookmarks' }"
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="bookmark"
         />
         <span
           :title="$t('nav.bookmarks')"
           :aria-label="$t('nav.bookmarks')"
-        >{{ $t("nav.bookmarks") }}</span>
+          >{{ $t('nav.bookmarks') }}</span
+        >
       </router-link>
     </li>
     <li v-if="currentUser">
@@ -87,22 +92,23 @@
       >
         <FAIcon
           fixed-width
-          class="fa-scale-110 fa-old-padding "
+          class="fa-scale-110 fa-old-padding"
           icon="envelope"
         />
         <span
           :title="$t('nav.dms')"
           :aria-label="$t('nav.dms')"
-        >{{ $t("nav.dms") }}</span>
+          >{{ $t('nav.dms') }}</span
+        >
       </router-link>
     </li>
   </ul>
 </template>
 
-<script src="./timeline_menu_content.js" ></script>
+<script src="./timeline_menu_content.js"></script>
 
 <style lang="scss">
-@import "../../_variables.scss";
+@import '../../_variables.scss';
 .timeline-desc {
   text-decoration: none;
   color: var(--text, $fallback--text);
diff --git a/src/components/timeline_menu_tabs/timeline_menu_tabs.js b/src/components/timeline_menu_tabs/timeline_menu_tabs.js
index 40192b39a..b8d44520d 100644
--- a/src/components/timeline_menu_tabs/timeline_menu_tabs.js
+++ b/src/components/timeline_menu_tabs/timeline_menu_tabs.js
@@ -1,9 +1,7 @@
 import Popover from '../popover/popover.vue'
 import TimelineMenuContent from './timeline_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faChevronDown
-} from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faChevronDown)
 
@@ -11,9 +9,9 @@ library.add(faChevronDown)
 // because nav panel benefits from the same information.
 export const timelineNames = () => {
   return {
-    'friends': 'nav.home_timeline',
-    'bookmarks': 'nav.bookmarks',
-    'dms': 'nav.dms',
+    friends: 'nav.home_timeline',
+    bookmarks: 'nav.bookmarks',
+    dms: 'nav.dms',
     'public-timeline': 'nav.public_tl',
     'public-external-timeline': 'nav.twkn',
     'bubble-timeline': 'nav.bubble_timeline'
@@ -25,26 +23,26 @@ const TimelineMenuTabs = {
     Popover,
     TimelineMenuContent
   },
-  data () {
+  data() {
     return {
       isOpen: false
     }
   },
-  created () {
+  created() {
     if (timelineNames()[this.$route.name]) {
       this.$store.dispatch('setLastTimeline', this.$route.name)
     }
   },
   computed: {
-    currentUser () {
+    currentUser() {
       return this.$store.state.users.currentUser
     },
-    privateMode () {
+    privateMode() {
       return this.$store.state.instance.private
     }
   },
   methods: {
-    timelineName () {
+    timelineName() {
       const route = this.$route.name
       if (route === 'tag-timeline') {
         return '#' + this.$route.params.tag
diff --git a/src/components/timeline_menu_tabs/timeline_menu_tabs.vue b/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
index f017fa1f9..462329daf 100644
--- a/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
+++ b/src/components/timeline_menu_tabs/timeline_menu_tabs.vue
@@ -53,7 +53,7 @@
   </div>
 </template>
 
-<script src="./timeline_menu_tabs.js" ></script>
+<script src="./timeline_menu_tabs.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 33d9a2580..3bfb7a778 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -2,35 +2,29 @@ import StillImage from '../still-image/still-image.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 
-import {
-  faRobot
-} from '@fortawesome/free-solid-svg-icons'
+import { faRobot } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faRobot
-)
+library.add(faRobot)
 
 const UserAvatar = {
-  props: [
-    'user',
-    'betterShadow',
-    'compact',
-    'bot'
-  ],
-  data () {
+  props: ['user', 'betterShadow', 'compact', 'bot'],
+  data() {
     return {
       showPlaceholder: false,
-      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`
+      defaultAvatar: `${
+        this.$store.state.instance.server +
+        this.$store.state.instance.defaultAvatar
+      }`
     }
   },
   components: {
     StillImage
   },
   methods: {
-    imgSrc (src) {
-      return (!src || this.showPlaceholder) ? this.defaultAvatar : src
+    imgSrc(src) {
+      return !src || this.showPlaceholder ? this.defaultAvatar : src
     },
-    imageLoadError () {
+    imageLoadError() {
       this.showPlaceholder = true
     }
   }
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index f4d294df3..4d9b6f55d 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -89,6 +89,5 @@
     color: #fff;
     border-radius: var(--tooltipRadius);
   }
-
 }
 </style>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index f7bff63ff..7d44f1974 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -18,43 +18,45 @@ import {
   faEdit
 } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faRss,
-  faBell,
-  faSearchPlus,
-  faExternalLinkAlt,
-  faEdit
-)
+library.add(faRss, faBell, faSearchPlus, faExternalLinkAlt, faEdit)
 
 export default {
   props: [
-    'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
+    'userId',
+    'switcher',
+    'selected',
+    'hideBio',
+    'rounded',
+    'bordered',
+    'allowZoomingAvatar'
   ],
-  data () {
+  data() {
     return {
       followRequestInProgress: false,
       betterShadow: this.$store.state.interface.browserSupport.cssFilter,
       showingConfirmMute: false
     }
   },
-  created () {
+  created() {
     this.$store.dispatch('fetchUserRelationship', this.user.id)
   },
   computed: {
-    user () {
+    user() {
       return this.$store.getters.findUser(this.userId)
     },
-    relationship () {
+    relationship() {
       return this.$store.getters.relationship(this.userId)
     },
-    classes () {
-      return [{
-        'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-rounded': this.rounded === true, // set border-radius for all sides
-        'user-card-bordered': this.bordered === true // set border for all sides
-      }]
+    classes() {
+      return [
+        {
+          'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
+          'user-card-rounded': this.rounded === true, // set border-radius for all sides
+          'user-card-bordered': this.bordered === true // set border for all sides
+        }
+      ]
     },
-    style () {
+    style() {
       return {
         backgroundImage: [
           `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
@@ -62,59 +64,76 @@ export default {
         ].join(', ')
       }
     },
-    isOtherUser () {
+    isOtherUser() {
       return this.user.id !== this.$store.state.users.currentUser.id
     },
-    subscribeUrl () {
+    subscribeUrl() {
       // eslint-disable-next-line no-undef
       const serverUrl = new URL(this.user.statusnet_profile_url)
       return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
     },
-    loggedIn () {
+    loggedIn() {
       return this.$store.state.users.currentUser
     },
-    dailyAvg () {
-      const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
+    dailyAvg() {
+      const days = Math.ceil(
+        (new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)
+      )
       return Math.round(this.user.statuses_count / days)
     },
     userHighlightType: {
-      get () {
-        const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+      get() {
+        const data =
+          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
         return (data && data.type) || 'disabled'
       },
-      set (type) {
-        const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+      set(type) {
+        const data =
+          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
         if (type !== 'disabled') {
-          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type })
+          this.$store.dispatch('setHighlight', {
+            user: this.user.screen_name,
+            color: (data && data.color) || '#FFFFFF',
+            type
+          })
         } else {
-          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
+          this.$store.dispatch('setHighlight', {
+            user: this.user.screen_name,
+            color: undefined
+          })
         }
       },
       ...mapGetters(['mergedConfig'])
     },
     userHighlightColor: {
-      get () {
-        const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
+      get() {
+        const data =
+          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
         return data && data.color
       },
-      set (color) {
-        this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
+      set(color) {
+        this.$store.dispatch('setHighlight', {
+          user: this.user.screen_name,
+          color
+        })
       }
     },
-    visibleRole () {
+    visibleRole() {
       const rights = this.user.rights
-      if (!rights) { return }
+      if (!rights) {
+        return
+      }
       const validRole = rights.admin || rights.moderator
       const roleTitle = rights.admin ? 'admin' : 'moderator'
       return validRole && roleTitle
     },
-    hideFollowsCount () {
+    hideFollowsCount() {
       return this.isOtherUser && this.user.hide_follows_count
     },
-    hideFollowersCount () {
+    hideFollowersCount() {
       return this.isOtherUser && this.user.hide_followers_count
     },
-    shouldConfirmMute () {
+    shouldConfirmMute() {
       return this.mergedConfig.modalOnMute
     },
     ...mapGetters(['mergedConfig'])
@@ -131,42 +150,42 @@ export default {
     ConfirmModal
   },
   methods: {
-    refetchRelationship () {
+    refetchRelationship() {
       return this.$store.dispatch('fetchUserRelationship', this.user.id)
     },
-    showConfirmMute () {
+    showConfirmMute() {
       this.showingConfirmMute = true
     },
-    hideConfirmMute () {
+    hideConfirmMute() {
       this.showingConfirmMute = false
     },
-    muteUser () {
+    muteUser() {
       if (!this.shouldConfirmMute) {
         this.doMuteUser()
       } else {
         this.showConfirmMute()
       }
     },
-    doMuteUser () {
+    doMuteUser() {
       this.$store.dispatch('muteUser', this.user.id)
       this.hideConfirmMute()
     },
-    unmuteUser () {
+    unmuteUser() {
       this.$store.dispatch('unmuteUser', this.user.id)
     },
-    subscribeUser () {
+    subscribeUser() {
       return this.$store.dispatch('subscribeUser', this.user.id)
     },
-    unsubscribeUser () {
+    unsubscribeUser() {
       return this.$store.dispatch('unsubscribeUser', this.user.id)
     },
-    setProfileView (v) {
+    setProfileView(v) {
       if (this.switcher) {
         const store = this.$store
         store.commit('setProfileView', { v })
       }
     },
-    linkClicked ({ target }) {
+    linkClicked({ target }) {
       if (target.tagName === 'SPAN') {
         target = target.parentNode
       }
@@ -174,16 +193,17 @@ export default {
         window.open(target.href, '_blank')
       }
     },
-    userProfileLink (user) {
+    userProfileLink(user) {
       return generateProfileLink(
-        user.id, user.screen_name,
+        user.id,
+        user.screen_name,
         this.$store.state.instance.restrictedNicknames
       )
     },
-    openProfileTab () {
+    openProfileTab() {
       this.$store.dispatch('openSettingsModalTab', 'profile')
     },
-    zoomAvatar () {
+    zoomAvatar() {
       const attachment = {
         url: this.user.profile_image_url_original,
         mimetype: 'image'
@@ -191,8 +211,11 @@ export default {
       this.$store.dispatch('setMedia', [attachment])
       this.$store.dispatch('setCurrentMedia', attachment)
     },
-    mentionUser () {
-      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
+    mentionUser() {
+      this.$store.dispatch('openPostStatusModal', {
+        replyTo: true,
+        repliedUser: this.user
+      })
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2eefbad8c..d36fc2dba 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -122,7 +122,8 @@
               <span
                 v-if="!mergedConfig.hideUserStats && !hideBio"
                 class="dailyAvg"
-              >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
+                >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span
+              >
             </div>
           </div>
         </div>
@@ -146,21 +147,21 @@
             <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
             <input
               v-if="userHighlightType !== 'disabled'"
-              :id="'userHighlightColorTx'+user.id"
+              :id="'userHighlightColorTx' + user.id"
               v-model="userHighlightColor"
               class="userHighlightText"
               type="text"
-            >
+            />
             <input
               v-if="userHighlightType !== 'disabled'"
-              :id="'userHighlightColor'+user.id"
+              :id="'userHighlightColor' + user.id"
               v-model="userHighlightColor"
               class="userHighlightCl"
               type="color"
-            >
+            />
             {{ ' ' }}
             <Select
-              :id="'userHighlightSel'+user.id"
+              :id="'userHighlightSel' + user.id"
               v-model="userHighlightType"
               class="userHighlightSel"
             >
@@ -271,21 +272,25 @@
           @click.prevent="setProfileView('statuses')"
         >
           <h5>{{ $t('user_card.statuses') }}</h5>
-          <span>{{ user.statuses_count }} <br></span>
+          <span>{{ user.statuses_count }} <br /></span>
         </div>
         <div
           class="user-count"
           @click.prevent="setProfileView('friends')"
         >
           <h5>{{ $t('user_card.followees') }}</h5>
-          <span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
+          <span>{{
+            hideFollowsCount ? $t('user_card.hidden') : user.friends_count
+          }}</span>
         </div>
         <div
           class="user-count"
           @click.prevent="setProfileView('followers')"
         >
           <h5>{{ $t('user_card.followers') }}</h5>
-          <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
+          <span>{{
+            hideFollowersCount ? $t('user_card.hidden') : user.followers_count
+          }}</span>
         </div>
       </div>
       <RichContent
@@ -310,9 +315,7 @@
           tag="span"
         >
           <template #user>
-            <span
-              v-text="user.screen_name_ui"
-            />
+            <span v-text="user.screen_name_ui" />
           </template>
         </i18n-t>
       </confirm-modal>
diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
index e24eb9f78..15cf59fa8 100644
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -4,22 +4,20 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
 const UserListPopover = {
   name: 'UserListPopover',
-  props: [
-    'users'
-  ],
+  props: ['users'],
   components: {
     RichContent,
     Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
-    UserAvatar: defineAsyncComponent(() => import('../user_avatar/user_avatar.vue'))
+    UserAvatar: defineAsyncComponent(() =>
+      import('../user_avatar/user_avatar.vue')
+    )
   },
   computed: {
-    usersCapped () {
+    usersCapped() {
       return this.users.slice(0, 16)
     }
   }
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index bdc3aa923..c7ed9d893 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -4,14 +4,14 @@
     placement="top"
     :offset="{ y: 5 }"
   >
-    <template v-slot:trigger>
+    <template #trigger>
       <slot />
     </template>
-    <template v-slot:content>
+    <template #content>
       <div class="user-list-popover">
         <template v-if="users.length">
           <div
-            v-for="(user) in usersCapped"
+            v-for="user in usersCapped"
             :key="user.id"
             class="user-list-row"
           >
@@ -24,12 +24,14 @@
               <!-- eslint-disable vue/no-v-html -->
               <RichContent
                 class="username"
-                :title="'@'+user.screen_name_ui"
+                :title="'@' + user.screen_name_ui"
                 :html="user.name_html"
                 :emoji="user.emoji"
               />
               <!-- eslint-enable vue/no-v-html -->
-              <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
+              <span class="user-list-screen-name">{{
+                user.screen_name_ui
+              }}</span>
             </div>
           </div>
         </template>
@@ -45,7 +47,7 @@
   </Popover>
 </template>
 
-<script src="./user_list_popover.js" ></script>
+<script src="./user_list_popover.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -77,5 +79,4 @@
     }
   }
 }
-
 </style>
diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js
index c2f51eb61..57a6ae4bd 100644
--- a/src/components/user_panel/user_panel.js
+++ b/src/components/user_panel/user_panel.js
@@ -5,8 +5,10 @@ import { mapState } from 'vuex'
 
 const UserPanel = {
   computed: {
-    signedIn () { return this.user },
-    ...mapState({ user: state => state.users.currentUser })
+    signedIn() {
+      return this.user
+    },
+    ...mapState({ user: (state) => state.users.currentUser })
   },
   components: {
     AuthForm,
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 42c5ec9ef..09465164e 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -9,17 +9,16 @@ import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import { debounce } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faCircleNotch
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
-library.add(
-  faCircleNotch
-)
+library.add(faCircleNotch)
 
 const FollowerList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
-  select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)),
+  select: (props, $store) =>
+    get($store.getters.findUser(props.userId), 'followerIds', []).map((id) =>
+      $store.getters.findUser(id)
+    ),
   destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId),
   childPropName: 'items',
   additionalPropNames: ['userId']
@@ -27,16 +26,20 @@ const FollowerList = withLoadMore({
 
 const FriendList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId),
-  select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)),
+  select: (props, $store) =>
+    get($store.getters.findUser(props.userId), 'friendIds', []).map((id) =>
+      $store.getters.findUser(id)
+    ),
   destroy: (props, $store) => $store.dispatch('clearFriends', props.userId),
   childPropName: 'items',
   additionalPropNames: ['userId']
 })(List)
 
-const isUserPage = ({ name }) => name === 'user-profile' || name === 'external-user-profile'
+const isUserPage = ({ name }) =>
+  name === 'user-profile' || name === 'external-user-profile'
 
 const UserProfile = {
-  data () {
+  data() {
     return {
       error: false,
       userId: null,
@@ -46,57 +49,62 @@ const UserProfile = {
       noteLoading: false
     }
   },
-  created () {
+  created() {
     const defaultTabKey = this.defaultTabKey
     const routeParams = this.$route.params
     const hash = (get(this.$route, 'hash') || defaultTabKey).replace(/^#/, '')
     if (hash !== '') this.tab = hash
     this.load(routeParams.name || routeParams.id)
   },
-  unmounted () {
+  unmounted() {
     this.stopFetching()
   },
   computed: {
-    timeline () {
+    timeline() {
       return this.$store.state.statuses.timelines.user
     },
-    replies () {
+    replies() {
       return this.$store.state.statuses.timelines.replies
     },
-    favorites () {
+    favorites() {
       return this.$store.state.statuses.timelines.favorites
     },
-    media () {
+    media() {
       return this.$store.state.statuses.timelines.media
     },
-    isUs () {
-      return this.userId && this.$store.state.users.currentUser.id &&
+    isUs() {
+      return (
+        this.userId &&
+        this.$store.state.users.currentUser.id &&
         this.userId === this.$store.state.users.currentUser.id
+      )
     },
-    user () {
+    user() {
       return this.$store.getters.findUser(this.userId)
     },
-    isExternal () {
+    isExternal() {
       return this.$route.name === 'external-user-profile'
     },
-    followsTabVisible () {
+    followsTabVisible() {
       return this.isUs || !this.user.hide_follows
     },
-    followersTabVisible () {
+    followersTabVisible() {
       return this.isUs || !this.user.hide_followers
     },
-    currentUser () {
+    currentUser() {
       return this.$store.state.users.currentUser
     },
-    defaultTabKey () {
-      return this.$store.getters.mergedConfig.userProfileDefaultTab || 'statuses'
+    defaultTabKey() {
+      return (
+        this.$store.getters.mergedConfig.userProfileDefaultTab || 'statuses'
+      )
     }
   },
   methods: {
-    setFooterRef (el) {
+    setFooterRef(el) {
       this.footerRef = el
     },
-    onRouteChange (previousTab, nextTab) {
+    onRouteChange(previousTab, nextTab) {
       const timelineTabMap = {
         statuses: 'user',
         replies: 'replies',
@@ -109,10 +117,13 @@ const UserProfile = {
 
       if (timeline) {
         this.stopFetching()
-        this.$store.dispatch('startFetchingTimeline', { timeline: timeline, userId: this.userId })
+        this.$store.dispatch('startFetchingTimeline', {
+          timeline: timeline,
+          userId: this.userId
+        })
       }
     },
-    load (userNameOrId) {
+    load(userNameOrId) {
       const loadById = (userId) => {
         this.userId = userId
         const timelines = ['user', 'favorites', 'replies', 'media']
@@ -134,14 +145,16 @@ const UserProfile = {
         loadById(user.id)
         this.note = user.relationship.note
       } else {
-        this.$store.dispatch('fetchUser', userNameOrId)
+        this.$store
+          .dispatch('fetchUser', userNameOrId)
           .then(({ id, relationship }) => {
             this.note = relationship.note
             return loadById(id)
           })
           .catch((reason) => {
             const errorMessage = get(reason, 'error.error')
-            if (errorMessage === 'No user with such user_id') { // Known error
+            if (errorMessage === 'No user with such user_id') {
+              // Known error
               this.error = this.$t('user_profile.profile_does_not_exist')
             } else if (errorMessage) {
               this.error = errorMessage
@@ -151,21 +164,21 @@ const UserProfile = {
           })
       }
     },
-    stopFetching () {
+    stopFetching() {
       this.$store.dispatch('stopFetchingTimeline', 'user')
       this.$store.dispatch('stopFetchingTimeline', 'replies')
       this.$store.dispatch('stopFetchingTimeline', 'favorites')
       this.$store.dispatch('stopFetchingTimeline', 'media')
     },
-    switchUser (userNameOrId) {
+    switchUser(userNameOrId) {
       this.stopFetching()
       this.load(userNameOrId)
     },
-    onTabSwitch (tab) {
+    onTabSwitch(tab) {
       this.tab = tab
       this.$router.replace({ hash: `#${tab}` })
     },
-    linkClicked ({ target }) {
+    linkClicked({ target }) {
       if (target.tagName === 'SPAN') {
         target = target.parentNode
       }
@@ -173,7 +186,7 @@ const UserProfile = {
         window.open(target.href, '_blank')
       }
     },
-    setNote () {
+    setNote() {
       this.noteLoading = true
       this.debounceSetNote()
     },
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index d16483e2d..2e2df893d 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -98,7 +98,7 @@
           :disabled="!user.friends_count"
         >
           <FriendList :user-id="userId">
-            <template v-slot:item="{item}">
+            <template #item="{ item }">
               <FollowCard :user="item" />
             </template>
           </FriendList>
@@ -110,7 +110,7 @@
           :disabled="!user.followers_count"
         >
           <FollowerList :user-id="userId">
-            <template v-slot:item="{item}">
+            <template #item="{ item }">
               <FollowCard
                 :user="item"
                 :no-follows-you="isUs"
@@ -217,7 +217,8 @@
         margin: 0 0 0 0.25em;
       }
 
-      .user-profile-field-name, .user-profile-field-value {
+      .user-profile-field-name,
+      .user-profile-field-value {
         line-height: 1.3;
         text-overflow: ellipsis;
         white-space: nowrap;
diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index 8d171b2d5..0b1d51000 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/src/components/user_reporting_modal/user_reporting_modal.js
@@ -1,4 +1,3 @@
-
 import Status from '../status/status.vue'
 import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.vue'
@@ -11,7 +10,7 @@ const UserReportingModal = {
     Checkbox,
     Modal
   },
-  data () {
+  data() {
     return {
       comment: '',
       forward: false,
@@ -21,36 +20,39 @@ const UserReportingModal = {
     }
   },
   computed: {
-    isLoggedIn () {
+    isLoggedIn() {
       return !!this.$store.state.users.currentUser
     },
-    isOpen () {
+    isOpen() {
       return this.isLoggedIn && this.$store.state.reports.modalActivated
     },
-    userId () {
+    userId() {
       return this.$store.state.reports.userId
     },
-    user () {
+    user() {
       return this.$store.getters.findUser(this.userId)
     },
-    remoteInstance () {
-      return !this.user.is_local && this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
+    remoteInstance() {
+      return (
+        !this.user.is_local &&
+        this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1)
+      )
     },
-    statuses () {
+    statuses() {
       return this.$store.state.reports.statuses
     },
-    preTickedIds () {
+    preTickedIds() {
       return this.$store.state.reports.preTickedIds
     }
   },
   watch: {
     userId: 'resetState',
-    preTickedIds (newValue) {
+    preTickedIds(newValue) {
       this.statusIdsToReport = newValue
     }
   },
   methods: {
-    resetState () {
+    resetState() {
       // Reset state
       this.comment = ''
       this.forward = false
@@ -58,10 +60,10 @@ const UserReportingModal = {
       this.processing = false
       this.error = false
     },
-    closeModal () {
+    closeModal() {
       this.$store.dispatch('closeUserReportingModal')
     },
-    reportUser () {
+    reportUser() {
       this.processing = true
       this.error = false
       const params = {
@@ -70,7 +72,8 @@ const UserReportingModal = {
         forward: this.forward,
         statusIds: this.statusIdsToReport
       }
-      this.$store.state.api.backendInteractor.reportUser({ ...params })
+      this.$store.state.api.backendInteractor
+        .reportUser({ ...params })
         .then(() => {
           this.processing = false
           this.resetState()
@@ -81,13 +84,13 @@ const UserReportingModal = {
           this.error = true
         })
     },
-    clearError () {
+    clearError() {
       this.error = false
     },
-    isChecked (statusId) {
+    isChecked(statusId) {
       return this.statusIdsToReport.indexOf(statusId) !== -1
     },
-    toggleStatus (checked, statusId) {
+    toggleStatus(checked, statusId) {
       if (checked === this.isChecked(statusId)) {
         return
       }
@@ -95,12 +98,17 @@ const UserReportingModal = {
       if (checked) {
         this.statusIdsToReport.push(statusId)
       } else {
-        this.statusIdsToReport.splice(this.statusIdsToReport.indexOf(statusId), 1)
+        this.statusIdsToReport.splice(
+          this.statusIdsToReport.indexOf(statusId),
+          1
+        )
       }
     },
-    resize (e) {
+    resize(e) {
       const target = e.target || e
-      if (!(target instanceof window.Element)) { return }
+      if (!(target instanceof window.Element)) {
+        return
+      }
       // Auto is needed to make textbox shrink when removing lines
       target.style.height = 'auto'
       target.style.height = `${target.scrollHeight}px`
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 030ce2c42..4b61460c8 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -45,7 +45,7 @@
         </div>
         <div class="user-reporting-panel-right">
           <List :items="statuses">
-            <template v-slot:item="{item}">
+            <template #item="{ item }">
               <div class="status-fadein user-reporting-panel-sitem">
                 <Status
                   :in-conversation="false"
@@ -54,7 +54,9 @@
                 />
                 <Checkbox
                   :model-value="isChecked(item.id)"
-                  @update:model-value="checked => toggleStatus(checked, item.id)"
+                  @update:model-value="
+                    (checked) => toggleStatus(checked, item.id)
+                  "
                 />
               </div>
             </template>
diff --git a/src/components/video_attachment/video_attachment.js b/src/components/video_attachment/video_attachment.js
index 107b89855..eebb7b608 100644
--- a/src/components/video_attachment/video_attachment.js
+++ b/src/components/video_attachment/video_attachment.js
@@ -1,7 +1,6 @@
-
 const VideoAttachment = {
   props: ['attachment', 'controls'],
-  data () {
+  data() {
     return {
       blocksSuspend: false,
       // Start from true because removing "loop" property seems buggy in Vue
@@ -9,7 +8,7 @@ const VideoAttachment = {
     }
   },
   computed: {
-    loopVideo () {
+    loopVideo() {
       if (this.$store.getters.mergedConfig.loopVideoSilentOnly) {
         return !this.hasAudio
       }
@@ -17,7 +16,7 @@ const VideoAttachment = {
     }
   },
   methods: {
-    onPlaying (e) {
+    onPlaying(e) {
       this.setHasAudio(e)
       if (this.loopVideo) {
         this.$emit('play', { looping: true })
@@ -25,10 +24,10 @@ const VideoAttachment = {
       }
       this.$emit('play')
     },
-    onPaused (e) {
+    onPaused(e) {
       this.$emit('pause')
     },
-    setHasAudio (e) {
+    setHasAudio(e) {
       const target = e.srcElement || e.target
       // If hasAudio is false, we've already marked this video to not have audio,
       // a video can't gain audio out of nowhere so don't bother checking again.
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index ecd97dd7c..6e770b05a 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -5,18 +5,19 @@ const WhoToFollow = {
   components: {
     FollowCard
   },
-  data () {
+  data() {
     return {
       users: []
     }
   },
-  mounted () {
+  mounted() {
     this.getWhoToFollow()
   },
   methods: {
-    showWhoToFollow (reply) {
+    showWhoToFollow(reply) {
       reply.forEach((i, index) => {
-        this.$store.state.api.backendInteractor.fetchUser({ id: i.acct })
+        this.$store.state.api.backendInteractor
+          .fetchUser({ id: i.acct })
           .then((externalUser) => {
             if (!externalUser.error) {
               this.$store.commit('addNewUsers', [externalUser])
@@ -25,13 +26,12 @@ const WhoToFollow = {
           })
       })
     },
-    getWhoToFollow () {
+    getWhoToFollow() {
       const credentials = this.$store.state.users.currentUser.credentials
       if (credentials) {
-        apiService.suggestions({ credentials: credentials })
-          .then((reply) => {
-            this.showWhoToFollow(reply)
-          })
+        apiService.suggestions({ credentials: credentials }).then((reply) => {
+          this.showWhoToFollow(reply)
+        })
       }
     }
   }
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 3a17d0e29..8c89e2f01 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/src/components/who_to_follow/who_to_follow.vue
@@ -16,5 +16,4 @@
 
 <script src="./who_to_follow.js"></script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 818e8bd57..b48b4b98c 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -2,7 +2,7 @@ import apiService from '../../services/api/api.service.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { shuffle } from 'lodash'
 
-function showWhoToFollow (panel, reply) {
+function showWhoToFollow(panel, reply) {
   const shuffled = shuffle(reply)
 
   panel.usersToFollow.forEach((toFollow, index) => {
@@ -13,7 +13,8 @@ function showWhoToFollow (panel, reply) {
     toFollow.img = img
     toFollow.name = name
 
-    panel.$store.state.api.backendInteractor.fetchUser({ id: name })
+    panel.$store.state.api.backendInteractor
+      .fetchUser({ id: name })
       .then((externalUser) => {
         if (!externalUser.error) {
           panel.$store.commit('addNewUsers', [externalUser])
@@ -23,16 +24,15 @@ function showWhoToFollow (panel, reply) {
   })
 }
 
-function getWhoToFollow (panel) {
+function getWhoToFollow(panel) {
   var credentials = panel.$store.state.users.currentUser.credentials
   if (credentials) {
-    panel.usersToFollow.forEach(toFollow => {
+    panel.usersToFollow.forEach((toFollow) => {
       toFollow.name = 'Loading...'
     })
-    apiService.suggestions({ credentials: credentials })
-      .then((reply) => {
-        showWhoToFollow(panel, reply)
-      })
+    apiService.suggestions({ credentials: credentials }).then((reply) => {
+      showWhoToFollow(panel, reply)
+    })
   }
 }
 
@@ -44,13 +44,17 @@ const WhoToFollowPanel = {
     user: function () {
       return this.$store.state.users.currentUser.screen_name
     },
-    suggestionsEnabled () {
+    suggestionsEnabled() {
       return this.$store.state.instance.suggestionsEnabled
     }
   },
   methods: {
-    userProfileLink (id, name) {
-      return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
+    userProfileLink(id, name) {
+      return generateProfileLink(
+        id,
+        name,
+        this.$store.state.instance.restrictedNicknames
+      )
     }
   },
   watch: {
@@ -60,19 +64,16 @@ const WhoToFollowPanel = {
       }
     }
   },
-  mounted:
-    function () {
-      this.usersToFollow = new Array(3).fill().map(x => (
-        {
-          img: this.$store.state.instance.defaultAvatar,
-          name: '',
-          id: 0
-        }
-      ))
-      if (this.suggestionsEnabled) {
-        getWhoToFollow(this)
-      }
+  mounted: function () {
+    this.usersToFollow = new Array(3).fill().map((x) => ({
+      img: this.$store.state.instance.defaultAvatar,
+      name: '',
+      id: 0
+    }))
+    if (this.suggestionsEnabled) {
+      getWhoToFollow(this)
     }
+  }
 }
 
 export default WhoToFollowPanel
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 518acd970..ad976b11f 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -12,10 +12,10 @@
           :key="user.id"
           class="who-to-follow-items"
         >
-          <img :src="user.img">
+          <img :src="user.img" />
           <router-link :to="userProfileLink(user.id, user.name)">
-            {{ user.name }}
-          </router-link><br>
+            {{ user.name }} </router-link
+          ><br />
         </p>
         <p class="who-to-follow-more">
           <router-link :to="{ name: 'who-to-follow' }">
@@ -27,30 +27,30 @@
   </div>
 </template>
 
-<script src="./who_to_follow_panel.js" ></script>
+<script src="./who_to_follow_panel.js"></script>
 
 <style lang="scss">
-  .who-to-follow * {
-    vertical-align: middle;
-  }
-  .who-to-follow img {
-    width: 32px;
-    height: 32px;
-  }
-  .who-to-follow {
-    padding: 0em 1em;
-    margin: 0px;
-  }
-  .who-to-follow-items {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 0px;
-    margin: 1em 0em;
-  }
-  .who-to-follow-more {
-    padding: 0px;
-    margin: 1em 0em;
-    text-align: center;
-  }
+.who-to-follow * {
+  vertical-align: middle;
+}
+.who-to-follow img {
+  width: 32px;
+  height: 32px;
+}
+.who-to-follow {
+  padding: 0em 1em;
+  margin: 0px;
+}
+.who-to-follow-items {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0px;
+  margin: 1em 0em;
+}
+.who-to-follow-more {
+  padding: 0px;
+  margin: 1em 0em;
+  text-align: center;
+}
 </style>
diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js
index b6d167902..1327e240a 100644
--- a/src/directives/body_scroll_lock.js
+++ b/src/directives/body_scroll_lock.js
@@ -15,14 +15,22 @@ const disableBodyScroll = (el) => {
       // If previousNavPaddingRight is already set, don't set it again.
       if (previousNavPaddingRight === undefined) {
         const navEl = document.getElementById('nav')
-        previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
-        navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+        previousNavPaddingRight = window
+          .getComputedStyle(navEl)
+          .getPropertyValue('padding-right')
+        navEl.style.paddingRight = previousNavPaddingRight
+          ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)`
+          : `${scrollBarGap}px`
       }
       // If previousAppBgWrapeprRight is already set, don't set it again.
       if (previousAppBgWrapperRight === undefined) {
         const appBgWrapperEl = document.getElementById('app_bg_wrapper')
-        previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
-        appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+        previousAppBgWrapperRight = window
+          .getComputedStyle(appBgWrapperEl)
+          .getPropertyValue('right')
+        appBgWrapperEl.style.right = previousAppBgWrapperRight
+          ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)`
+          : `${scrollBarGap}px`
       }
       document.body.classList.add('scroll-locked')
     }
@@ -34,12 +42,14 @@ const enableBodyScroll = (el) => {
   setTimeout(() => {
     if (lockerEls.size === 0) {
       if (previousNavPaddingRight !== undefined) {
-        document.getElementById('nav').style.paddingRight = previousNavPaddingRight
+        document.getElementById('nav').style.paddingRight =
+          previousNavPaddingRight
         // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
         previousNavPaddingRight = undefined
       }
       if (previousAppBgWrapperRight !== undefined) {
-        document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
+        document.getElementById('app_bg_wrapper').style.right =
+          previousAppBgWrapperRight
         // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
         previousAppBgWrapperRight = undefined
       }
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index 735a10dee..491d292ac 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -4,12 +4,13 @@ import { each, get, set, cloneDeep } from 'lodash'
 
 let loaded = false
 
-const defaultReducer = (state, paths) => (
-  paths.length === 0 ? state : paths.reduce((substate, path) => {
-    set(substate, path, get(state, path))
-    return substate
-  }, {})
-)
+const defaultReducer = (state, paths) =>
+  paths.length === 0
+    ? state
+    : paths.reduce((substate, path) => {
+        set(substate, path, get(state, path))
+        return substate
+      }, {})
 
 const saveImmedeatelyActions = [
   'markNotificationsAsSeen',
@@ -26,7 +27,7 @@ const defaultStorage = (() => {
   return localforage
 })()
 
-export default function createPersistedState ({
+export default function createPersistedState({
   key = 'vuex-lz',
   paths = [],
   getState = (key, storage) => {
@@ -43,22 +44,22 @@ export default function createPersistedState ({
   },
   reducer = defaultReducer,
   storage = defaultStorage,
-  subscriber = store => handler => store.subscribe(handler)
+  subscriber = (store) => (handler) => store.subscribe(handler)
 } = {}) {
   return getState(key, storage).then((savedState) => {
-    return store => {
+    return (store) => {
       try {
         if (savedState !== null && typeof savedState === 'object') {
           // build user cache
           const usersState = savedState.users || {}
           usersState.usersObject = {}
           const users = usersState.users || []
-          each(users, (user) => { usersState.usersObject[user.id] = user })
+          each(users, (user) => {
+            usersState.usersObject[user.id] = user
+          })
           savedState.users = usersState
 
-          store.replaceState(
-            merge({}, store.state, savedState)
-          )
+          store.replaceState(merge({}, store.state, savedState))
         }
         loaded = true
       } catch (e) {
@@ -69,18 +70,26 @@ export default function createPersistedState ({
       subscriber(store)((mutation, state) => {
         try {
           if (saveImmedeatelyActions.includes(mutation.type)) {
-            setState(key, reducer(cloneDeep(state), paths), storage)
-              .then(success => {
+            setState(key, reducer(cloneDeep(state), paths), storage).then(
+              (success) => {
                 if (typeof success !== 'undefined') {
-                  if (mutation.type === 'setOption' || mutation.type === 'setCurrentUser') {
+                  if (
+                    mutation.type === 'setOption' ||
+                    mutation.type === 'setCurrentUser'
+                  ) {
                     store.dispatch('settingsSaved', { success })
                   }
                 }
-              }, error => {
-                if (mutation.type === 'setOption' || mutation.type === 'setCurrentUser') {
+              },
+              (error) => {
+                if (
+                  mutation.type === 'setOption' ||
+                  mutation.type === 'setCurrentUser'
+                ) {
                   store.dispatch('settingsSaved', { error })
                 }
-              })
+              }
+            )
           }
         } catch (e) {
           console.error("Couldn't persist state:")
diff --git a/src/lib/push_notifications_plugin.js b/src/lib/push_notifications_plugin.js
index f75bb8230..82c9a0c31 100644
--- a/src/lib/push_notifications_plugin.js
+++ b/src/lib/push_notifications_plugin.js
@@ -6,12 +6,26 @@ export default (store) => {
     const user = state.users.currentUser
 
     const isUserMutation = mutation.type === 'setCurrentUser'
-    const isVapidMutation = mutation.type === 'setInstanceOption' && mutation.payload.name === 'vapidPublicKey'
-    const isPermMutation = mutation.type === 'setNotificationPermission' && mutation.payload === 'granted'
-    const isUserConfigMutation = mutation.type === 'setOption' && mutation.payload.name === 'webPushNotifications'
-    const isVisibilityMutation = mutation.type === 'setOption' && mutation.payload.name === 'notificationVisibility'
+    const isVapidMutation =
+      mutation.type === 'setInstanceOption' &&
+      mutation.payload.name === 'vapidPublicKey'
+    const isPermMutation =
+      mutation.type === 'setNotificationPermission' &&
+      mutation.payload === 'granted'
+    const isUserConfigMutation =
+      mutation.type === 'setOption' &&
+      mutation.payload.name === 'webPushNotifications'
+    const isVisibilityMutation =
+      mutation.type === 'setOption' &&
+      mutation.payload.name === 'notificationVisibility'
 
-    if (isUserMutation || isVapidMutation || isPermMutation || isUserConfigMutation || isVisibilityMutation) {
+    if (
+      isUserMutation ||
+      isVapidMutation ||
+      isPermMutation ||
+      isUserConfigMutation ||
+      isVisibilityMutation
+    ) {
       if (user && vapidPublicKey && permission && webPushNotification) {
         return store.dispatch('registerPushNotifications')
       } else if (isUserConfigMutation && !webPushNotification) {
diff --git a/src/main.js b/src/main.js
index 01a44c968..6741703b1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -44,23 +44,22 @@ const i18n = createI18n({
 messages.setLanguage(i18n, currentLocale)
 
 const persistedStateOptions = {
-  paths: [
-    'config',
-    'users.lastLoginName',
-    'oauth'
-  ]
-};
+  paths: ['config', 'users.lastLoginName', 'oauth']
+}
 
-(async () => {
+;(async () => {
   if ('serviceWorker' in navigator) {
     // declaring scope manually
-    navigator.serviceWorker.register('/sw-pleroma.js', {scope: '/'}).then((registration) => {
-      console.log('Service worker registration succeeded:', registration);
-    }, /*catch*/ (error) => {
-      console.error(`Service worker registration failed: ${error}`);
-    });
+    navigator.serviceWorker.register('/sw-pleroma.js', { scope: '/' }).then(
+      (registration) => {
+        console.log('Service worker registration succeeded:', registration)
+      },
+      /*catch*/ (error) => {
+        console.error(`Service worker registration failed: ${error}`)
+      }
+    )
   } else {
-    console.error('Service workers are not supported.');
+    console.error('Service workers are not supported.')
   }
 
   let storageError = false
@@ -105,7 +104,10 @@ const persistedStateOptions = {
     // strict: process.env.NODE_ENV !== 'production'
   })
   if (storageError) {
-    store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+    store.dispatch('pushGlobalNotice', {
+      messageKey: 'errors.storage_unavailable',
+      level: 'error'
+    })
   }
   afterStoreSetup({ store, i18n })
 })()
diff --git a/src/modules/announcements.js b/src/modules/announcements.js
index 0f8b6d09e..1fe8597d8 100644
--- a/src/modules/announcements.js
+++ b/src/modules/announcements.js
@@ -6,11 +6,11 @@ export const defaultState = {
 }
 
 export const mutations = {
-  setAnnouncements (state, announcements) {
+  setAnnouncements(state, announcements) {
     state.announcements = announcements
   },
-  setAnnouncementRead (state, { id, read }) {
-    const index = state.announcements.findIndex(a => a.id === id)
+  setAnnouncementRead(state, { id, read }) {
+    const index = state.announcements.findIndex((a) => a.id === id)
 
     if (index < 0) {
       return
@@ -18,18 +18,20 @@ export const mutations = {
 
     state.announcements[index].read = read
   },
-  setFetchAnnouncementsTimer (state, timer) {
+  setFetchAnnouncementsTimer(state, timer) {
     state.fetchAnnouncementsTimer = timer
   }
 }
 
 export const getters = {
-  unreadAnnouncementCount (state, _getters, rootState) {
+  unreadAnnouncementCount(state, _getters, rootState) {
     if (!rootState.users.currentUser) {
       return 0
     }
 
-    const unread = state.announcements.filter(announcement => !(announcement.inactive || announcement.read))
+    const unread = state.announcements.filter(
+      (announcement) => !(announcement.inactive || announcement.read)
+    )
     return unread.length
   }
 }
@@ -39,7 +41,7 @@ const announcements = {
   mutations,
   getters,
   actions: {
-    fetchAnnouncements (store) {
+    fetchAnnouncements(store) {
       const currentUser = store.rootState.users.currentUser
       const isAdmin = currentUser && currentUser.role === 'admin'
 
@@ -48,15 +50,18 @@ const announcements = {
           return store.rootState.api.backendInteractor.fetchAnnouncements()
         }
 
-        const all = await store.rootState.api.backendInteractor.adminFetchAnnouncements()
-        const visible = await store.rootState.api.backendInteractor.fetchAnnouncements()
+        const all =
+          await store.rootState.api.backendInteractor.adminFetchAnnouncements()
+        const visible =
+          await store.rootState.api.backendInteractor.fetchAnnouncements()
         const visibleObject = visible.reduce((a, c) => {
           a[c.id] = c
           return a
         }, {})
-        const getWithinVisible = announcement => visibleObject[announcement.id]
+        const getWithinVisible = (announcement) =>
+          visibleObject[announcement.id]
 
-        all.forEach(announcement => {
+        all.forEach((announcement) => {
           const visibleAnnouncement = getWithinVisible(announcement)
           if (!visibleAnnouncement) {
             announcement.inactive = true
@@ -68,46 +73,52 @@ const announcements = {
         return all
       }
 
-      return getAnnouncements()
-        .then(announcements => {
-          store.commit('setAnnouncements', announcements)
-        })
+      return getAnnouncements().then((announcements) => {
+        store.commit('setAnnouncements', announcements)
+      })
     },
-    markAnnouncementAsRead (store, id) {
-      return store.rootState.api.backendInteractor.dismissAnnouncement({ id })
+    markAnnouncementAsRead(store, id) {
+      return store.rootState.api.backendInteractor
+        .dismissAnnouncement({ id })
         .then(() => {
           store.commit('setAnnouncementRead', { id, read: true })
         })
     },
-    startFetchingAnnouncements (store) {
+    startFetchingAnnouncements(store) {
       if (store.state.fetchAnnouncementsTimer) {
         return
       }
 
-      const interval = setInterval(() => store.dispatch('fetchAnnouncements'), FETCH_ANNOUNCEMENT_INTERVAL_MS)
+      const interval = setInterval(
+        () => store.dispatch('fetchAnnouncements'),
+        FETCH_ANNOUNCEMENT_INTERVAL_MS
+      )
       store.commit('setFetchAnnouncementsTimer', interval)
 
       return store.dispatch('fetchAnnouncements')
     },
-    stopFetchingAnnouncements (store) {
+    stopFetchingAnnouncements(store) {
       const interval = store.state.fetchAnnouncementsTimer
       store.commit('setFetchAnnouncementsTimer', undefined)
       clearInterval(interval)
     },
-    postAnnouncement (store, { content, startsAt, endsAt, allDay }) {
-      return store.rootState.api.backendInteractor.postAnnouncement({ content, startsAt, endsAt, allDay })
+    postAnnouncement(store, { content, startsAt, endsAt, allDay }) {
+      return store.rootState.api.backendInteractor
+        .postAnnouncement({ content, startsAt, endsAt, allDay })
         .then(() => {
           return store.dispatch('fetchAnnouncements')
         })
     },
-    editAnnouncement (store, { id, content, startsAt, endsAt, allDay }) {
-      return store.rootState.api.backendInteractor.editAnnouncement({ id, content, startsAt, endsAt, allDay })
+    editAnnouncement(store, { id, content, startsAt, endsAt, allDay }) {
+      return store.rootState.api.backendInteractor
+        .editAnnouncement({ id, content, startsAt, endsAt, allDay })
         .then(() => {
           return store.dispatch('fetchAnnouncements')
         })
     },
-    deleteAnnouncement (store, id) {
-      return store.rootState.api.backendInteractor.deleteAnnouncement({ id })
+    deleteAnnouncement(store, id) {
+      return store.rootState.api.backendInteractor
+        .deleteAnnouncement({ id })
         .then(() => {
           return store.dispatch('fetchAnnouncements')
         })
diff --git a/src/modules/api.js b/src/modules/api.js
index c54aa4fb8..988f9428c 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -24,32 +24,32 @@ const api = {
     followRequests: []
   },
   mutations: {
-    setBackendInteractor (state, backendInteractor) {
+    setBackendInteractor(state, backendInteractor) {
       state.backendInteractor = backendInteractor
     },
-    addFetcher (state, { fetcherName, fetcher }) {
+    addFetcher(state, { fetcherName, fetcher }) {
       state.fetchers[fetcherName] = fetcher
     },
-    removeFetcher (state, { fetcherName, fetcher }) {
+    removeFetcher(state, { fetcherName, fetcher }) {
       state.fetchers[fetcherName].stop()
       delete state.fetchers[fetcherName]
     },
-    setWsToken (state, token) {
+    setWsToken(state, token) {
       state.wsToken = token
     },
-    setSocket (state, socket) {
+    setSocket(state, socket) {
       state.socket = socket
     },
-    setFollowRequests (state, value) {
+    setFollowRequests(state, value) {
       state.followRequests = value
     },
-    setMastoUserSocketStatus (state, value) {
+    setMastoUserSocketStatus(state, value) {
       state.mastoUserSocketStatus = value
     },
-    incrementRetryMultiplier (state) {
+    incrementRetryMultiplier(state) {
       state.retryMultiplier = Math.max(++state.retryMultiplier, 3)
     },
-    resetRetryMultiplier (state) {
+    resetRetryMultiplier(state) {
       state.retryMultiplier = 1
     }
   },
@@ -59,15 +59,14 @@ const api = {
      *
      * @param {Boolean} [initial] - whether this enabling happened at boot time or not
      */
-    enableMastoSockets (store, initial) {
+    enableMastoSockets(store, initial) {
       const { state, dispatch, commit } = store
       // Do not initialize unless nonexistent or closed
       if (
         state.mastoUserSocket &&
-          ![
-            WebSocket.CLOSED,
-            WebSocket.CLOSING
-          ].includes(state.mastoUserSocket.getState())
+        ![WebSocket.CLOSED, WebSocket.CLOSING].includes(
+          state.mastoUserSocket.getState()
+        )
       ) {
         return
       }
@@ -78,7 +77,7 @@ const api = {
       }
       return dispatch('startMastoUserSocket')
     },
-    disableMastoSockets (store) {
+    disableMastoSockets(store) {
       const { state, dispatch, commit } = store
       if (!state.mastoUserSocket) return
       commit('setMastoUserSocketStatus', WSConnectionStatus.DISABLED)
@@ -86,12 +85,14 @@ const api = {
     },
 
     // MastoAPI 'User' sockets
-    startMastoUserSocket (store) {
+    startMastoUserSocket(store) {
       return new Promise((resolve, reject) => {
         try {
           const { state, commit, dispatch, rootState } = store
           const timelineData = rootState.statuses.timelines.friends
-          state.mastoUserSocket = state.backendInteractor.startUserSocket({ store })
+          state.mastoUserSocket = state.backendInteractor.startUserSocket({
+            store
+          })
           state.mastoUserSocket.addEventListener(
             'message',
             ({ detail: message }) => {
@@ -102,18 +103,25 @@ const api = {
                   notifications: [message.notification],
                   older: false
                 })
-              } else if (message.event === 'update' && isVisible(store, message.status, replyVisibility)) {
+              } else if (
+                message.event === 'update' &&
+                isVisible(store, message.status, replyVisibility)
+              ) {
                 dispatch('addNewStatuses', {
                   statuses: [message.status],
                   userId: false,
                   showImmediately: timelineData.visibleStatuses.length === 0,
                   timeline: 'friends'
                 })
-              } else if (message.event === 'status.update' && isVisible(store, message.status, replyVisibility)) {
+              } else if (
+                message.event === 'status.update' &&
+                isVisible(store, message.status, replyVisibility)
+              ) {
                 dispatch('addNewStatuses', {
                   statuses: [message.status],
                   userId: false,
-                  showImmediately: message.status.id in timelineData.visibleStatusesObject,
+                  showImmediately:
+                    message.status.id in timelineData.visibleStatusesObject,
                   timeline: 'friends'
                 })
               } else if (message.event === 'delete') {
@@ -123,7 +131,10 @@ const api = {
           )
           state.mastoUserSocket.addEventListener('open', () => {
             // Do not show notification when we just opened up the page
-            if (state.mastoUserSocketStatus !== WSConnectionStatus.STARTING_INITIAL) {
+            if (
+              state.mastoUserSocketStatus !==
+              WSConnectionStatus.STARTING_INITIAL
+            ) {
               dispatch('pushGlobalNotice', {
                 level: 'success',
                 messageKey: 'timeline.socket_reconnected',
@@ -131,110 +142,128 @@ const api = {
               })
             }
             // Stop polling if we were errored or disabled
-            if (new Set([
-              WSConnectionStatus.ERROR,
-              WSConnectionStatus.DISABLED
-            ]).has(state.mastoUserSocketStatus)) {
+            if (
+              new Set([
+                WSConnectionStatus.ERROR,
+                WSConnectionStatus.DISABLED
+              ]).has(state.mastoUserSocketStatus)
+            ) {
               dispatch('stopFetchingTimeline', { timeline: 'friends' })
               dispatch('stopFetchingNotifications')
             }
             commit('resetRetryMultiplier')
             commit('setMastoUserSocketStatus', WSConnectionStatus.JOINED)
           })
-          state.mastoUserSocket.addEventListener('error', ({ detail: error }) => {
-            console.error('Error in MastoAPI websocket:', error)
-          })
-          state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => {
-            const ignoreCodes = new Set([
-              1000, // Normal (intended) closure
-              1001 // Going away
-            ])
-            const { code } = closeEvent
-            if (ignoreCodes.has(code)) {
-              console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`)
-              commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
-            } else {
-              console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`)
-              setTimeout(() => {
-                dispatch('startMastoUserSocket')
-              }, retryTimeout(state.retryMultiplier))
-              commit('incrementRetryMultiplier')
-              if (state.mastoUserSocketStatus !== WSConnectionStatus.ERROR) {
-                dispatch('startFetchingTimeline', { timeline: 'friends' })
-                dispatch('startFetchingNotifications')
-                dispatch('startFetchingAnnouncements')
-                dispatch('startFetchingReports')
-                dispatch('pushGlobalNotice', {
-                  level: 'error',
-                  messageKey: 'timeline.socket_broke',
-                  messageArgs: [code],
-                  timeout: 5000
-                })
-              }
-              commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
+          state.mastoUserSocket.addEventListener(
+            'error',
+            ({ detail: error }) => {
+              console.error('Error in MastoAPI websocket:', error)
             }
-          })
+          )
+          state.mastoUserSocket.addEventListener(
+            'close',
+            ({ detail: closeEvent }) => {
+              const ignoreCodes = new Set([
+                1000, // Normal (intended) closure
+                1001 // Going away
+              ])
+              const { code } = closeEvent
+              if (ignoreCodes.has(code)) {
+                console.debug(
+                  `Not restarting socket becasue of closure code ${code} is in ignore list`
+                )
+                commit('setMastoUserSocketStatus', WSConnectionStatus.CLOSED)
+              } else {
+                console.warn(
+                  `MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`
+                )
+                setTimeout(() => {
+                  dispatch('startMastoUserSocket')
+                }, retryTimeout(state.retryMultiplier))
+                commit('incrementRetryMultiplier')
+                if (state.mastoUserSocketStatus !== WSConnectionStatus.ERROR) {
+                  dispatch('startFetchingTimeline', { timeline: 'friends' })
+                  dispatch('startFetchingNotifications')
+                  dispatch('startFetchingAnnouncements')
+                  dispatch('startFetchingReports')
+                  dispatch('pushGlobalNotice', {
+                    level: 'error',
+                    messageKey: 'timeline.socket_broke',
+                    messageArgs: [code],
+                    timeout: 5000
+                  })
+                }
+                commit('setMastoUserSocketStatus', WSConnectionStatus.ERROR)
+              }
+            }
+          )
           resolve()
         } catch (e) {
           reject(e)
         }
       })
     },
-    stopMastoUserSocket ({ state, dispatch }) {
+    stopMastoUserSocket({ state, dispatch }) {
       dispatch('startFetchingTimeline', { timeline: 'friends' })
       dispatch('startFetchingNotifications')
       state.mastoUserSocket.close()
     },
 
     // Timelines
-    startFetchingTimeline (store, {
-      timeline = 'friends',
-      tag = false,
-      userId = false,
-      listId = false
-    }) {
+    startFetchingTimeline(
+      store,
+      { timeline = 'friends', tag = false, userId = false, listId = false }
+    ) {
       if (store.state.fetchers[timeline]) return
 
       const fetcher = store.state.backendInteractor.startFetchingTimeline({
-        timeline, store, userId, listId, tag
+        timeline,
+        store,
+        userId,
+        listId,
+        tag
       })
       store.commit('addFetcher', { fetcherName: timeline, fetcher })
     },
-    stopFetchingTimeline (store, timeline) {
+    stopFetchingTimeline(store, timeline) {
       const fetcher = store.state.fetchers[timeline]
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: timeline, fetcher })
     },
-    fetchTimeline (store, timeline, { ...rest }) {
+    fetchTimeline(store, timeline, { ...rest }) {
       store.state.backendInteractor.fetchTimeline({
         store,
         timeline,
         ...rest
       })
     },
-    startFetchingConfig (store) {
+    startFetchingConfig(store) {
       if (store.state.fetchers.config) return
 
-      const fetcher = store.state.backendInteractor.startFetchingConfig({ store })
+      const fetcher = store.state.backendInteractor.startFetchingConfig({
+        store
+      })
       store.commit('addFetcher', { fetcherName: 'config', fetcher })
     },
-    stopFetchingConfig (store) {
+    stopFetchingConfig(store) {
       const fetcher = store.state.fetchers.config
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'config', fetcher })
     },
     // Notifications
-    startFetchingNotifications (store) {
+    startFetchingNotifications(store) {
       if (store.state.fetchers.notifications) return
-      const fetcher = store.state.backendInteractor.startFetchingNotifications({ store })
+      const fetcher = store.state.backendInteractor.startFetchingNotifications({
+        store
+      })
       store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
     },
-    stopFetchingNotifications (store) {
+    stopFetchingNotifications(store) {
       const fetcher = store.state.fetchers.notifications
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
     },
-    fetchNotifications (store, { ...rest }) {
+    fetchNotifications(store, { ...rest }) {
       store.state.backendInteractor.fetchNotifications({
         store,
         ...rest
@@ -242,75 +271,91 @@ const api = {
     },
 
     // Follow requests
-    startFetchingFollowRequests (store) {
+    startFetchingFollowRequests(store) {
       if (store.state.fetchers['followRequests']) return
-      const fetcher = store.state.backendInteractor.startFetchingFollowRequests({ store })
+      const fetcher = store.state.backendInteractor.startFetchingFollowRequests(
+        { store }
+      )
 
       store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
     },
-    stopFetchingFollowRequests (store) {
+    stopFetchingFollowRequests(store) {
       const fetcher = store.state.fetchers.followRequests
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
     },
-    removeFollowRequest (store, request) {
+    removeFollowRequest(store, request) {
       let requests = store.state.followRequests.filter((it) => it !== request)
       store.commit('setFollowRequests', requests)
     },
 
     // Lists
-    startFetchingLists (store) {
+    startFetchingLists(store) {
       if (store.state.fetchers['lists']) return
-      const fetcher = store.state.backendInteractor.startFetchingLists({ store })
+      const fetcher = store.state.backendInteractor.startFetchingLists({
+        store
+      })
       store.commit('addFetcher', { fetcherName: 'lists', fetcher })
     },
-    stopFetchingLists (store) {
+    stopFetchingLists(store) {
       const fetcher = store.state.fetchers.lists
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
     },
 
     // Lists
-    startFetchingAnnouncements (store) {
+    startFetchingAnnouncements(store) {
       if (store.state.fetchers['announcements']) return
-      const fetcher = store.state.backendInteractor.startFetchingAnnouncements({ store })
+      const fetcher = store.state.backendInteractor.startFetchingAnnouncements({
+        store
+      })
       store.commit('addFetcher', { fetcherName: 'announcements', fetcher })
     },
-    stopFetchingAnnouncements (store) {
+    stopFetchingAnnouncements(store) {
       const fetcher = store.state.fetchers.announcements
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'announcements', fetcher })
     },
 
     // Reports
-    startFetchingReports (store) {
+    startFetchingReports(store) {
       if (store.state.fetchers['reports']) return
-      const fetcher = store.state.backendInteractor.startFetchingReports({ store })
+      const fetcher = store.state.backendInteractor.startFetchingReports({
+        store
+      })
       store.commit('addFetcher', { fetcherName: 'reports', fetcher })
     },
-    stopFetchingReports (store) {
+    stopFetchingReports(store) {
       const fetcher = store.state.fetchers.reports
       if (!fetcher) return
       store.commit('removeFetcher', { fetcherName: 'reports', fetcher })
     },
 
-    getSupportedTranslationlanguages (store) {
-      store.state.backendInteractor.getSupportedTranslationlanguages({ store })
+    getSupportedTranslationlanguages(store) {
+      store.state.backendInteractor
+        .getSupportedTranslationlanguages({ store })
         .then((data) => {
-          store.dispatch('setInstanceOption', { name: 'supportedTranslationLanguages', value: data })
+          store.dispatch('setInstanceOption', {
+            name: 'supportedTranslationLanguages',
+            value: data
+          })
         })
     },
-    listSettingsProfiles (store) {
-      store.state.backendInteractor.listSettingsProfiles({ store })
+    listSettingsProfiles(store) {
+      store.state.backendInteractor
+        .listSettingsProfiles({ store })
         .then((data) => {
-          store.commit('setInstanceOption', { name: 'settingsProfiles', value: data })
+          store.commit('setInstanceOption', {
+            name: 'settingsProfiles',
+            value: data
+          })
         })
     },
     // Pleroma websocket
-    setWsToken (store, token) {
+    setWsToken(store, token) {
       store.commit('setWsToken', token)
     },
-    disconnectFromSocket ({ commit, state }) {
+    disconnectFromSocket({ commit, state }) {
       state.socket && state.socket.disconnect()
       commit('setSocket', null)
     }
diff --git a/src/modules/auth_flow.js b/src/modules/auth_flow.js
index 956d40e80..5f20abc23 100644
--- a/src/modules/auth_flow.js
+++ b/src/modules/auth_flow.js
@@ -38,29 +38,29 @@ const getters = {
 
 // mutations
 const mutations = {
-  setInitialStrategy (state, strategy) {
+  setInitialStrategy(state, strategy) {
     if (strategy) {
       state.initStrategy = strategy
       state.strategy = strategy
     }
   },
-  requirePassword (state) {
+  requirePassword(state) {
     state.strategy = PASSWORD_STRATEGY
   },
-  requireToken (state) {
+  requireToken(state) {
     state.strategy = TOKEN_STRATEGY
   },
-  requireMFA (state, { settings }) {
+  requireMFA(state, { settings }) {
     state.settings = settings
     state.strategy = TOTP_STRATEGY // default strategy of MFA
   },
-  requireRecovery (state) {
+  requireRecovery(state) {
     state.strategy = RECOVERY_STRATEGY
   },
-  requireTOTP (state) {
+  requireTOTP(state) {
     state.strategy = TOTP_STRATEGY
   },
-  abortMFA (state) {
+  abortMFA(state) {
     resetState(state)
   }
 }
@@ -68,7 +68,7 @@ const mutations = {
 // actions
 const actions = {
   // eslint-disable-next-line camelcase
-  async login ({ state, dispatch, commit }, { access_token }) {
+  async login({ state, dispatch, commit }, { access_token }) {
     commit('setToken', access_token, { root: true })
     await dispatch('loginUser', access_token, { root: true })
     resetState(state)
diff --git a/src/modules/config.js b/src/modules/config.js
index 854dae500..01f69152a 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -128,32 +128,37 @@ export const instanceDefaultProperties = Object.entries(defaultState)
 const config = {
   state: { ...defaultState },
   getters: {
-    defaultConfig (state, getters, rootState, rootGetters) {
+    defaultConfig(state, getters, rootState, rootGetters) {
       const { instance } = rootState
       return {
         ...defaultState,
         ...Object.fromEntries(
-          instanceDefaultProperties.map(key => [key, instance[key]])
+          instanceDefaultProperties.map((key) => [key, instance[key]])
         )
       }
     },
-    mergedConfig (state, getters, rootState, rootGetters) {
+    mergedConfig(state, getters, rootState, rootGetters) {
       const { defaultConfig } = rootGetters
       return {
         ...defaultConfig,
         // Do not override with undefined
-        ...Object.fromEntries(Object.entries(state).filter(([k, v]) => v !== undefined))
+        ...Object.fromEntries(
+          Object.entries(state).filter(([k, v]) => v !== undefined)
+        )
       }
     }
   },
   mutations: {
-    setOption (state, { name, value }) {
+    setOption(state, { name, value }) {
       state[name] = value
     },
-    setHighlight (state, { user, color, type }) {
+    setHighlight(state, { user, color, type }) {
       const data = this.state.config.highlight[user]
       if (color || type) {
-        state.highlight[user] = { color: color || data.color, type: type || data.type }
+        state.highlight[user] = {
+          color: color || data.color,
+          type: type || data.type
+        }
       } else {
         delete state.highlight[user]
       }
@@ -161,7 +166,10 @@ const config = {
   },
   actions: {
     syncSettings: (store) => {
-      store.commit('setOption', { name: 'profileVersion', value: store.state.profileVersion + 1 })
+      store.commit('setOption', {
+        name: 'profileVersion',
+        value: store.state.profileVersion + 1
+      })
       const notice = {
         level: 'info',
         messageKey: 'settings_profile.synchronizing',
@@ -169,34 +177,41 @@ const config = {
         timeout: 5000
       }
       store.dispatch('pushGlobalNotice', notice)
-      store.rootState.api.backendInteractor.saveSettingsProfile({
-        settings: store.state, profileName: store.state.profile, version: store.state.profileVersion
-      }).then(() => {
-        store.dispatch('removeGlobalNotice', notice)
-        store.dispatch('pushGlobalNotice', {
-          level: 'success',
-          messageKey: 'settings_profile.synchronized',
-          messageArgs: { profile: store.state.profile },
-          timeout: 2000
+      store.rootState.api.backendInteractor
+        .saveSettingsProfile({
+          settings: store.state,
+          profileName: store.state.profile,
+          version: store.state.profileVersion
         })
-        store.dispatch('listSettingsProfiles')
-      }).catch((err) => {
-        store.dispatch('removeGlobalNotice', notice)
-        store.dispatch('pushGlobalNotice', {
-          level: 'error',
-          messageKey: 'settings_profile.synchronization_error',
-          messageArgs: { error: err.message },
-          timeout: 5000
+        .then(() => {
+          store.dispatch('removeGlobalNotice', notice)
+          store.dispatch('pushGlobalNotice', {
+            level: 'success',
+            messageKey: 'settings_profile.synchronized',
+            messageArgs: { profile: store.state.profile },
+            timeout: 2000
+          })
+          store.dispatch('listSettingsProfiles')
+        })
+        .catch((err) => {
+          store.dispatch('removeGlobalNotice', notice)
+          store.dispatch('pushGlobalNotice', {
+            level: 'error',
+            messageKey: 'settings_profile.synchronization_error',
+            messageArgs: { error: err.message },
+            timeout: 5000
+          })
+          console.error(err)
         })
-        console.error(err)
-      })
     },
-    deleteSettingsProfile (store, name) {
-      store.rootState.api.backendInteractor.deleteSettingsProfile({ profileName: name }).then(() => {
-        store.dispatch('listSettingsProfiles')
-      })
+    deleteSettingsProfile(store, name) {
+      store.rootState.api.backendInteractor
+        .deleteSettingsProfile({ profileName: name })
+        .then(() => {
+          store.dispatch('listSettingsProfiles')
+        })
     },
-    loadSettings ({ dispatch }, data) {
+    loadSettings({ dispatch }, data) {
       const knownKeys = new Set(Object.keys(defaultState))
       const presentKeys = new Set(Object.keys(data))
       const intersection = new Set()
@@ -206,14 +221,14 @@ const config = {
         }
       }
 
-      intersection.forEach(
-        name => dispatch('setOption', { name, value: data[name] })
+      intersection.forEach((name) =>
+        dispatch('setOption', { name, value: data[name] })
       )
     },
-    setHighlight ({ commit, dispatch }, { user, color, type }) {
+    setHighlight({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', { user, color, type })
     },
-    setOption ({ commit, dispatch }, { name, value, manual }) {
+    setOption({ commit, dispatch }, { name, value, manual }) {
       commit('setOption', { name, value })
       if (manual === true) {
         dispatch('syncSettings')
@@ -228,7 +243,10 @@ const config = {
           break
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
-          Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
+          Cookies.set(
+            BACKEND_LANGUAGE_COOKIE_NAME,
+            localeService.internalToBackendLocale(value)
+          )
           dispatch('setInstanceOption', { name: 'interfaceLanguage', value })
           break
         case 'thirdColumnMode':
@@ -236,13 +254,17 @@ const config = {
           break
       }
     },
-    getSettingsProfile (store, forceUpdate = false) {
+    getSettingsProfile(store, forceUpdate = false) {
       const profile = store.state.profile
-      store.rootState.api.backendInteractor.getSettingsProfile({ store, profileName: profile })
+      store.rootState.api.backendInteractor
+        .getSettingsProfile({ store, profileName: profile })
         .then(({ settings, version }) => {
           console.log('found settings version', version)
-          if (forceUpdate || (version > store.state.profileVersion)) {
-            store.commit('setOption', { name: 'profileVersion', value: version })
+          if (forceUpdate || version > store.state.profileVersion) {
+            store.commit('setOption', {
+              name: 'profileVersion',
+              value: version
+            })
             Object.entries(settings).forEach(([name, value]) => {
               if (store.state[name] !== value) {
                 store.dispatch('setOption', { name, value })
diff --git a/src/modules/editStatus.js b/src/modules/editStatus.js
index fd3165191..4796877f6 100644
--- a/src/modules/editStatus.js
+++ b/src/modules/editStatus.js
@@ -4,19 +4,19 @@ const editStatus = {
     modalActivated: false
   },
   mutations: {
-    openEditStatusModal (state, params) {
+    openEditStatusModal(state, params) {
       state.params = params
       state.modalActivated = true
     },
-    closeEditStatusModal (state) {
+    closeEditStatusModal(state) {
       state.modalActivated = false
     }
   },
   actions: {
-    openEditStatusModal ({ commit }, params) {
+    openEditStatusModal({ commit }, params) {
       commit('openEditStatusModal', params)
     },
-    closeEditStatusModal ({ commit }) {
+    closeEditStatusModal({ commit }) {
       commit('closeEditStatusModal')
     }
   }
diff --git a/src/modules/errors.js b/src/modules/errors.js
index ca89dc0fa..1ffcbb37c 100644
--- a/src/modules/errors.js
+++ b/src/modules/errors.js
@@ -1,6 +1,6 @@
 import { capitalize } from 'lodash'
 
-export function humanizeErrors (errors) {
+export function humanizeErrors(errors) {
   return Object.entries(errors).reduce((errs, [k, val]) => {
     let message = val.reduce((acc, message) => {
       let key = capitalize(k.replace(/_/g, ' '))
diff --git a/src/modules/instance.js b/src/modules/instance.js
index c8c718d09..c1fef474a 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -111,26 +111,28 @@ const defaultState = {
 const instance = {
   state: defaultState,
   mutations: {
-    setInstanceOption (state, { name, value }) {
+    setInstanceOption(state, { name, value }) {
       if (typeof value !== 'undefined') {
         state[name] = value
       }
     },
-    setKnownDomains (state, domains) {
+    setKnownDomains(state, domains) {
       state.knownDomains = domains
     }
   },
   getters: {
-    instanceDefaultConfig (state) {
+    instanceDefaultConfig(state) {
       return instanceDefaultProperties
-        .map(key => [key, state[key]])
+        .map((key) => [key, state[key]])
         .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
     },
-    instanceDomain (state) {
+    instanceDomain(state) {
       return new URL(state.server).hostname
     },
-    remoteInteractionLink (state) {
-      const server = state.server.endsWith('/') ? state.server.slice(0, -1) : state.server
+    remoteInteractionLink(state) {
+      const server = state.server.endsWith('/')
+        ? state.server.slice(0, -1)
+        : state.server
       const link = server + REMOTE_INTERACTION_URL
 
       return ({ statusId, nickname }) => {
@@ -143,7 +145,7 @@ const instance = {
     }
   },
   actions: {
-    setInstanceOption ({ commit, dispatch }, { name, value }) {
+    setInstanceOption({ commit, dispatch }, { name, value }) {
       commit('setInstanceOption', { name, value })
       switch (name) {
         case 'name':
@@ -154,21 +156,23 @@ const instance = {
           break
       }
     },
-    async getStaticEmoji ({ commit }) {
+    async getStaticEmoji({ commit }) {
       try {
         const res = await window.fetch('/static/emoji.json')
         if (res.ok) {
           const values = await res.json()
-          const emoji = Object.keys(values).map((key) => {
-            return {
-              displayText: key,
-              imageUrl: false,
-              replacement: values[key]
-            }
-          }).sort((a, b) => a.name > b.name ? 1 : -1)
+          const emoji = Object.keys(values)
+            .map((key) => {
+              return {
+                displayText: key,
+                imageUrl: false,
+                replacement: values[key]
+              }
+            })
+            .sort((a, b) => (a.name > b.name ? 1 : -1))
           commit('setInstanceOption', { name: 'emoji', value: emoji })
         } else {
-          throw (res)
+          throw res
         }
       } catch (e) {
         console.warn("Can't load static emoji")
@@ -176,26 +180,34 @@ const instance = {
       }
     },
 
-    async getCustomEmoji ({ commit, state }) {
+    async getCustomEmoji({ commit, state }) {
       try {
         const res = await window.fetch('/api/pleroma/emoji.json')
         if (res.ok) {
           const result = await res.json()
-          const values = Array.isArray(result) ? Object.assign({}, ...result) : result
-          const emoji = Object.entries(values).map(([key, value]) => {
-            const imageUrl = value.image_url
-            return {
-              displayText: key,
-              imageUrl: imageUrl ? state.server + imageUrl : value,
-              tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'],
-              replacement: `:${key}: `
-            }
-            // Technically could use tags but those are kinda useless right now,
-            // should have been "pack" field, that would be more useful
-          }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : -1)
+          const values = Array.isArray(result)
+            ? Object.assign({}, ...result)
+            : result
+          const emoji = Object.entries(values)
+            .map(([key, value]) => {
+              const imageUrl = value.image_url
+              return {
+                displayText: key,
+                imageUrl: imageUrl ? state.server + imageUrl : value,
+                tags: imageUrl
+                  ? value.tags.sort((a, b) => (a > b ? 1 : 0))
+                  : ['utf'],
+                replacement: `:${key}: `
+              }
+              // Technically could use tags but those are kinda useless right now,
+              // should have been "pack" field, that would be more useful
+            })
+            .sort((a, b) =>
+              a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : -1
+            )
           commit('setInstanceOption', { name: 'customEmoji', value: emoji })
         } else {
-          throw (res)
+          throw res
         }
       } catch (e) {
         console.warn("Can't load custom emojis")
@@ -203,25 +215,27 @@ const instance = {
       }
     },
 
-    setTheme ({ commit, rootState }, themeName) {
+    setTheme({ commit, rootState }, themeName) {
       commit('setInstanceOption', { name: 'theme', value: themeName })
-      getPreset(themeName)
-        .then(themeData => {
-          commit('setInstanceOption', { name: 'themeData', value: themeData })
-          // No need to apply theme if there's user theme already
-          const { customTheme } = rootState.config
-          if (customTheme) return
+      getPreset(themeName).then((themeData) => {
+        commit('setInstanceOption', { name: 'themeData', value: themeData })
+        // No need to apply theme if there's user theme already
+        const { customTheme } = rootState.config
+        if (customTheme) return
 
-          // New theme presets don't have 'theme' property, they use 'source'
-          const themeSource = themeData.source
-          if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-            applyTheme(themeSource)
-          } else {
-            applyTheme(themeData.theme)
-          }
-        })
+        // New theme presets don't have 'theme' property, they use 'source'
+        const themeSource = themeData.source
+        if (
+          !themeData.theme ||
+          (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)
+        ) {
+          applyTheme(themeSource)
+        } else {
+          applyTheme(themeData.theme)
+        }
+      })
     },
-    fetchEmoji ({ dispatch, state }) {
+    fetchEmoji({ dispatch, state }) {
       if (!state.customEmojiFetched) {
         state.customEmojiFetched = true
         dispatch('getCustomEmoji')
@@ -232,7 +246,7 @@ const instance = {
       }
     },
 
-    async getKnownDomains ({ commit, rootState }) {
+    async getKnownDomains({ commit, rootState }) {
       try {
         const result = await apiService.fetchKnownDomains({
           credentials: rootState.users.currentUser.credentials
diff --git a/src/modules/interface.js b/src/modules/interface.js
index ae1a31c3d..442bdff36 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -11,10 +11,11 @@ const defaultState = {
     notificationPermission: null
   },
   browserSupport: {
-    cssFilter: window.CSS && window.CSS.supports && (
-      window.CSS.supports('filter', 'drop-shadow(0 0)') ||
-      window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
-    )
+    cssFilter:
+      window.CSS &&
+      window.CSS.supports &&
+      (window.CSS.supports('filter', 'drop-shadow(0 0)') ||
+        window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)'))
   },
   layoutType: 'normal',
   globalNotices: [],
@@ -25,27 +26,33 @@ const defaultState = {
 const interfaceMod = {
   state: defaultState,
   mutations: {
-    settingsSaved (state, { success, error }) {
+    settingsSaved(state, { success, error }) {
       if (success) {
         if (state.noticeClearTimeout) {
           clearTimeout(state.noticeClearTimeout)
         }
         state.settings.currentSaveStateNotice = { error: false, data: success }
-        state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
+        state.settings.noticeClearTimeout = setTimeout(
+          () => delete state.settings.currentSaveStateNotice,
+          2000
+        )
       } else {
-        state.settings.currentSaveStateNotice = { error: true, errorData: error }
+        state.settings.currentSaveStateNotice = {
+          error: true,
+          errorData: error
+        }
       }
     },
-    setNotificationPermission (state, permission) {
+    setNotificationPermission(state, permission) {
       state.notificationPermission = permission
     },
-    setLayoutType (state, value) {
+    setLayoutType(state, value) {
       state.layoutType = value
     },
-    closeSettingsModal (state) {
+    closeSettingsModal(state) {
       state.settingsModalState = 'hidden'
     },
-    togglePeekSettingsModal (state) {
+    togglePeekSettingsModal(state) {
       switch (state.settingsModalState) {
         case 'minimized':
           state.settingsModalState = 'visible'
@@ -57,19 +64,19 @@ const interfaceMod = {
           throw new Error('Illegal minimization state of settings modal')
       }
     },
-    openSettingsModal (state) {
+    openSettingsModal(state) {
       state.settingsModalState = 'visible'
       if (!state.settingsModalLoaded) {
         state.settingsModalLoaded = true
       }
     },
-    setSettingsModalTargetTab (state, value) {
+    setSettingsModalTargetTab(state, value) {
       state.settingsModalTargetTab = value
     },
-    closeModModal (state) {
+    closeModModal(state) {
       state.modModalState = 'hidden'
     },
-    togglePeekModModal (state) {
+    togglePeekModModal(state) {
       switch (state.modModalState) {
         case 'minimized':
           state.modModalState = 'visible'
@@ -81,77 +88,73 @@ const interfaceMod = {
           throw new Error('Illegal minimization state of mod modal')
       }
     },
-    openModModal (state) {
+    openModModal(state) {
       state.modModalState = 'visible'
       if (!state.modModalLoaded) {
         state.modModalLoaded = true
       }
     },
-    setModModalTargetTab (state, value) {
+    setModModalTargetTab(state, value) {
       state.modModalTargetTab = value
     },
-    pushGlobalNotice (state, notice) {
+    pushGlobalNotice(state, notice) {
       state.globalNotices.push(notice)
     },
-    removeGlobalNotice (state, notice) {
-      state.globalNotices = state.globalNotices.filter(n => n !== notice)
+    removeGlobalNotice(state, notice) {
+      state.globalNotices = state.globalNotices.filter((n) => n !== notice)
     },
-    setLayoutHeight (state, value) {
+    setLayoutHeight(state, value) {
       state.layoutHeight = value
     },
-    setLayoutWidth (state, value) {
+    setLayoutWidth(state, value) {
       state.layoutWidth = value
     },
-    setLastTimeline (state, value) {
+    setLastTimeline(state, value) {
       state.lastTimeline = value
     }
   },
   actions: {
-    setPageTitle ({ rootState }, option = '') {
+    setPageTitle({ rootState }, option = '') {
       document.title = `${option} ${rootState.instance.name}`
     },
-    settingsSaved ({ commit, dispatch }, { success, error }) {
+    settingsSaved({ commit, dispatch }, { success, error }) {
       commit('settingsSaved', { success, error })
     },
-    setNotificationPermission ({ commit }, permission) {
+    setNotificationPermission({ commit }, permission) {
       commit('setNotificationPermission', permission)
     },
-    closeSettingsModal ({ commit }) {
+    closeSettingsModal({ commit }) {
       commit('closeSettingsModal')
     },
-    openSettingsModal ({ commit }) {
+    openSettingsModal({ commit }) {
       commit('openSettingsModal')
     },
-    togglePeekSettingsModal ({ commit }) {
+    togglePeekSettingsModal({ commit }) {
       commit('togglePeekSettingsModal')
     },
-    clearSettingsModalTargetTab ({ commit }) {
+    clearSettingsModalTargetTab({ commit }) {
       commit('setSettingsModalTargetTab', null)
     },
-    openSettingsModalTab ({ commit }, value) {
+    openSettingsModalTab({ commit }, value) {
       commit('setSettingsModalTargetTab', value)
       commit('openSettingsModal')
     },
-    closeModModal ({ commit }) {
+    closeModModal({ commit }) {
       commit('closeModModal')
     },
-    openModModal ({ commit }) {
+    openModModal({ commit }) {
       commit('openModModal')
     },
-    togglePeekModModal ({ commit }) {
+    togglePeekModModal({ commit }) {
       commit('togglePeekModModal')
     },
-    clearModModalTargetTab ({ commit }) {
+    clearModModalTargetTab({ commit }) {
       commit('setModModalTargetTab', null)
     },
-    pushGlobalNotice (
+    pushGlobalNotice(
       { commit, dispatch, state },
-      {
-        messageKey,
-        messageArgs = {},
-        level = 'error',
-        timeout = 0
-      }) {
+      { messageKey, messageArgs = {}, level = 'error', timeout = 0 }
+    ) {
       const notice = {
         messageKey,
         messageArgs,
@@ -166,14 +169,14 @@ const interfaceMod = {
       }
       return newNotice
     },
-    removeGlobalNotice ({ commit }, notice) {
+    removeGlobalNotice({ commit }, notice) {
       commit('removeGlobalNotice', notice)
     },
-    setLayoutHeight ({ commit }, value) {
+    setLayoutHeight({ commit }, value) {
       commit('setLayoutHeight', value)
     },
     // value is optional, assuming it was cached prior
-    setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
+    setLayoutWidth({ commit, state, rootGetters, rootState }, value) {
       let width = value
       if (value !== undefined) {
         commit('setLayoutWidth', value)
@@ -190,7 +193,7 @@ const interfaceMod = {
         commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
       }
     },
-    setLastTimeline ({ commit }, value) {
+    setLastTimeline({ commit }, value) {
       commit('setLastTimeline', value)
     }
   }
diff --git a/src/modules/lists.js b/src/modules/lists.js
index 58700f41f..5a85093bc 100644
--- a/src/modules/lists.js
+++ b/src/modules/lists.js
@@ -6,10 +6,10 @@ export const defaultState = {
 }
 
 export const mutations = {
-  setLists (state, value) {
+  setLists(state, value) {
     state.allLists = value
   },
-  setList (state, { id, title }) {
+  setList(state, { id, title }) {
     if (!state.allListsObject[id]) {
       state.allListsObject[id] = {}
     }
@@ -21,65 +21,74 @@ export const mutations = {
       find(state.allLists, { id }).title = title
     }
   },
-  setListAccounts (state, { id, accountIds }) {
+  setListAccounts(state, { id, accountIds }) {
     if (!state.allListsObject[id]) {
       state.allListsObject[id] = {}
     }
     state.allListsObject[id].accountIds = accountIds
   },
-  deleteList (state, { id }) {
+  deleteList(state, { id }) {
     delete state.allListsObject[id]
-    remove(state.allLists, list => list.id === id)
+    remove(state.allLists, (list) => list.id === id)
   }
 }
 
 const actions = {
-  setLists ({ commit }, value) {
+  setLists({ commit }, value) {
     commit('setLists', value)
   },
-  createList ({ rootState, commit }, { title }) {
-    return rootState.api.backendInteractor.createList({ title })
+  createList({ rootState, commit }, { title }) {
+    return rootState.api.backendInteractor
+      .createList({ title })
       .then((list) => {
         commit('setList', { id: list.id, title })
         return list
       })
   },
-  fetchList ({ rootState, commit }, { id }) {
-    return rootState.api.backendInteractor.getList({ id })
+  fetchList({ rootState, commit }, { id }) {
+    return rootState.api.backendInteractor
+      .getList({ id })
       .then((list) => commit('setList', { id: list.id, title: list.title }))
   },
-  fetchListAccounts ({ rootState, commit }, { id }) {
-    return rootState.api.backendInteractor.getListAccounts({ id })
+  fetchListAccounts({ rootState, commit }, { id }) {
+    return rootState.api.backendInteractor
+      .getListAccounts({ id })
       .then((accountIds) => commit('setListAccounts', { id, accountIds }))
   },
-  setList ({ rootState, commit }, { id, title }) {
+  setList({ rootState, commit }, { id, title }) {
     rootState.api.backendInteractor.updateList({ id, title })
     commit('setList', { id, title })
   },
-  setListAccounts ({ rootState, commit }, { id, accountIds }) {
+  setListAccounts({ rootState, commit }, { id, accountIds }) {
     const saved = rootState.lists.allListsObject[id].accountIds
-    const added = accountIds.filter(id => !saved.includes(id))
-    const removed = saved.filter(id => !accountIds.includes(id))
+    const added = accountIds.filter((id) => !saved.includes(id))
+    const removed = saved.filter((id) => !accountIds.includes(id))
     commit('setListAccounts', { id, accountIds })
     if (added.length > 0) {
-      rootState.api.backendInteractor.addAccountsToList({ id, accountIds: added })
+      rootState.api.backendInteractor.addAccountsToList({
+        id,
+        accountIds: added
+      })
     }
     if (removed.length > 0) {
-      rootState.api.backendInteractor.removeAccountsFromList({ id, accountIds: removed })
+      rootState.api.backendInteractor.removeAccountsFromList({
+        id,
+        accountIds: removed
+      })
     }
   },
-  deleteList ({ rootState, commit }, { id }) {
+  deleteList({ rootState, commit }, { id }) {
     rootState.api.backendInteractor.deleteList({ id })
     commit('deleteList', { id })
   }
 }
 
 export const getters = {
-  findListTitle: state => id => {
+  findListTitle: (state) => (id) => {
     if (!state.allListsObject[id]) return
     return state.allListsObject[id].title
   },
-  findListAccounts: state => id => {
+  findListAccounts: (state) => (id) => {
     return [...state.allListsObject[id].accountIds]
   }
 }
diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
index ebcba01d4..c52cc4e30 100644
--- a/src/modules/media_viewer.js
+++ b/src/modules/media_viewer.js
@@ -8,30 +8,30 @@ const mediaViewer = {
     activated: false
   },
   mutations: {
-    setMedia (state, media) {
+    setMedia(state, media) {
       state.media = media
     },
-    setCurrentMedia (state, index) {
+    setCurrentMedia(state, index) {
       state.activated = true
       state.currentIndex = index
     },
-    close (state) {
+    close(state) {
       state.activated = false
     }
   },
   actions: {
-    setMedia ({ commit }, attachments) {
-      const media = attachments.filter(attachment => {
+    setMedia({ commit }, attachments) {
+      const media = attachments.filter((attachment) => {
         const type = fileTypeService.fileType(attachment.mimetype)
         return supportedTypes.has(type)
       })
       commit('setMedia', media)
     },
-    setCurrentMedia ({ commit, state }, current) {
+    setCurrentMedia({ commit, state }, current) {
       const index = state.media.indexOf(current)
       commit('setCurrentMedia', index || 0)
     },
-    closeMediaViewer ({ commit }) {
+    closeMediaViewer({ commit }) {
       commit('close')
     }
   }
diff --git a/src/modules/oauth.js b/src/modules/oauth.js
index 038bc3f38..dd89556ff 100644
--- a/src/modules/oauth.js
+++ b/src/modules/oauth.js
@@ -13,17 +13,17 @@ const oauth = {
     userToken: false
   },
   mutations: {
-    setClientData (state, { clientId, clientSecret }) {
+    setClientData(state, { clientId, clientSecret }) {
       state.clientId = clientId
       state.clientSecret = clientSecret
     },
-    setAppToken (state, token) {
+    setAppToken(state, token) {
       state.appToken = token
     },
-    setToken (state, token) {
+    setToken(state, token) {
       state.userToken = token
     },
-    clearToken (state) {
+    clearToken(state) {
       state.userToken = false
       // state.token is userToken with older name, coming from persistent state
       // let's clear it as well, since it is being used as a fallback of state.userToken
@@ -31,12 +31,12 @@ const oauth = {
     }
   },
   getters: {
-    getToken: state => () => {
+    getToken: (state) => () => {
       // state.token is userToken with older name, coming from persistent state
       // added here for smoother transition, otherwise user will be logged out
       return state.userToken || state.token || state.appToken
     },
-    getUserToken: state => () => {
+    getUserToken: (state) => () => {
       // state.token is userToken with older name, coming from persistent state
       // added here for smoother transition, otherwise user will be logged out
       return state.userToken || state.token
diff --git a/src/modules/oauth_tokens.js b/src/modules/oauth_tokens.js
index 907cae4ac..93d2512d7 100644
--- a/src/modules/oauth_tokens.js
+++ b/src/modules/oauth_tokens.js
@@ -3,21 +3,26 @@ const oauthTokens = {
     tokens: []
   },
   actions: {
-    fetchTokens ({ rootState, commit }) {
+    fetchTokens({ rootState, commit }) {
       rootState.api.backendInteractor.fetchOAuthTokens().then((tokens) => {
         commit('swapTokens', tokens)
       })
     },
-    revokeToken ({ rootState, commit, state }, id) {
-      rootState.api.backendInteractor.revokeOAuthToken({ id }).then((response) => {
-        if (response.status === 201) {
-          commit('swapTokens', state.tokens.filter(token => token.id !== id))
-        }
-      })
+    revokeToken({ rootState, commit, state }, id) {
+      rootState.api.backendInteractor
+        .revokeOAuthToken({ id })
+        .then((response) => {
+          if (response.status === 201) {
+            commit(
+              'swapTokens',
+              state.tokens.filter((token) => token.id !== id)
+            )
+          }
+        })
     }
   },
   mutations: {
-    swapTokens (state, tokens) {
+    swapTokens(state, tokens) {
       state.tokens = tokens
     }
   }
diff --git a/src/modules/polls.js b/src/modules/polls.js
index 1c4f98a49..38b1d61df 100644
--- a/src/modules/polls.js
+++ b/src/modules/polls.js
@@ -7,7 +7,7 @@ const polls = {
     pollsObject: {}
   },
   mutations: {
-    mergeOrAddPoll (state, poll) {
+    mergeOrAddPoll(state, poll) {
       const existingPoll = state.pollsObject[poll.id]
       // Make expired-state change trigger re-renders properly
       poll.expired = Date.now() > Date.parse(poll.expires_at)
@@ -17,7 +17,7 @@ const polls = {
         state.pollsObject[poll.id] = poll
       }
     },
-    trackPoll (state, pollId) {
+    trackPoll(state, pollId) {
       const currentValue = state.trackedPolls[pollId]
       if (currentValue) {
         state.trackedPolls[pollId] = currentValue + 1
@@ -25,7 +25,7 @@ const polls = {
         state.trackedPolls[pollId] = 1
       }
     },
-    untrackPoll (state, pollId) {
+    untrackPoll(state, pollId) {
       const currentValue = state.trackedPolls[pollId]
       if (currentValue) {
         state.trackedPolls[pollId] = currentValue - 1
@@ -35,11 +35,11 @@ const polls = {
     }
   },
   actions: {
-    mergeOrAddPoll ({ commit }, poll) {
+    mergeOrAddPoll({ commit }, poll) {
       commit('mergeOrAddPoll', poll)
     },
-    updateTrackedPoll ({ rootState, dispatch, commit }, pollId) {
-      rootState.api.backendInteractor.fetchPoll({ pollId }).then(poll => {
+    updateTrackedPoll({ rootState, dispatch, commit }, pollId) {
+      rootState.api.backendInteractor.fetchPoll({ pollId }).then((poll) => {
         setTimeout(() => {
           if (rootState.polls.trackedPolls[pollId]) {
             dispatch('updateTrackedPoll', pollId)
@@ -48,20 +48,22 @@ const polls = {
         commit('mergeOrAddPoll', poll)
       })
     },
-    trackPoll ({ rootState, commit, dispatch }, pollId) {
+    trackPoll({ rootState, commit, dispatch }, pollId) {
       if (!rootState.polls.trackedPolls[pollId]) {
         setTimeout(() => dispatch('updateTrackedPoll', pollId), 30 * 1000)
       }
       commit('trackPoll', pollId)
     },
-    untrackPoll ({ commit }, pollId) {
+    untrackPoll({ commit }, pollId) {
       commit('untrackPoll', pollId)
     },
-    votePoll ({ rootState, commit }, { id, pollId, choices }) {
-      return rootState.api.backendInteractor.vote({ pollId, choices }).then(poll => {
-        commit('mergeOrAddPoll', poll)
-        return poll
-      })
+    votePoll({ rootState, commit }, { id, pollId, choices }) {
+      return rootState.api.backendInteractor
+        .vote({ pollId, choices })
+        .then((poll) => {
+          commit('mergeOrAddPoll', poll)
+          return poll
+        })
     }
   }
 }
diff --git a/src/modules/postStatus.js b/src/modules/postStatus.js
index 638c1fb20..3b48f7f45 100644
--- a/src/modules/postStatus.js
+++ b/src/modules/postStatus.js
@@ -4,19 +4,19 @@ const postStatus = {
     modalActivated: false
   },
   mutations: {
-    openPostStatusModal (state, params) {
+    openPostStatusModal(state, params) {
       state.params = params
       state.modalActivated = true
     },
-    closePostStatusModal (state) {
+    closePostStatusModal(state) {
       state.modalActivated = false
     }
   },
   actions: {
-    openPostStatusModal ({ commit }, params) {
+    openPostStatusModal({ commit }, params) {
       commit('openPostStatusModal', params)
     },
-    closePostStatusModal ({ commit }) {
+    closePostStatusModal({ commit }) {
       commit('closePostStatusModal')
     }
   }
diff --git a/src/modules/reports.js b/src/modules/reports.js
index 5130b9895..bc8c0c9a7 100644
--- a/src/modules/reports.js
+++ b/src/modules/reports.js
@@ -14,16 +14,16 @@ const reports = {
     reports: []
   },
   mutations: {
-    openUserReportingModal (state, { userId, statuses, preTickedIds }) {
+    openUserReportingModal(state, { userId, statuses, preTickedIds }) {
       state.userId = userId
       state.statuses = statuses
       state.preTickedIds = preTickedIds
       state.modalActivated = true
     },
-    closeUserReportingModal (state) {
+    closeUserReportingModal(state) {
       state.modalActivated = false
     },
-    setReport (state, { report }) {
+    setReport(state, { report }) {
       let existing = getReport(state, report.id)
       if (existing) {
         existing = report
@@ -31,12 +31,12 @@ const reports = {
         state.reports.push(report)
       }
     },
-    updateReportStates (state, { reports }) {
+    updateReportStates(state, { reports }) {
       forEach(reports, (report) => {
         updateReport(state, { report, param: 'state', value: report.state })
       })
     },
-    addNoteToReport (state, { id, note, user }) {
+    addNoteToReport(state, { id, note, user }) {
       // akkoma doesn't return the note from this API endpoint, and there's no
       // good way to get it. the note data is spoofed in the frontend until
       // reload.
@@ -51,38 +51,47 @@ const reports = {
         id: date.getTime()
       })
     },
-    deleteNoteFromReport (state, { id, note }) {
+    deleteNoteFromReport(state, { id, note }) {
       const report = getReport(state, id)
       remove(report.notes, { id: note })
     }
   },
   actions: {
-    openUserReportingModal ({ rootState, commit }, { userId, statusIds = [] }) {
-      const preTickedStatuses = statusIds.map(id => rootState.statuses.allStatusesObject[id])
+    openUserReportingModal({ rootState, commit }, { userId, statusIds = [] }) {
+      const preTickedStatuses = statusIds.map(
+        (id) => rootState.statuses.allStatusesObject[id]
+      )
       const preTickedIds = statusIds
       const statuses = preTickedStatuses.concat(
-        filter(rootState.statuses.allStatuses,
-          status => status.user.id === userId && !preTickedIds.includes(status.id)
+        filter(
+          rootState.statuses.allStatuses,
+          (status) =>
+            status.user.id === userId && !preTickedIds.includes(status.id)
         )
       )
       commit('openUserReportingModal', { userId, statuses, preTickedIds })
     },
-    closeUserReportingModal ({ commit }) {
+    closeUserReportingModal({ commit }) {
       commit('closeUserReportingModal')
     },
-    updateReportStates ({ rootState, commit }, { reports }) {
+    updateReportStates({ rootState, commit }, { reports }) {
       commit('updateReportStates', { reports })
       return rootState.api.backendInteractor.updateReportStates({ reports })
     },
-    getReport ({ rootState, commit }, { id }) {
-      return rootState.api.backendInteractor.getReport({ id })
-        .then(report => commit('setReport', { report }))
+    getReport({ rootState, commit }, { id }) {
+      return rootState.api.backendInteractor
+        .getReport({ id })
+        .then((report) => commit('setReport', { report }))
     },
-    addNoteToReport ({ rootState, commit }, { id, note }) {
-      commit('addNoteToReport', { id, note, user: rootState.users.currentUser })
+    addNoteToReport({ rootState, commit }, { id, note }) {
+      commit('addNoteToReport', {
+        id,
+        note,
+        user: rootState.users.currentUser
+      })
       return rootState.api.backendInteractor.addNoteToReport({ id, note })
     },
-    deleteNoteFromReport ({ rootState, commit }, { id, note }) {
+    deleteNoteFromReport({ rootState, commit }, { id, note }) {
       commit('deleteNoteFromReport', { id, note })
       return rootState.api.backendInteractor.deleteNoteFromReport({ id, note })
     }
diff --git a/src/modules/serverSideConfig.js b/src/modules/serverSideConfig.js
index e7a6c95cc..e24f9603f 100644
--- a/src/modules/serverSideConfig.js
+++ b/src/modules/serverSideConfig.js
@@ -3,11 +3,9 @@ import { get, set } from 'lodash'
 const defaultApi = ({ rootState, commit }, { path, value }) => {
   const params = {}
   set(params, path, value)
-  return rootState
-    .api
-    .backendInteractor
+  return rootState.api.backendInteractor
     .updateProfile({ params })
-    .then(result => {
+    .then((result) => {
       commit('addNewUsers', [result])
       commit('setCurrentUser', result)
     })
@@ -16,11 +14,9 @@ const defaultApi = ({ rootState, commit }, { path, value }) => {
 const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
   const settings = {}
   set(settings, path, value)
-  return rootState
-    .api
-    .backendInteractor
+  return rootState.api.backendInteractor
     .updateNotificationSettings({ settings })
-    .then(result => {
+    .then((result) => {
       if (result.status === 'success') {
         commit('confirmServerSideOption', { name, value })
       } else {
@@ -39,73 +35,75 @@ const notificationsApi = ({ rootState, commit }, { path, value, oldValue }) => {
  * If no api is specified, defaultApi is used (see above)
  */
 export const settingsMap = {
-  'defaultScope': 'source.privacy',
-  'defaultNSFW': 'source.sensitive', // BROKEN: pleroma/pleroma#2837
-  'stripRichContent': {
+  defaultScope: 'source.privacy',
+  defaultNSFW: 'source.sensitive', // BROKEN: pleroma/pleroma#2837
+  stripRichContent: {
     get: 'source.pleroma.no_rich_text',
     set: 'no_rich_text'
   },
   // Privacy
-  'locked': 'locked',
-  'allowFollowingMove': {
+  locked: 'locked',
+  allowFollowingMove: {
     get: 'pleroma.allow_following_move',
     set: 'allow_following_move'
   },
-  'discoverable': {
+  discoverable: {
     get: 'source.pleroma.discoverable',
     set: 'discoverable'
   },
-  'hideFavorites': {
+  hideFavorites: {
     get: 'pleroma.hide_favorites',
     set: 'hide_favorites'
   },
-  'hideFollowers': {
+  hideFollowers: {
     get: 'pleroma.hide_followers',
     set: 'hide_followers'
   },
-  'hideFollows': {
+  hideFollows: {
     get: 'pleroma.hide_follows',
     set: 'hide_follows'
   },
-  'hideFollowersCount': {
+  hideFollowersCount: {
     get: 'pleroma.hide_followers_count',
     set: 'hide_followers_count'
   },
-  'hideFollowsCount': {
+  hideFollowsCount: {
     get: 'pleroma.hide_follows_count',
     set: 'hide_follows_count'
   },
   // NotificationSettingsAPIs
-  'webPushHideContents': {
+  webPushHideContents: {
     get: 'pleroma.notification_settings.hide_notification_contents',
     set: 'hide_notification_contents',
     api: notificationsApi
   },
-  'blockNotificationsFromStrangers': {
+  blockNotificationsFromStrangers: {
     get: 'pleroma.notification_settings.block_from_strangers',
     set: 'block_from_strangers',
     api: notificationsApi
   }
 }
 
-export const defaultState = Object.fromEntries(Object.keys(settingsMap).map(key => [key, null]))
+export const defaultState = Object.fromEntries(
+  Object.keys(settingsMap).map((key) => [key, null])
+)
 
 const serverSideConfig = {
   state: { ...defaultState },
   mutations: {
-    confirmServerSideOption (state, { name, value }) {
+    confirmServerSideOption(state, { name, value }) {
       set(state, name, value)
     },
-    wipeServerSideOption (state, { name }) {
+    wipeServerSideOption(state, { name }) {
       set(state, name, null)
     },
-    wipeAllServerSideOptions (state) {
-      Object.keys(settingsMap).forEach(key => {
+    wipeAllServerSideOptions(state) {
+      Object.keys(settingsMap).forEach((key) => {
         set(state, key, null)
       })
     },
     // Set the settings based on their path location
-    setCurrentUser (state, user) {
+    setCurrentUser(state, user) {
       Object.entries(settingsMap).forEach((map) => {
         const [name, value] = map
         const { get: path = value } = value
@@ -114,20 +112,22 @@ const serverSideConfig = {
     }
   },
   actions: {
-    setServerSideOption ({ rootState, state, commit, dispatch }, { name, value }) {
+    setServerSideOption(
+      { rootState, state, commit, dispatch },
+      { name, value }
+    ) {
       const oldValue = get(state, name)
       const map = settingsMap[name]
       if (!map) throw new Error('Invalid server-side setting')
       const { set: path = map, api = defaultApi } = map
       commit('wipeServerSideOption', { name })
 
-      api({ rootState, commit }, { path, value, oldValue })
-        .catch((e) => {
-          console.warn('Error setting server-side option:', e)
-          commit('confirmServerSideOption', { name, value: oldValue })
-        })
+      api({ rootState, commit }, { path, value, oldValue }).catch((e) => {
+        console.warn('Error setting server-side option:', e)
+        commit('confirmServerSideOption', { name, value: oldValue })
+      })
     },
-    logout ({ commit }) {
+    logout({ commit }) {
       commit('wipeAllServerSideOptions')
     }
   }
diff --git a/src/modules/statusHistory.js b/src/modules/statusHistory.js
index db3d6d4be..07a2b04ef 100644
--- a/src/modules/statusHistory.js
+++ b/src/modules/statusHistory.js
@@ -4,19 +4,19 @@ const statusHistory = {
     modalActivated: false
   },
   mutations: {
-    openStatusHistoryModal (state, params) {
+    openStatusHistoryModal(state, params) {
       state.params = params
       state.modalActivated = true
     },
-    closeStatusHistoryModal (state) {
+    closeStatusHistoryModal(state) {
       state.modalActivated = false
     }
   },
   actions: {
-    openStatusHistoryModal ({ commit }, params) {
+    openStatusHistoryModal({ commit }, params) {
       commit('openStatusHistoryModal', params)
     },
-    closeStatusHistoryModal ({ commit }) {
+    closeStatusHistoryModal({ commit }) {
       commit('closeStatusHistoryModal')
     }
   }
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 1080462c3..5353be4dd 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -86,7 +86,10 @@ const mergeOrAdd = (arr, obj, item) => {
     // We already have this, so only merge the new info.
     // We ignore null values to avoid overwriting existing properties with missing data
     // we also skip 'user' because that is handled by users module
-    merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user'))
+    merge(
+      oldItem,
+      omitBy(item, (v, k) => v === null || k === 'user')
+    )
     // Reactivity fix.
     oldItem.attachments.splice(oldItem.attachments.length)
     return { item: oldItem, new: false }
@@ -155,7 +158,18 @@ const removeStatusFromGlobalStorage = (state, status) => {
   }
 }
 
-const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false, userId, pagination = {} }) => {
+const addNewStatuses = (
+  state,
+  {
+    statuses,
+    showImmediately = false,
+    timeline,
+    user = {},
+    noIdUpdate = false,
+    userId,
+    pagination = {}
+  }
+) => {
   // Sanity check
   if (!isArray(statuses)) {
     return false
@@ -168,11 +182,19 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   // pagination.maxId is the oldest of the returned statuses when fetching older,
   // and pagination.minId is the newest when fetching newer. The names come directly
   // from the arguments they're supposed to be passed as for the next fetch.
-  const minNew = pagination.maxId || (statuses.length > 0 ? minBy(statuses, 'id').id : 0)
-  const maxNew = pagination.minId || (statuses.length > 0 ? maxBy(statuses, 'id').id : 0)
+  const minNew =
+    pagination.maxId || (statuses.length > 0 ? minBy(statuses, 'id').id : 0)
+  const maxNew =
+    pagination.minId || (statuses.length > 0 ? maxBy(statuses, 'id').id : 0)
 
-  const newer = timeline && (maxNew > timelineObject.maxId || timelineObject.maxId === 0) && statuses.length > 0
-  const older = timeline && (minNew < timelineObject.minId || timelineObject.minId === 0) && statuses.length > 0
+  const newer =
+    timeline &&
+    (maxNew > timelineObject.maxId || timelineObject.maxId === 0) &&
+    statuses.length > 0
+  const older =
+    timeline &&
+    (minNew < timelineObject.minId || timelineObject.minId === 0) &&
+    statuses.length > 0
 
   if (!noIdUpdate && newer) {
     timelineObject.maxId = maxNew
@@ -184,7 +206,10 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   // This makes sure that user timeline won't get data meant for other
   // user. I.e. opening different user profiles makes request which could
   // return data late after user already viewing different user profile
-  if ((timeline === 'user' || timeline === 'media' || timeline === 'replies') && timelineObject.userId !== userId) {
+  if (
+    (timeline === 'user' || timeline === 'media' || timeline === 'replies') &&
+    timelineObject.userId !== userId
+  ) {
     return
   }
 
@@ -194,7 +219,10 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
     if (result.new) {
       // We are mentioned in a post
-      if (status.type === 'status' && find(status.attentions, { id: user.id })) {
+      if (
+        status.type === 'status' &&
+        find(status.attentions, { id: user.id })
+      ) {
         const mentions = state.timelines.mentions
 
         // Add the mention to the mentions timeline
@@ -219,13 +247,21 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
     let resultForCurrentTimeline
     // Some statuses should only be added to the global status repository.
     if (timeline && addToTimeline) {
-      resultForCurrentTimeline = mergeOrAdd(timelineObject.statuses, timelineObject.statusesObject, status)
+      resultForCurrentTimeline = mergeOrAdd(
+        timelineObject.statuses,
+        timelineObject.statusesObject,
+        status
+      )
     }
 
     if (timeline && showImmediately) {
       // Add it directly to the visibleStatuses, don't change
       // newStatusCount
-      mergeOrAdd(timelineObject.visibleStatuses, timelineObject.visibleStatusesObject, status)
+      mergeOrAdd(
+        timelineObject.visibleStatuses,
+        timelineObject.visibleStatusesObject,
+        status
+      )
     } else if (timeline && addToTimeline && resultForCurrentTimeline.new) {
       // Just change newStatuscount
       timelineObject.newStatusCount += 1
@@ -248,26 +284,32 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
   }
 
   const processors = {
-    'status': (status) => {
+    status: (status) => {
       addStatus(status, showImmediately)
     },
-    'edit': (status) => {
+    edit: (status) => {
       addStatus(status, showImmediately)
     },
-    'retweet': (status) => {
+    retweet: (status) => {
       // RetweetedStatuses are never shown immediately
       const retweetedStatus = addStatus(status.retweeted_status, false, false)
 
       let retweet
       // If the retweeted status is already there, don't add the retweet
       // to the timeline.
-      if (timeline && find(timelineObject.statuses, (s) => {
-        if (s.retweeted_status) {
-          return s.id === retweetedStatus.id || s.retweeted_status.id === retweetedStatus.id
-        } else {
-          return s.id === retweetedStatus.id
-        }
-      })) {
+      if (
+        timeline &&
+        find(timelineObject.statuses, (s) => {
+          if (s.retweeted_status) {
+            return (
+              s.id === retweetedStatus.id ||
+              s.retweeted_status.id === retweetedStatus.id
+            )
+          } else {
+            return s.id === retweetedStatus.id
+          }
+        })
+      ) {
         // Already have it visible (either as the original or another RT), don't add to timeline, don't show.
         retweet = addStatus(status, false, false)
       } else {
@@ -276,7 +318,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
       retweet.retweeted_status = retweetedStatus
     },
-    'favorite': (favorite) => {
+    favorite: (favorite) => {
       // Only update if this is a new favorite.
       // Ignore our own favorites because we get info about likes as response to like request
       if (!state.favorites.has(favorite.id)) {
@@ -284,7 +326,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         favoriteStatus(favorite)
       }
     },
-    'deletion': (deletion) => {
+    deletion: (deletion) => {
       const uri = deletion.uri
       const status = find(allStatuses, { uri })
       if (!status) {
@@ -298,10 +340,10 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
         remove(timelineObject.visibleStatuses, { uri })
       }
     },
-    'follow': (follow) => {
+    follow: (follow) => {
       // NOOP, it is known status but we don't do anything about it for now
     },
-    'default': (unknown) => {
+    default: (unknown) => {
       console.log('unknown status type')
       console.log(unknown)
     }
@@ -320,15 +362,27 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 }
 
 const updateNotificationsMinMaxId = (state, notification) => {
-  state.notifications.maxId = notification.id > state.notifications.maxId
-    ? notification.id
-    : state.notifications.maxId
-  state.notifications.minId = notification.id < state.notifications.minId
-    ? notification.id
-    : state.notifications.minId
+  state.notifications.maxId =
+    notification.id > state.notifications.maxId
+      ? notification.id
+      : state.notifications.maxId
+  state.notifications.minId =
+    notification.id < state.notifications.minId
+      ? notification.id
+      : state.notifications.minId
 }
 
-const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters, newNotificationSideEffects }) => {
+const addNewNotifications = (
+  state,
+  {
+    dispatch,
+    notifications,
+    older,
+    visibleNotificationTypes,
+    rootGetters,
+    newNotificationSideEffects
+  }
+) => {
   each(notifications, (notification) => {
     // If invalid notification, update ids but don't add it to store
     if (!isValidNotification(notification)) {
@@ -338,8 +392,13 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
     }
 
     if (isStatusNotification(notification.type)) {
-      notification.action = addStatusToGlobalStorage(state, notification.action).item
-      notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
+      notification.action = addStatusToGlobalStorage(
+        state,
+        notification.action
+      ).item
+      notification.status =
+        notification.status &&
+        addStatusToGlobalStorage(state, notification.status).item
     }
 
     if (notification.type === 'pleroma:emoji_reaction') {
@@ -365,8 +424,12 @@ const removeStatus = (state, { timeline, userId }) => {
   if (userId) {
     remove(timelineObject.statuses, { user: { id: userId } })
     remove(timelineObject.visibleStatuses, { user: { id: userId } })
-    timelineObject.minVisibleId = timelineObject.visibleStatuses.length > 0 ? last(timelineObject.visibleStatuses).id : 0
-    timelineObject.maxId = timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
+    timelineObject.minVisibleId =
+      timelineObject.visibleStatuses.length > 0
+        ? last(timelineObject.visibleStatuses).id
+        : 0
+    timelineObject.maxId =
+      timelineObject.statuses.length > 0 ? first(timelineObject.statuses).id : 0
   }
 }
 
@@ -374,30 +437,32 @@ export const mutations = {
   addNewStatuses,
   addNewNotifications,
   removeStatus,
-  showNewStatuses (state, { timeline }) {
-    const oldTimeline = (state.timelines[timeline])
+  showNewStatuses(state, { timeline }) {
+    const oldTimeline = state.timelines[timeline]
 
     oldTimeline.newStatusCount = 0
     oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
     oldTimeline.minVisibleId = last(oldTimeline.visibleStatuses).id
     oldTimeline.minId = oldTimeline.minVisibleId
     oldTimeline.visibleStatusesObject = {}
-    each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status })
+    each(oldTimeline.visibleStatuses, (status) => {
+      oldTimeline.visibleStatusesObject[status.id] = status
+    })
   },
-  resetStatuses (state) {
+  resetStatuses(state) {
     const emptyState = defaultState()
     Object.entries(emptyState).forEach(([key, value]) => {
       state[key] = value
     })
   },
-  clearTimeline (state, { timeline, excludeUserId = false }) {
+  clearTimeline(state, { timeline, excludeUserId = false }) {
     const userId = excludeUserId ? state.timelines[timeline].userId : undefined
     state.timelines[timeline] = emptyTl(userId)
   },
-  clearNotifications (state) {
+  clearNotifications(state) {
     state.notifications = emptyNotifications()
   },
-  setFavorited (state, { status, value }) {
+  setFavorited(state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
 
     if (newStatus.favorited !== value) {
@@ -410,7 +475,7 @@ export const mutations = {
 
     newStatus.favorited = value
   },
-  setFavoritedConfirm (state, { status, user }) {
+  setFavoritedConfirm(state, { status, user }) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.favorited = status.favorited
     newStatus.fave_num = status.fave_num
@@ -421,19 +486,23 @@ export const mutations = {
       newStatus.favoritedBy.push(user)
     }
   },
-  setMutedStatus (state, status) {
+  setMutedStatus(state, status) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.thread_muted = status.thread_muted
 
     if (newStatus.thread_muted !== undefined) {
-      state.conversationsObject[newStatus.statusnet_conversation_id].forEach(status => { status.thread_muted = newStatus.thread_muted })
+      state.conversationsObject[newStatus.statusnet_conversation_id].forEach(
+        (status) => {
+          status.thread_muted = newStatus.thread_muted
+        }
+      )
     }
   },
-  setTranslatedStatus (state, { id, translation }) {
+  setTranslatedStatus(state, { id, translation }) {
     const newStatus = state.allStatusesObject[id]
     newStatus.translation = translation
   },
-  setRetweeted (state, { status, value }) {
+  setRetweeted(state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
 
     if (newStatus.repeated !== value) {
@@ -446,7 +515,7 @@ export const mutations = {
 
     newStatus.repeated = value
   },
-  setRetweetedConfirm (state, { status, user }) {
+  setRetweetedConfirm(state, { status, user }) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.repeated = status.repeated
     newStatus.repeat_num = status.repeat_num
@@ -457,96 +526,103 @@ export const mutations = {
       newStatus.rebloggedBy.push(user)
     }
   },
-  setBookmarked (state, { status, value }) {
+  setBookmarked(state, { status, value }) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.bookmarked = value
   },
-  setBookmarkedConfirm (state, { status }) {
+  setBookmarkedConfirm(state, { status }) {
     const newStatus = state.allStatusesObject[status.id]
     newStatus.bookmarked = status.bookmarked
   },
-  setDeleted (state, { status }) {
+  setDeleted(state, { status }) {
     const newStatus = state.allStatusesObject[status.id]
     if (newStatus) newStatus.deleted = true
   },
-  setManyDeleted (state, condition) {
-    Object.values(state.allStatusesObject).forEach(status => {
+  setManyDeleted(state, condition) {
+    Object.values(state.allStatusesObject).forEach((status) => {
       if (condition(status)) {
         status.deleted = true
       }
     })
   },
-  setLoading (state, { timeline, value }) {
+  setLoading(state, { timeline, value }) {
     state.timelines[timeline].loading = value
   },
-  setNsfw (state, { id, nsfw }) {
+  setNsfw(state, { id, nsfw }) {
     const newStatus = state.allStatusesObject[id]
     newStatus.nsfw = nsfw
   },
-  setNotificationsLoading (state, { value }) {
+  setNotificationsLoading(state, { value }) {
     state.notifications.loading = value
   },
-  setNotificationsSilence (state, { value }) {
+  setNotificationsSilence(state, { value }) {
     state.notifications.desktopNotificationSilence = value
   },
-  markNotificationsAsSeen (state) {
+  markNotificationsAsSeen(state) {
     each(state.notifications.data, (notification) => {
       notification.seen = true
     })
   },
-  markSingleNotificationAsSeen (state, { id }) {
-    const notification = find(state.notifications.data, n => n.id === id)
+  markSingleNotificationAsSeen(state, { id }) {
+    const notification = find(state.notifications.data, (n) => n.id === id)
     if (notification) notification.seen = true
   },
-  dismissNotification (state, { id }) {
-    state.notifications.data = state.notifications.data.filter(n => n.id !== id)
+  dismissNotification(state, { id }) {
+    state.notifications.data = state.notifications.data.filter(
+      (n) => n.id !== id
+    )
   },
-  dismissNotifications (state, { finder }) {
-    state.notifications.data = state.notifications.data.filter(n => finder)
+  dismissNotifications(state, { finder }) {
+    state.notifications.data = state.notifications.data.filter((n) => finder)
   },
-  updateNotification (state, { id, updater }) {
-    const notification = find(state.notifications.data, n => n.id === id)
+  updateNotification(state, { id, updater }) {
+    const notification = find(state.notifications.data, (n) => n.id === id)
     notification && updater(notification)
   },
-  queueFlush (state, { timeline, id }) {
+  queueFlush(state, { timeline, id }) {
     state.timelines[timeline].flushMarker = id
   },
-  queueFlushAll (state) {
+  queueFlushAll(state) {
     Object.keys(state.timelines).forEach((timeline) => {
       state.timelines[timeline].flushMarker = state.timelines[timeline].maxId
     })
   },
-  addRepeats (state, { id, rebloggedByUsers, currentUser }) {
+  addRepeats(state, { id, rebloggedByUsers, currentUser }) {
     const newStatus = state.allStatusesObject[id]
-    newStatus.rebloggedBy = rebloggedByUsers.filter(_ => _)
+    newStatus.rebloggedBy = rebloggedByUsers.filter((_) => _)
     // repeats stats can be incorrect based on polling condition, let's update them using the most recent data
     newStatus.repeat_num = newStatus.rebloggedBy.length
-    newStatus.repeated = !!newStatus.rebloggedBy.find(({ id }) => currentUser.id === id)
+    newStatus.repeated = !!newStatus.rebloggedBy.find(
+      ({ id }) => currentUser.id === id
+    )
   },
-  addFavs (state, { id, favoritedByUsers, currentUser }) {
+  addFavs(state, { id, favoritedByUsers, currentUser }) {
     const newStatus = state.allStatusesObject[id]
-    newStatus.favoritedBy = favoritedByUsers.filter(_ => _)
+    newStatus.favoritedBy = favoritedByUsers.filter((_) => _)
     // favorites stats can be incorrect based on polling condition, let's update them using the most recent data
     newStatus.fave_num = newStatus.favoritedBy.length
-    newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id)
+    newStatus.favorited = !!newStatus.favoritedBy.find(
+      ({ id }) => currentUser.id === id
+    )
   },
-  addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
+  addEmojiReactionsBy(state, { id, emojiReactions, currentUser }) {
     const status = state.allStatusesObject[id]
     status['emoji_reactions'] = emojiReactions
   },
-  addOwnReaction (state, { id, emoji, currentUser }) {
+  addOwnReaction(state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
     const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
-    const reaction = status.emoji_reactions[reactionIndex] || { name: emoji, count: 0, accounts: [] }
+    const reaction = status.emoji_reactions[reactionIndex] || {
+      name: emoji,
+      count: 0,
+      accounts: []
+    }
 
     const newReaction = {
       ...reaction,
       count: reaction.count + 1,
       me: true,
-      accounts: [
-        ...reaction.accounts,
-        currentUser
-      ]
+      accounts: [...reaction.accounts, currentUser]
     }
 
     // Update count of existing reaction if it exists, otherwise append at the end
@@ -556,7 +632,7 @@ export const mutations = {
       status['emoji_reactions'] = [...status.emoji_reactions, newReaction]
     }
   },
-  removeOwnReaction (state, { id, emoji, currentUser }) {
+  removeOwnReaction(state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
     const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
     if (reactionIndex < 0) return
@@ -568,20 +644,22 @@ export const mutations = {
       ...reaction,
       count: reaction.count - 1,
       me: false,
-      accounts: accounts.filter(acc => acc.id !== currentUser.id)
+      accounts: accounts.filter((acc) => acc.id !== currentUser.id)
     }
 
     if (newReaction.count > 0) {
       status.emoji_reactions[reactionIndex] = newReaction
     } else {
-      status['emoji_reactions'] = status.emoji_reactions.filter(r => r.name !== emoji)
+      status['emoji_reactions'] = status.emoji_reactions.filter(
+        (r) => r.name !== emoji
+      )
     }
   },
-  updateStatusWithPoll (state, { id, poll }) {
+  updateStatusWithPoll(state, { id, poll }) {
     const status = state.allStatusesObject[id]
     status.poll = poll
   },
-  setVirtualHeight (state, { statusId, height }) {
+  setVirtualHeight(state, { statusId, height }) {
     state.allStatusesObject[statusId].virtualHeight = height
   }
 }
@@ -589,120 +667,196 @@ export const mutations = {
 const statuses = {
   state: defaultState(),
   actions: {
-    addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId, pagination }) {
-      commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId, pagination })
+    addNewStatuses(
+      { rootState, commit },
+      {
+        statuses,
+        showImmediately = false,
+        timeline = false,
+        noIdUpdate = false,
+        userId,
+        pagination
+      }
+    ) {
+      commit('addNewStatuses', {
+        statuses,
+        showImmediately,
+        timeline,
+        noIdUpdate,
+        user: rootState.users.currentUser,
+        userId,
+        pagination
+      })
     },
-    addNewNotifications (store, { notifications, older }) {
+    addNewNotifications(store, { notifications, older }) {
       const { commit, dispatch, rootGetters } = store
 
       const newNotificationSideEffects = (notification) => {
         maybeShowNotification(store, notification)
       }
-      commit('addNewNotifications', { dispatch, notifications, older, rootGetters, newNotificationSideEffects })
+      commit('addNewNotifications', {
+        dispatch,
+        notifications,
+        older,
+        rootGetters,
+        newNotificationSideEffects
+      })
     },
-    setNotificationsLoading ({ rootState, commit }, { value }) {
+    setNotificationsLoading({ rootState, commit }, { value }) {
       commit('setNotificationsLoading', { value })
     },
-    setNotificationsSilence ({ rootState, commit }, { value }) {
+    setNotificationsSilence({ rootState, commit }, { value }) {
       commit('setNotificationsSilence', { value })
     },
-    fetchStatus ({ rootState, dispatch }, id) {
-      return rootState.api.backendInteractor.fetchStatus({ id })
+    fetchStatus({ rootState, dispatch }, id) {
+      return rootState.api.backendInteractor
+        .fetchStatus({ id })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
-    fetchStatusSource ({ rootState, dispatch }, status) {
-      return apiService.fetchStatusSource({ id: status.id, credentials: rootState.users.currentUser.credentials })
+    fetchStatusSource({ rootState, dispatch }, status) {
+      return apiService.fetchStatusSource({
+        id: status.id,
+        credentials: rootState.users.currentUser.credentials
+      })
     },
-    fetchStatusHistory ({ rootState, dispatch }, status) {
+    fetchStatusHistory({ rootState, dispatch }, status) {
       return apiService.fetchStatusHistory({ status })
     },
-    deleteStatus ({ rootState, commit }, status) {
+    deleteStatus({ rootState, commit }, status) {
       commit('setDeleted', { status })
-      apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
+      apiService.deleteStatus({
+        id: status.id,
+        credentials: rootState.users.currentUser.credentials
+      })
     },
-    deleteStatusById ({ rootState, commit }, id) {
+    deleteStatusById({ rootState, commit }, id) {
       const status = rootState.statuses.allStatusesObject[id]
       commit('setDeleted', { status })
     },
-    markStatusesAsDeleted ({ commit }, condition) {
+    markStatusesAsDeleted({ commit }, condition) {
       commit('setManyDeleted', condition)
     },
-    favorite ({ rootState, commit }, status) {
+    favorite({ rootState, commit }, status) {
       // Optimistic favoriting...
       commit('setFavorited', { status, value: true })
-      rootState.api.backendInteractor.favorite({ id: status.id })
-        .then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
+      rootState.api.backendInteractor
+        .favorite({ id: status.id })
+        .then((status) =>
+          commit('setFavoritedConfirm', {
+            status,
+            user: rootState.users.currentUser
+          })
+        )
     },
-    unfavorite ({ rootState, commit }, status) {
+    unfavorite({ rootState, commit }, status) {
       // Optimistic unfavoriting...
       commit('setFavorited', { status, value: false })
-      rootState.api.backendInteractor.unfavorite({ id: status.id })
-        .then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
+      rootState.api.backendInteractor
+        .unfavorite({ id: status.id })
+        .then((status) =>
+          commit('setFavoritedConfirm', {
+            status,
+            user: rootState.users.currentUser
+          })
+        )
     },
-    fetchPinnedStatuses ({ rootState, dispatch }, userId) {
-      rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
-        .then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
+    fetchPinnedStatuses({ rootState, dispatch }, userId) {
+      rootState.api.backendInteractor
+        .fetchPinnedStatuses({ id: userId })
+        .then((statuses) =>
+          dispatch('addNewStatuses', {
+            statuses,
+            timeline: 'user',
+            userId,
+            showImmediately: true,
+            noIdUpdate: true
+          })
+        )
     },
-    pinStatus ({ rootState, dispatch }, statusId) {
-      return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })
+    pinStatus({ rootState, dispatch }, statusId) {
+      return rootState.api.backendInteractor
+        .pinOwnStatus({ id: statusId })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
-    unpinStatus ({ rootState, dispatch }, statusId) {
-      rootState.api.backendInteractor.unpinOwnStatus({ id: statusId })
+    unpinStatus({ rootState, dispatch }, statusId) {
+      rootState.api.backendInteractor
+        .unpinOwnStatus({ id: statusId })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
-    translateStatus ({ rootState, commit }, { id, translation, language, from }) {
-      return rootState.api.backendInteractor.translateStatus({ id: id, translation, language, from })
-        .then((translation) => commit('setTranslatedStatus', { id, translation }))
+    translateStatus(
+      { rootState, commit },
+      { id, translation, language, from }
+    ) {
+      return rootState.api.backendInteractor
+        .translateStatus({ id: id, translation, language, from })
+        .then((translation) =>
+          commit('setTranslatedStatus', { id, translation })
+        )
     },
-    muteConversation ({ rootState, commit }, statusId) {
-      return rootState.api.backendInteractor.muteConversation({ id: statusId })
+    muteConversation({ rootState, commit }, statusId) {
+      return rootState.api.backendInteractor
+        .muteConversation({ id: statusId })
         .then((status) => commit('setMutedStatus', status))
     },
-    unmuteConversation ({ rootState, commit }, statusId) {
-      return rootState.api.backendInteractor.unmuteConversation({ id: statusId })
+    unmuteConversation({ rootState, commit }, statusId) {
+      return rootState.api.backendInteractor
+        .unmuteConversation({ id: statusId })
         .then((status) => commit('setMutedStatus', status))
     },
-    retweet ({ rootState, commit }, status) {
+    retweet({ rootState, commit }, status) {
       // Optimistic retweeting...
       commit('setRetweeted', { status, value: true })
-      rootState.api.backendInteractor.retweet({ id: status.id })
-        .then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser }))
+      rootState.api.backendInteractor
+        .retweet({ id: status.id })
+        .then((status) =>
+          commit('setRetweetedConfirm', {
+            status: status.retweeted_status,
+            user: rootState.users.currentUser
+          })
+        )
     },
-    unretweet ({ rootState, commit }, status) {
+    unretweet({ rootState, commit }, status) {
       // Optimistic unretweeting...
       commit('setRetweeted', { status, value: false })
-      rootState.api.backendInteractor.unretweet({ id: status.id })
-        .then(status => commit('setRetweetedConfirm', { status, user: rootState.users.currentUser }))
+      rootState.api.backendInteractor
+        .unretweet({ id: status.id })
+        .then((status) =>
+          commit('setRetweetedConfirm', {
+            status,
+            user: rootState.users.currentUser
+          })
+        )
     },
-    bookmark ({ rootState, commit }, status) {
+    bookmark({ rootState, commit }, status) {
       commit('setBookmarked', { status, value: true })
-      rootState.api.backendInteractor.bookmarkStatus({ id: status.id })
-        .then(status => {
+      rootState.api.backendInteractor
+        .bookmarkStatus({ id: status.id })
+        .then((status) => {
           commit('setBookmarkedConfirm', { status })
         })
     },
-    unbookmark ({ rootState, commit }, status) {
+    unbookmark({ rootState, commit }, status) {
       commit('setBookmarked', { status, value: false })
-      rootState.api.backendInteractor.unbookmarkStatus({ id: status.id })
-        .then(status => {
+      rootState.api.backendInteractor
+        .unbookmarkStatus({ id: status.id })
+        .then((status) => {
           commit('setBookmarkedConfirm', { status })
         })
     },
-    queueFlush ({ rootState, commit }, { timeline, id }) {
+    queueFlush({ rootState, commit }, { timeline, id }) {
       commit('queueFlush', { timeline, id })
     },
-    queueFlushAll ({ rootState, commit }) {
+    queueFlushAll({ rootState, commit }) {
       commit('queueFlushAll')
     },
-    markNotificationsAsSeen ({ rootState, commit }) {
+    markNotificationsAsSeen({ rootState, commit }) {
       commit('markNotificationsAsSeen')
       apiService.markNotificationsAsSeen({
         id: rootState.statuses.notifications.maxId,
         credentials: rootState.users.currentUser.credentials
       })
     },
-    markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
+    markSingleNotificationAsSeen({ rootState, commit }, { id }) {
       commit('markSingleNotificationAsSeen', { id })
       apiService.markNotificationsAsSeen({
         single: true,
@@ -710,71 +864,98 @@ const statuses = {
         credentials: rootState.users.currentUser.credentials
       })
     },
-    dismissNotificationLocal ({ rootState, commit }, { id }) {
+    dismissNotificationLocal({ rootState, commit }, { id }) {
       commit('dismissNotification', { id })
     },
-    dismissNotification ({ rootState, commit }, { id }) {
+    dismissNotification({ rootState, commit }, { id }) {
       commit('dismissNotification', { id })
       rootState.api.backendInteractor.dismissNotification({ id })
     },
-    updateNotification ({ rootState, commit }, { id, updater }) {
+    updateNotification({ rootState, commit }, { id, updater }) {
       commit('updateNotification', { id, updater })
     },
-    fetchFavsAndRepeats ({ rootState, commit }, id) {
+    fetchFavsAndRepeats({ rootState, commit }, id) {
       Promise.all([
         rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
         rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
       ]).then(([favoritedByUsers, rebloggedByUsers]) => {
-        commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser })
-        commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
+        commit('addFavs', {
+          id,
+          favoritedByUsers,
+          currentUser: rootState.users.currentUser
+        })
+        commit('addRepeats', {
+          id,
+          rebloggedByUsers,
+          currentUser: rootState.users.currentUser
+        })
       })
     },
-    reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
+    reactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
       const currentUser = rootState.users.currentUser
       if (!currentUser) return
 
       commit('addOwnReaction', { id, emoji, currentUser })
-      rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(
-        ok => {
+      rootState.api.backendInteractor
+        .reactWithEmoji({ id, emoji })
+        .then((ok) => {
           dispatch('fetchEmojiReactionsBy', id)
-        }
-      )
+        })
     },
-    unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
+    unreactWithEmoji({ rootState, dispatch, commit }, { id, emoji }) {
       const currentUser = rootState.users.currentUser
       if (!currentUser) return
 
       commit('removeOwnReaction', { id, emoji, currentUser })
-      rootState.api.backendInteractor.unreactWithEmoji({ id, emoji }).then(
-        ok => {
+      rootState.api.backendInteractor
+        .unreactWithEmoji({ id, emoji })
+        .then((ok) => {
           dispatch('fetchEmojiReactionsBy', id)
-        }
-      )
+        })
     },
-    fetchEmojiReactionsBy ({ rootState, commit }, id) {
-      rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
-        emojiReactions => {
-          commit('addEmojiReactionsBy', { id, emojiReactions, currentUser: rootState.users.currentUser })
-        }
-      )
+    fetchEmojiReactionsBy({ rootState, commit }, id) {
+      rootState.api.backendInteractor
+        .fetchEmojiReactions({ id })
+        .then((emojiReactions) => {
+          commit('addEmojiReactionsBy', {
+            id,
+            emojiReactions,
+            currentUser: rootState.users.currentUser
+          })
+        })
     },
-    fetchFavs ({ rootState, commit }, id) {
-      rootState.api.backendInteractor.fetchFavoritedByUsers({ id })
-        .then(favoritedByUsers => commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser }))
+    fetchFavs({ rootState, commit }, id) {
+      rootState.api.backendInteractor
+        .fetchFavoritedByUsers({ id })
+        .then((favoritedByUsers) =>
+          commit('addFavs', {
+            id,
+            favoritedByUsers,
+            currentUser: rootState.users.currentUser
+          })
+        )
     },
-    fetchRepeats ({ rootState, commit }, id) {
-      rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
-        .then(rebloggedByUsers => commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }))
+    fetchRepeats({ rootState, commit }, id) {
+      rootState.api.backendInteractor
+        .fetchRebloggedByUsers({ id })
+        .then((rebloggedByUsers) =>
+          commit('addRepeats', {
+            id,
+            rebloggedByUsers,
+            currentUser: rootState.users.currentUser
+          })
+        )
     },
-    search (store, { q, resolve, limit, offset, following, type }) {
-      return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following, type })
+    search(store, { q, resolve, limit, offset, following, type }) {
+      return store.rootState.api.backendInteractor
+        .search2({ q, resolve, limit, offset, following, type })
         .then((data) => {
           store.commit('addNewUsers', data.accounts)
           store.commit('addNewStatuses', { statuses: data.statuses })
           return data
         })
     },
-    setVirtualHeight ({ commit }, { statusId, height }) {
+    setVirtualHeight({ commit }, { statusId, height }) {
       commit('setVirtualHeight', { statusId, height })
     }
   },
diff --git a/src/modules/tags.js b/src/modules/tags.js
index cff54b7d2..c5d9741d8 100644
--- a/src/modules/tags.js
+++ b/src/modules/tags.js
@@ -6,26 +6,30 @@ const tags = {
     tags: {}
   },
   mutations: {
-    setTag (state, { name, data }) {
+    setTag(state, { name, data }) {
       state.tags[name] = data
     }
   },
   actions: {
-    getTag ({ rootState, commit }, tagName) {
-      return rootState.api.backendInteractor.getHashtag({ tag: tagName }).then(tag => {
-        commit('setTag', { name: tagName, data: tag })
-        return tag
-      })
+    getTag({ rootState, commit }, tagName) {
+      return rootState.api.backendInteractor
+        .getHashtag({ tag: tagName })
+        .then((tag) => {
+          commit('setTag', { name: tagName, data: tag })
+          return tag
+        })
     },
-    followTag (store, tagName) {
-      return store.rootState.api.backendInteractor.followHashtag({ tag: tagName })
+    followTag(store, tagName) {
+      return store.rootState.api.backendInteractor
+        .followHashtag({ tag: tagName })
         .then((resp) => {
           store.commit('setTag', { name: tagName, data: resp })
           return resp
         })
     },
-    unfollowTag ({ rootState, commit }, tag) {
-      return rootState.api.backendInteractor.unfollowHashtag({ tag })
+    unfollowTag({ rootState, commit }, tag) {
+      return rootState.api.backendInteractor
+        .unfollowHashtag({ tag })
         .then((resp) => {
           commit('setTag', { name: tag, data: resp })
           return resp
diff --git a/src/modules/users.js b/src/modules/users.js
index 022cc1dcd..c62274fa1 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,12 +1,29 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
+import {
+  windowWidth,
+  windowHeight
+} from '../services/window_utils/window_utils'
 import oauthApi from '../services/new_api/oauth.js'
-import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
-import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
+import {
+  compact,
+  map,
+  each,
+  mergeWith,
+  last,
+  concat,
+  uniq,
+  isArray
+} from 'lodash'
+import {
+  registerPushNotifications,
+  unregisterPushNotifications
+} from '../services/push/push.js'
 
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {
-  if (!item) { return false }
+  if (!item) {
+    return false
+  }
   const oldItem = obj[item.id]
   if (oldItem) {
     // We already have this, so only merge the new info.
@@ -34,29 +51,40 @@ const getNotificationPermission = () => {
   const Notification = window.Notification
 
   if (!Notification) return Promise.resolve(null)
-  if (Notification.permission === 'default') return Notification.requestPermission()
+  if (Notification.permission === 'default')
+    return Notification.requestPermission()
   return Promise.resolve(Notification.permission)
 }
 
 const blockUser = (store, id) => {
-  return store.rootState.api.backendInteractor.blockUser({ id })
+  return store.rootState.api.backendInteractor
+    .blockUser({ id })
     .then((relationship) => {
       store.commit('updateUserRelationship', [relationship])
       store.commit('addBlockId', id)
       store.commit('removeStatus', { timeline: 'friends', userId: id })
       store.commit('removeStatus', { timeline: 'public', userId: id })
-      store.commit('removeStatus', { timeline: 'publicAndExternal', userId: id })
+      store.commit('removeStatus', {
+        timeline: 'publicAndExternal',
+        userId: id
+      })
     })
 }
 
 const unblockUser = (store, id) => {
-  return store.rootState.api.backendInteractor.unblockUser({ id })
-    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+  return store.rootState.api.backendInteractor
+    .unblockUser({ id })
+    .then((relationship) =>
+      store.commit('updateUserRelationship', [relationship])
+    )
 }
 
 const removeUserFromFollowers = (store, id) => {
-  return store.rootState.api.backendInteractor.removeUserFromFollowers({ id })
-    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+  return store.rootState.api.backendInteractor
+    .removeUserFromFollowers({ id })
+    .then((relationship) =>
+      store.commit('updateUserRelationship', [relationship])
+    )
 }
 
 const muteUser = (store, id) => {
@@ -65,7 +93,8 @@ const muteUser = (store, id) => {
   store.commit('updateUserRelationship', [predictedRelationship])
   store.commit('addMuteId', id)
 
-  return store.rootState.api.backendInteractor.muteUser({ id })
+  return store.rootState.api.backendInteractor
+    .muteUser({ id })
     .then((relationship) => {
       store.commit('updateUserRelationship', [relationship])
       store.commit('addMuteId', id)
@@ -77,101 +106,118 @@ const unmuteUser = (store, id) => {
   predictedRelationship.muting = false
   store.commit('updateUserRelationship', [predictedRelationship])
 
-  return store.rootState.api.backendInteractor.unmuteUser({ id })
-    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+  return store.rootState.api.backendInteractor
+    .unmuteUser({ id })
+    .then((relationship) =>
+      store.commit('updateUserRelationship', [relationship])
+    )
 }
 
 const hideReblogs = (store, userId) => {
-  return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: false })
+  return store.rootState.api.backendInteractor
+    .followUser({ id: userId, reblogs: false })
     .then((relationship) => {
       store.commit('updateUserRelationship', [relationship])
     })
 }
 
 const showReblogs = (store, userId) => {
-  return store.rootState.api.backendInteractor.followUser({ id: userId, reblogs: true })
-    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+  return store.rootState.api.backendInteractor
+    .followUser({ id: userId, reblogs: true })
+    .then((relationship) =>
+      store.commit('updateUserRelationship', [relationship])
+    )
 }
 
 const fetchMascot = (store) => {
-  return store.rootState.api.backendInteractor.fetchMascot()
+  return store.rootState.api.backendInteractor
+    .fetchMascot()
     .then(({ url }) => store.commit('updateMascot', url))
 }
 const muteDomain = (store, domain) => {
-  return store.rootState.api.backendInteractor.muteDomain({ domain })
+  return store.rootState.api.backendInteractor
+    .muteDomain({ domain })
     .then(() => store.commit('addDomainMute', domain))
 }
 
 const unmuteDomain = (store, domain) => {
-  return store.rootState.api.backendInteractor.unmuteDomain({ domain })
+  return store.rootState.api.backendInteractor
+    .unmuteDomain({ domain })
     .then(() => store.commit('removeDomainMute', domain))
 }
 
 const setNote = (store, { id, note }) => {
-  return store.rootState.api.backendInteractor.setNote({ id, note })
-    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+  return store.rootState.api.backendInteractor
+    .setNote({ id, note })
+    .then((relationship) =>
+      store.commit('updateUserRelationship', [relationship])
+    )
 }
 
 export const mutations = {
-  tagUser (state, { user: { id }, tag }) {
+  tagUser(state, { user: { id }, tag }) {
     const user = state.usersObject[id]
     const tags = user.tags || []
     const newTags = tags.concat([tag])
     user['tags'] = newTags
   },
-  untagUser (state, { user: { id }, tag }) {
+  untagUser(state, { user: { id }, tag }) {
     const user = state.usersObject[id]
     const tags = user.tags || []
-    const newTags = tags.filter(t => t !== tag)
+    const newTags = tags.filter((t) => t !== tag)
     user['tags'] = newTags
   },
-  updateRight (state, { user: { id }, right, value }) {
+  updateRight(state, { user: { id }, right, value }) {
     const user = state.usersObject[id]
     let newRights = user.rights
     newRights[right] = value
     user['rights'] = newRights
   },
-  updateActivationStatus (state, { user: { id }, deactivated }) {
+  updateActivationStatus(state, { user: { id }, deactivated }) {
     const user = state.usersObject[id]
     user['deactivated'] = deactivated
   },
-  setCurrentUser (state, user) {
+  setCurrentUser(state, user) {
     state.lastLoginName = user.screen_name
-    state.currentUser = mergeWith(state.currentUser || {}, user, mergeArrayLength)
+    state.currentUser = mergeWith(
+      state.currentUser || {},
+      user,
+      mergeArrayLength
+    )
   },
-  clearCurrentUser (state) {
+  clearCurrentUser(state) {
     state.currentUser = false
     state.lastLoginName = false
   },
-  beginLogin (state) {
+  beginLogin(state) {
     state.loggingIn = true
   },
-  endLogin (state) {
+  endLogin(state) {
     state.loggingIn = false
   },
-  saveFriendIds (state, { id, friendIds }) {
+  saveFriendIds(state, { id, friendIds }) {
     const user = state.usersObject[id]
     user.friendIds = uniq(concat(user.friendIds || [], friendIds))
   },
-  saveFollowerIds (state, { id, followerIds }) {
+  saveFollowerIds(state, { id, followerIds }) {
     const user = state.usersObject[id]
     user.followerIds = uniq(concat(user.followerIds || [], followerIds))
   },
   // Because frontend doesn't have a reason to keep these stuff in memory
   // outside of viewing someones user profile.
-  clearFriends (state, userId) {
+  clearFriends(state, userId) {
     const user = state.usersObject[userId]
     if (user) {
       user['friendIds'] = []
     }
   },
-  clearFollowers (state, userId) {
+  clearFollowers(state, userId) {
     const user = state.usersObject[userId]
     if (user) {
       user['followerIds'] = []
     }
   },
-  addNewUsers (state, users) {
+  addNewUsers(state, users) {
     each(users, (user) => {
       if (user.relationship) {
         state.relationships[user.relationship.id] = user.relationship
@@ -179,45 +225,45 @@ export const mutations = {
       mergeOrAdd(state.users, state.usersObject, user)
     })
   },
-  updateUserRelationship (state, relationships) {
+  updateUserRelationship(state, relationships) {
     relationships.forEach((relationship) => {
       state.relationships[relationship.id] = relationship
     })
   },
-  saveBlockIds (state, blockIds) {
+  saveBlockIds(state, blockIds) {
     state.currentUser.blockIds = blockIds
   },
-  addBlockId (state, blockId) {
+  addBlockId(state, blockId) {
     if (state.currentUser.blockIds.indexOf(blockId) === -1) {
       state.currentUser.blockIds.push(blockId)
     }
   },
-  saveMuteIds (state, muteIds) {
+  saveMuteIds(state, muteIds) {
     state.currentUser.muteIds = muteIds
   },
-  addMuteId (state, muteId) {
+  addMuteId(state, muteId) {
     if (state.currentUser.muteIds.indexOf(muteId) === -1) {
       state.currentUser.muteIds.push(muteId)
     }
   },
-  updateMascot (state, mascotUrl) {
+  updateMascot(state, mascotUrl) {
     state.currentUser.mascot = mascotUrl
   },
-  saveDomainMutes (state, domainMutes) {
+  saveDomainMutes(state, domainMutes) {
     state.currentUser.domainMutes = domainMutes
   },
-  addDomainMute (state, domain) {
+  addDomainMute(state, domain) {
     if (state.currentUser.domainMutes.indexOf(domain) === -1) {
       state.currentUser.domainMutes.push(domain)
     }
   },
-  removeDomainMute (state, domain) {
+  removeDomainMute(state, domain) {
     const index = state.currentUser.domainMutes.indexOf(domain)
     if (index !== -1) {
       state.currentUser.domainMutes.splice(index, 1)
     }
   },
-  setPinnedToUser (state, status) {
+  setPinnedToUser(state, status) {
     const user = state.usersObject[status.user.id]
     user.pinnedStatusIds = user.pinnedStatusIds || []
     const index = user.pinnedStatusIds.indexOf(status.id)
@@ -228,34 +274,34 @@ export const mutations = {
       user.pinnedStatusIds.splice(index, 1)
     }
   },
-  setUserForStatus (state, status) {
+  setUserForStatus(state, status) {
     status.user = state.usersObject[status.user.id]
   },
-  setUserForNotification (state, notification) {
+  setUserForNotification(state, notification) {
     if (notification.type !== 'follow') {
       notification.action.user = state.usersObject[notification.action.user.id]
     }
     notification.from_profile = state.usersObject[notification.from_profile.id]
   },
-  setColor (state, { user: { id }, highlighted }) {
+  setColor(state, { user: { id }, highlighted }) {
     const user = state.usersObject[id]
     user['highlight'] = highlighted
   },
-  signUpPending (state) {
+  signUpPending(state) {
     state.signUpPending = true
     state.signUpErrors = []
   },
-  signUpSuccess (state) {
+  signUpSuccess(state) {
     state.signUpPending = false
   },
-  signUpFailure (state, errors) {
+  signUpFailure(state, errors) {
     state.signUpPending = false
     state.signUpErrors = errors
   }
 }
 
 export const getters = {
-  findUser: state => query => {
+  findUser: (state) => (query) => {
     const result = state.usersObject[query]
     // In case it's a screen_name, we can try searching case-insensitive
     if (!result && typeof query === 'string') {
@@ -263,12 +309,14 @@ export const getters = {
     }
     return result
   },
-  findUserByUrl: state => query => {
-    return state.users
-      .find(u => u.statusnet_profile_url &&
-            u.statusnet_profile_url.toLowerCase() === query.toLowerCase())
+  findUserByUrl: (state) => (query) => {
+    return state.users.find(
+      (u) =>
+        u.statusnet_profile_url &&
+        u.statusnet_profile_url.toLowerCase() === query.toLowerCase()
+    )
   },
-  relationship: state => id => {
+  relationship: (state) => (id) => {
     const rel = id && state.relationships[id]
     return rel || { id, loading: true }
   }
@@ -290,154 +338,179 @@ const users = {
   mutations,
   getters,
   actions: {
-    fetchUserIfMissing (store, id) {
+    fetchUserIfMissing(store, id) {
       if (!store.getters.findUser(id)) {
         store.dispatch('fetchUser', id)
       }
     },
-    fetchUser (store, id) {
-      return store.rootState.api.backendInteractor.fetchUser({ id })
+    fetchUser(store, id) {
+      return store.rootState.api.backendInteractor
+        .fetchUser({ id })
         .then((user) => {
           store.commit('addNewUsers', [user])
           return user
         })
     },
-    fetchUserRelationship (store, id) {
+    fetchUserRelationship(store, id) {
       if (store.state.currentUser) {
-        store.rootState.api.backendInteractor.fetchUserRelationship({ id })
-          .then((relationships) => store.commit('updateUserRelationship', relationships))
+        store.rootState.api.backendInteractor
+          .fetchUserRelationship({ id })
+          .then((relationships) =>
+            store.commit('updateUserRelationship', relationships)
+          )
       }
     },
-    fetchBlocks (store) {
-      return store.rootState.api.backendInteractor.fetchBlocks()
+    fetchBlocks(store) {
+      return store.rootState.api.backendInteractor
+        .fetchBlocks()
         .then((blocks) => {
           store.commit('saveBlockIds', map(blocks, 'id'))
           store.commit('addNewUsers', blocks)
           return blocks
         })
     },
-    blockUser (store, id) {
+    blockUser(store, id) {
       return blockUser(store, id)
     },
-    unblockUser (store, id) {
+    unblockUser(store, id) {
       return unblockUser(store, id)
     },
-    removeUserFromFollowers (store, id) {
+    removeUserFromFollowers(store, id) {
       return removeUserFromFollowers(store, id)
     },
-    blockUsers (store, ids = []) {
-      return Promise.all(ids.map(id => blockUser(store, id)))
+    blockUsers(store, ids = []) {
+      return Promise.all(ids.map((id) => blockUser(store, id)))
     },
-    unblockUsers (store, ids = []) {
-      return Promise.all(ids.map(id => unblockUser(store, id)))
+    unblockUsers(store, ids = []) {
+      return Promise.all(ids.map((id) => unblockUser(store, id)))
     },
-    fetchMutes (store) {
-      return store.rootState.api.backendInteractor.fetchMutes()
+    fetchMutes(store) {
+      return store.rootState.api.backendInteractor
+        .fetchMutes()
         .then((mutes) => {
           store.commit('saveMuteIds', map(mutes, 'id'))
           store.commit('addNewUsers', mutes)
           return mutes
         })
     },
-    muteUser (store, id) {
+    muteUser(store, id) {
       return muteUser(store, id)
     },
-    unmuteUser (store, id) {
+    unmuteUser(store, id) {
       return unmuteUser(store, id)
     },
-    hideReblogs (store, id) {
+    hideReblogs(store, id) {
       return hideReblogs(store, id)
     },
-    showReblogs (store, id) {
+    showReblogs(store, id) {
       return showReblogs(store, id)
     },
-    muteUsers (store, ids = []) {
-      return Promise.all(ids.map(id => muteUser(store, id)))
+    muteUsers(store, ids = []) {
+      return Promise.all(ids.map((id) => muteUser(store, id)))
     },
-    unmuteUsers (store, ids = []) {
-      return Promise.all(ids.map(id => unmuteUser(store, id)))
+    unmuteUsers(store, ids = []) {
+      return Promise.all(ids.map((id) => unmuteUser(store, id)))
     },
-    fetchMascot (store) {
+    fetchMascot(store) {
       return fetchMascot(store)
     },
-    fetchDomainMutes (store) {
-      return store.rootState.api.backendInteractor.fetchDomainMutes()
+    fetchDomainMutes(store) {
+      return store.rootState.api.backendInteractor
+        .fetchDomainMutes()
         .then((domainMutes) => {
           store.commit('saveDomainMutes', domainMutes)
           return domainMutes
         })
     },
-    muteDomain (store, domain) {
+    muteDomain(store, domain) {
       return muteDomain(store, domain)
     },
-    unmuteDomain (store, domain) {
+    unmuteDomain(store, domain) {
       return unmuteDomain(store, domain)
     },
-    muteDomains (store, domains = []) {
-      return Promise.all(domains.map(domain => muteDomain(store, domain)))
+    muteDomains(store, domains = []) {
+      return Promise.all(domains.map((domain) => muteDomain(store, domain)))
     },
-    unmuteDomains (store, domain = []) {
-      return Promise.all(domain.map(domain => unmuteDomain(store, domain)))
+    unmuteDomains(store, domain = []) {
+      return Promise.all(domain.map((domain) => unmuteDomain(store, domain)))
     },
-    setNote (store, { id, note }) {
+    setNote(store, { id, note }) {
       return setNote(store, { id, note })
     },
-    fetchFriends ({ rootState, commit }, id) {
+    fetchFriends({ rootState, commit }, id) {
       const user = rootState.users.usersObject[id]
       const maxId = last(user.friendIds)
-      return rootState.api.backendInteractor.fetchFriends({ id, maxId })
+      return rootState.api.backendInteractor
+        .fetchFriends({ id, maxId })
         .then((friends) => {
           commit('addNewUsers', friends)
           commit('saveFriendIds', { id, friendIds: map(friends, 'id') })
           return friends
         })
     },
-    fetchFollowers ({ rootState, commit }, id) {
+    fetchFollowers({ rootState, commit }, id) {
       const user = rootState.users.usersObject[id]
       const maxId = last(user.followerIds)
-      return rootState.api.backendInteractor.fetchFollowers({ id, maxId })
+      return rootState.api.backendInteractor
+        .fetchFollowers({ id, maxId })
         .then((followers) => {
           commit('addNewUsers', followers)
           commit('saveFollowerIds', { id, followerIds: map(followers, 'id') })
           return followers
         })
     },
-    clearFriends ({ commit }, userId) {
+    clearFriends({ commit }, userId) {
       commit('clearFriends', userId)
     },
-    clearFollowers ({ commit }, userId) {
+    clearFollowers({ commit }, userId) {
       commit('clearFollowers', userId)
     },
-    subscribeUser ({ rootState, commit }, id) {
-      return rootState.api.backendInteractor.subscribeUser({ id })
-        .then((relationship) => commit('updateUserRelationship', [relationship]))
+    subscribeUser({ rootState, commit }, id) {
+      return rootState.api.backendInteractor
+        .subscribeUser({ id })
+        .then((relationship) =>
+          commit('updateUserRelationship', [relationship])
+        )
     },
-    unsubscribeUser ({ rootState, commit }, id) {
-      return rootState.api.backendInteractor.unsubscribeUser({ id })
-        .then((relationship) => commit('updateUserRelationship', [relationship]))
+    unsubscribeUser({ rootState, commit }, id) {
+      return rootState.api.backendInteractor
+        .unsubscribeUser({ id })
+        .then((relationship) =>
+          commit('updateUserRelationship', [relationship])
+        )
     },
-    toggleActivationStatus ({ rootState, commit }, { user }) {
-      const api = user.deactivated ? rootState.api.backendInteractor.activateUser : rootState.api.backendInteractor.deactivateUser
-      api({ user })
-        .then((user) => { let deactivated = !user.is_active; commit('updateActivationStatus', { user, deactivated }) })
+    toggleActivationStatus({ rootState, commit }, { user }) {
+      const api = user.deactivated
+        ? rootState.api.backendInteractor.activateUser
+        : rootState.api.backendInteractor.deactivateUser
+      api({ user }).then((user) => {
+        let deactivated = !user.is_active
+        commit('updateActivationStatus', { user, deactivated })
+      })
     },
-    registerPushNotifications (store) {
+    registerPushNotifications(store) {
       const token = store.state.currentUser.credentials
       const vapidPublicKey = store.rootState.instance.vapidPublicKey
       const isEnabled = store.rootState.config.webPushNotifications
-      const notificationVisibility = store.rootState.config.notificationVisibility
+      const notificationVisibility =
+        store.rootState.config.notificationVisibility
 
-      registerPushNotifications(isEnabled, vapidPublicKey, token, notificationVisibility)
+      registerPushNotifications(
+        isEnabled,
+        vapidPublicKey,
+        token,
+        notificationVisibility
+      )
     },
-    unregisterPushNotifications (store) {
+    unregisterPushNotifications(store) {
       const token = store.state.currentUser.credentials
 
       unregisterPushNotifications(token)
     },
-    addNewUsers ({ commit }, users) {
+    addNewUsers({ commit }, users) {
       commit('addNewUsers', users)
     },
-    addNewStatuses (store, { statuses }) {
+    addNewStatuses(store, { statuses }) {
       const users = map(statuses, 'user')
       const retweetedUsers = compact(map(statuses, 'retweeted_status.user'))
       store.commit('addNewUsers', users)
@@ -456,10 +529,10 @@ const users = {
         store.commit('setPinnedToUser', status)
       })
     },
-    addNewNotifications (store, { notifications }) {
+    addNewNotifications(store, { notifications }) {
       const users = map(notifications, 'from_profile')
-      const targetUsers = map(notifications, 'target').filter(_ => _)
-      const notificationIds = notifications.map(_ => _.id)
+      const targetUsers = map(notifications, 'target').filter((_) => _)
+      const notificationIds = notifications.map((_) => _.id)
       store.commit('addNewUsers', users)
       store.commit('addNewUsers', targetUsers)
 
@@ -473,23 +546,27 @@ const users = {
         store.commit('setUserForNotification', notification)
       })
     },
-    searchUsers ({ rootState, commit }, { query }) {
-      return rootState.api.backendInteractor.searchUsers({ query })
+    searchUsers({ rootState, commit }, { query }) {
+      return rootState.api.backendInteractor
+        .searchUsers({ query })
         .then((users) => {
           commit('addNewUsers', users)
           return users
         })
     },
-    async signUp (store, userInfo) {
+    async signUp(store, userInfo) {
       store.commit('signUpPending')
 
       let rootState = store.rootState
 
       try {
-        let data = await rootState.api.backendInteractor.register(
-          { params: { ...userInfo } }
-        )
-        if (data.identifier === 'awaiting_approval' || data.identifier === 'missing_confirmed_email') {
+        let data = await rootState.api.backendInteractor.register({
+          params: { ...userInfo }
+        })
+        if (
+          data.identifier === 'awaiting_approval' ||
+          data.identifier === 'missing_confirmed_email'
+        ) {
           store.commit('signUpSuccess')
           return data
         } else if (data.me !== undefined) {
@@ -506,11 +583,11 @@ const users = {
         throw e
       }
     },
-    async getCaptcha (store) {
+    async getCaptcha(store) {
       return store.rootState.api.backendInteractor.getCaptcha()
     },
 
-    logout (store) {
+    logout(store) {
       const { oauth, instance } = store.rootState
 
       const data = {
@@ -519,7 +596,8 @@ const users = {
         instance: instance.server
       }
 
-      return oauthApi.getOrCreateApp(data)
+      return oauthApi
+        .getOrCreateApp(data)
         .then((app) => {
           const params = {
             app,
@@ -534,7 +612,10 @@ const users = {
           store.dispatch('disconnectFromSocket')
           store.commit('clearToken')
           store.dispatch('stopFetchingTimeline', 'friends')
-          store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
+          store.commit(
+            'setBackendInteractor',
+            backendInteractorService(store.getters.getToken())
+          )
           store.dispatch('stopFetchingNotifications')
           store.dispatch('stopFetchingFollowRequests')
           store.dispatch('stopFetchingConfig')
@@ -545,11 +626,12 @@ const users = {
           store.dispatch('setLayoutHeight', windowHeight())
         })
     },
-    loginUser (store, accessToken) {
+    loginUser(store, accessToken) {
       return new Promise((resolve, reject) => {
         const commit = store.commit
         commit('beginLogin')
-        store.rootState.api.backendInteractor.verifyCredentials(accessToken)
+        store.rootState.api.backendInteractor
+          .verifyCredentials(accessToken)
           .then((data) => {
             if (!data.error) {
               const user = data
@@ -563,11 +645,15 @@ const users = {
 
               store.dispatch('fetchEmoji')
 
-              getNotificationPermission()
-                .then(permission => commit('setNotificationPermission', permission))
+              getNotificationPermission().then((permission) =>
+                commit('setNotificationPermission', permission)
+              )
 
               // Set our new backend interactor
-              commit('setBackendInteractor', backendInteractorService(accessToken))
+              commit(
+                'setBackendInteractor',
+                backendInteractorService(accessToken)
+              )
 
               if (user.token) {
                 store.dispatch('setWsToken', user.token)
@@ -575,7 +661,9 @@ const users = {
 
               const startPolling = () => {
                 // Start getting fresh posts.
-                store.dispatch('startFetchingTimeline', { timeline: 'friends' })
+                store.dispatch('startFetchingTimeline', {
+                  timeline: 'friends'
+                })
 
                 // Start fetching notifications
                 store.dispatch('startFetchingNotifications')
@@ -584,11 +672,20 @@ const users = {
               if (store.getters.mergedConfig.useStreamingApi) {
                 store.dispatch('fetchTimeline', 'friends', { since: null })
                 store.dispatch('fetchNotifications', { since: null })
-                store.dispatch('enableMastoSockets', true).catch((error) => {
-                  console.error('Failed initializing MastoAPI Streaming socket', error)
-                }).then(() => {
-                  setTimeout(() => store.dispatch('setNotificationsSilence', false), 10000)
-                })
+                store
+                  .dispatch('enableMastoSockets', true)
+                  .catch((error) => {
+                    console.error(
+                      'Failed initializing MastoAPI Streaming socket',
+                      error
+                    )
+                  })
+                  .then(() => {
+                    setTimeout(
+                      () => store.dispatch('setNotificationsSilence', false),
+                      10000
+                    )
+                  })
               } else {
                 startPolling()
               }
@@ -604,7 +701,8 @@ const users = {
               store.dispatch('startFetchingConfig')
 
               // Fetch our friends
-              store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
+              store.rootState.api.backendInteractor
+                .fetchFriends({ id: user.id })
                 .then((friends) => commit('addNewUsers', friends))
             } else {
               const response = data.error
diff --git a/src/services/announcements_fetcher/announcements_fetcher.service.js b/src/services/announcements_fetcher/announcements_fetcher.service.js
index 6701e25a1..c336eadcb 100644
--- a/src/services/announcements_fetcher/announcements_fetcher.service.js
+++ b/src/services/announcements_fetcher/announcements_fetcher.service.js
@@ -2,10 +2,14 @@ import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 
 const fetchAndUpdate = ({ store, credentials }) => {
-  return apiService.fetchAnnouncements({ credentials })
-    .then(announcements => {
-      store.commit('setAnnouncements', announcements)
-    }, () => {})
+  return apiService
+    .fetchAnnouncements({ credentials })
+    .then(
+      (announcements) => {
+        store.commit('setAnnouncements', announcements)
+      },
+      () => {}
+    )
     .catch(() => {})
 }
 
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 9e6f39f21..3aca4175c 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1,5 +1,13 @@
 import { each, map, concat, last, get } from 'lodash'
-import { parseStatus, parseSource, parseUser, parseNotification, parseReport, parseAttachment, parseLinkHeaderPagination } from '../entity_normalizer/entity_normalizer.service.js'
+import {
+  parseStatus,
+  parseSource,
+  parseUser,
+  parseNotification,
+  parseReport,
+  parseAttachment,
+  parseLinkHeaderPagination
+} from '../entity_normalizer/entity_normalizer.service.js'
 import { RegistrationError, StatusCodeError } from '../errors/errors'
 
 /* eslint-env browser */
@@ -12,7 +20,8 @@ const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
 const MOVE_ACCOUNT_URL = '/api/pleroma/move_account'
 const ALIASES_URL = '/api/pleroma/aliases'
 const TAG_USER_URL = '/api/pleroma/admin/users/tag'
-const PERMISSION_GROUP_URL = (screenName, right) => `/api/pleroma/admin/users/${screenName}/permission_group/${right}`
+const PERMISSION_GROUP_URL = (screenName, right) =>
+  `/api/pleroma/admin/users/${screenName}/permission_group/${right}`
 const ACTIVATE_USER_URL = '/api/pleroma/admin/users/activate'
 const DEACTIVATE_USER_URL = '/api/pleroma/admin/users/deactivate'
 const ADMIN_USERS_URL = '/api/pleroma/admin/users'
@@ -20,8 +29,10 @@ const SUGGESTIONS_URL = '/api/v1/suggestions'
 const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'
 const NOTIFICATION_READ_URL = '/api/v1/pleroma/notifications/read'
 const ADMIN_REPORTS_URL = '/api/v1/pleroma/admin/reports'
-const ADMIN_REPORT_NOTES_URL = id => `/api/v1/pleroma/admin/reports/${id}/notes`
-const ADMIN_REPORT_NOTE_URL = (report, note) => `/api/v1/pleroma/admin/reports/${report}/notes/${note}`
+const ADMIN_REPORT_NOTES_URL = (id) =>
+  `/api/v1/pleroma/admin/reports/${id}/notes`
+const ADMIN_REPORT_NOTE_URL = (report, note) =>
+  `/api/v1/pleroma/admin/reports/${report}/notes/${note}`
 
 const MFA_SETTINGS_URL = '/api/pleroma/accounts/mfa'
 const MFA_BACKUP_CODES_URL = '/api/pleroma/accounts/mfa/backup_codes'
@@ -35,60 +46,70 @@ const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
 const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
 const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
 const AKKOMA_LANGUAGES_URL = '/api/v1/akkoma/translation/languages'
-const AKKOMA_TRANSLATE_URL = (id, lang) => `/api/v1/statuses/${id}/translations/${lang}`
-const MASTODON_DISMISS_NOTIFICATION_URL = id => `/api/v1/notifications/${id}/dismiss`
-const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
-const MASTODON_UNFAVORITE_URL = id => `/api/v1/statuses/${id}/unfavourite`
-const MASTODON_RETWEET_URL = id => `/api/v1/statuses/${id}/reblog`
-const MASTODON_UNRETWEET_URL = id => `/api/v1/statuses/${id}/unreblog`
-const MASTODON_DELETE_URL = id => `/api/v1/statuses/${id}`
-const MASTODON_FOLLOW_URL = id => `/api/v1/accounts/${id}/follow`
-const MASTODON_UNFOLLOW_URL = id => `/api/v1/accounts/${id}/unfollow`
-const MASTODON_FOLLOWING_URL = id => `/api/v1/accounts/${id}/following`
-const MASTODON_FOLLOWERS_URL = id => `/api/v1/accounts/${id}/followers`
+const AKKOMA_TRANSLATE_URL = (id, lang) =>
+  `/api/v1/statuses/${id}/translations/${lang}`
+const MASTODON_DISMISS_NOTIFICATION_URL = (id) =>
+  `/api/v1/notifications/${id}/dismiss`
+const MASTODON_FAVORITE_URL = (id) => `/api/v1/statuses/${id}/favourite`
+const MASTODON_UNFAVORITE_URL = (id) => `/api/v1/statuses/${id}/unfavourite`
+const MASTODON_RETWEET_URL = (id) => `/api/v1/statuses/${id}/reblog`
+const MASTODON_UNRETWEET_URL = (id) => `/api/v1/statuses/${id}/unreblog`
+const MASTODON_DELETE_URL = (id) => `/api/v1/statuses/${id}`
+const MASTODON_FOLLOW_URL = (id) => `/api/v1/accounts/${id}/follow`
+const MASTODON_UNFOLLOW_URL = (id) => `/api/v1/accounts/${id}/unfollow`
+const MASTODON_FOLLOWING_URL = (id) => `/api/v1/accounts/${id}/following`
+const MASTODON_FOLLOWERS_URL = (id) => `/api/v1/accounts/${id}/followers`
 const MASTODON_FOLLOW_REQUESTS_URL = '/api/v1/follow_requests'
-const MASTODON_APPROVE_USER_URL = id => `/api/v1/follow_requests/${id}/authorize`
-const MASTODON_DENY_USER_URL = id => `/api/v1/follow_requests/${id}/reject`
+const MASTODON_APPROVE_USER_URL = (id) =>
+  `/api/v1/follow_requests/${id}/authorize`
+const MASTODON_DENY_USER_URL = (id) => `/api/v1/follow_requests/${id}/reject`
 const MASTODON_DIRECT_MESSAGES_TIMELINE_URL = '/api/v1/timelines/direct'
 const MASTODON_PUBLIC_TIMELINE = '/api/v1/timelines/public'
 const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
 const AKKOMA_BUBBLE_TIMELINE_URL = '/api/v1/timelines/bubble'
-const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
-const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
-const MASTODON_STATUS_SOURCE_URL = id => `/api/v1/statuses/${id}/source`
-const MASTODON_STATUS_HISTORY_URL = id => `/api/v1/statuses/${id}/history`
-const MASTODON_USER_URL = id => `/api/v1/accounts/${id}?with_relationships=true`
+const MASTODON_STATUS_URL = (id) => `/api/v1/statuses/${id}`
+const MASTODON_STATUS_CONTEXT_URL = (id) => `/api/v1/statuses/${id}/context`
+const MASTODON_STATUS_SOURCE_URL = (id) => `/api/v1/statuses/${id}/source`
+const MASTODON_STATUS_HISTORY_URL = (id) => `/api/v1/statuses/${id}/history`
+const MASTODON_USER_URL = (id) =>
+  `/api/v1/accounts/${id}?with_relationships=true`
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
-const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
-const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
-const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
-const MASTODON_LIST_ACCOUNTS_URL = id => `/api/v1/lists/${id}/accounts`
-const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}`
+const MASTODON_USER_TIMELINE_URL = (id) => `/api/v1/accounts/${id}/statuses`
+const MASTODON_LIST_URL = (id) => `/api/v1/lists/${id}`
+const MASTODON_LIST_TIMELINE_URL = (id) => `/api/v1/timelines/list/${id}`
+const MASTODON_LIST_ACCOUNTS_URL = (id) => `/api/v1/lists/${id}/accounts`
+const MASTODON_TAG_TIMELINE_URL = (tag) => `/api/v1/timelines/tag/${tag}`
 const MASTODON_BOOKMARK_TIMELINE_URL = '/api/v1/bookmarks'
 const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/'
 const MASTODON_USER_MUTES_URL = '/api/v1/mutes/'
-const MASTODON_BLOCK_USER_URL = id => `/api/v1/accounts/${id}/block`
-const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock`
-const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute`
-const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
-const MASTODON_REMOVE_USER_FROM_FOLLOWERS = id => `/api/v1/accounts/${id}/remove_from_followers`
-const MASTODON_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe`
-const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe`
-const MASTODON_SET_NOTE_URL = id => `/api/v1/accounts/${id}/note`
-const MASTODON_BOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/bookmark`
-const MASTODON_UNBOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/unbookmark`
+const MASTODON_BLOCK_USER_URL = (id) => `/api/v1/accounts/${id}/block`
+const MASTODON_UNBLOCK_USER_URL = (id) => `/api/v1/accounts/${id}/unblock`
+const MASTODON_MUTE_USER_URL = (id) => `/api/v1/accounts/${id}/mute`
+const MASTODON_UNMUTE_USER_URL = (id) => `/api/v1/accounts/${id}/unmute`
+const MASTODON_REMOVE_USER_FROM_FOLLOWERS = (id) =>
+  `/api/v1/accounts/${id}/remove_from_followers`
+const MASTODON_SUBSCRIBE_USER = (id) =>
+  `/api/v1/pleroma/accounts/${id}/subscribe`
+const MASTODON_UNSUBSCRIBE_USER = (id) =>
+  `/api/v1/pleroma/accounts/${id}/unsubscribe`
+const MASTODON_SET_NOTE_URL = (id) => `/api/v1/accounts/${id}/note`
+const MASTODON_BOOKMARK_STATUS_URL = (id) => `/api/v1/statuses/${id}/bookmark`
+const MASTODON_UNBOOKMARK_STATUS_URL = (id) =>
+  `/api/v1/statuses/${id}/unbookmark`
 const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
 const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media'
-const MASTODON_VOTE_URL = id => `/api/v1/polls/${id}/votes`
-const MASTODON_POLL_URL = id => `/api/v1/polls/${id}`
-const MASTODON_STATUS_FAVORITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by`
-const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by`
+const MASTODON_VOTE_URL = (id) => `/api/v1/polls/${id}/votes`
+const MASTODON_POLL_URL = (id) => `/api/v1/polls/${id}`
+const MASTODON_STATUS_FAVORITEDBY_URL = (id) =>
+  `/api/v1/statuses/${id}/favourited_by`
+const MASTODON_STATUS_REBLOGGEDBY_URL = (id) =>
+  `/api/v1/statuses/${id}/reblogged_by`
 const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
 const MASTODON_REPORT_USER_URL = '/api/v1/reports'
-const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin`
-const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin`
-const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
-const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
+const MASTODON_PIN_OWN_STATUS = (id) => `/api/v1/statuses/${id}/pin`
+const MASTODON_UNPIN_OWN_STATUS = (id) => `/api/v1/statuses/${id}/unpin`
+const MASTODON_MUTE_CONVERSATION = (id) => `/api/v1/statuses/${id}/mute`
+const MASTODON_UNMUTE_CONVERSATION = (id) => `/api/v1/statuses/${id}/unmute`
 const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
 const MASTODON_MASCOT_URL = '/api/v1/pleroma/mascot'
@@ -97,16 +118,23 @@ const MASTODON_LISTS_URL = '/api/v1/lists'
 const MASTODON_STREAMING = '/api/v1/streaming'
 const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
 const MASTODON_ANNOUNCEMENTS_URL = '/api/v1/announcements'
-const MASTODON_ANNOUNCEMENTS_DISMISS_URL = id => `/api/v1/announcements/${id}/dismiss`
-const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
-const PLEROMA_EMOJI_REACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
-const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
+const MASTODON_ANNOUNCEMENTS_DISMISS_URL = (id) =>
+  `/api/v1/announcements/${id}/dismiss`
+const PLEROMA_EMOJI_REACTIONS_URL = (id) =>
+  `/api/v1/pleroma/statuses/${id}/reactions`
+const PLEROMA_EMOJI_REACT_URL = (id, emoji) =>
+  `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
+const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) =>
+  `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
 const PLEROMA_BACKUP_URL = '/api/v1/pleroma/backups'
 const PLEROMA_ANNOUNCEMENTS_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
-const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
-const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
-const AKKOMA_SETTING_PROFILE_URL = (name) => `/api/v1/akkoma/frontend_settings/pleroma-fe/${name}`
+const PLEROMA_EDIT_ANNOUNCEMENT_URL = (id) =>
+  `/api/v1/pleroma/admin/announcements/${id}`
+const PLEROMA_DELETE_ANNOUNCEMENT_URL = (id) =>
+  `/api/v1/pleroma/admin/announcements/${id}`
+const AKKOMA_SETTING_PROFILE_URL = (name) =>
+  `/api/v1/akkoma/frontend_settings/pleroma-fe/${name}`
 const AKKOMA_SETTING_PROFILE_LIST = `/api/v1/akkoma/frontend_settings/pleroma-fe`
 const MASTODON_TAG_URL = (name) => `/api/v1/tags/${name}`
 const MASTODON_FOLLOW_TAG_URL = (name) => `/api/v1/tags/${name}/follow`
@@ -122,19 +150,31 @@ let fetch = (url, options) => {
   return oldfetch(fullUrl, options)
 }
 
-const promisedRequest = ({ method, url, params, payload, credentials, headers = {} }) => {
+const promisedRequest = ({
+  method,
+  url,
+  params,
+  payload,
+  credentials,
+  headers = {}
+}) => {
   const options = {
     method,
     headers: {
-      'Accept': 'application/json',
+      Accept: 'application/json',
       'Content-Type': 'application/json',
       ...headers
     }
   }
   if (params) {
-    url += '?' + Object.entries(params)
-      .map(([key, value]) => encodeURIComponent(key) + '=' + encodeURIComponent(value))
-      .join('&')
+    url +=
+      '?' +
+      Object.entries(params)
+        .map(
+          ([key, value]) =>
+            encodeURIComponent(key) + '=' + encodeURIComponent(value)
+        )
+        .join('&')
   }
   if (payload) {
     options.body = JSON.stringify(payload)
@@ -145,20 +185,35 @@ const promisedRequest = ({ method, url, params, payload, credentials, headers =
       ...authHeaders(credentials)
     }
   }
-  return fetch(url, options)
-    .then((response) => {
-      return new Promise((resolve, reject) => response.json()
+  return fetch(url, options).then((response) => {
+    return new Promise((resolve, reject) =>
+      response
+        .json()
         .then((json) => {
           if (!response.ok) {
-            return reject(new StatusCodeError(response.status, json, { url, options }, response))
+            return reject(
+              new StatusCodeError(
+                response.status,
+                json,
+                { url, options },
+                response
+              )
+            )
           }
           return resolve(json)
         })
         .catch((error) => {
-          return reject(new StatusCodeError(response.status, error, { url, options }, response))
+          return reject(
+            new StatusCodeError(
+              response.status,
+              error,
+              { url, options },
+              response
+            )
+          )
         })
-      )
-    })
+    )
+  })
 }
 
 const updateNotificationSettings = ({ credentials, settings }) => {
@@ -175,7 +230,13 @@ const updateNotificationSettings = ({ credentials, settings }) => {
   }).then((data) => data.json())
 }
 
-const updateProfileImages = ({ credentials, avatar = null, avatarName = null, banner = null, background = null }) => {
+const updateProfileImages = ({
+  credentials,
+  avatar = null,
+  avatarName = null,
+  banner = null,
+  background = null
+}) => {
   const form = new FormData()
   if (avatar !== null) {
     if (avatarName !== null) {
@@ -236,30 +297,34 @@ const register = ({ params, credentials }) => {
       agreement: true,
       ...rest
     })
+  }).then((response) => {
+    if (response.ok) {
+      return response.json()
+    } else {
+      return response.json().then((error) => {
+        throw new RegistrationError(error)
+      })
+    }
   })
-    .then((response) => {
-      if (response.ok) {
-        return response.json()
-      } else {
-        return response.json().then((error) => { throw new RegistrationError(error) })
-      }
-    })
 }
 
-const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json())
+const getCaptcha = () =>
+  fetch('/api/pleroma/captcha').then((resp) => resp.json())
 
 const authHeaders = (accessToken) => {
   if (accessToken) {
-    return { 'Authorization': `Bearer ${accessToken}` }
+    return { Authorization: `Bearer ${accessToken}` }
   } else {
-    return { }
+    return {}
   }
 }
 
 const followUser = ({ id, credentials, ...options }) => {
   let url = MASTODON_FOLLOW_URL(id)
   const form = {}
-  if (options.reblogs !== undefined) { form['reblogs'] = options.reblogs }
+  if (options.reblogs !== undefined) {
+    form['reblogs'] = options.reblogs
+  }
   return fetch(url, {
     body: JSON.stringify(form),
     headers: {
@@ -279,23 +344,35 @@ const unfollowUser = ({ id, credentials }) => {
 }
 
 const pinOwnStatus = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' })
-    .then((data) => parseStatus(data))
+  return promisedRequest({
+    url: MASTODON_PIN_OWN_STATUS(id),
+    credentials,
+    method: 'POST'
+  }).then((data) => parseStatus(data))
 }
 
 const unpinOwnStatus = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_UNPIN_OWN_STATUS(id), credentials, method: 'POST' })
-    .then((data) => parseStatus(data))
+  return promisedRequest({
+    url: MASTODON_UNPIN_OWN_STATUS(id),
+    credentials,
+    method: 'POST'
+  }).then((data) => parseStatus(data))
 }
 
 const muteConversation = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_MUTE_CONVERSATION(id), credentials, method: 'POST' })
-    .then((data) => parseStatus(data))
+  return promisedRequest({
+    url: MASTODON_MUTE_CONVERSATION(id),
+    credentials,
+    method: 'POST'
+  }).then((data) => parseStatus(data))
 }
 
 const unmuteConversation = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_UNMUTE_CONVERSATION(id), credentials, method: 'POST' })
-    .then((data) => parseStatus(data))
+  return promisedRequest({
+    url: MASTODON_UNMUTE_CONVERSATION(id),
+    credentials,
+    method: 'POST'
+  }).then((data) => parseStatus(data))
 }
 
 const blockUser = ({ id, credentials }) => {
@@ -337,22 +414,21 @@ const denyUser = ({ id, credentials }) => {
 
 const fetchUser = ({ id, credentials }) => {
   const url = MASTODON_USER_URL(id)
-  return promisedRequest({ url, credentials })
-    .then((data) => parseUser(data))
+  return promisedRequest({ url, credentials }).then((data) => parseUser(data))
 }
 
 const fetchUserRelationship = ({ id, credentials }) => {
   let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
-  return fetch(url, { headers: authHeaders(credentials) })
-    .then((response) => {
-      return new Promise((resolve, reject) => response.json()
-        .then((json) => {
-          if (!response.ok) {
-            return reject(new StatusCodeError(400, json, { url }, response))
-          }
-          return resolve(json)
-        }))
-    })
+  return fetch(url, { headers: authHeaders(credentials) }).then((response) => {
+    return new Promise((resolve, reject) =>
+      response.json().then((json) => {
+        if (!response.ok) {
+          return reject(new StatusCodeError(400, json, { url }, response))
+        }
+        return resolve(json)
+      })
+    )
+  })
 }
 
 const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
@@ -362,7 +438,9 @@ const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
     sinceId && `since_id=${sinceId}`,
     limit && `limit=${limit}`,
     `with_relationships=true`
-  ].filter(_ => _).join('&')
+  ]
+    .filter((_) => _)
+    .join('&')
 
   url = url + (args ? '?' + args : '')
   return fetch(url, { headers: authHeaders(credentials) })
@@ -397,7 +475,9 @@ const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
     sinceId && `since_id=${sinceId}`,
     limit && `limit=${limit}`,
     `with_relationships=true`
-  ].filter(_ => _).join('&')
+  ]
+    .filter((_) => _)
+    .join('&')
 
   url += args ? '?' + args : ''
   return fetch(url, { headers: authHeaders(credentials) })
@@ -414,8 +494,9 @@ const fetchFollowRequests = ({ credentials }) => {
 
 const fetchLists = ({ credentials }) => {
   const url = MASTODON_LISTS_URL
-  return fetch(url, { headers: authHeaders(credentials) })
-    .then((data) => data.json())
+  return fetch(url, { headers: authHeaders(credentials) }).then((data) =>
+    data.json()
+  )
 }
 
 const createList = ({ title, credentials }) => {
@@ -432,8 +513,9 @@ const createList = ({ title, credentials }) => {
 
 const getList = ({ id, credentials }) => {
   const url = MASTODON_LIST_URL(id)
-  return fetch(url, { headers: authHeaders(credentials) })
-    .then((data) => data.json())
+  return fetch(url, { headers: authHeaders(credentials) }).then((data) =>
+    data.json()
+  )
 }
 
 const updateList = ({ id, title, credentials }) => {
@@ -545,14 +627,13 @@ const fetchStatusSource = ({ id, credentials }) => {
 
 const fetchStatusHistory = ({ status, credentials }) => {
   let url = MASTODON_STATUS_HISTORY_URL(status.id)
-  return promisedRequest({ url, credentials })
-    .then((data) => {
-      data.reverse()
-      return data.map((item) => {
-        item.originalStatus = status
-        return parseStatus(item)
-      })
+  return promisedRequest({ url, credentials }).then((data) => {
+    data.reverse()
+    return data.map((item) => {
+      item.originalStatus = status
+      return parseStatus(item)
     })
+  })
 }
 
 const tagUser = ({ tag, credentials, user }) => {
@@ -617,7 +698,7 @@ const activateUser = ({ credentials, user: { screen_name: nickname } }) => {
     payload: {
       nicknames: [nickname]
     }
-  }).then(response => get(response, 'users.0'))
+  }).then((response) => get(response, 'users.0'))
 }
 
 const deactivateUser = ({ credentials, user: { screen_name: nickname } }) => {
@@ -628,7 +709,7 @@ const deactivateUser = ({ credentials, user: { screen_name: nickname } }) => {
     payload: {
       nicknames: [nickname]
     }
-  }).then(response => get(response, 'users.0'))
+  }).then((response) => get(response, 'users.0'))
 }
 
 const deleteUser = ({ credentials, user }) => {
@@ -648,7 +729,9 @@ const getReports = ({ state, limit, page, pageSize, credentials }) => {
     limit && `limit=${limit}`,
     page && `page=${page}`,
     pageSize && `page_size=${pageSize}`
-  ].filter(_ => _).join('&')
+  ]
+    .filter((_) => _)
+    .join('&')
 
   url = url + (args ? '?' + args : '')
   return fetch(url, { headers: authHeaders(credentials) })
@@ -659,7 +742,7 @@ const getReports = ({ state, limit, page, pageSize, credentials }) => {
 const updateReportStates = ({ credentials, reports }) => {
   // reports syntax: [{ id: int, state: string }...]
   const updates = {
-    reports: reports.map(report => {
+    reports: reports.map((report) => {
       return {
         id: report.id.toString(),
         state: report.state
@@ -709,7 +792,7 @@ const fetchTimeline = ({
     friends: MASTODON_USER_HOME_TIMELINE_URL,
     dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
     notifications: MASTODON_USER_NOTIFICATIONS_URL,
-    'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
+    publicAndExternal: MASTODON_PUBLIC_TIMELINE,
     user: MASTODON_USER_TIMELINE_URL,
     replies: MASTODON_USER_TIMELINE_URL,
     media: MASTODON_USER_TIMELINE_URL,
@@ -761,7 +844,9 @@ const fetchTimeline = ({
 
   params.push(['limit', 20])
 
-  const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
+  const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join(
+    '&'
+  )
   url += `?${queryString}`
 
   let status = ''
@@ -787,7 +872,10 @@ const fetchTimeline = ({
         throw new Error(data.error)
       }
       if (!data.errors) {
-        return { data: data.map(isNotifications ? parseNotification : parseStatus), pagination }
+        return {
+          data: data.map(isNotifications ? parseNotification : parseStatus),
+          pagination
+        }
       } else {
         data.status = status
         data.statusText = statusText
@@ -798,8 +886,9 @@ const fetchTimeline = ({
 
 const fetchPinnedStatuses = ({ id, credentials }) => {
   const url = MASTODON_USER_TIMELINE_URL(id) + '?pinned=true'
-  return promisedRequest({ url, credentials })
-    .then((data) => data.map(parseStatus))
+  return promisedRequest({ url, credentials }).then((data) =>
+    data.map(parseStatus)
+  )
 }
 
 const verifyCredentials = (user) => {
@@ -815,27 +904,39 @@ const verifyCredentials = (user) => {
         }
       }
     })
-    .then((data) => data.error ? data : parseUser(data))
+    .then((data) => (data.error ? data : parseUser(data)))
 }
 
 const favorite = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_FAVORITE_URL(id), method: 'POST', credentials })
-    .then((data) => parseStatus(data))
+  return promisedRequest({
+    url: MASTODON_FAVORITE_URL(id),
+    method: 'POST',
+    credentials
+  }).then((data) => parseStatus(data))
 }
 
 const unfavorite = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_UNFAVORITE_URL(id), method: 'POST', credentials })
-    .then((data) => parseStatus(data))
+  return promisedRequest({
+    url: MASTODON_UNFAVORITE_URL(id),
+    method: 'POST',
+    credentials
+  }).then((data) => parseStatus(data))
 }
 
 const retweet = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_RETWEET_URL(id), method: 'POST', credentials })
-    .then((data) => parseStatus(data))
+  return promisedRequest({
+    url: MASTODON_RETWEET_URL(id),
+    method: 'POST',
+    credentials
+  }).then((data) => parseStatus(data))
 }
 
 const unretweet = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_UNRETWEET_URL(id), method: 'POST', credentials })
-    .then((data) => parseStatus(data))
+  return promisedRequest({
+    url: MASTODON_UNRETWEET_URL(id),
+    method: 'POST',
+    credentials
+  }).then((data) => parseStatus(data))
 }
 
 const getSupportedTranslationlanguages = ({ credentials }) => {
@@ -844,10 +945,13 @@ const getSupportedTranslationlanguages = ({ credentials }) => {
 
 const translateStatus = ({ id, credentials, language, from }) => {
   const queryString = from ? `?from=${from}` : ''
-  return promisedRequest({ url: AKKOMA_TRANSLATE_URL(id, language) + queryString, method: 'GET', credentials })
-    .then((data) => {
-      return data
-    })
+  return promisedRequest({
+    url: AKKOMA_TRANSLATE_URL(id, language) + queryString,
+    method: 'GET',
+    credentials
+  }).then((data) => {
+    return data
+  })
 }
 
 const bookmarkStatus = ({ id, credentials }) => {
@@ -889,19 +993,19 @@ const postStatus = ({
   if (visibility) form.append('visibility', visibility)
   if (sensitive) form.append('sensitive', sensitive)
   if (contentType) form.append('content_type', contentType)
-  mediaIds.forEach(val => {
+  mediaIds.forEach((val) => {
     form.append('media_ids[]', val)
   })
-  if (pollOptions.some(option => option !== '')) {
+  if (pollOptions.some((option) => option !== '')) {
     const normalizedPoll = {
       expires_in: poll.expiresIn,
       multiple: poll.multiple
     }
-    Object.keys(normalizedPoll).forEach(key => {
+    Object.keys(normalizedPoll).forEach((key) => {
       form.append(`poll[${key}]`, normalizedPoll[key])
     })
 
-    pollOptions.forEach(option => {
+    pollOptions.forEach((option) => {
       form.append('poll[options][]', option)
     })
   }
@@ -928,7 +1032,7 @@ const postStatus = ({
     .then((response) => {
       return response.json()
     })
-    .then((data) => data.error ? data : parseStatus(data))
+    .then((data) => (data.error ? data : parseStatus(data)))
 }
 
 const editStatus = ({
@@ -948,20 +1052,20 @@ const editStatus = ({
   if (spoilerText) form.append('spoiler_text', spoilerText)
   if (sensitive) form.append('sensitive', sensitive)
   if (contentType) form.append('content_type', contentType)
-  mediaIds.forEach(val => {
+  mediaIds.forEach((val) => {
     form.append('media_ids[]', val)
   })
 
-  if (pollOptions.some(option => option !== '')) {
+  if (pollOptions.some((option) => option !== '')) {
     const normalizedPoll = {
       expires_in: poll.expiresIn,
       multiple: poll.multiple
     }
-    Object.keys(normalizedPoll).forEach(key => {
+    Object.keys(normalizedPoll).forEach((key) => {
       form.append(`poll[${key}]`, normalizedPoll[key])
     })
 
-    pollOptions.forEach(option => {
+    pollOptions.forEach((option) => {
       form.append('poll[options][]', option)
     })
   }
@@ -976,7 +1080,7 @@ const editStatus = ({
     .then((response) => {
       return response.json()
     })
-    .then((data) => data.error ? data : parseStatus(data))
+    .then((data) => (data.error ? data : parseStatus(data)))
 }
 
 const deleteStatus = ({ id, credentials }) => {
@@ -1014,8 +1118,7 @@ const importMutes = ({ file, credentials }) => {
     body: formData,
     method: 'POST',
     headers: authHeaders(credentials)
-  })
-    .then((response) => response.ok)
+  }).then((response) => response.ok)
 }
 
 const importBlocks = ({ file, credentials }) => {
@@ -1025,8 +1128,7 @@ const importBlocks = ({ file, credentials }) => {
     body: formData,
     method: 'POST',
     headers: authHeaders(credentials)
-  })
-    .then((response) => response.ok)
+  }).then((response) => response.ok)
 }
 
 const importFollows = ({ file, credentials }) => {
@@ -1036,8 +1138,7 @@ const importFollows = ({ file, credentials }) => {
     body: formData,
     method: 'POST',
     headers: authHeaders(credentials)
-  })
-    .then((response) => response.ok)
+  }).then((response) => response.ok)
 }
 
 const deleteAccount = ({ credentials, password }) => {
@@ -1049,8 +1150,7 @@ const deleteAccount = ({ credentials, password }) => {
     body: form,
     method: 'POST',
     headers: authHeaders(credentials)
-  })
-    .then((response) => response.json())
+  }).then((response) => response.json())
 }
 
 const changeEmail = ({ credentials, email, password }) => {
@@ -1063,8 +1163,7 @@ const changeEmail = ({ credentials, email, password }) => {
     body: form,
     method: 'POST',
     headers: authHeaders(credentials)
-  })
-    .then((response) => response.json())
+  }).then((response) => response.json())
 }
 
 const moveAccount = ({ credentials, password, targetAccount }) => {
@@ -1077,8 +1176,7 @@ const moveAccount = ({ credentials, password, targetAccount }) => {
     body: form,
     method: 'POST',
     headers: authHeaders(credentials)
-  })
-    .then((response) => response.json())
+  }).then((response) => response.json())
 }
 
 const addAlias = ({ credentials, alias }) => {
@@ -1105,12 +1203,17 @@ const listAliases = ({ credentials }) => {
     method: 'GET',
     credentials,
     params: {
-      _cacheBooster: (new Date()).getTime()
+      _cacheBooster: new Date().getTime()
     }
   })
 }
 
-const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => {
+const changePassword = ({
+  credentials,
+  password,
+  newPassword,
+  newPasswordConfirmation
+}) => {
   const form = new FormData()
 
   form.append('password', password)
@@ -1121,8 +1224,7 @@ const changePassword = ({ credentials, password, newPassword, newPasswordConfirm
     body: form,
     method: 'POST',
     headers: authHeaders(credentials)
-  })
-    .then((response) => response.json())
+  }).then((response) => response.json())
 }
 
 const settingsMFA = ({ credentials }) => {
@@ -1141,8 +1243,7 @@ const mfaDisableOTP = ({ credentials, password }) => {
     body: form,
     method: 'DELETE',
     headers: authHeaders(credentials)
-  })
-    .then((response) => response.json())
+  }).then((response) => response.json())
 }
 
 const mfaConfirmOTP = ({ credentials, password, token }) => {
@@ -1171,16 +1272,25 @@ const generateMfaBackupCodes = ({ credentials }) => {
 }
 
 const fetchMutes = ({ credentials }) => {
-  return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials })
-    .then((users) => users.map(parseUser))
+  return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials }).then(
+    (users) => users.map(parseUser)
+  )
 }
 
 const muteUser = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST' })
+  return promisedRequest({
+    url: MASTODON_MUTE_USER_URL(id),
+    credentials,
+    method: 'POST'
+  })
 }
 
 const unmuteUser = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_UNMUTE_USER_URL(id), credentials, method: 'POST' })
+  return promisedRequest({
+    url: MASTODON_UNMUTE_USER_URL(id),
+    credentials,
+    method: 'POST'
+  })
 }
 
 const setNote = ({ id, note, credentials }) => {
@@ -1210,16 +1320,25 @@ const updateMascot = ({ mascot, credentials }) => {
 }
 
 const subscribeUser = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_SUBSCRIBE_USER(id), credentials, method: 'POST' })
+  return promisedRequest({
+    url: MASTODON_SUBSCRIBE_USER(id),
+    credentials,
+    method: 'POST'
+  })
 }
 
 const unsubscribeUser = ({ id, credentials }) => {
-  return promisedRequest({ url: MASTODON_UNSUBSCRIBE_USER(id), credentials, method: 'POST' })
+  return promisedRequest({
+    url: MASTODON_UNSUBSCRIBE_USER(id),
+    credentials,
+    method: 'POST'
+  })
 }
 
 const fetchBlocks = ({ credentials }) => {
-  return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials })
-    .then((users) => users.map(parseUser))
+  return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials }).then(
+    (users) => users.map(parseUser)
+  )
 }
 
 const addBackup = ({ credentials }) => {
@@ -1236,7 +1355,7 @@ const listBackups = ({ credentials }) => {
     method: 'GET',
     credentials,
     params: {
-      _cacheBooster: (new Date()).getTime()
+      _cacheBooster: new Date().getTime()
     }
   })
 }
@@ -1300,13 +1419,11 @@ const vote = ({ pollId, choices, credentials }) => {
 }
 
 const fetchPoll = ({ pollId, credentials }) => {
-  return promisedRequest(
-    {
-      url: MASTODON_POLL_URL(encodeURIComponent(pollId)),
-      method: 'GET',
-      credentials
-    }
-  )
+  return promisedRequest({
+    url: MASTODON_POLL_URL(encodeURIComponent(pollId)),
+    method: 'GET',
+    credentials
+  })
 }
 
 const fetchFavoritedByUsers = ({ id, credentials }) => {
@@ -1326,11 +1443,15 @@ const fetchRebloggedByUsers = ({ id, credentials }) => {
 }
 
 const fetchEmojiReactions = ({ id, credentials }) => {
-  return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id), credentials })
-    .then((reactions) => reactions.map(r => {
+  return promisedRequest({
+    url: PLEROMA_EMOJI_REACTIONS_URL(id),
+    credentials
+  }).then((reactions) =>
+    reactions.map((r) => {
       r.accounts = r.accounts.map(parseUser)
       return r
-    }))
+    })
+  )
 }
 
 const reactWithEmoji = ({ id, emoji, credentials }) => {
@@ -1354,8 +1475,8 @@ const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
     url: MASTODON_REPORT_USER_URL,
     method: 'POST',
     payload: {
-      'account_id': userId,
-      'status_ids': statusIds,
+      account_id: userId,
+      status_ids: statusIds,
       comment,
       forward
     },
@@ -1371,11 +1492,18 @@ const searchUsers = ({ credentials, query }) => {
       resolve: true
     },
     credentials
-  })
-    .then((data) => data.map(parseUser))
+  }).then((data) => data.map(parseUser))
 }
 
-const search2 = ({ credentials, q, resolve, limit, offset, following, type }) => {
+const search2 = ({
+  credentials,
+  q,
+  resolve,
+  limit,
+  offset,
+  following,
+  type
+}) => {
   let url = MASTODON_SEARCH_2
   let params = []
 
@@ -1415,10 +1543,12 @@ const search2 = ({ credentials, q, resolve, limit, offset, following, type }) =>
       }
       throw new Error('Error fetching search result', data)
     })
-    .then((data) => { return data.json() })
     .then((data) => {
-      data.accounts = data.accounts.slice(0, limit).map(u => parseUser(u))
-      data.statuses = data.statuses.slice(0, limit).map(s => parseStatus(s))
+      return data.json()
+    })
+    .then((data) => {
+      data.accounts = data.accounts.slice(0, limit).map((u) => parseUser(u))
+      data.statuses = data.statuses.slice(0, limit).map((s) => parseStatus(s))
       return data
     })
 }
@@ -1492,7 +1622,13 @@ const announcementToPayload = ({ content, startsAt, endsAt, allDay }) => {
   return payload
 }
 
-const postAnnouncement = ({ credentials, content, startsAt, endsAt, allDay }) => {
+const postAnnouncement = ({
+  credentials,
+  content,
+  startsAt,
+  endsAt,
+  allDay
+}) => {
   return promisedRequest({
     url: PLEROMA_POST_ANNOUNCEMENT_URL,
     credentials,
@@ -1501,7 +1637,14 @@ const postAnnouncement = ({ credentials, content, startsAt, endsAt, allDay }) =>
   })
 }
 
-const editAnnouncement = ({ id, credentials, content, startsAt, endsAt, allDay }) => {
+const editAnnouncement = ({
+  id,
+  credentials,
+  content,
+  startsAt,
+  endsAt,
+  allDay
+}) => {
   return promisedRequest({
     url: PLEROMA_EDIT_ANNOUNCEMENT_URL(id),
     credentials,
@@ -1525,7 +1668,12 @@ const getSettingsProfile = ({ profileName, credentials }) => {
   })
 }
 
-const saveSettingsProfile = ({ profileName, credentials, settings, version }) => {
+const saveSettingsProfile = ({
+  profileName,
+  credentials,
+  settings,
+  version
+}) => {
   return promisedRequest({
     url: AKKOMA_SETTING_PROFILE_URL(profileName),
     method: 'PUT',
@@ -1577,10 +1725,7 @@ const unfollowHashtag = ({ tag, credentials }) => {
 
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
   return Object.entries({
-    ...(credentials
-      ? { access_token: credentials }
-      : {}
-    ),
+    ...(credentials ? { access_token: credentials } : {}),
     stream,
     ...args
   }).reduce((acc, [key, val]) => {
@@ -1596,8 +1741,7 @@ const MASTODON_STREAMING_EVENTS = new Set([
   'status.update'
 ])
 
-const PLEROMA_STREAMING_EVENTS = new Set([
-])
+const PLEROMA_STREAMING_EVENTS = new Set([])
 
 // A thin wrapper around WebSocket API that allows adding a pre-processor to it
 // Uses EventTarget and a CustomEvent to proxy events
@@ -1609,12 +1753,11 @@ export const ProcessedWS = ({
   const eventTarget = new EventTarget()
   const socket = new WebSocket(url)
   if (!socket) throw new Error(`Failed to create socket ${id}`)
-  const proxy = (original, eventName, processor = a => a) => {
+  const proxy = (original, eventName, processor = (a) => a) => {
     original.addEventListener(eventName, (eventData) => {
-      eventTarget.dispatchEvent(new CustomEvent(
-        eventName,
-        { detail: processor(eventData) }
-      ))
+      eventTarget.dispatchEvent(
+        new CustomEvent(eventName, { detail: processor(eventData) })
+      )
     })
   }
   socket.addEventListener('open', (wsEvent) => {
@@ -1653,7 +1796,9 @@ export const ProcessedWS = ({
   proxy(socket, 'error')
 
   // 1000 = Normal Closure
-  eventTarget.close = () => { socket.close(1000, 'Shutting down socket') }
+  eventTarget.close = () => {
+    socket.close(1000, 'Shutting down socket')
+  }
   eventTarget.getState = () => socket.readyState
 
   return eventTarget
@@ -1666,7 +1811,10 @@ export const handleMastoWS = (wsEvent) => {
 
   const parsedEvent = JSON.parse(data)
   const { event, payload } = parsedEvent
-  if (MASTODON_STREAMING_EVENTS.has(event) || PLEROMA_STREAMING_EVENTS.has(event)) {
+  if (
+    MASTODON_STREAMING_EVENTS.has(event) ||
+    PLEROMA_STREAMING_EVENTS.has(event)
+  ) {
     // MastoBE and PleromaBE both send payload for delete as a PLAIN string
     if (event === 'delete') {
       return { event, id: payload }
@@ -1686,12 +1834,12 @@ export const handleMastoWS = (wsEvent) => {
 }
 
 export const WSConnectionStatus = Object.freeze({
-  'JOINED': 1,
-  'CLOSED': 2,
-  'ERROR': 3,
-  'DISABLED': 4,
-  'STARTING': 5,
-  'STARTING_INITIAL': 6
+  JOINED: 1,
+  CLOSED: 2,
+  ERROR: 3,
+  DISABLED: 4,
+  STARTING: 5,
+  STARTING_INITIAL: 6
 })
 
 const apiService = {
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 4d6f80c2d..e9c3d305d 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -1,4 +1,7 @@
-import apiService, { getMastodonSocketURI, ProcessedWS } from '../api/api.service.js'
+import apiService, {
+  getMastodonSocketURI,
+  ProcessedWS
+} from '../api/api.service.js'
 import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
@@ -7,50 +10,70 @@ import announcementsFetcher from '../../services/announcements_fetcher/announcem
 import configFetcher from '../config_fetcher/config_fetcher.service.js'
 import reportsFetcher from '../reports_fetcher/reports_fetcher.service.js'
 
-const backendInteractorService = credentials => ({
-  startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
-    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
+const backendInteractorService = (credentials) => ({
+  startFetchingTimeline({
+    timeline,
+    store,
+    userId = false,
+    listId = false,
+    tag
+  }) {
+    return timelineFetcher.startFetching({
+      timeline,
+      store,
+      credentials,
+      userId,
+      listId,
+      tag
+    })
   },
 
-  fetchTimeline (args) {
+  fetchTimeline(args) {
     return timelineFetcher.fetchAndUpdate({ ...args, credentials })
   },
 
-  startFetchingNotifications ({ store }) {
+  startFetchingNotifications({ store }) {
     return notificationsFetcher.startFetching({ store, credentials })
   },
 
-  startFetchingConfig ({ store }) {
+  startFetchingConfig({ store }) {
     return configFetcher.startFetching({ store, credentials })
   },
 
-  fetchNotifications (args) {
+  fetchNotifications(args) {
     return notificationsFetcher.fetchAndUpdate({ ...args, credentials })
   },
 
-  startFetchingFollowRequests ({ store }) {
+  startFetchingFollowRequests({ store }) {
     return followRequestFetcher.startFetching({ store, credentials })
   },
 
-  startFetchingLists ({ store }) {
+  startFetchingLists({ store }) {
     return listsFetcher.startFetching({ store, credentials })
   },
 
-  startFetchingAnnouncements ({ store }) {
+  startFetchingAnnouncements({ store }) {
     return announcementsFetcher.startFetching({ store, credentials })
   },
 
-  startFetchingReports ({ store, state, limit, page, pageSize }) {
-    return reportsFetcher.startFetching({ store, credentials, state, limit, page, pageSize })
+  startFetchingReports({ store, state, limit, page, pageSize }) {
+    return reportsFetcher.startFetching({
+      store,
+      credentials,
+      state,
+      limit,
+      page,
+      pageSize
+    })
   },
 
-  startUserSocket ({ store }) {
+  startUserSocket({ store }) {
     const serv = store.rootState.instance.server.replace('http', 'ws')
     const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
     return ProcessedWS({ url, id: 'User' })
   },
 
-  getSupportedTranslationlanguages ({ store }) {
+  getSupportedTranslationlanguages({ store }) {
     return apiService.getSupportedTranslationlanguages({ store, credentials })
   },
 
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index ec1042699..6a1a1fec9 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -1,7 +1,8 @@
 import { invertLightness, contrastRatio } from 'chromatism'
 
 // useful for visualizing color when debugging
-export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
+export const consoleColor = (color) =>
+  console.log('%c##########', 'background: ' + color + '; color: ' + color)
 
 /**
  * Convert r, g, b values into hex notation. All components are [0-255]
@@ -19,9 +20,9 @@ export const rgb2hex = (r, g, b) => {
     return r
   }
   if (typeof r === 'object') {
-    ({ r, g, b } = r)
+    ;({ r, g, b } = r)
   }
-  [r, g, b] = [r, g, b].map(val => {
+  ;[r, g, b] = [r, g, b].map((val) => {
     val = Math.ceil(val)
     val = val < 0 ? 0 : val
     val = val > 255 ? 255 : val
@@ -58,7 +59,10 @@ const c2linear = (bit) => {
  * @returns {Object} linear rgb color
  */
 const srgbToLinear = (srgb) => {
-  return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
+  return 'rgb'.split('').reduce((acc, c) => {
+    acc[c] = c2linear(srgb[c])
+    return acc
+  }, {})
 }
 
 /**
@@ -114,7 +118,7 @@ export const alphaBlend = (fg, fga, bg) => {
   return 'rgb'.split('').reduce((acc, c) => {
     // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
     // for opaque bg and transparent fg
-    acc[c] = (fg[c] * fga + bg[c] * (1 - fga))
+    acc[c] = fg[c] * fga + bg[c] * (1 - fga)
     return acc
   }, {})
 }
@@ -125,9 +129,10 @@ export const alphaBlend = (fg, fga, bg) => {
  * @param {Object} bedrock - layer at the very bottom
  * @param {[Object, Number]} layers[] - layers between text and bedrock
  */
-export const alphaBlendLayers = (bedrock, layers) => layers.reduce((acc, [color, opacity]) => {
-  return alphaBlend(color, opacity, acc)
-}, bedrock)
+export const alphaBlendLayers = (bedrock, layers) =>
+  layers.reduce((acc, [color, opacity]) => {
+    return alphaBlend(color, opacity, acc)
+  }, bedrock)
 
 export const invert = (rgb) => {
   return 'rgb'.split('').reduce((acc, c) => {
@@ -144,11 +149,13 @@ export const invert = (rgb) => {
  */
 export const hex2rgb = (hex) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-  return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
-  } : null
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      }
+    : null
 }
 
 /**
@@ -171,7 +178,9 @@ export const mixrgb = (a, b) => {
  * @returns {String} CSS rgba() color
  */
 export const rgba2css = function (rgba) {
-  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a})`
+  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(
+    rgba.b
+  )}, ${rgba.a})`
 }
 
 /**
diff --git a/src/services/completion/completion.js b/src/services/completion/completion.js
index 8a6eba7e4..18910fe48 100644
--- a/src/services/completion/completion.js
+++ b/src/services/completion/completion.js
@@ -12,26 +12,30 @@ export const wordAtPosition = (str, pos) => {
 }
 
 export const addPositionToWords = (words) => {
-  return reduce(words, (result, word) => {
-    const data = {
-      word,
-      start: 0,
-      end: word.length
-    }
+  return reduce(
+    words,
+    (result, word) => {
+      const data = {
+        word,
+        start: 0,
+        end: word.length
+      }
 
-    if (result.length > 0) {
-      const previous = result.pop()
+      if (result.length > 0) {
+        const previous = result.pop()
 
-      data.start += previous.end
-      data.end += previous.end
+        data.start += previous.end
+        data.end += previous.end
 
-      result.push(previous)
-    }
+        result.push(previous)
+      }
 
-    result.push(data)
+      result.push(data)
 
-    return result
-  }, [])
+      return result
+    },
+    []
+  )
 }
 
 export const splitByWhitespaceBoundary = (str) => {
diff --git a/src/services/component_utils/component_utils.js b/src/services/component_utils/component_utils.js
index 77ea14a10..49a110860 100644
--- a/src/services/component_utils/component_utils.js
+++ b/src/services/component_utils/component_utils.js
@@ -1,10 +1,8 @@
 import isFunction from 'lodash/isFunction'
 
-const getComponentOptions = (Component) => (isFunction(Component)) ? Component.options : Component
+const getComponentOptions = (Component) =>
+  isFunction(Component) ? Component.options : Component
 
 const getComponentProps = (Component) => getComponentOptions(Component).props
 
-export {
-  getComponentOptions,
-  getComponentProps
-}
+export { getComponentOptions, getComponentProps }
diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js
index 2d38ef51d..cb11487c0 100644
--- a/src/services/date_utils/date_utils.js
+++ b/src/services/date_utils/date_utils.js
@@ -18,7 +18,11 @@ export const relativeTime = (date, nowThreshold = 1) => {
   const round = Date.now() > date ? Math.floor : Math.ceil
   const rawD = Date.now() - date
   const d = Math.abs(rawD)
-  let r = { num: round(d / YEAR), key: 'time.unit.years', direction: direction(rawD, nowThreshold * SECOND) }
+  let r = {
+    num: round(d / YEAR),
+    key: 'time.unit.years',
+    direction: direction(rawD, nowThreshold * SECOND)
+  }
   if (d < nowThreshold * SECOND) {
     r.num = 0
     r.key = 'time.now'
diff --git a/src/services/desktop_notification_utils/desktop_notification_utils.js b/src/services/desktop_notification_utils/desktop_notification_utils.js
index bf57310d2..7251c308f 100644
--- a/src/services/desktop_notification_utils/desktop_notification_utils.js
+++ b/src/services/desktop_notification_utils/desktop_notification_utils.js
@@ -1,6 +1,14 @@
 export const showDesktopNotification = (rootState, desktopNotificationOpts) => {
-  if (!('Notification' in window && window.Notification.permission === 'granted')) return
-  if (rootState.statuses.notifications.desktopNotificationSilence) { return }
+  if (
+    !('Notification' in window && window.Notification.permission === 'granted')
+  )
+    return
+  if (rootState.statuses.notifications.desktopNotificationSilence) {
+    return
+  }
 
-  return new window.Notification(desktopNotificationOpts.title, desktopNotificationOpts)
+  return new window.Notification(
+    desktopNotificationOpts.title,
+    desktopNotificationOpts
+  )
 }
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 465d6fad8..e9062047b 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -21,16 +21,25 @@ const qvitterStatusType = (status) => {
     return 'retweet'
   }
 
-  if ((typeof status.uri === 'string' && status.uri.match(/(fave|objectType=Favourite)/)) ||
-      (typeof status.text === 'string' && status.text.match(/favorited/))) {
+  if (
+    (typeof status.uri === 'string' &&
+      status.uri.match(/(fave|objectType=Favourite)/)) ||
+    (typeof status.text === 'string' && status.text.match(/favorited/))
+  ) {
     return 'favorite'
   }
 
-  if (status.text.match(/deleted notice {{tag/) || status.qvitter_delete_notice) {
+  if (
+    status.text.match(/deleted notice {{tag/) ||
+    status.qvitter_delete_notice
+  ) {
     return 'deletion'
   }
 
-  if (status.text.match(/started following/) || status.activity_type === 'follow') {
+  if (
+    status.text.match(/started following/) ||
+    status.activity_type === 'follow'
+  ) {
     return 'follow'
   }
 
@@ -65,13 +74,13 @@ export const parseUser = (data) => {
     output.description_html = data.note
 
     output.fields = data.fields
-    output.fields_html = data.fields.map(field => {
+    output.fields_html = data.fields.map((field) => {
       return {
         name: escape(field.name),
         value: field.value
       }
     })
-    output.fields_text = data.fields.map(field => {
+    output.fields_text = data.fields.map((field) => {
       return {
         name: unescape(field.name.replace(/<[^>]*>/g, '')),
         value: unescape(field.value.replace(/<[^>]*>/g, ''))
@@ -198,9 +207,10 @@ export const parseUser = (data) => {
 
     // deactivated was changed to is_active in Pleroma 2.3.0
     // so check if is_active is present
-    output.deactivated = typeof data.pleroma.is_active !== 'undefined'
-      ? !data.pleroma.is_active // new backend
-      : data.pleroma.deactivated // old backend
+    output.deactivated =
+      typeof data.pleroma.is_active !== 'undefined'
+        ? !data.pleroma.is_active // new backend
+        : data.pleroma.deactivated // old backend
 
     output.notification_settings = data.pleroma.notification_settings
   }
@@ -281,14 +291,19 @@ export const parseStatus = (data) => {
 
     if (data.pleroma) {
       const { pleroma } = data
-      output.text = pleroma.content ? data.pleroma.content['text/plain'] : data.content
-      output.summary = pleroma.spoiler_text ? data.pleroma.spoiler_text['text/plain'] : data.spoiler_text
+      output.text = pleroma.content
+        ? data.pleroma.content['text/plain']
+        : data.content
+      output.summary = pleroma.spoiler_text
+        ? data.pleroma.spoiler_text['text/plain']
+        : data.spoiler_text
       output.statusnet_conversation_id = data.pleroma.conversation_id
       output.is_local = pleroma.local
       output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct
       output.thread_muted = pleroma.thread_muted
       output.emoji_reactions = pleroma.emoji_reactions
-      output.parent_visible = pleroma.parent_visible === undefined ? true : pleroma.parent_visible
+      output.parent_visible =
+        pleroma.parent_visible === undefined ? true : pleroma.parent_visible
     } else {
       output.text = data.content
       output.summary = data.spoiler_text
@@ -313,7 +328,7 @@ export const parseStatus = (data) => {
     output.external_url = data.url
     output.poll = data.poll
     if (output.poll) {
-      output.poll.options = (output.poll.options || []).map(field => ({
+      output.poll.options = (output.poll.options || []).map((field) => ({
         ...field,
         title_html: escape(field.title)
       }))
@@ -377,10 +392,13 @@ export const parseStatus = (data) => {
 
   output.user = parseUser(masto ? data.account : data.user)
 
-  output.attentions = ((masto ? data.mentions : data.attentions) || []).map(parseUser)
+  output.attentions = ((masto ? data.mentions : data.attentions) || []).map(
+    parseUser
+  )
 
-  output.attachments = ((masto ? data.media_attachments : data.attachments) || [])
-    .map(parseAttachment)
+  output.attachments = (
+    (masto ? data.media_attachments : data.attachments) || []
+  ).map(parseAttachment)
 
   const retweetedStatus = masto ? data.reblog : data.retweeted_status
   if (retweetedStatus) {
@@ -399,8 +417,8 @@ export const parseStatus = (data) => {
 
 export const parseNotification = (data) => {
   const mastoDict = {
-    'favourite': 'like',
-    'reblog': 'repeat'
+    favourite: 'like',
+    reblog: 'repeat'
   }
   const masto = !data.hasOwnProperty('ntype')
   const output = {}
@@ -408,11 +426,11 @@ export const parseNotification = (data) => {
   if (masto) {
     output.type = mastoDict[data.type] || data.type
     output.seen = data.pleroma.is_seen
-    output.status = isStatusNotification(output.type) ? parseStatus(data.status) : null
+    output.status = isStatusNotification(output.type)
+      ? parseStatus(data.status)
+      : null
     output.action = output.status // TODO: Refactor, this is unneeded
-    output.target = output.type !== 'move'
-      ? null
-      : parseUser(data.target)
+    output.target = output.type !== 'move' ? null : parseUser(data.target)
     output.from_profile = parseUser(data.account)
     output.emoji = data.emoji
     output.emoji_url = data.emoji_url
@@ -420,9 +438,10 @@ export const parseNotification = (data) => {
     const parsedNotice = parseStatus(data.notice)
     output.type = data.ntype
     output.seen = Boolean(data.is_seen)
-    output.status = output.type === 'like'
-      ? parseStatus(data.notice.favorited_status)
-      : parsedNotice
+    output.status =
+      output.type === 'like'
+        ? parseStatus(data.notice.favorited_status)
+        : parsedNotice
     output.action = parsedNotice
     output.from_profile = parseUser(data.from_profile)
   }
@@ -439,7 +458,7 @@ export const parseReport = (data) => {
   report.account = parseUser(data.account)
   report.actor = parseUser(data.actor)
   report.statuses = data.statuses.map(parseStatus)
-  report.notes = data.notes.map(note => {
+  report.notes = data.notes.map((note) => {
     note.user = parseUser(note.user)
     return note
   })
@@ -453,7 +472,10 @@ export const parseReport = (data) => {
 
 const isNsfw = (status) => {
   const nsfwRegex = /#nsfw/i
-  return (status.tags || []).includes('nsfw') || !!(status.text || '').match(nsfwRegex)
+  return (
+    (status.tags || []).includes('nsfw') ||
+    !!(status.text || '').match(nsfwRegex)
+  )
 }
 
 export const parseLinkHeaderPagination = (linkHeader, opts = {}) => {
diff --git a/src/services/errors/errors.js b/src/services/errors/errors.js
index d4cf91328..f1abeb133 100644
--- a/src/services/errors/errors.js
+++ b/src/services/errors/errors.js
@@ -1,14 +1,16 @@
 import { humanizeErrors } from '../../modules/errors'
 
-export function StatusCodeError (statusCode, body, options, response) {
+export function StatusCodeError(statusCode, body, options, response) {
   this.name = 'StatusCodeError'
   this.statusCode = statusCode
-  this.message = statusCode + ' - ' + (JSON && JSON.stringify ? JSON.stringify(body) : body)
+  this.message =
+    statusCode + ' - ' + (JSON && JSON.stringify ? JSON.stringify(body) : body)
   this.error = body // legacy attribute
   this.options = options
   this.response = response
 
-  if (Error.captureStackTrace) { // required for non-V8 environments
+  if (Error.captureStackTrace) {
+    // required for non-V8 environments
     Error.captureStackTrace(this)
   }
 }
@@ -16,7 +18,7 @@ StatusCodeError.prototype = Object.create(Error.prototype)
 StatusCodeError.prototype.constructor = StatusCodeError
 
 export class RegistrationError extends Error {
-  constructor (error) {
+  constructor(error) {
     super()
     if (Error.captureStackTrace) {
       Error.captureStackTrace(this)
diff --git a/src/services/export_import/export_import.js b/src/services/export_import/export_import.js
index ac67cf9c5..cfdc53bfd 100644
--- a/src/services/export_import/export_import.js
+++ b/src/services/export_import/export_import.js
@@ -1,14 +1,14 @@
-export const newExporter = ({
-  filename = 'data',
-  getExportedObject
-}) => ({
-  exportData () {
+export const newExporter = ({ filename = 'data', getExportedObject }) => ({
+  exportData() {
     const stringified = JSON.stringify(getExportedObject(), null, 2) // Pretty-print and indent with 2 spaces
 
     // Create an invisible link with a data url and simulate a click
     const e = document.createElement('a')
     e.setAttribute('download', `${filename}.json`)
-    e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+    e.setAttribute(
+      'href',
+      'data:application/json;base64,' + window.btoa(stringified)
+    )
     e.style.display = 'none'
 
     document.body.appendChild(e)
@@ -22,12 +22,12 @@ export const newImporter = ({
   onImportFailure,
   validator = () => true
 }) => ({
-  importData () {
+  importData() {
     const filePicker = document.createElement('input')
     filePicker.setAttribute('type', 'file')
     filePicker.setAttribute('accept', '.json')
 
-    filePicker.addEventListener('change', event => {
+    filePicker.addEventListener('change', (event) => {
       if (event.target.files[0]) {
         // eslint-disable-next-line no-undef
         const reader = new FileReader()
diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js
index 801c65b8f..c7d38446d 100644
--- a/src/services/favicon_service/favicon_service.js
+++ b/src/services/favicon_service/favicon_service.js
@@ -7,7 +7,7 @@ const createFaviconService = () => {
 
   const initFaviconService = () => {
     const nodes = document.querySelectorAll('link[rel="icon"]')
-    nodes.forEach(favicon => {
+    nodes.forEach((favicon) => {
       if (favicon) {
         const favcanvas = document.createElement('canvas')
         favcanvas.width = faviconWidth
@@ -30,7 +30,17 @@ const createFaviconService = () => {
 
       favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
       if (isImageLoaded(favimg)) {
-        favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
+        favcontext.drawImage(
+          favimg,
+          0,
+          0,
+          favimg.width,
+          favimg.height,
+          0,
+          0,
+          faviconWidth,
+          faviconHeight
+        )
       }
       favicon.href = favcanvas.toDataURL('image/png')
     })
@@ -43,22 +53,48 @@ const createFaviconService = () => {
       if (!favimg || !favcontext || !favcontext) return
 
       const style = getComputedStyle(document.body)
-      const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`
+      const badgeColor = `${
+        style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'
+      }`
 
       if (isImageLoaded(favimg)) {
-        favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
+        favcontext.drawImage(
+          favimg,
+          0,
+          0,
+          favimg.width,
+          favimg.height,
+          0,
+          0,
+          faviconWidth,
+          faviconHeight
+        )
       }
 
       // draw bigger transparent circle to create gap
       favcontext.globalCompositeOperation = 'destination-out'
       favcontext.beginPath()
-      favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius + gapWidth, 0, 2 * Math.PI, false)
+      favcontext.arc(
+        faviconWidth - badgeRadius,
+        badgeRadius,
+        badgeRadius + gapWidth,
+        0,
+        2 * Math.PI,
+        false
+      )
       favcontext.fill()
 
       favcontext.globalCompositeOperation = 'source-over'
       favcontext.fillStyle = badgeColor
       favcontext.beginPath()
-      favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
+      favcontext.arc(
+        faviconWidth - badgeRadius,
+        badgeRadius,
+        badgeRadius,
+        0,
+        2 * Math.PI,
+        false
+      )
       favcontext.fill()
       favicon.href = favcanvas.toDataURL('image/png')
     })
diff --git a/src/services/file_size_format/file_size_format.js b/src/services/file_size_format/file_size_format.js
index 7e6cd4d79..cfaf32c3b 100644
--- a/src/services/file_size_format/file_size_format.js
+++ b/src/services/file_size_format/file_size_format.js
@@ -6,7 +6,10 @@ const fileSizeFormat = (num) => {
     return num + ' ' + units[0]
   }
 
-  exponent = Math.min(Math.floor(Math.log(num) / Math.log(1024)), units.length - 1)
+  exponent = Math.min(
+    Math.floor(Math.log(num) / Math.log(1024)),
+    units.length - 1
+  )
   num = (num / Math.pow(1024, exponent)).toFixed(2) * 1
   unit = units[exponent]
   return { num: num, unit: unit }
diff --git a/src/services/file_type/file_type.service.js b/src/services/file_type/file_type.service.js
index 5182ecd18..cc8775a85 100644
--- a/src/services/file_type/file_type.service.js
+++ b/src/services/file_type/file_type.service.js
@@ -1,7 +1,7 @@
 // TODO this func might as well take the entire file and use its mimetype
 // or the entire service could be just mimetype service that only operates
 // on mimetypes and not files. Currently the naming is confusing.
-const fileType = mimetype => {
+const fileType = (mimetype) => {
   if (mimetype.match(/flash/)) {
     return 'flash'
   }
@@ -26,7 +26,7 @@ const fileType = mimetype => {
 }
 
 const fileMatchesSomeType = (types, file) =>
-  types.some(type => fileType(file.mimetype) === type)
+  types.some((type) => fileType(file.mimetype) === type)
 
 const fileTypeService = {
   fileType,
diff --git a/src/services/follow_manipulate/follow_manipulate.js b/src/services/follow_manipulate/follow_manipulate.js
index 08f4c4d63..2647c509d 100644
--- a/src/services/follow_manipulate/follow_manipulate.js
+++ b/src/services/follow_manipulate/follow_manipulate.js
@@ -1,52 +1,64 @@
-const fetchRelationship = (attempt, userId, store) => new Promise((resolve, reject) => {
-  setTimeout(() => {
-    store.state.api.backendInteractor.fetchUserRelationship({ id: userId })
-      .then((relationship) => {
-        store.commit('updateUserRelationship', [relationship])
-        return relationship
-      })
-      .then((relationship) => resolve([relationship.following, relationship.requested, relationship.locked, attempt]))
-      .catch((e) => reject(e))
-  }, 500)
-}).then(([following, sent, locked, attempt]) => {
-  if (!following && !(locked && sent) && attempt <= 3) {
-    // If we BE reports that we still not following that user - retry,
-    // increment attempts by one
-    fetchRelationship(++attempt, userId, store)
-  }
-})
+const fetchRelationship = (attempt, userId, store) =>
+  new Promise((resolve, reject) => {
+    setTimeout(() => {
+      store.state.api.backendInteractor
+        .fetchUserRelationship({ id: userId })
+        .then((relationship) => {
+          store.commit('updateUserRelationship', [relationship])
+          return relationship
+        })
+        .then((relationship) =>
+          resolve([
+            relationship.following,
+            relationship.requested,
+            relationship.locked,
+            attempt
+          ])
+        )
+        .catch((e) => reject(e))
+    }, 500)
+  }).then(([following, sent, locked, attempt]) => {
+    if (!following && !(locked && sent) && attempt <= 3) {
+      // If we BE reports that we still not following that user - retry,
+      // increment attempts by one
+      fetchRelationship(++attempt, userId, store)
+    }
+  })
 
-export const requestFollow = (userId, store) => new Promise((resolve, reject) => {
-  store.state.api.backendInteractor.followUser({ id: userId })
-    .then((updated) => {
-      store.commit('updateUserRelationship', [updated])
+export const requestFollow = (userId, store) =>
+  new Promise((resolve, reject) => {
+    store.state.api.backendInteractor
+      .followUser({ id: userId })
+      .then((updated) => {
+        store.commit('updateUserRelationship', [updated])
 
-      if (updated.following || (updated.locked && updated.requested)) {
-        // If we get result immediately or the account is locked, just stop.
-        resolve()
-        return
-      }
+        if (updated.following || (updated.locked && updated.requested)) {
+          // If we get result immediately or the account is locked, just stop.
+          resolve()
+          return
+        }
 
-      // But usually we don't get result immediately, so we ask server
-      // for updated user profile to confirm if we are following them
-      // Sometimes it takes several tries. Sometimes we end up not following
-      // user anyway, probably because they locked themselves and we
-      // don't know that yet.
-      // Recursive Promise, it will call itself up to 3 times.
+        // But usually we don't get result immediately, so we ask server
+        // for updated user profile to confirm if we are following them
+        // Sometimes it takes several tries. Sometimes we end up not following
+        // user anyway, probably because they locked themselves and we
+        // don't know that yet.
+        // Recursive Promise, it will call itself up to 3 times.
 
-      return fetchRelationship(1, updated, store)
-        .then(() => {
+        return fetchRelationship(1, updated, store).then(() => {
           resolve()
         })
-    })
-})
-
-export const requestUnfollow = (userId, store) => new Promise((resolve, reject) => {
-  store.state.api.backendInteractor.unfollowUser({ id: userId })
-    .then((updated) => {
-      store.commit('updateUserRelationship', [updated])
-      resolve({
-        updated
       })
-    })
-})
+  })
+
+export const requestUnfollow = (userId, store) =>
+  new Promise((resolve, reject) => {
+    store.state.api.backendInteractor
+      .unfollowUser({ id: userId })
+      .then((updated) => {
+        store.commit('updateUserRelationship', [updated])
+        resolve({
+          updated
+        })
+      })
+  })
diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
index 5c0ab85ee..ef5fa4e12 100644
--- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js
+++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js
@@ -2,11 +2,15 @@ import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 
 const fetchAndUpdate = ({ store, credentials }) => {
-  return apiService.fetchFollowRequests({ credentials })
-    .then((requests) => {
-      store.commit('setFollowRequests', requests)
-      store.commit('addNewUsers', requests)
-    }, () => {})
+  return apiService
+    .fetchFollowRequests({ credentials })
+    .then(
+      (requests) => {
+        store.commit('setFollowRequests', requests)
+        store.commit('addNewUsers', requests)
+      },
+      () => {}
+    )
     .catch(() => {})
 }
 
diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js
index 265a7f25e..0f8763181 100644
--- a/src/services/gesture_service/gesture_service.js
+++ b/src/services/gesture_service/gesture_service.js
@@ -1,4 +1,3 @@
-
 const DIRECTION_LEFT = [-1, 0]
 const DIRECTION_RIGHT = [1, 0]
 const DIRECTION_UP = [0, -1]
@@ -6,22 +5,25 @@ const DIRECTION_DOWN = [0, 1]
 
 const BUTTON_LEFT = 0
 
-const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]]
+const deltaCoord = (oldCoord, newCoord) => [
+  newCoord[0] - oldCoord[0],
+  newCoord[1] - oldCoord[1]
+]
 
-const touchCoord = touch => [touch.screenX, touch.screenY]
+const touchCoord = (touch) => [touch.screenX, touch.screenY]
 
-const touchEventCoord = e => touchCoord(e.touches[0])
+const touchEventCoord = (e) => touchCoord(e.touches[0])
 
-const pointerEventCoord = e => [e.clientX, e.clientY]
+const pointerEventCoord = (e) => [e.clientX, e.clientY]
 
-const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1])
+const vectorLength = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1])
 
-const perpendicular = v => [v[1], -v[0]]
+const perpendicular = (v) => [v[1], -v[0]]
 
 const dotProduct = (v1, v2) => v1[0] * v2[0] + v1[1] * v2[1]
 
 const project = (v1, v2) => {
-  const scalar = (dotProduct(v1, v2) / dotProduct(v2, v2))
+  const scalar = dotProduct(v1, v2) / dotProduct(v2, v2)
   return [scalar * v2[0], scalar * v2[1]]
 }
 
@@ -31,7 +33,12 @@ const project = (v1, v2) => {
 // divergentTolerance: a scalar for much of divergent direction we tolerate when
 //    above threshold. for example, with 1.0 we only call the callback if
 //    divergent component of delta is < 1.0 * direction component of delta.
-const swipeGesture = (direction, onSwipe, threshold = 30, perpendicularTolerance = 1.0) => {
+const swipeGesture = (
+  direction,
+  onSwipe,
+  threshold = 30,
+  perpendicularTolerance = 1.0
+) => {
   return {
     direction,
     onSwipe,
@@ -61,7 +68,8 @@ const updateSwipe = (event, gesture) => {
   if (
     vectorLength(towardsDir) * gesture.perpendicularTolerance <
     vectorLength(towardsPerpendicular)
-  ) return
+  )
+    return
 
   gesture.onSwipe()
   gesture._swiping = false
@@ -74,7 +82,7 @@ class SwipeAndClickGesture {
   //   sign: if the swipe does not meet the threshold, 0
   //         if the swipe meets the threshold in the positive direction, 1
   //         if the swipe meets the threshold in the negative direction, -1
-  constructor ({
+  constructor({
     direction,
     // swipeStartCallback
     swipePreviewCallback,
@@ -91,13 +99,17 @@ class SwipeAndClickGesture {
     this.swipeEndCallback = swipeEndCallback || nop
     this.swipeCancelCallback = swipeCancelCallback || nop
     this.swipelessClickCallback = swipelessClickCallback || nop
-    this.threshold = typeof threshold === 'function' ? threshold : () => threshold
-    this.disableClickThreshold = typeof disableClickThreshold === 'function' ? disableClickThreshold : () => disableClickThreshold
+    this.threshold =
+      typeof threshold === 'function' ? threshold : () => threshold
+    this.disableClickThreshold =
+      typeof disableClickThreshold === 'function'
+        ? disableClickThreshold
+        : () => disableClickThreshold
     this.perpendicularTolerance = perpendicularTolerance
     this._reset()
   }
 
-  _reset () {
+  _reset() {
     this._startPos = [0, 0]
     this._pointerId = -1
     this._swiping = false
@@ -105,7 +117,7 @@ class SwipeAndClickGesture {
     this._preventNextClick = false
   }
 
-  start (event) {
+  start(event) {
     // Only handle left click
     if (event.button !== BUTTON_LEFT) {
       return
@@ -117,7 +129,7 @@ class SwipeAndClickGesture {
     this._swiped = false
   }
 
-  move (event) {
+  move(event) {
     if (this._swiping && this._pointerId === event.pointerId) {
       this._swiped = true
 
@@ -128,7 +140,7 @@ class SwipeAndClickGesture {
     }
   }
 
-  cancel (event) {
+  cancel(event) {
     if (!this._swiping || this._pointerId !== event.pointerId) {
       return
     }
@@ -136,7 +148,7 @@ class SwipeAndClickGesture {
     this.swipeCancelCallback()
   }
 
-  end (event) {
+  end(event) {
     if (!this._swiping) {
       return
     }
@@ -164,7 +176,7 @@ class SwipeAndClickGesture {
       const towardsPerpendicular = project(delta, perpendicularDir)
       if (
         vectorLength(towardsDir) * this.perpendicularTolerance <
-          vectorLength(towardsPerpendicular)
+        vectorLength(towardsPerpendicular)
       ) {
         return 0
       }
@@ -180,12 +192,15 @@ class SwipeAndClickGesture {
     // the end point is far from the starting point
     // so for other kinds of pointers do not check
     // whether we have swiped
-    if (vectorLength(delta) >= this.disableClickThreshold() && event.pointerType === 'mouse') {
+    if (
+      vectorLength(delta) >= this.disableClickThreshold() &&
+      event.pointerType === 'mouse'
+    ) {
       this._preventNextClick = true
     }
   }
 
-  click (event) {
+  click(event) {
     if (!this._preventNextClick) {
       this.swipelessClickCallback()
     }
diff --git a/src/services/html_converter/html_line_converter.service.js b/src/services/html_converter/html_line_converter.service.js
index 5eeaa7cb2..5ec8dcfed 100644
--- a/src/services/html_converter/html_line_converter.service.js
+++ b/src/services/html_converter/html_line_converter.service.js
@@ -22,16 +22,58 @@ export const convertHtmlToLines = (html = '') => {
   // Elements that are implicitly self-closing
   // https://developer.mozilla.org/en-US/docs/Glossary/empty_element
   const emptyElements = new Set([
-    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
-    'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'keygen',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr'
   ])
   // Block-level element (they make a visual line)
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
   const blockElements = new Set([
-    'address', 'article', 'aside', 'blockquote', 'details', 'dialog', 'dd',
-    'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form',
-    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'li', 'main',
-    'nav', 'ol', 'p', 'pre', 'section', 'table', 'ul'
+    'address',
+    'article',
+    'aside',
+    'blockquote',
+    'details',
+    'dialog',
+    'dd',
+    'div',
+    'dl',
+    'dt',
+    'fieldset',
+    'figcaption',
+    'figure',
+    'footer',
+    'form',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'header',
+    'hgroup',
+    'hr',
+    'li',
+    'main',
+    'nav',
+    'ol',
+    'p',
+    'pre',
+    'section',
+    'table',
+    'ul'
   ])
   // br is very weird in a way that it's technically not block-level, it's
   // essentially converted to a \n (or \r\n). There's also wbr but it doesn't
@@ -61,7 +103,8 @@ export const convertHtmlToLines = (html = '') => {
   let textBuffer = '' // Current line content
   let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
 
-  const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
+  const flush = () => {
+    // Processes current line buffer, adds it to output buffer and clears line buffer
     if (textBuffer.trim().length > 0) {
       buffer.push({ level: [...level], text: textBuffer })
     } else {
@@ -70,23 +113,27 @@ export const convertHtmlToLines = (html = '') => {
     textBuffer = ''
   }
 
-  const handleBr = (tag) => { // handles single newlines/linebreaks/selfclosing
+  const handleBr = (tag) => {
+    // handles single newlines/linebreaks/selfclosing
     flush()
     buffer.push(tag)
   }
 
-  const handleOpen = (tag) => { // handles opening tags
+  const handleOpen = (tag) => {
+    // handles opening tags
     flush()
     buffer.push(tag)
     level.unshift(getTagName(tag))
   }
 
-  const handleClose = (tag) => { // handles closing tags
+  const handleClose = (tag) => {
+    // handles closing tags
     if (level[0] === getTagName(tag)) {
       flush()
       buffer.push(tag)
       level.shift()
-    } else { // Broken case
+    } else {
+      // Broken case
       textBuffer += tag
     }
   }
diff --git a/src/services/html_converter/html_tree_converter.service.js b/src/services/html_converter/html_tree_converter.service.js
index 247a81736..984783fc2 100644
--- a/src/services/html_converter/html_tree_converter.service.js
+++ b/src/services/html_converter/html_tree_converter.service.js
@@ -24,8 +24,21 @@ export const convertHtmlToTree = (html = '') => {
   // Elements that are implicitly self-closing
   // https://developer.mozilla.org/en-US/docs/Glossary/empty_element
   const emptyElements = new Set([
-    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
-    'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'keygen',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr'
   ])
   // TODO For future - also parse HTML5 multi-source components?
 
@@ -38,7 +51,8 @@ export const convertHtmlToTree = (html = '') => {
     return levels[levels.length - 1][1]
   }
 
-  const flushText = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
+  const flushText = () => {
+    // Processes current line buffer, adds it to output buffer and clears line buffer
     if (textBuffer === '') return
     getCurrentBuffer().push(textBuffer)
     textBuffer = ''
@@ -79,7 +93,10 @@ export const convertHtmlToTree = (html = '') => {
       const tagName = getTagName(tagFull)
       if (tagFull[1] === '/') {
         handleClose(tagFull)
-      } else if (emptyElements.has(tagName) || tagFull[tagFull.length - 2] === '/') {
+      } else if (
+        emptyElements.has(tagName) ||
+        tagFull[tagFull.length - 2] === '/'
+      ) {
         // self-closing
         handleSelfClosing(tagFull)
       } else {
diff --git a/src/services/html_converter/utility.service.js b/src/services/html_converter/utility.service.js
index 4d0c36c2b..2f0656aa1 100644
--- a/src/services/html_converter/utility.service.js
+++ b/src/services/html_converter/utility.service.js
@@ -16,13 +16,15 @@ export const getTagName = (tag) => {
  * @return {Object} - map of attributes key = attribute name, value = attribute value
  *   attributes without values represented as boolean true
  */
-export const getAttrs = tag => {
+export const getAttrs = (tag) => {
   const innertag = tag
     .substring(1, tag.length - 1)
     .replace(new RegExp('^' + getTagName(tag)), '')
     .replace(/\/?$/, '')
     .trim()
-  const attrs = Array.from(innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi))
+  const attrs = Array.from(
+    innertag.matchAll(/([a-z0-9-]+)(?:=("[^"]+?"|'[^']+?'))?/gi)
+  )
     .map(([trash, key, value]) => [key, value])
     .map(([k, v]) => {
       if (!v) return [k, true]
@@ -51,7 +53,10 @@ export const processTextForEmoji = (text, emojis, processor) => {
       const next = text.slice(i + 1)
       let found = false
       for (let emoji of emojis) {
-        if (next.slice(0, emoji.shortcode.length + 1) === (emoji.shortcode + ':')) {
+        if (
+          next.slice(0, emoji.shortcode.length + 1) ===
+          emoji.shortcode + ':'
+        ) {
           found = emoji
           break
         }
diff --git a/src/services/lists_fetcher/lists_fetcher.service.js b/src/services/lists_fetcher/lists_fetcher.service.js
index 8d9dae666..faa1738cd 100644
--- a/src/services/lists_fetcher/lists_fetcher.service.js
+++ b/src/services/lists_fetcher/lists_fetcher.service.js
@@ -2,10 +2,14 @@ import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 
 const fetchAndUpdate = ({ store, credentials }) => {
-  return apiService.fetchLists({ credentials })
-    .then(lists => {
-      store.commit('setLists', lists)
-    }, () => {})
+  return apiService
+    .fetchLists({ credentials })
+    .then(
+      (lists) => {
+        store.commit('setLists', lists)
+      },
+      () => {}
+    )
     .catch(() => {})
 }
 
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index 8cef25221..f8469bb19 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -3,27 +3,34 @@ import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
 
 const specialLanguageCodes = {
-  'ja_easy': 'ja',
-  'zh_Hant': 'zh-HANT',
-  'zh': 'zh-Hans'
+  ja_easy: 'ja',
+  zh_Hant: 'zh-HANT',
+  zh: 'zh-Hans'
 }
 
-const internalToBrowserLocale = code => specialLanguageCodes[code] || code
+const internalToBrowserLocale = (code) => specialLanguageCodes[code] || code
 
-const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-')
+const internalToBackendLocale = (code) =>
+  internalToBrowserLocale(code).replace('_', '-')
 
 const getLanguageName = (code) => {
   const specialLanguageNames = {
-    'ja_easy': 'やさしいにほんご',
-    'zh': '简体中文',
-    'zh_Hant': '繁體中文'
+    ja_easy: 'やさしいにほんご',
+    zh: '简体中文',
+    zh_Hant: '繁體中文'
   }
   const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
   const browserLocale = internalToBrowserLocale(code)
-  return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+  return (
+    languageName.charAt(0).toLocaleUpperCase(browserLocale) +
+    languageName.slice(1)
+  )
 }
 
-const languages = _.map(languagesObject.languages, (code) => ({ code: code, name: getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+const languages = _.map(languagesObject.languages, (code) => ({
+  code: code,
+  name: getLanguageName(code)
+})).sort((a, b) => a.name.localeCompare(b.name))
 
 const localeService = {
   internalToBrowserLocale,
diff --git a/src/services/matcher/matcher.service.js b/src/services/matcher/matcher.service.js
index b6c4e9099..1231335d6 100644
--- a/src/services/matcher/matcher.service.js
+++ b/src/services/matcher/matcher.service.js
@@ -3,7 +3,10 @@ export const mentionMatchesUrl = (attention, url) => {
     return true
   }
   const [namepart, instancepart] = attention.screen_name.split('@')
-  const matchstring = new RegExp('://' + instancepart + '/.*' + namepart + '$', 'g')
+  const matchstring = new RegExp(
+    '://' + instancepart + '/.*' + namepart + '$',
+    'g'
+  )
 
   return !!url.match(matchstring)
 }
diff --git a/src/services/new_api/mfa.js b/src/services/new_api/mfa.js
index c944667c0..cff719ef6 100644
--- a/src/services/new_api/mfa.js
+++ b/src/services/new_api/mfa.js
@@ -1,4 +1,10 @@
-const verifyOTPCode = ({ clientId, clientSecret, instance, mfaToken, code }) => {
+const verifyOTPCode = ({
+  clientId,
+  clientSecret,
+  instance,
+  mfaToken,
+  code
+}) => {
   const url = `${instance}/oauth/mfa/challenge`
   const form = new window.FormData()
 
@@ -8,13 +14,21 @@ const verifyOTPCode = ({ clientId, clientSecret, instance, mfaToken, code }) =>
   form.append('code', code)
   form.append('challenge_type', 'totp')
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  }).then((data) => data.json())
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
+    .then((data) => data.json())
 }
 
-const verifyRecoveryCode = ({ clientId, clientSecret, instance, mfaToken, code }) => {
+const verifyRecoveryCode = ({
+  clientId,
+  clientSecret,
+  instance,
+  mfaToken,
+  code
+}) => {
   const url = `${instance}/oauth/mfa/challenge`
   const form = new window.FormData()
 
@@ -24,10 +38,12 @@ const verifyRecoveryCode = ({ clientId, clientSecret, instance, mfaToken, code }
   form.append('code', code)
   form.append('challenge_type', 'recovery')
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  }).then((data) => data.json())
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
+    .then((data) => data.json())
 }
 
 const mfa = {
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index 3c8e64bd9..700b6c0d5 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -2,7 +2,12 @@ import { reduce } from 'lodash'
 
 const REDIRECT_URI = `${window.location.origin}/oauth-callback`
 
-export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) => {
+export const getOrCreateApp = ({
+  clientId,
+  clientSecret,
+  instance,
+  commit
+}) => {
   if (clientId && clientSecret) {
     return Promise.resolve({ clientId, clientSecret })
   }
@@ -10,16 +15,23 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
   const url = `${instance}/api/v1/apps`
   const form = new window.FormData()
 
-  form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
+  form.append(
+    'client_name',
+    `PleromaFE_${window.___pleromafe_commit_hash}_${new Date().toISOString()}`
+  )
   form.append('redirect_uris', REDIRECT_URI)
   form.append('scopes', 'read write follow push admin')
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  })
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
     .then((data) => data.json())
-    .then((app) => ({ clientId: app.client_id, clientSecret: app.client_secret }))
+    .then((app) => ({
+      clientId: app.client_id,
+      clientSecret: app.client_secret
+    }))
     .then((app) => commit('setClientData', app) || app)
 }
 
@@ -31,14 +43,18 @@ const login = ({ instance, clientId }) => {
     scope: 'read write follow push admin'
   }
 
-  const dataString = reduce(data, (acc, v, k) => {
-    const encoded = `${k}=${encodeURIComponent(v)}`
-    if (!acc) {
-      return encoded
-    } else {
-      return `${acc}&${encoded}`
-    }
-  }, false)
+  const dataString = reduce(
+    data,
+    (acc, v, k) => {
+      const encoded = `${k}=${encodeURIComponent(v)}`
+      if (!acc) {
+        return encoded
+      } else {
+        return `${acc}&${encoded}`
+      }
+    },
+    false
+  )
 
   // Do the redirect...
   const url = `${instance}/oauth/authorize?${dataString}`
@@ -46,7 +62,13 @@ const login = ({ instance, clientId }) => {
   window.location.href = url
 }
 
-const getTokenWithCredentials = ({ clientId, clientSecret, instance, username, password }) => {
+const getTokenWithCredentials = ({
+  clientId,
+  clientSecret,
+  instance,
+  username,
+  password
+}) => {
   const url = `${instance}/oauth/token`
   const form = new window.FormData()
 
@@ -56,10 +78,12 @@ const getTokenWithCredentials = ({ clientId, clientSecret, instance, username, p
   form.append('username', username)
   form.append('password', password)
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  }).then((data) => data.json())
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
+    .then((data) => data.json())
 }
 
 const getToken = ({ clientId, clientSecret, instance, code }) => {
@@ -72,10 +96,11 @@ const getToken = ({ clientId, clientSecret, instance, code }) => {
   form.append('code', code)
   form.append('redirect_uri', `${window.location.origin}/oauth-callback`)
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  })
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
     .then((data) => data.json())
 }
 
@@ -88,10 +113,12 @@ export const getClientToken = ({ clientId, clientSecret, instance }) => {
   form.append('grant_type', 'client_credentials')
   form.append('redirect_uri', `${window.location.origin}/oauth-callback`)
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  }).then((data) => data.json())
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
+    .then((data) => data.json())
 }
 const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
   const url = `${instance}/oauth/mfa/challenge`
@@ -103,10 +130,12 @@ const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
   form.append('code', code)
   form.append('challenge_type', 'totp')
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  }).then((data) => data.json())
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
+    .then((data) => data.json())
 }
 
 const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => {
@@ -119,10 +148,12 @@ const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => {
   form.append('code', code)
   form.append('challenge_type', 'recovery')
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  }).then((data) => data.json())
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
+    .then((data) => data.json())
 }
 
 const revokeToken = ({ app, instance, token }) => {
@@ -133,10 +164,12 @@ const revokeToken = ({ app, instance, token }) => {
   form.append('client_secret', app.clientSecret)
   form.append('token', token)
 
-  return window.fetch(url, {
-    method: 'POST',
-    body: form
-  }).then((data) => data.json())
+  return window
+    .fetch(url, {
+      method: 'POST',
+      body: form
+    })
+    .then((data) => data.json())
 }
 
 const oauth = {
diff --git a/src/services/new_api/password_reset.js b/src/services/new_api/password_reset.js
index 431996250..263bea11f 100644
--- a/src/services/new_api/password_reset.js
+++ b/src/services/new_api/password_reset.js
@@ -4,10 +4,14 @@ const MASTODON_PASSWORD_RESET_URL = `/auth/password`
 
 const resetPassword = ({ instance, email }) => {
   const params = { email }
-  const query = reduce(params, (acc, v, k) => {
-    const encoded = `${k}=${encodeURIComponent(v)}`
-    return `${acc}&${encoded}`
-  }, '')
+  const query = reduce(
+    params,
+    (acc, v, k) => {
+      const encoded = `${k}=${encodeURIComponent(v)}`
+      return `${acc}&${encoded}`
+    },
+    ''
+  )
   const url = `${instance}${MASTODON_PASSWORD_RESET_URL}?${query}`
 
   return window.fetch(url, {
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index fc5b4d8b5..7bbbd4bcc 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -2,26 +2,35 @@ import { filter, sortBy, includes } from 'lodash'
 import { muteWordHits } from '../status_parser/status_parser.js'
 import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'
 
-export const notificationsFromStore = store => store.state.statuses.notifications.data
+export const notificationsFromStore = (store) =>
+  store.state.statuses.notifications.data
 
-export const visibleTypes = store => {
+export const visibleTypes = (store) => {
   const rootState = store.rootState || store.state
 
-  return ([
+  return [
     rootState.config.notificationVisibility.likes && 'like',
     rootState.config.notificationVisibility.mentions && 'mention',
     rootState.config.notificationVisibility.repeats && 'repeat',
     rootState.config.notificationVisibility.follows && 'follow',
     rootState.config.notificationVisibility.followRequest && 'follow_request',
     rootState.config.notificationVisibility.moves && 'move',
-    rootState.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction',
+    rootState.config.notificationVisibility.emojiReactions &&
+      'pleroma:emoji_reaction',
     rootState.config.notificationVisibility.polls && 'poll'
-  ].filter(_ => _))
+  ].filter((_) => _)
 }
 
-const statusNotifications = ['like', 'mention', 'repeat', 'pleroma:emoji_reaction', 'poll']
+const statusNotifications = [
+  'like',
+  'mention',
+  'repeat',
+  'pleroma:emoji_reaction',
+  'poll'
+]
 
-export const isStatusNotification = (type) => includes(statusNotifications, type)
+export const isStatusNotification = (type) =>
+  includes(statusNotifications, type)
 
 export const isValidNotification = (notification) => {
   if (isStatusNotification(notification.type) && !notification.status) {
@@ -48,7 +57,11 @@ const sortById = (a, b) => {
 
 const isMutedNotification = (store, notification) => {
   if (!notification.status) return
-  return notification.status.muted || muteWordHits(notification.status, store.rootGetters.mergedConfig.muteWords).length > 0
+  return (
+    notification.status.muted ||
+    muteWordHits(notification.status, store.rootGetters.mergedConfig.muteWords)
+      .length > 0
+  )
 }
 
 export const maybeShowNotification = (store, notification) => {
@@ -56,22 +69,32 @@ export const maybeShowNotification = (store, notification) => {
 
   if (notification.seen) return
   if (!visibleTypes(store).includes(notification.type)) return
-  if (notification.type === 'mention' && isMutedNotification(store, notification)) return
+  if (
+    notification.type === 'mention' &&
+    isMutedNotification(store, notification)
+  )
+    return
 
-  const notificationObject = prepareNotificationObject(notification, store.rootGetters.i18n, store)
+  const notificationObject = prepareNotificationObject(
+    notification,
+    store.rootGetters.i18n,
+    store
+  )
   showDesktopNotification(rootState, notificationObject)
 }
 
 export const filteredNotificationsFromStore = (store, types) => {
   // map is just to clone the array since sort mutates it and it causes some issues
-  let sortedNotifications = notificationsFromStore(store).map(_ => _).sort(sortById)
+  let sortedNotifications = notificationsFromStore(store)
+    .map((_) => _)
+    .sort(sortById)
   sortedNotifications = sortBy(sortedNotifications, 'seen')
-  return sortedNotifications.filter(
-    (notification) => (types || visibleTypes(store)).includes(notification.type)
+  return sortedNotifications.filter((notification) =>
+    (types || visibleTypes(store)).includes(notification.type)
   )
 }
 
-export const unseenNotificationsFromStore = store =>
+export const unseenNotificationsFromStore = (store) =>
   filter(filteredNotificationsFromStore(store), ({ seen }) => !seen)
 
 export const prepareNotificationObject = (notification, i18n, store) => {
@@ -121,8 +144,13 @@ export const prepareNotificationObject = (notification, i18n, store) => {
   }
 
   // Shows first attached non-nsfw image, if any. Should add configuration for this somehow...
-  if (status && status.attachments && status.attachments.length > 0 && !status.nsfw &&
-    status.attachments[0].mimetype.startsWith('image/')) {
+  if (
+    status &&
+    status.attachments &&
+    status.attachments.length > 0 &&
+    !status.nsfw &&
+    status.attachments[0].mimetype.startsWith('image/')
+  ) {
     notifObj.image = status.attachments[0].url
   }
 
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 672abcdbf..006e4c6b4 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -22,7 +22,10 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
     return fetchNotifications({ store, args, older })
   } else {
     // fetch new notifications
-    if (since === undefined && timelineData.maxId !== Number.POSITIVE_INFINITY) {
+    if (
+      since === undefined &&
+      timelineData.maxId !== Number.POSITIVE_INFINITY
+    ) {
       args['since'] = timelineData.maxId
     } else if (since !== null) {
       args['since'] = since
@@ -35,7 +38,7 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
     // we can update the state in this session to mark them as read as well.
     // The normal maxId-check does not tell if older notifications have changed
     const notifications = timelineData.data
-    const readNotifsIds = notifications.filter(n => n.seen).map(n => n.id)
+    const readNotifsIds = notifications.filter((n) => n.seen).map((n) => n.id)
     const numUnseenNotifs = notifications.length - readNotifsIds.length
     if (numUnseenNotifs > 0 && readNotifsIds.length > 0) {
       args['since'] = Math.max(...readNotifsIds)
@@ -47,7 +50,8 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
 }
 
 const fetchNotifications = ({ store, args, older }) => {
-  return apiService.fetchTimeline(args)
+  return apiService
+    .fetchTimeline(args)
     .then((response) => {
       if (response.errors) {
         throw new Error(`${response.status} ${response.statusText}`)
diff --git a/src/services/offset_finder/offset_finder.service.js b/src/services/offset_finder/offset_finder.service.js
index 5a904f08c..5cd97ea33 100644
--- a/src/services/offset_finder/offset_finder.service.js
+++ b/src/services/offset_finder/offset_finder.service.js
@@ -1,4 +1,9 @@
-export const findOffset = (child, parent, { top = 0, left = 0 } = {}, ignorePadding = true) => {
+export const findOffset = (
+  child,
+  parent,
+  { top = 0, left = 0 } = {},
+  ignorePadding = true
+) => {
   const result = {
     top: top + child.offsetTop,
     left: left + child.offsetLeft
@@ -9,7 +14,13 @@ export const findOffset = (child, parent, { top = 0, left = 0 } = {}, ignorePadd
     result.left += ignorePadding ? 0 : leftPadding
   }
 
-  if (child.offsetParent && window.getComputedStyle(child.offsetParent).position !== 'sticky' && (parent === window || parent.contains(child.offsetParent) || parent === child.offsetParent)) {
+  if (
+    child.offsetParent &&
+    window.getComputedStyle(child.offsetParent).position !== 'sticky' &&
+    (parent === window ||
+      parent.contains(child.offsetParent) ||
+      parent === child.offsetParent)
+  ) {
     return findOffset(child.offsetParent, parent, result, false)
   } else {
     if (parent !== window) {
@@ -23,9 +34,13 @@ export const findOffset = (child, parent, { top = 0, left = 0 } = {}, ignorePadd
 
 const findPadding = (el) => {
   const topPaddingStr = window.getComputedStyle(el)['padding-top']
-  const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2))
+  const topPadding = Number(
+    topPaddingStr.substring(0, topPaddingStr.length - 2)
+  )
   const leftPaddingStr = window.getComputedStyle(el)['padding-left']
-  const leftPadding = Number(leftPaddingStr.substring(0, leftPaddingStr.length - 2))
+  const leftPadding = Number(
+    leftPaddingStr.substring(0, leftPaddingStr.length - 2)
+  )
 
   return { topPadding, leftPadding }
 }
diff --git a/src/services/promise_interval/promise_interval.js b/src/services/promise_interval/promise_interval.js
index 0c0a66a01..1cee0adf8 100644
--- a/src/services/promise_interval/promise_interval.js
+++ b/src/services/promise_interval/promise_interval.js
@@ -1,4 +1,3 @@
-
 // promiseInterval - replacement for setInterval for promises, starts counting
 // the interval only after a promise is done instead of immediately.
 // - promiseCall is a function that returns a promise, it's called the first
@@ -14,7 +13,9 @@ export const promiseInterval = (promiseCall, interval) => {
     // something unexpected happened and promiseCall did not
     // return a promise, abort the loop.
     if (!(promise && promise.finally)) {
-      console.warn('promiseInterval: promise call did not return a promise, stopping interval.')
+      console.warn(
+        'promiseInterval: promise call did not return a promise, stopping interval.'
+      )
       return
     }
     promise.finally(() => {
diff --git a/src/services/push/push.js b/src/services/push/push.js
index 73e4c9956..09742d6c3 100644
--- a/src/services/push/push.js
+++ b/src/services/push/push.js
@@ -1,25 +1,28 @@
-function urlBase64ToUint8Array (base64String) {
-  const padding = '='.repeat((4 - base64String.length % 4) % 4)
-  const base64 = (base64String + padding)
-    .replace(/-/g, '+')
-    .replace(/_/g, '/')
+function urlBase64ToUint8Array(base64String) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
 
   const rawData = window.atob(base64)
   return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)))
 }
 
-function isPushSupported () {
+function isPushSupported() {
   return 'serviceWorker' in navigator && 'PushManager' in window
 }
 
-function getOrCreateServiceWorker () {
-  return navigator.serviceWorker.register('/sw-pleroma.js')
-    .catch((err) => console.error('Unable to get or create a service worker.', err))
+function getOrCreateServiceWorker() {
+  return navigator.serviceWorker
+    .register('/sw-pleroma.js')
+    .catch((err) =>
+      console.error('Unable to get or create a service worker.', err)
+    )
 }
 
-function subscribePush (registration, isEnabled, vapidPublicKey) {
-  if (!isEnabled) return Promise.reject(new Error('Web Push is disabled in config'))
-  if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
+function subscribePush(registration, isEnabled, vapidPublicKey) {
+  if (!isEnabled)
+    return Promise.reject(new Error('Web Push is disabled in config'))
+  if (!vapidPublicKey)
+    return Promise.reject(new Error('VAPID public key is not found'))
 
   const subscribeOptions = {
     userVisibleOnly: true,
@@ -28,75 +31,101 @@ function subscribePush (registration, isEnabled, vapidPublicKey) {
   return registration.pushManager.subscribe(subscribeOptions)
 }
 
-function unsubscribePush (registration) {
-  return registration.pushManager.getSubscription()
-    .then((subscribtion) => {
-      if (subscribtion === null) { return }
-      return subscribtion.unsubscribe()
-    })
-}
-
-function deleteSubscriptionFromBackEnd (token) {
-  return window.fetch('/api/v1/push/subscription/', {
-    method: 'DELETE',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${token}`
+function unsubscribePush(registration) {
+  return registration.pushManager.getSubscription().then((subscribtion) => {
+    if (subscribtion === null) {
+      return
     }
-  }).then((response) => {
-    if (!response.ok) throw new Error('Bad status code from server.')
-    return response
+    return subscribtion.unsubscribe()
   })
 }
 
-function sendSubscriptionToBackEnd (subscription, token, notificationVisibility) {
-  return window.fetch('/api/v1/push/subscription/', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${token}`
-    },
-    body: JSON.stringify({
-      subscription,
-      data: {
-        alerts: {
-          follow: notificationVisibility.follows,
-          favourite: notificationVisibility.likes,
-          mention: notificationVisibility.mentions,
-          reblog: notificationVisibility.repeats,
-          move: notificationVisibility.moves
-        }
+function deleteSubscriptionFromBackEnd(token) {
+  return window
+    .fetch('/api/v1/push/subscription/', {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
       }
     })
-  }).then((response) => {
-    if (!response.ok) throw new Error('Bad status code from server.')
-    return response.json()
-  }).then((responseData) => {
-    if (!responseData.id) throw new Error('Bad response from server.')
-    return responseData
-  })
+    .then((response) => {
+      if (!response.ok) throw new Error('Bad status code from server.')
+      return response
+    })
 }
 
-export function registerPushNotifications (isEnabled, vapidPublicKey, token, notificationVisibility) {
+function sendSubscriptionToBackEnd(
+  subscription,
+  token,
+  notificationVisibility
+) {
+  return window
+    .fetch('/api/v1/push/subscription/', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
+      },
+      body: JSON.stringify({
+        subscription,
+        data: {
+          alerts: {
+            follow: notificationVisibility.follows,
+            favourite: notificationVisibility.likes,
+            mention: notificationVisibility.mentions,
+            reblog: notificationVisibility.repeats,
+            move: notificationVisibility.moves
+          }
+        }
+      })
+    })
+    .then((response) => {
+      if (!response.ok) throw new Error('Bad status code from server.')
+      return response.json()
+    })
+    .then((responseData) => {
+      if (!responseData.id) throw new Error('Bad response from server.')
+      return responseData
+    })
+}
+
+export function registerPushNotifications(
+  isEnabled,
+  vapidPublicKey,
+  token,
+  notificationVisibility
+) {
   if (isPushSupported()) {
     getOrCreateServiceWorker()
-      .then((registration) => subscribePush(registration, isEnabled, vapidPublicKey))
-      .then((subscription) => sendSubscriptionToBackEnd(subscription, token, notificationVisibility))
-      .catch((e) => console.warn(`Failed to setup Web Push Notifications: ${e.message}`))
+      .then((registration) =>
+        subscribePush(registration, isEnabled, vapidPublicKey)
+      )
+      .then((subscription) =>
+        sendSubscriptionToBackEnd(subscription, token, notificationVisibility)
+      )
+      .catch((e) =>
+        console.warn(`Failed to setup Web Push Notifications: ${e.message}`)
+      )
   }
 }
 
-export function unregisterPushNotifications (token) {
+export function unregisterPushNotifications(token) {
   if (isPushSupported()) {
     Promise.all([
       deleteSubscriptionFromBackEnd(token),
       getOrCreateServiceWorker()
         .then((registration) => {
-          return unsubscribePush(registration).then((result) => [registration, result])
+          return unsubscribePush(registration).then((result) => [
+            registration,
+            result
+          ])
         })
         .then(([registration, unsubResult]) => {
           if (!unsubResult) {
-            console.warn('Push subscription cancellation wasn\'t successful, killing SW anyway...')
+            console.warn(
+              "Push subscription cancellation wasn't successful, killing SW anyway..."
+            )
           }
           return registration.unregister().then((result) => {
             if (!result) {
@@ -104,6 +133,8 @@ export function unregisterPushNotifications (token) {
             }
           })
         })
-    ]).catch((e) => console.warn(`Failed to disable Web Push Notifications: ${e.message}`))
+    ]).catch((e) =>
+      console.warn(`Failed to disable Web Push Notifications: ${e.message}`)
+    )
   }
 }
diff --git a/src/services/reports_fetcher/reports_fetcher.service.js b/src/services/reports_fetcher/reports_fetcher.service.js
index f0bb9dcf4..01560f8e5 100644
--- a/src/services/reports_fetcher/reports_fetcher.service.js
+++ b/src/services/reports_fetcher/reports_fetcher.service.js
@@ -2,13 +2,31 @@ import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 import { forEach } from 'lodash'
 
-const fetchAndUpdate = ({ store, credentials, state, limit, page, pageSize }) => {
-  return apiService.getReports({ credentials, state, limit, page, pageSize })
-    .then(reports => forEach(reports, report => store.commit('setReport', { report })))
+const fetchAndUpdate = ({
+  store,
+  credentials,
+  state,
+  limit,
+  page,
+  pageSize
+}) => {
+  return apiService
+    .getReports({ credentials, state, limit, page, pageSize })
+    .then((reports) =>
+      forEach(reports, (report) => store.commit('setReport', { report }))
+    )
 }
 
-const startFetching = ({ store, credentials, state, limit, page, pageSize }) => {
-  const boundFetchAndUpdate = () => fetchAndUpdate({ store, credentials, state, limit, page, pageSize })
+const startFetching = ({
+  store,
+  credentials,
+  state,
+  limit,
+  page,
+  pageSize
+}) => {
+  const boundFetchAndUpdate = () =>
+    fetchAndUpdate({ store, credentials, state, limit, page, pageSize })
   boundFetchAndUpdate()
   return promiseInterval(boundFetchAndUpdate, 60000)
 }
diff --git a/src/services/resettable_async_component.js b/src/services/resettable_async_component.js
index 1c046ce7b..2a626d831 100644
--- a/src/services/resettable_async_component.js
+++ b/src/services/resettable_async_component.js
@@ -7,19 +7,20 @@ import { defineAsyncComponent, shallowReactive, h } from 'vue'
  * this should be done from error component but could be done from loading or
  * actual target component itself if needs to be.
  */
-function getResettableAsyncComponent (asyncComponent, options) {
-  const asyncComponentFactory = () => () => defineAsyncComponent({
-    loader: asyncComponent,
-    ...options
-  })
+function getResettableAsyncComponent(asyncComponent, options) {
+  const asyncComponentFactory = () => () =>
+    defineAsyncComponent({
+      loader: asyncComponent,
+      ...options
+    })
 
   const observe = shallowReactive({ c: asyncComponentFactory() })
 
   return {
-    render () {
+    render() {
       //  emit event resetAsyncComponent to reloading
       return h(observe.c(), {
-        onResetAsyncComponent () {
+        onResetAsyncComponent() {
           observe.c = asyncComponentFactory()
         }
       })
diff --git a/src/services/ruffle_service/ruffle_service.js b/src/services/ruffle_service/ruffle_service.js
index 7411dd962..7597ce5e3 100644
--- a/src/services/ruffle_service/ruffle_service.js
+++ b/src/services/ruffle_service/ruffle_service.js
@@ -1,36 +1,43 @@
 const createRuffleService = () => {
   let ruffleInstance = null
 
-  const getRuffle = () => new Promise((resolve, reject) => {
-    if (ruffleInstance) {
-      resolve(ruffleInstance)
-      return
-    }
-    // Ruffle needs these to be set before it's loaded
-    // https://github.com/ruffle-rs/ruffle/issues/3952
-    window.RufflePlayer = {}
-    window.RufflePlayer.config = {
-      polyfills: false,
-      publicPath: '/static/ruffle'
-    }
+  const getRuffle = () =>
+    new Promise((resolve, reject) => {
+      if (ruffleInstance) {
+        resolve(ruffleInstance)
+        return
+      }
+      // Ruffle needs these to be set before it's loaded
+      // https://github.com/ruffle-rs/ruffle/issues/3952
+      window.RufflePlayer = {}
+      window.RufflePlayer.config = {
+        polyfills: false,
+        publicPath: '/static/ruffle'
+      }
 
-    // Currently it's seems like a better way of loading ruffle
-    // because it needs the wasm publically accessible, but it needs path to it
-    // and filename of wasm seems to be pseudo-randomly generated (is it a hash?)
-    const script = document.createElement('script')
-    // see webpack config, using CopyPlugin to copy it from node_modules
-    // provided via ruffle-mirror
-    script.src = '/static/ruffle/ruffle.js'
-    script.type = 'text/javascript'
-    script.onerror = (e) => { reject(e) }
-    script.onabort = (e) => { reject(e) }
-    script.oncancel = (e) => { reject(e) }
-    script.onload = () => {
-      ruffleInstance = window.RufflePlayer
-      resolve(ruffleInstance)
-    }
-    document.body.appendChild(script)
-  })
+      // Currently it's seems like a better way of loading ruffle
+      // because it needs the wasm publically accessible, but it needs path to it
+      // and filename of wasm seems to be pseudo-randomly generated (is it a hash?)
+      const script = document.createElement('script')
+      // see webpack config, using CopyPlugin to copy it from node_modules
+      // provided via ruffle-mirror
+      script.src = '/static/ruffle/ruffle.js'
+      script.type = 'text/javascript'
+      script.onerror = (e) => {
+        reject(e)
+      }
+      script.onabort = (e) => {
+        reject(e)
+      }
+      script.oncancel = (e) => {
+        reject(e)
+      }
+      script.onload = () => {
+        ruffleInstance = window.RufflePlayer
+        resolve(ruffleInstance)
+      }
+      document.body.appendChild(script)
+    })
 
   return { getRuffle }
 }
diff --git a/src/services/status_parser/status_parser.js b/src/services/status_parser/status_parser.js
index ed0f6d572..0b9fe95a7 100644
--- a/src/services/status_parser/status_parser.js
+++ b/src/services/status_parser/status_parser.js
@@ -4,7 +4,10 @@ export const muteWordHits = (status, muteWords) => {
   const statusText = status.text.toLowerCase()
   const statusSummary = status.summary.toLowerCase()
   const hits = filter(muteWords, (muteWord) => {
-    return statusText.includes(muteWord.toLowerCase()) || statusSummary.includes(muteWord.toLowerCase())
+    return (
+      statusText.includes(muteWord.toLowerCase()) ||
+      statusSummary.includes(muteWord.toLowerCase())
+    )
   })
 
   return hits
diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js
index aaef5a7a8..55d80f07a 100644
--- a/src/services/status_poster/status_poster.service.js
+++ b/src/services/status_poster/status_poster.service.js
@@ -17,20 +17,21 @@ const postStatus = ({
 }) => {
   const mediaIds = map(media, 'id')
 
-  return apiService.postStatus({
-    credentials: store.state.users.currentUser.credentials,
-    status,
-    spoilerText,
-    visibility,
-    sensitive,
-    mediaIds,
-    inReplyToStatusId,
-    quoteId,
-    contentType,
-    poll,
-    preview,
-    idempotencyKey
-  })
+  return apiService
+    .postStatus({
+      credentials: store.state.users.currentUser.credentials,
+      status,
+      spoilerText,
+      visibility,
+      sensitive,
+      mediaIds,
+      inReplyToStatusId,
+      quoteId,
+      contentType,
+      poll,
+      preview,
+      idempotencyKey
+    })
     .then((data) => {
       if (!data.error && !preview) {
         store.dispatch('addNewStatuses', {
@@ -61,16 +62,17 @@ const editStatus = ({
 }) => {
   const mediaIds = map(media, 'id')
 
-  return apiService.editStatus({
-    id: statusId,
-    credentials: store.state.users.currentUser.credentials,
-    status,
-    spoilerText,
-    sensitive,
-    poll,
-    mediaIds,
-    contentType
-  })
+  return apiService
+    .editStatus({
+      id: statusId,
+      credentials: store.state.users.currentUser.credentials,
+      status,
+      spoilerText,
+      sensitive,
+      poll,
+      mediaIds,
+      contentType
+    })
     .then((data) => {
       if (!data.error) {
         store.dispatch('addNewStatuses', {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d5bf8749b..89bebfd60 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,16 @@
 import { convert } from 'chromatism'
-import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
-import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
+import {
+  rgb2hex,
+  hex2rgb,
+  rgba2css,
+  getCssColor,
+  relativeLuminance
+} from '../color_convert/color_convert.js'
+import {
+  getColors,
+  computeDynamicColor,
+  getOpacitySlot
+} from '../theme_data/theme_data.service.js'
 
 export const applyTheme = (input) => {
   const { rules } = generatePreset(input)
@@ -26,16 +36,17 @@ export const getCssShadow = (input, usesDropShadow) => {
   }
 
   return input
-    .filter(_ => usesDropShadow ? _.inset : _)
-    .map((shad) => [
-      shad.x,
-      shad.y,
-      shad.blur,
-      shad.spread
-    ].map(_ => _ + 'px').concat([
-      getCssColor(shad.color, shad.alpha),
-      shad.inset ? 'inset' : ''
-    ]).join(' ')).join(', ')
+    .filter((_) => (usesDropShadow ? _.inset : _))
+    .map((shad) =>
+      [shad.x, shad.y, shad.blur, shad.spread]
+        .map((_) => _ + 'px')
+        .concat([
+          getCssColor(shad.color, shad.alpha),
+          shad.inset ? 'inset' : ''
+        ])
+        .join(' ')
+    )
+    .join(', ')
 }
 
 const getCssShadowFilter = (input) => {
@@ -43,19 +54,24 @@ const getCssShadowFilter = (input) => {
     return 'none'
   }
 
-  return input
-  // drop-shadow doesn't support inset or spread
-    .filter((shad) => !shad.inset && Number(shad.spread) === 0)
-    .map((shad) => [
-      shad.x,
-      shad.y,
-      // drop-shadow's blur is twice as strong compared to box-shadow
-      shad.blur / 2
-    ].map(_ => _ + 'px').concat([
-      getCssColor(shad.color, shad.alpha)
-    ]).join(' '))
-    .map(_ => `drop-shadow(${_})`)
-    .join(' ')
+  return (
+    input
+      // drop-shadow doesn't support inset or spread
+      .filter((shad) => !shad.inset && Number(shad.spread) === 0)
+      .map((shad) =>
+        [
+          shad.x,
+          shad.y,
+          // drop-shadow's blur is twice as strong compared to box-shadow
+          shad.blur / 2
+        ]
+          .map((_) => _ + 'px')
+          .concat([getCssColor(shad.color, shad.alpha)])
+          .join(' ')
+      )
+      .map((_) => `drop-shadow(${_})`)
+      .join(' ')
+  )
 }
 
 export const generateColors = (themeData) => {
@@ -65,13 +81,15 @@ export const generateColors = (themeData) => {
 
   const { colors, opacity } = getColors(sourceColors, themeData.opacity || {})
 
-  const htmlColors = Object.entries(colors)
-    .reduce((acc, [k, v]) => {
+  const htmlColors = Object.entries(colors).reduce(
+    (acc, [k, v]) => {
       if (!v) return acc
       acc.solid[k] = rgb2hex(v)
       acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
       return acc
-    }, { complete: {}, solid: {} })
+    },
+    { complete: {}, solid: {} }
+  )
   return {
     rules: {
       colors: Object.entries(htmlColors.complete)
@@ -90,28 +108,38 @@ export const generateRadii = (input) => {
   let inputRadii = input.radii || {}
   // v1 -> v2
   if (typeof input.btnRadius !== 'undefined') {
-    inputRadii = Object
-      .entries(input)
+    inputRadii = Object.entries(input)
       .filter(([k, v]) => k.endsWith('Radius'))
-      .reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
+      .reduce((acc, e) => {
+        acc[e[0].split('Radius')[0]] = e[1]
+        return acc
+      }, {})
   }
-  const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-    acc[k] = v
-    return acc
-  }, {
-    btn: 4,
-    input: 4,
-    checkbox: 2,
-    panel: 10,
-    avatar: 5,
-    avatarAlt: 50,
-    tooltip: 2,
-    attachment: 5
-  })
+  const radii = Object.entries(inputRadii)
+    .filter(([k, v]) => v)
+    .reduce(
+      (acc, [k, v]) => {
+        acc[k] = v
+        return acc
+      },
+      {
+        btn: 4,
+        input: 4,
+        checkbox: 2,
+        panel: 10,
+        avatar: 5,
+        avatarAlt: 50,
+        tooltip: 2,
+        attachment: 5
+      }
+    )
 
   return {
     rules: {
-      radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
+      radii: Object.entries(radii)
+        .filter(([k, v]) => v)
+        .map(([k, v]) => `--${k}Radius: ${v}px`)
+        .join(';')
     },
     theme: {
       radii
@@ -120,33 +148,40 @@ export const generateRadii = (input) => {
 }
 
 export const generateFonts = (input) => {
-  const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-    acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-      acc[k] = v
-      return acc
-    }, acc[k])
-    return acc
-  }, {
-    interface: {
-      family: 'sans-serif'
-    },
-    input: {
-      family: 'inherit'
-    },
-    post: {
-      family: 'inherit'
-    },
-    postCode: {
-      family: 'monospace'
-    }
-  })
+  const fonts = Object.entries(input.fonts || {})
+    .filter(([k, v]) => v)
+    .reduce(
+      (acc, [k, v]) => {
+        acc[k] = Object.entries(v)
+          .filter(([k, v]) => v)
+          .reduce((acc, [k, v]) => {
+            acc[k] = v
+            return acc
+          }, acc[k])
+        return acc
+      },
+      {
+        interface: {
+          family: 'sans-serif'
+        },
+        input: {
+          family: 'inherit'
+        },
+        post: {
+          family: 'inherit'
+        },
+        postCode: {
+          family: 'monospace'
+        }
+      }
+    )
 
   return {
     rules: {
-      fonts: Object
-        .entries(fonts)
+      fonts: Object.entries(fonts)
         .filter(([k, v]) => v)
-        .map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
+        .map(([k, v]) => `--${k}Font: ${v.family}`)
+        .join(';')
     },
     theme: {
       fonts
@@ -175,59 +210,73 @@ const hoverGlow = {
 }
 
 export const DEFAULT_SHADOWS = {
-  panel: [{
-    x: 1,
-    y: 1,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  topBar: [{
-    x: 0,
-    y: 0,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  popup: [{
-    x: 2,
-    y: 2,
-    blur: 3,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.5
-  }],
-  avatar: [{
-    x: 0,
-    y: 1,
-    blur: 8,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.7
-  }],
+  panel: [
+    {
+      x: 1,
+      y: 1,
+      blur: 4,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.6
+    }
+  ],
+  topBar: [
+    {
+      x: 0,
+      y: 0,
+      blur: 4,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.6
+    }
+  ],
+  popup: [
+    {
+      x: 2,
+      y: 2,
+      blur: 3,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.5
+    }
+  ],
+  avatar: [
+    {
+      x: 0,
+      y: 1,
+      blur: 8,
+      spread: 0,
+      color: '#000000',
+      alpha: 0.7
+    }
+  ],
   avatarStatus: [],
   panelHeader: [],
-  button: [{
-    x: 0,
-    y: 0,
-    blur: 2,
-    spread: 0,
-    color: '#000000',
-    alpha: 1
-  }, ...buttonInsetFakeBorders],
+  button: [
+    {
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0,
+      color: '#000000',
+      alpha: 1
+    },
+    ...buttonInsetFakeBorders
+  ],
   buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
   buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
-  input: [...inputInsetFakeBorders, {
-    x: 0,
-    y: 0,
-    blur: 2,
-    inset: true,
-    spread: 0,
-    color: '#000000',
-    alpha: 1
-  }]
+  input: [
+    ...inputInsetFakeBorders,
+    {
+      x: 0,
+      y: 0,
+      blur: 2,
+      inset: true,
+      spread: 0,
+      color: '#000000',
+      alpha: 1
+    }
+  ]
 }
 export const generateShadows = (input, colors) => {
   // TODO this is a small hack for `mod` to work with shadows
@@ -243,49 +292,56 @@ export const generateShadows = (input, colors) => {
   }
 
   const cleanInputShadows = Object.fromEntries(
-    Object.entries(input.shadows || {})
-      .map(([name, shadowSlot]) => [
-        name,
-        // defaulting color to black to avoid potential problems
-        shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))
-      ])
+    Object.entries(input.shadows || {}).map(([name, shadowSlot]) => [
+      name,
+      // defaulting color to black to avoid potential problems
+      shadowSlot.map((shadowDef) => ({ color: '#000000', ...shadowDef }))
+    ])
   )
-  const inputShadows = cleanInputShadows && !input.themeEngineVersion
-    ? shadows2to3(cleanInputShadows, input.opacity)
-    : cleanInputShadows || {}
+  const inputShadows =
+    cleanInputShadows && !input.themeEngineVersion
+      ? shadows2to3(cleanInputShadows, input.opacity)
+      : cleanInputShadows || {}
   const shadows = Object.entries({
     ...DEFAULT_SHADOWS,
     ...inputShadows
   }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
     const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
     const colorSlotName = hackContextDict[slotFirstWord]
-    const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
+    const isLightOnDark =
+      relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
     const mod = isLightOnDark ? 1 : -1
-    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
-      ...shadowAcc,
-      {
-        ...def,
-        color: rgb2hex(computeDynamicColor(
-          def.color,
-          (variableSlot) => convert(colors[variableSlot]).rgb,
-          mod
-        ))
-      }
-    ], [])
+    const newShadow = shadowDefs.reduce(
+      (shadowAcc, def) => [
+        ...shadowAcc,
+        {
+          ...def,
+          color: rgb2hex(
+            computeDynamicColor(
+              def.color,
+              (variableSlot) => convert(colors[variableSlot]).rgb,
+              mod
+            )
+          )
+        }
+      ],
+      []
+    )
     return { ...shadowsAcc, [slotName]: newShadow }
   }, {})
 
   return {
     rules: {
-      shadows: Object
-        .entries(shadows)
-      // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
-      // convert all non-inset shadows into filter: drop-shadow() to boost performance
-        .map(([k, v]) => [
-          `--${k}Shadow: ${getCssShadow(v)}`,
-          `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
-          `--${k}ShadowInset: ${getCssShadow(v, true)}`
-        ].join(';'))
+      shadows: Object.entries(shadows)
+        // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
+        // convert all non-inset shadows into filter: drop-shadow() to boost performance
+        .map(([k, v]) =>
+          [
+            `--${k}Shadow: ${getCssShadow(v)}`,
+            `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
+            `--${k}ShadowInset: ${getCssShadow(v, true)}`
+          ].join(';')
+        )
         .join(';')
     },
     theme: {
@@ -324,7 +380,8 @@ export const generatePreset = (input) => {
 export const getThemes = () => {
   const cache = 'no-store'
 
-  return window.fetch('/static/styles.json', { cache })
+  return window
+    .fetch('/static/styles.json', { cache })
     .then((data) => data.json())
     .then((themes) => {
       return Object.entries(themes).map(([k, v]) => {
@@ -332,7 +389,8 @@ export const getThemes = () => {
         if (typeof v === 'object') {
           promise = Promise.resolve(v)
         } else if (typeof v === 'string') {
-          promise = window.fetch(v, { cache })
+          promise = window
+            .fetch(v, { cache })
             .then((data) => data.json())
             .catch((e) => {
               console.error(e)
@@ -343,11 +401,10 @@ export const getThemes = () => {
       })
     })
     .then((promises) => {
-      return promises
-        .reduce((acc, [k, v]) => {
-          acc[k] = v
-          return acc
-        }, {})
+      return promises.reduce((acc, [k, v]) => {
+        acc[k] = v
+        return acc
+      }, {})
     })
 }
 export const colors2to3 = (colors) => {
@@ -359,12 +416,13 @@ export const colors2to3 = (colors) => {
       case 'btnText':
         return {
           ...acc,
-          ...btnPositions
-            .reduce(
-              (statePositionAcc, position) =>
-                ({ ...statePositionAcc, ['btn' + position + 'Text']: color })
-              , {}
-            )
+          ...btnPositions.reduce(
+            (statePositionAcc, position) => ({
+              ...statePositionAcc,
+              ['btn' + position + 'Text']: color
+            }),
+            {}
+          )
         }
       default:
         return { ...acc, [slotName]: color }
@@ -378,23 +436,30 @@ export const colors2to3 = (colors) => {
  * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
  */
 export const shadows2to3 = (shadows, opacity) => {
-  return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
-    const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
-    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
-      ...shadowAcc,
-      {
-        ...def,
-        alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
-      }
-    ], [])
-    return { ...shadowsAcc, [slotName]: newShadow }
-  }, {})
+  return Object.entries(shadows).reduce(
+    (shadowsAcc, [slotName, shadowDefs]) => {
+      const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
+      const getOpacity = ({ color }) =>
+        opacity[getOpacitySlot(color.substring(2).split(',')[0])]
+      const newShadow = shadowDefs.reduce(
+        (shadowAcc, def) => [
+          ...shadowAcc,
+          {
+            ...def,
+            alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
+          }
+        ],
+        []
+      )
+      return { ...shadowsAcc, [slotName]: newShadow }
+    },
+    {}
+  )
 }
 
 export const getPreset = (val) => {
   return getThemes()
-    .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
+    .then((themes) => (themes[val] ? themes[val] : themes['pleroma-dark']))
     .then((theme) => {
       const isV1 = Array.isArray(theme)
       const data = isV1 ? {} : theme.theme
@@ -417,4 +482,5 @@ export const getPreset = (val) => {
     })
 }
 
-export const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))
+export const setPreset = (val) =>
+  getPreset(val).then((data) => applyTheme(data.theme))
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index b619f8108..bc48d2eef 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -1,5 +1,9 @@
 import { convert, brightness, contrastRatio } from 'chromatism'
-import { alphaBlendLayers, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
+import {
+  alphaBlendLayers,
+  getTextColor,
+  relativeLuminance
+} from '../color_convert/color_convert.js'
 import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
 
 /*
@@ -48,15 +52,17 @@ export const getLayersArray = (layer, data = LAYERS) => {
   return array
 }
 
-export const getLayers = (layer, variant = layer, opacitySlot, colors, opacity) => {
-  return getLayersArray(layer).map((currentLayer) => ([
-    currentLayer === layer
-      ? colors[variant]
-      : colors[currentLayer],
-    currentLayer === layer
-      ? opacity[opacitySlot] || 1
-      : opacity[currentLayer]
-  ]))
+export const getLayers = (
+  layer,
+  variant = layer,
+  opacitySlot,
+  colors,
+  opacity
+) => {
+  return getLayersArray(layer).map((currentLayer) => [
+    currentLayer === layer ? colors[variant] : colors[currentLayer],
+    currentLayer === layer ? opacity[opacitySlot] || 1 : opacity[currentLayer]
+  ])
 }
 
 const getDependencies = (key, inheritance) => {
@@ -67,11 +73,9 @@ const getDependencies = (key, inheritance) => {
     if (data === null) return []
     const { depends, layer, variant } = data
     const layerDeps = layer
-      ? getLayersArray(layer).map(currentLayer => {
-        return currentLayer === layer
-          ? variant || layer
-          : currentLayer
-      })
+      ? getLayersArray(layer).map((currentLayer) => {
+          return currentLayer === layer ? variant || layer : currentLayer
+        })
       : []
     if (Array.isArray(depends)) {
       return [...depends, ...layerDeps]
@@ -131,14 +135,17 @@ export const topoSort = (
 
   // The index thing is to make sorting stable on browsers
   // where Array.sort() isn't stable
-  return output.map((data, index) => ({ data, index })).sort(({ data: a, index: ai }, { data: b, index: bi }) => {
-    const depsA = getDeps(a, inheritance).length
-    const depsB = getDeps(b, inheritance).length
+  return output
+    .map((data, index) => ({ data, index }))
+    .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
+      const depsA = getDeps(a, inheritance).length
+      const depsB = getDeps(b, inheritance).length
 
-    if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return ai - bi
-    if (depsA === 0 && depsB !== 0) return -1
-    if (depsB === 0 && depsA !== 0) return 1
-  }).map(({ data }) => data)
+      if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return ai - bi
+      if (depsA === 0 && depsB !== 0) return -1
+      if (depsB === 0 && depsA !== 0) return 1
+    })
+    .map(({ data }) => data)
 }
 
 const expandSlotValue = (value) => {
@@ -218,7 +225,10 @@ export const getLayerSlot = (
  */
 export const SLOT_ORDERED = topoSort(
   Object.entries(SLOT_INHERITANCE)
-    .sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
+    .sort(
+      ([aK, aV], [bK, bV]) =>
+        ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0)
+    )
     .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
 )
 
@@ -226,29 +236,36 @@ export const SLOT_ORDERED = topoSort(
  * All opacity slots used in color slots, their default values and affected
  * color slots.
  */
-export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
-  const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
-  if (opacity) {
-    return {
-      ...acc,
-      [opacity]: {
-        defaultValue: DEFAULT_OPACITY[opacity] || 1,
-        affectedSlots: [...((acc[opacity] && acc[opacity].affectedSlots) || []), k]
+export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce(
+  (acc, [k, v]) => {
+    const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
+    if (opacity) {
+      return {
+        ...acc,
+        [opacity]: {
+          defaultValue: DEFAULT_OPACITY[opacity] || 1,
+          affectedSlots: [
+            ...((acc[opacity] && acc[opacity].affectedSlots) || []),
+            k
+          ]
+        }
       }
+    } else {
+      return acc
     }
-  } else {
-    return acc
-  }
-}, {})
+  },
+  {}
+)
 
 /**
  * Handle dynamic color
  */
 export const computeDynamicColor = (sourceColor, getColor, mod) => {
-  if (typeof sourceColor !== 'string' || !sourceColor.startsWith('--')) return sourceColor
+  if (typeof sourceColor !== 'string' || !sourceColor.startsWith('--'))
+    return sourceColor
   let targetColor = null
   // Color references other color
-  const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim())
+  const [variable, modifier] = sourceColor.split(/,/g).map((str) => str.trim())
   const variableSlot = variable.substring(2)
   targetColor = getColor(variableSlot)
   if (modifier) {
@@ -261,148 +278,164 @@ export const computeDynamicColor = (sourceColor, getColor, mod) => {
  * THE function you want to use. Takes provided colors and opacities
  * value and uses inheritance data to figure out color needed for the slot.
  */
-export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
-  const sourceColor = sourceColors[key]
-  const value = expandSlotValue(SLOT_INHERITANCE[key])
-  const deps = getDependencies(key, SLOT_INHERITANCE)
-  const isTextColor = !!value.textColor
-  const variant = value.variant || value.layer
+export const getColors = (sourceColors, sourceOpacity) =>
+  SLOT_ORDERED.reduce(
+    ({ colors, opacity }, key) => {
+      const sourceColor = sourceColors[key]
+      const value = expandSlotValue(SLOT_INHERITANCE[key])
+      const deps = getDependencies(key, SLOT_INHERITANCE)
+      const isTextColor = !!value.textColor
+      const variant = value.variant || value.layer
 
-  let backgroundColor = null
+      let backgroundColor = null
 
-  if (isTextColor) {
-    backgroundColor = alphaBlendLayers(
-      { ...(colors[deps[0]] || convert(sourceColors[key] || '#FF00FF').rgb) },
-      getLayers(
-        getLayerSlot(key) || 'bg',
-        variant || 'bg',
-        getOpacitySlot(variant),
-        colors,
-        opacity
-      )
-    )
-  } else if (variant && variant !== key) {
-    backgroundColor = colors[variant] || convert(sourceColors[variant]).rgb
-  } else {
-    backgroundColor = colors.bg || convert(sourceColors.bg)
-  }
-
-  const isLightOnDark = relativeLuminance(backgroundColor) < 0.5
-  const mod = isLightOnDark ? 1 : -1
-
-  let outputColor = null
-  if (sourceColor) {
-    // Color is defined in source color
-    let targetColor = sourceColor
-    if (targetColor === 'transparent') {
-      // We take only layers below current one
-      const layers = getLayers(
-        getLayerSlot(key),
-        key,
-        getOpacitySlot(key) || key,
-        colors,
-        opacity
-      ).slice(0, -1)
-      targetColor = {
-        ...alphaBlendLayers(
-          convert('#FF00FF').rgb,
-          layers
-        ),
-        a: 0
-      }
-    } else if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
-      targetColor = computeDynamicColor(
-        sourceColor,
-        variableSlot => colors[variableSlot] || sourceColors[variableSlot],
-        mod
-      )
-    } else if (typeof sourceColor === 'string' && sourceColor.startsWith('#')) {
-      targetColor = convert(targetColor).rgb
-    }
-    outputColor = { ...targetColor }
-  } else if (value.default) {
-    // same as above except in object form
-    outputColor = convert(value.default).rgb
-  } else {
-    // calculate color
-    const defaultColorFunc = (mod, dep) => ({ ...dep })
-    const colorFunc = value.color || defaultColorFunc
-
-    if (value.textColor) {
-      if (value.textColor === 'bw') {
-        outputColor = contrastRatio(backgroundColor).rgb
-      } else {
-        let color = { ...colors[deps[0]] }
-        if (value.color) {
-          color = colorFunc(mod, ...deps.map((dep) => ({ ...colors[dep] })))
-        }
-        outputColor = getTextColor(
-          backgroundColor,
-          { ...color },
-          value.textColor === 'preserve'
+      if (isTextColor) {
+        backgroundColor = alphaBlendLayers(
+          {
+            ...(colors[deps[0]] || convert(sourceColors[key] || '#FF00FF').rgb)
+          },
+          getLayers(
+            getLayerSlot(key) || 'bg',
+            variant || 'bg',
+            getOpacitySlot(variant),
+            colors,
+            opacity
+          )
         )
+      } else if (variant && variant !== key) {
+        backgroundColor = colors[variant] || convert(sourceColors[variant]).rgb
+      } else {
+        backgroundColor = colors.bg || convert(sourceColors.bg)
       }
-    } else {
-      // background color case
-      outputColor = colorFunc(
-        mod,
-        ...deps.map((dep) => ({ ...colors[dep] }))
-      )
-    }
-  }
-  if (!outputColor) {
-    throw new Error('Couldn\'t generate color for ' + key)
-  }
 
-  const opacitySlot = value.opacity || getOpacitySlot(key)
-  const ownOpacitySlot = value.opacity
+      const isLightOnDark = relativeLuminance(backgroundColor) < 0.5
+      const mod = isLightOnDark ? 1 : -1
 
-  if (ownOpacitySlot === null) {
-    outputColor.a = 1
-  } else if (sourceColor === 'transparent') {
-    outputColor.a = 0
-  } else {
-    const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
+      let outputColor = null
+      if (sourceColor) {
+        // Color is defined in source color
+        let targetColor = sourceColor
+        if (targetColor === 'transparent') {
+          // We take only layers below current one
+          const layers = getLayers(
+            getLayerSlot(key),
+            key,
+            getOpacitySlot(key) || key,
+            colors,
+            opacity
+          ).slice(0, -1)
+          targetColor = {
+            ...alphaBlendLayers(convert('#FF00FF').rgb, layers),
+            a: 0
+          }
+        } else if (
+          typeof sourceColor === 'string' &&
+          sourceColor.startsWith('--')
+        ) {
+          targetColor = computeDynamicColor(
+            sourceColor,
+            (variableSlot) =>
+              colors[variableSlot] || sourceColors[variableSlot],
+            mod
+          )
+        } else if (
+          typeof sourceColor === 'string' &&
+          sourceColor.startsWith('#')
+        ) {
+          targetColor = convert(targetColor).rgb
+        }
+        outputColor = { ...targetColor }
+      } else if (value.default) {
+        // same as above except in object form
+        outputColor = convert(value.default).rgb
+      } else {
+        // calculate color
+        const defaultColorFunc = (mod, dep) => ({ ...dep })
+        const colorFunc = value.color || defaultColorFunc
 
-    const dependencySlot = deps[0]
-    const dependencyColor = dependencySlot && colors[dependencySlot]
+        if (value.textColor) {
+          if (value.textColor === 'bw') {
+            outputColor = contrastRatio(backgroundColor).rgb
+          } else {
+            let color = { ...colors[deps[0]] }
+            if (value.color) {
+              color = colorFunc(mod, ...deps.map((dep) => ({ ...colors[dep] })))
+            }
+            outputColor = getTextColor(
+              backgroundColor,
+              { ...color },
+              value.textColor === 'preserve'
+            )
+          }
+        } else {
+          // background color case
+          outputColor = colorFunc(
+            mod,
+            ...deps.map((dep) => ({ ...colors[dep] }))
+          )
+        }
+      }
+      if (!outputColor) {
+        throw new Error("Couldn't generate color for " + key)
+      }
 
-    if (!ownOpacitySlot && dependencyColor && !value.textColor && ownOpacitySlot !== null) {
-      // Inheriting color from dependency (weird, i know)
-      // except if it's a text color or opacity slot is set to 'null'
-      outputColor.a = dependencyColor.a
-    } else if (!dependencyColor && !opacitySlot) {
-      // Remove any alpha channel if no dependency and no opacitySlot found
-      delete outputColor.a
-    } else {
-      // Otherwise try to assign opacity
-      if (dependencyColor && dependencyColor.a === 0) {
-        // transparent dependency shall make dependents transparent too
+      const opacitySlot = value.opacity || getOpacitySlot(key)
+      const ownOpacitySlot = value.opacity
+
+      if (ownOpacitySlot === null) {
+        outputColor.a = 1
+      } else if (sourceColor === 'transparent') {
         outputColor.a = 0
       } else {
-        // Otherwise check if opacity is overriden and use that or default value instead
-        outputColor.a = Number(
-          opacityOverriden
-            ? sourceOpacity[opacitySlot]
-            : (OPACITIES[opacitySlot] || {}).defaultValue
-        )
+        const opacityOverriden =
+          ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
+
+        const dependencySlot = deps[0]
+        const dependencyColor = dependencySlot && colors[dependencySlot]
+
+        if (
+          !ownOpacitySlot &&
+          dependencyColor &&
+          !value.textColor &&
+          ownOpacitySlot !== null
+        ) {
+          // Inheriting color from dependency (weird, i know)
+          // except if it's a text color or opacity slot is set to 'null'
+          outputColor.a = dependencyColor.a
+        } else if (!dependencyColor && !opacitySlot) {
+          // Remove any alpha channel if no dependency and no opacitySlot found
+          delete outputColor.a
+        } else {
+          // Otherwise try to assign opacity
+          if (dependencyColor && dependencyColor.a === 0) {
+            // transparent dependency shall make dependents transparent too
+            outputColor.a = 0
+          } else {
+            // Otherwise check if opacity is overriden and use that or default value instead
+            outputColor.a = Number(
+              opacityOverriden
+                ? sourceOpacity[opacitySlot]
+                : (OPACITIES[opacitySlot] || {}).defaultValue
+            )
+          }
+        }
       }
-    }
-  }
 
-  if (Number.isNaN(outputColor.a) || outputColor.a === undefined) {
-    outputColor.a = 1
-  }
+      if (Number.isNaN(outputColor.a) || outputColor.a === undefined) {
+        outputColor.a = 1
+      }
 
-  if (opacitySlot) {
-    return {
-      colors: { ...colors, [key]: outputColor },
-      opacity: { ...opacity, [opacitySlot]: outputColor.a }
-    }
-  } else {
-    return {
-      colors: { ...colors, [key]: outputColor },
-      opacity
-    }
-  }
-}, { colors: {}, opacity: {} })
+      if (opacitySlot) {
+        return {
+          colors: { ...colors, [key]: outputColor },
+          opacity: { ...opacity, [opacitySlot]: outputColor.a }
+        }
+      } else {
+        return {
+          colors: { ...colors, [key]: outputColor },
+          opacity
+        }
+      }
+    },
+    { colors: {}, opacity: {} }
+  )
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index c833ef329..99ffbd0ea 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -3,7 +3,15 @@ import { camelCase } from 'lodash'
 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 
-const update = ({ store, statuses, timeline, showImmediately, userId, listId, pagination }) => {
+const update = ({
+  store,
+  statuses,
+  timeline,
+  showImmediately,
+  userId,
+  listId,
+  pagination
+}) => {
   const ccTimeline = camelCase(timeline)
 
   store.dispatch('addNewStatuses', {
@@ -49,23 +57,43 @@ const fetchAndUpdate = ({
   args['listId'] = listId
   args['tag'] = tag
   args['withMuted'] = !hideMutedPosts
-  if (loggedIn && ['friends', 'public', 'publicAndExternal', 'bubble'].includes(timeline)) {
+  if (
+    loggedIn &&
+    ['friends', 'public', 'publicAndExternal', 'bubble'].includes(timeline)
+  ) {
     args['replyVisibility'] = replyVisibility
   }
 
   const numStatusesBeforeFetch = timelineData.statuses.length
 
-  return apiService.fetchTimeline(args)
-    .then(response => {
+  return apiService
+    .fetchTimeline(args)
+    .then((response) => {
       if (response.errors) {
         throw new Error(`${response.status} ${response.statusText}`)
       }
 
       const { data: statuses, pagination } = response
-      if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
-        store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
+      if (
+        !older &&
+        statuses.length >= 20 &&
+        !timelineData.loading &&
+        numStatusesBeforeFetch > 0
+      ) {
+        store.dispatch('queueFlush', {
+          timeline: timeline,
+          id: timelineData.maxId
+        })
       }
-      update({ store, statuses, timeline, showImmediately, userId, listId, pagination })
+      update({
+        store,
+        statuses,
+        timeline,
+        showImmediately,
+        userId,
+        listId,
+        pagination
+      })
       return { statuses, pagination }
     })
     .catch((error) => {
@@ -78,13 +106,28 @@ const fetchAndUpdate = ({
     })
 }
 
-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
+const startFetching = ({
+  timeline = 'friends',
+  credentials,
+  store,
+  userId = false,
+  listId = false,
+  tag = false
+}) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const showImmediately = timelineData.visibleStatuses.length === 0
   timelineData.userId = userId
   timelineData.listId = listId
-  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
+  fetchAndUpdate({
+    timeline,
+    credentials,
+    store,
+    showImmediately,
+    userId,
+    listId,
+    tag
+  })
   const boundFetchAndUpdate = () =>
     fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
   return promiseInterval(boundFetchAndUpdate, 20000)
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index 3b07592e8..bfe7b0e73 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -5,9 +5,15 @@ const highlightStyle = (prefs) => {
   if (typeof color !== 'string') return
   const rgb = hex2rgb(color)
   if (rgb == null) return
-  const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`
-  const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
-  const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
+  const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(
+    rgb.g
+  )}, ${Math.floor(rgb.b)})`
+  const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(
+    rgb.g
+  )}, ${Math.floor(rgb.b)}, .1)`
+  const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(
+    rgb.g
+  )}, ${Math.floor(rgb.b)}, .2)`
   const customProps = {
     '--____highlight-solidColor': solidColor,
     '--____highlight-tintColor': tintColor,
@@ -45,12 +51,7 @@ const highlightStyle = (prefs) => {
 }
 
 const highlightClass = (user) => {
-  return 'USER____' + user.screen_name
-    .replace(/\./g, '_')
-    .replace(/@/g, '_AT_')
+  return 'USER____' + user.screen_name.replace(/\./g, '_').replace(/@/g, '_AT_')
 }
 
-export {
-  highlightClass,
-  highlightStyle
-}
+export { highlightClass, highlightStyle }
diff --git a/src/services/user_profile_link_generator/user_profile_link_generator.js b/src/services/user_profile_link_generator/user_profile_link_generator.js
index 16f1531d0..81382f435 100644
--- a/src/services/user_profile_link_generator/user_profile_link_generator.js
+++ b/src/services/user_profile_link_generator/user_profile_link_generator.js
@@ -1,13 +1,16 @@
 import { includes } from 'lodash'
 
 const generateProfileLink = (id, screenName, restrictedNicknames) => {
-  const complicated = !screenName || (isExternal(screenName) || includes(restrictedNicknames, screenName))
+  const complicated =
+    !screenName ||
+    isExternal(screenName) ||
+    includes(restrictedNicknames, screenName)
   return {
-    name: (complicated ? 'external-user-profile' : 'user-profile'),
-    params: (complicated ? { id } : { name: screenName })
+    name: complicated ? 'external-user-profile' : 'user-profile',
+    params: complicated ? { id } : { name: screenName }
   }
 }
 
-const isExternal = screenName => screenName && screenName.includes('@')
+const isExternal = (screenName) => screenName && screenName.includes('@')
 
 export default generateProfileLink
diff --git a/src/services/version/version.service.js b/src/services/version/version.service.js
index 2432738cd..85746714d 100644
--- a/src/services/version/version.service.js
+++ b/src/services/version/version.service.js
@@ -1,5 +1,4 @@
-
-export const extractCommit = versionString => {
+export const extractCommit = (versionString) => {
   // X.Y.Z-1337-gdeadbeef => deadbeef
   const commit = versionString.match(/-g(\w+)/i)
   if (commit) {
diff --git a/src/services/window_utils/window_utils.js b/src/services/window_utils/window_utils.js
index 909088dbc..c33785363 100644
--- a/src/services/window_utils/window_utils.js
+++ b/src/services/window_utils/window_utils.js
@@ -1,4 +1,3 @@
-
 export const windowWidth = () =>
   window.innerWidth ||
   document.documentElement.clientWidth ||
diff --git a/src/sw.js b/src/sw.js
index 8f1623d68..5bc64bb1c 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -5,9 +5,9 @@ import { parseNotification } from './services/entity_normalizer/entity_normalize
 import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
 import { createI18n } from 'vue-i18n'
 import messages from './i18n/service_worker_messages.js'
-import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
+import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute'
 
-precacheAndRoute(self.__WB_MANIFEST);
+precacheAndRoute(self.__WB_MANIFEST)
 const i18n = createI18n({
   // By default, use the browser locale, we will update it if neccessary
   locale: 'en',
@@ -15,13 +15,15 @@ const i18n = createI18n({
   messages
 })
 
-function isEnabled () {
-  return localForage.getItem('vuex-lz')
-    .then(data => data.config.webPushNotifications)
+function isEnabled() {
+  return localForage
+    .getItem('vuex-lz')
+    .then((data) => data.config.webPushNotifications)
 }
 
-function getWindowClients () {
-  return clients.matchAll({ includeUncontrolled: true })
+function getWindowClients() {
+  return clients
+    .matchAll({ includeUncontrolled: true })
     .then((clientList) => clientList.filter(({ type }) => type === 'window'))
 }
 
@@ -35,11 +37,13 @@ const maybeShowNotification = async (event) => {
   const enabled = await isEnabled()
   const activeClients = await getWindowClients()
   await setLocale()
-  if (enabled && (activeClients.length === 0)) {
+  if (enabled && activeClients.length === 0) {
     const data = event.data.json()
 
     const url = `${self.registration.scope}api/v1/notifications/${data.notification_id}`
-    const notification = await fetch(url, { headers: { Authorization: 'Bearer ' + data.access_token } })
+    const notification = await fetch(url, {
+      headers: { Authorization: 'Bearer ' + data.access_token }
+    })
     const notificationJson = await notification.json()
     const parsedNotification = parseNotification(notificationJson)
 
@@ -58,12 +62,16 @@ self.addEventListener('push', async (event) => {
 self.addEventListener('notificationclick', (event) => {
   event.notification.close()
 
-  event.waitUntil(getWindowClients().then((list) => {
-    for (var i = 0; i < list.length; i++) {
-      var client = list[i]
-      if (client.url === '/' && 'focus' in client) { return client.focus() }
-    }
+  event.waitUntil(
+    getWindowClients().then((list) => {
+      for (var i = 0; i < list.length; i++) {
+        var client = list[i]
+        if (client.url === '/' && 'focus' in client) {
+          return client.focus()
+        }
+      }
 
-    if (clients.openWindow) return clients.openWindow('/')
-  }))
+      if (clients.openWindow) return clients.openWindow('/')
+    })
+  )
 })
diff --git a/test/unit/specs/boot/routes.spec.js b/test/unit/specs/boot/routes.spec.js
index d4cde7023..210293c42 100644
--- a/test/unit/specs/boot/routes.spec.js
+++ b/test/unit/specs/boot/routes.spec.js
@@ -19,23 +19,35 @@ describe('routes', () => {
 
     const matchedComponents = router.currentRoute.value.matched
 
-    expect(matchedComponents[0].components.default.components.hasOwnProperty('Timeline')).to.eql(true)
+    expect(
+      matchedComponents[0].components.default.components.hasOwnProperty(
+        'Timeline'
+      )
+    ).to.eql(true)
   })
 
-  it('user\'s profile', async () => {
+  it("user's profile", async () => {
     await router.push('/fake-user-name')
 
     const matchedComponents = router.currentRoute.value.matched
 
-    expect(matchedComponents[0].components.default.components.hasOwnProperty('UserCard')).to.eql(true)
+    expect(
+      matchedComponents[0].components.default.components.hasOwnProperty(
+        'UserCard'
+      )
+    ).to.eql(true)
   })
 
-  it('user\'s profile at /users', async () => {
+  it("user's profile at /users", async () => {
     await router.push('/users/fake-user-name')
 
     const matchedComponents = router.currentRoute.value.matched
 
-    expect(matchedComponents[0].components.default.components.hasOwnProperty('UserCard')).to.eql(true)
+    expect(
+      matchedComponents[0].components.default.components.hasOwnProperty(
+        'UserCard'
+      )
+    ).to.eql(true)
   })
 
   it('list view', async () => {
@@ -43,7 +55,11 @@ describe('routes', () => {
 
     const matchedComponents = router.currentRoute.value.matched
 
-    expect(matchedComponents[0].components.default.components.hasOwnProperty('ListCard')).to.eql(true)
+    expect(
+      matchedComponents[0].components.default.components.hasOwnProperty(
+        'ListCard'
+      )
+    ).to.eql(true)
   })
 
   it('list timeline', async () => {
@@ -51,7 +67,11 @@ describe('routes', () => {
 
     const matchedComponents = router.currentRoute.value.matched
 
-    expect(matchedComponents[0].components.default.components.hasOwnProperty('Timeline')).to.eql(true)
+    expect(
+      matchedComponents[0].components.default.components.hasOwnProperty(
+        'Timeline'
+      )
+    ).to.eql(true)
   })
 
   it('list edit', async () => {
@@ -59,6 +79,10 @@ describe('routes', () => {
 
     const matchedComponents = router.currentRoute.value.matched
 
-    expect(matchedComponents[0].components.default.components.hasOwnProperty('BasicUserCard')).to.eql(true)
+    expect(
+      matchedComponents[0].components.default.components.hasOwnProperty(
+        'BasicUserCard'
+      )
+    ).to.eql(true)
   })
 })
diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
index 6188308ec..713ddde1b 100644
--- a/test/unit/specs/components/emoji_input.spec.js
+++ b/test/unit/specs/components/emoji_input.spec.js
@@ -29,7 +29,7 @@ const generateInput = (value, padEmoji = true) => {
       modelValue: value
     },
     slots: {
-      'default': () => h('input', '')
+      default: () => h('input', '')
     }
   })
   return wrapper
@@ -78,7 +78,9 @@ describe('EmojiInput', () => {
       wrapper.setData({ caret: 6 })
       wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
       const inputEvents = wrapper.emitted()['update:modelValue']
-      expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde')
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql(
+        'Spurdo :ebin: Sparde'
+      )
     })
 
     it('inserts string between words without creating extra spaces (other caret)', () => {
@@ -89,7 +91,9 @@ describe('EmojiInput', () => {
       wrapper.setData({ caret: 7 })
       wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
       const inputEvents = wrapper.emitted()['update:modelValue']
-      expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde')
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql(
+        'Spurdo :ebin: Sparde'
+      )
     })
 
     it('inserts string without any padding if padEmoji setting is set to false', () => {
@@ -100,7 +104,9 @@ describe('EmojiInput', () => {
       wrapper.setData({ caret: initialString.length, keepOpen: false })
       wrapper.vm.insert({ insertion: ':spam:' })
       const inputEvents = wrapper.emitted()['update:modelValue']
-      expect(inputEvents[inputEvents.length - 1][0]).to.eql('Eat some spam!:spam:')
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql(
+        'Eat some spam!:spam:'
+      )
     })
 
     it('correctly sets caret after insertion at beginning', (done) => {
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js
index ea26ee43a..89347a094 100644
--- a/test/unit/specs/components/rich_content.spec.js
+++ b/test/unit/specs/components/rich_content.spec.js
@@ -4,7 +4,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 const attentions = []
 const global = {
   mocks: {
-    '$store': null
+    $store: null
   },
   stubs: {
     FAIcon: true
@@ -16,12 +16,14 @@ const makeMention = (who) => {
   return `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
 }
 const p = (...data) => `<p>${data.join('')}</p>`
-const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
-const mentionsLine = (times) => [
-  '<mentions-line-stub mentions="',
-  new Array(times).fill('[object Object]').join(','),
-  '"></mentions-line-stub>'
-].join('')
+const compwrap = (...data) =>
+  `<span class="RichContent">${data.join('')}</span>`
+const mentionsLine = (times) =>
+  [
+    '<mentions-line-stub mentions="',
+    new Array(times).fill('[object Object]').join(','),
+    '"></mentions-line-stub>'
+  ].join('')
 
 describe('RichContent', () => {
   it('renders simple post without exploding', () => {
@@ -47,8 +49,8 @@ describe('RichContent', () => {
       '<a href="http://example.com?a=1">http://example.com?a=1</a>'
     ].join('')
     const expected = [
-      p('Testing \'em all'),
-      'Testing \'em all',
+      p("Testing 'em all"),
+      "Testing 'em all",
       '<a href="http://example.com?a=1" target="_blank">http://example.com?a=1</a>'
     ].join('')
     const wrapper = shallowMount(RichContent, {
@@ -66,10 +68,7 @@ describe('RichContent', () => {
   })
 
   it('replaces mention with mentionsline', () => {
-    const html = p(
-      makeMention('John'),
-      ' how are you doing today?'
-    )
+    const html = p(makeMention('John'), ' how are you doing today?')
     const wrapper = shallowMount(RichContent, {
       global,
       props: {
@@ -81,25 +80,18 @@ describe('RichContent', () => {
       }
     })
 
-    expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(p(
-      mentionsLine(1),
-      ' how are you doing today?'
-    )))
+    expect(wrapper.html().replace(/\n/g, '')).to.eql(
+      compwrap(p(mentionsLine(1), ' how are you doing today?'))
+    )
   })
 
   it('replaces mentions at the end of the hellpost', () => {
     const html = [
       p('How are you doing today, fine gentlemen?'),
-      p(
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      )
+      p(makeMention('John'), makeMention('Josh'), makeMention('Jeremy'))
     ].join('')
     const expected = [
-      p(
-        'How are you doing today, fine gentlemen?'
-      ),
+      p('How are you doing today, fine gentlemen?'),
       // TODO fix this extra line somehow?
       p(
         '<mentions-line-stub mentions="',
@@ -126,16 +118,10 @@ describe('RichContent', () => {
 
   it('Does not touch links if link handling is disabled', () => {
     const html = [
-      [
-        makeMention('Jack'),
-        'let\'s meet up with ',
-        makeMention('Janet')
-      ].join(''),
-      [
-        makeMention('John'),
-        makeMention('Josh'),
-        makeMention('Jeremy')
-      ].join('')
+      [makeMention('Jack'), "let's meet up with ", makeMention('Janet')].join(
+        ''
+      ),
+      [makeMention('John'), makeMention('Josh'), makeMention('Jeremy')].join('')
     ].join('\n')
 
     const wrapper = shallowMount(RichContent, {
@@ -153,10 +139,7 @@ describe('RichContent', () => {
   })
 
   it('Adds greentext and cyantext to the post', () => {
-    const html = [
-      '&gt;preordering videogames',
-      '&gt;any year'
-    ].join('\n')
+    const html = ['&gt;preordering videogames', '&gt;any year'].join('\n')
     const expected = [
       '<span class="greentext">&gt;preordering videogames</span>',
       '<span class="greentext">&gt;any year</span>'
@@ -177,10 +160,7 @@ describe('RichContent', () => {
   })
 
   it('Does not add greentext and cyantext if setting is set to false', () => {
-    const html = [
-      '&gt;preordering videogames',
-      '&gt;any year'
-    ].join('\n')
+    const html = ['&gt;preordering videogames', '&gt;any year'].join('\n')
 
     const wrapper = shallowMount(RichContent, {
       global,
@@ -217,7 +197,7 @@ describe('RichContent', () => {
     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
   })
 
-  it('Doesn\'t add nonexistent emoji to post', () => {
+  it("Doesn't add nonexistent emoji to post", () => {
     const html = p('Lol :lol:')
 
     const wrapper = shallowMount(RichContent, {
@@ -266,19 +246,10 @@ describe('RichContent', () => {
     const html = [
       'Bruh',
       'Bruh',
-      [
-        makeMention('foo'),
-        makeMention('bar'),
-        makeMention('baz')
-      ].join(''),
-      'Bruh'
-    ].join('<br>')
-    const expected = [
-      'Bruh',
-      'Bruh',
-      mentionsLine(3),
+      [makeMention('foo'), makeMention('bar'), makeMention('baz')].join(''),
       'Bruh'
     ].join('<br>')
+    const expected = ['Bruh', 'Bruh', mentionsLine(3), 'Bruh'].join('<br>')
 
     const wrapper = shallowMount(RichContent, {
       global,
@@ -343,9 +314,7 @@ describe('RichContent', () => {
         '</span>',
         '</a>'
       ),
-      p(
-        'Testing'
-      )
+      p('Testing')
     ].join('')
     const expected = [
       p(
@@ -366,9 +335,7 @@ describe('RichContent', () => {
         '<!--v-if-->', // v-if placeholder, mentionsline's extra mentions and stuff
         '</span>'
       ),
-      p(
-        'Testing'
-      )
+      p('Testing')
     ].join('')
 
     const wrapper = mount(RichContent, {
@@ -524,7 +491,9 @@ describe('RichContent', () => {
     const TestComponent = {
       template: `
       <div v-if="!vhtml">
-        ${new Array(amount).fill(`<RichContent html="${onePost}" :greentext="true" :handleLinks="handeLinks" :emoji="[]" :attentions="attentions"/>`)}
+        ${new Array(amount).fill(
+          `<RichContent html="${onePost}" :greentext="true" :handleLinks="handeLinks" :emoji="[]" :attentions="attentions"/>`
+        )}
       </div>
       <div v-else="vhtml">
         ${new Array(amount).fill(`<div v-html="${onePost}"/>`)}
@@ -552,7 +521,9 @@ describe('RichContent', () => {
 
       const t2 = performance.now()
 
-      return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${(t1 - t0) / amount}ms - ${(t2 - t1) / amount}ms per item`
+      return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${
+        (t1 - t0) / amount
+      }ms - ${(t2 - t1) / amount}ms per item`
     }
 
     console.log(`${amount} items with links handling:`)
diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
index 584758f77..f90d92477 100644
--- a/test/unit/specs/components/user_profile.spec.js
+++ b/test/unit/specs/components/user_profile.spec.js
@@ -14,9 +14,9 @@ const actions = {
 }
 
 const testGetters = {
-  findUser: state => getters.findUser(state.users),
-  relationship: state => getters.relationship(state.users),
-  mergedConfig: state => ({
+  findUser: (state) => getters.findUser(state.users),
+  relationship: (state) => getters.relationship(state.users),
+  mergedConfig: (state) => ({
     colors: '',
     highlight: {},
     customTheme: {
@@ -163,7 +163,7 @@ const localProfileStore = createStore({
       currentUser: {
         credentials: ''
       },
-      usersObject: { 100: localUser, 'testuser': localUser },
+      usersObject: { 100: localUser, testuser: localUser },
       users: [localUser],
       relationships: {}
     }
@@ -175,7 +175,7 @@ describe.skip('UserProfile', () => {
   it('renders external profile', () => {
     const wrapper = mount(UserProfile, {
       global: {
-        plugins: [ externalProfileStore ],
+        plugins: [externalProfileStore],
         mocks: {
           $route: {
             params: { id: 100 },
@@ -186,13 +186,15 @@ describe.skip('UserProfile', () => {
       }
     })
 
-    expect(wrapper.find('.user-screen-name').text()).to.eql('@testUser@test.instance')
+    expect(wrapper.find('.user-screen-name').text()).to.eql(
+      '@testUser@test.instance'
+    )
   })
 
   it('renders local profile', () => {
     const wrapper = mount(UserProfile, {
       global: {
-        plugins: [ localProfileStore ],
+        plugins: [localProfileStore],
         mocks: {
           $route: {
             params: { name: 'testUser' },
diff --git a/test/unit/specs/modules/lists.spec.js b/test/unit/specs/modules/lists.spec.js
index ac9af1b6b..73e0865f3 100644
--- a/test/unit/specs/modules/lists.spec.js
+++ b/test/unit/specs/modules/lists.spec.js
@@ -1,5 +1,9 @@
 import { cloneDeep } from 'lodash'
-import { defaultState, mutations, getters } from '../../../../src/modules/lists.js'
+import {
+  defaultState,
+  mutations,
+  getters
+} from '../../../../src/modules/lists.js'
 
 describe('The lists module', () => {
   describe('mutations', () => {
@@ -34,10 +38,14 @@ describe('The lists module', () => {
       const modList = { id: '1', accountIds: ['3', '4', '5'] }
 
       mutations.setListAccounts(state, list)
-      expect(state.allListsObject[list.id]).to.eql({ accountIds: list.accountIds })
+      expect(state.allListsObject[list.id]).to.eql({
+        accountIds: list.accountIds
+      })
 
       mutations.setListAccounts(state, modList)
-      expect(state.allListsObject[modList.id]).to.eql({ accountIds: modList.accountIds })
+      expect(state.allListsObject[modList.id]).to.eql({
+        accountIds: modList.accountIds
+      })
     })
 
     it('deletes a list', () => {
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index b790b2316..02634a0d0 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -1,4 +1,8 @@
-import { defaultState, mutations, prepareStatus } from '../../../../src/modules/statuses.js'
+import {
+  defaultState,
+  mutations,
+  prepareStatus
+} from '../../../../src/modules/statuses.js'
 
 // eslint-disable-next-line camelcase
 const makeMockStatus = ({ id, text, type = 'status' }) => {
@@ -27,7 +31,10 @@ describe('Statuses module', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
 
-      mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        timeline: 'public'
+      })
 
       expect(state.allStatuses).to.eql([status])
       expect(state.timelines.public.statuses).to.eql([status])
@@ -39,8 +46,14 @@ describe('Statuses module', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
 
-      mutations.addNewStatuses(state, { statuses: [status], timeline: 'public' })
-      mutations.addNewStatuses(state, { statuses: [status], timeline: 'friends' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        timeline: 'public'
+      })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        timeline: 'friends'
+      })
 
       expect(state.allStatuses).to.eql([status])
       expect(state.timelines.public.statuses).to.eql([status])
@@ -69,7 +82,11 @@ describe('Statuses module', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
 
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
 
       expect(state.allStatuses).to.eql([status])
       expect(state.timelines.public.statuses).to.eql([status])
@@ -83,11 +100,20 @@ describe('Statuses module', () => {
       const otherStatus = makeMockStatus({ id: '3' })
       status.uri = 'xxx'
       const deletion = makeMockStatus({ id: '2', type: 'deletion' })
-      deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
+      deletion.text =
+        'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
       deletion.uri = 'xxx'
 
-      mutations.addNewStatuses(state, { statuses: [status, otherStatus], showImmediately: true, timeline: 'public' })
-      mutations.addNewStatuses(state, { statuses: [deletion], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status, otherStatus],
+        showImmediately: true,
+        timeline: 'public'
+      })
+      mutations.addNewStatuses(state, {
+        statuses: [deletion],
+        showImmediately: true,
+        timeline: 'public'
+      })
 
       expect(state.allStatuses).to.eql([otherStatus])
       expect(state.timelines.public.statuses).to.eql([otherStatus])
@@ -100,12 +126,24 @@ describe('Statuses module', () => {
       const status = makeMockStatus({ id: '1' })
       const secondStatus = makeMockStatus({ id: '2' })
 
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
       expect(state.timelines.public.maxId).to.eql('1')
 
-      mutations.addNewStatuses(state, { statuses: [secondStatus], showImmediately: true, timeline: 'public', noIdUpdate: true })
+      mutations.addNewStatuses(state, {
+        statuses: [secondStatus],
+        showImmediately: true,
+        timeline: 'public',
+        noIdUpdate: true
+      })
       expect(state.timelines.public.statuses).to.eql([secondStatus, status])
-      expect(state.timelines.public.visibleStatuses).to.eql([secondStatus, status])
+      expect(state.timelines.public.visibleStatuses).to.eql([
+        secondStatus,
+        status
+      ])
       expect(state.timelines.public.maxId).to.eql('1')
     })
 
@@ -116,17 +154,42 @@ describe('Statuses module', () => {
       const statusTwo = makeMockStatus({ id: '2' })
       const statusThree = makeMockStatus({ id: '4' })
 
-      mutations.addNewStatuses(state, { statuses: [nonVisibleStatus], showImmediately: false, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [nonVisibleStatus],
+        showImmediately: false,
+        timeline: 'public'
+      })
 
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
-      mutations.addNewStatuses(state, { statuses: [statusTwo], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
+      mutations.addNewStatuses(state, {
+        statuses: [statusTwo],
+        showImmediately: true,
+        timeline: 'public'
+      })
 
       expect(state.timelines.public.minVisibleId).to.equal('2')
 
-      mutations.addNewStatuses(state, { statuses: [statusThree], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [statusThree],
+        showImmediately: true,
+        timeline: 'public'
+      })
 
-      expect(state.timelines.public.statuses).to.eql([statusThree, status, statusTwo, nonVisibleStatus])
-      expect(state.timelines.public.visibleStatuses).to.eql([statusThree, status, statusTwo])
+      expect(state.timelines.public.statuses).to.eql([
+        statusThree,
+        status,
+        statusTwo,
+        nonVisibleStatus
+      ])
+      expect(state.timelines.public.visibleStatuses).to.eql([
+        statusThree,
+        status,
+        statusTwo
+      ])
     })
 
     it('splits retweets from their status and links them', () => {
@@ -138,7 +201,11 @@ describe('Statuses module', () => {
       retweet.retweeted_status = status
 
       // It adds both statuses, but only the retweet to visible.
-      mutations.addNewStatuses(state, { statuses: [retweet], timeline: 'public', showImmediately: true })
+      mutations.addNewStatuses(state, {
+        statuses: [retweet],
+        timeline: 'public',
+        showImmediately: true
+      })
       expect(state.timelines.public.visibleStatuses).to.have.length(1)
       expect(state.timelines.public.statuses).to.have.length(1)
       expect(state.allStatuses).to.have.length(2)
@@ -146,7 +213,10 @@ describe('Statuses module', () => {
       expect(state.allStatuses[1].id).to.equal('2')
 
       // It refers to the modified status.
-      mutations.addNewStatuses(state, { statuses: [modStatus], timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [modStatus],
+        timeline: 'public'
+      })
       expect(state.allStatuses).to.have.length(2)
       expect(state.allStatuses[0].id).to.equal('1')
       expect(state.allStatuses[0].text).to.equal(modStatus.text)
@@ -160,12 +230,20 @@ describe('Statuses module', () => {
       const modStatus = makeMockStatus({ id: '1', text: 'something else' })
 
       // Add original status
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
       expect(state.timelines.public.visibleStatuses).to.have.length(1)
       expect(state.allStatuses).to.have.length(1)
 
       // Add new version of status
-      mutations.addNewStatuses(state, { statuses: [modStatus], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [modStatus],
+        showImmediately: true,
+        timeline: 'public'
+      })
       expect(state.timelines.public.visibleStatuses).to.have.length(1)
       expect(state.allStatuses).to.have.length(1)
       expect(state.allStatuses[0].text).to.eql(modStatus.text)
@@ -179,12 +257,20 @@ describe('Statuses module', () => {
       retweet.retweeted_status = modStatus
 
       // Add original status
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
       expect(state.timelines.public.visibleStatuses).to.have.length(1)
       expect(state.allStatuses).to.have.length(1)
 
       // Add new version of status
-      mutations.addNewStatuses(state, { statuses: [retweet], showImmediately: false, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [retweet],
+        showImmediately: false,
+        timeline: 'public'
+      })
       expect(state.timelines.public.visibleStatuses).to.have.length(1)
       // Don't add the retweet itself if the tweet is visible
       expect(state.timelines.public.statuses).to.have.length(1)
@@ -205,15 +291,27 @@ describe('Statuses module', () => {
         user: { id: '99' }
       }
 
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
-      mutations.addNewStatuses(state, { statuses: [favorite], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
+      mutations.addNewStatuses(state, {
+        statuses: [favorite],
+        showImmediately: true,
+        timeline: 'public'
+      })
 
       expect(state.timelines.public.visibleStatuses.length).to.eql(1)
       expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1)
       expect(state.timelines.public.maxId).to.eq(favorite.id)
 
       // Adding it again does nothing
-      mutations.addNewStatuses(state, { statuses: [favorite], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [favorite],
+        showImmediately: true,
+        timeline: 'public'
+      })
 
       expect(state.timelines.public.visibleStatuses.length).to.eql(1)
       expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1)
@@ -233,7 +331,12 @@ describe('Statuses module', () => {
         user
       }
 
-      mutations.addNewStatuses(state, { statuses: [ownFavorite], showImmediately: true, timeline: 'public', user })
+      mutations.addNewStatuses(state, {
+        statuses: [ownFavorite],
+        showImmediately: true,
+        timeline: 'public',
+        user
+      })
 
       expect(state.timelines.public.visibleStatuses.length).to.eql(1)
       expect(state.timelines.public.visibleStatuses[0].fave_num).to.eql(1)
@@ -245,13 +348,23 @@ describe('Statuses module', () => {
     it('increments count in existing reaction', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
-      status.emoji_reactions = [ { name: '😂', count: 1, accounts: [] } ]
+      status.emoji_reactions = [{ name: '😂', count: 1, accounts: [] }]
 
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
-      mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
+      mutations.addOwnReaction(state, {
+        id: '1',
+        emoji: '😂',
+        currentUser: { id: 'me' }
+      })
       expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(2)
       expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(true)
-      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
+      expect(
+        state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id
+      ).to.eql('me')
     })
 
     it('adds a new reaction', () => {
@@ -259,32 +372,64 @@ describe('Statuses module', () => {
       const status = makeMockStatus({ id: '1' })
       status.emoji_reactions = []
 
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
-      mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
+      mutations.addOwnReaction(state, {
+        id: '1',
+        emoji: '😂',
+        currentUser: { id: 'me' }
+      })
       expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
       expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(true)
-      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
+      expect(
+        state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id
+      ).to.eql('me')
     })
 
     it('decreases count in existing reaction', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
-      status.emoji_reactions = [ { name: '😂', count: 2, accounts: [{ id: 'me' }] } ]
+      status.emoji_reactions = [
+        { name: '😂', count: 2, accounts: [{ id: 'me' }] }
+      ]
 
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
-      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
+      mutations.removeOwnReaction(state, {
+        id: '1',
+        emoji: '😂',
+        currentUser: { id: 'me' }
+      })
       expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
       expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(false)
-      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts).to.eql([])
+      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts).to.eql(
+        []
+      )
     })
 
     it('removes a reaction', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
-      status.emoji_reactions = [{ name: '😂', count: 1, accounts: [{ id: 'me' }] }]
+      status.emoji_reactions = [
+        { name: '😂', count: 1, accounts: [{ id: 'me' }] }
+      ]
 
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
-      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
+      mutations.removeOwnReaction(state, {
+        id: '1',
+        emoji: '😂',
+        currentUser: { id: 'me' }
+      })
       expect(state.allStatusesObject['1'].emoji_reactions.length).to.eql(0)
     })
   })
@@ -293,9 +438,17 @@ describe('Statuses module', () => {
     it('resets the minId to the min of the visible statuses when adding new to visible statuses', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '10' })
-      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [status],
+        showImmediately: true,
+        timeline: 'public'
+      })
       const newStatus = makeMockStatus({ id: '20' })
-      mutations.addNewStatuses(state, { statuses: [newStatus], showImmediately: false, timeline: 'public' })
+      mutations.addNewStatuses(state, {
+        statuses: [newStatus],
+        showImmediately: false,
+        timeline: 'public'
+      })
       state.timelines.public.minId = '5'
       mutations.showNewStatuses(state, { timeline: 'public' })
 
@@ -328,38 +481,42 @@ describe('Statuses module', () => {
       otherStatus.attentions = [user]
 
       const deletion = makeMockStatus({ id: '4', type: 'deletion' })
-      deletion.text = 'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
+      deletion.text =
+        'Dolus deleted notice {{tag:gs.smuglo.li,2016-11-18:noticeId=1038007:objectType=note}}.'
       deletion.uri = 'xxx'
       const newNotificationSideEffects = () => {}
-      mutations.addNewStatuses(state, { statuses: [status, otherStatus], user })
-      mutations.addNewNotifications(
-        state,
-        {
-          notifications: [{
+      mutations.addNewStatuses(state, {
+        statuses: [status, otherStatus],
+        user
+      })
+      mutations.addNewNotifications(state, {
+        notifications: [
+          {
             from_profile: { id: '2' },
             id: '998',
             type: 'mention',
             status: otherStatus,
             action: otherStatus,
             seen: false
-          }],
-          newNotificationSideEffects
-        })
+          }
+        ],
+        newNotificationSideEffects
+      })
 
       expect(state.notifications.data.length).to.eql(1)
-      mutations.addNewNotifications(
-        state,
-        {
-          notifications: [{
+      mutations.addNewNotifications(state, {
+        notifications: [
+          {
             from_profile: { id: '2' },
             id: '999',
             type: 'mention',
             status: mentionedStatus,
             action: mentionedStatus,
             seen: false
-          }],
-          newNotificationSideEffects
-        })
+          }
+        ],
+        newNotificationSideEffects
+      })
 
       mutations.addNewStatuses(state, { statuses: [mentionedStatus], user })
       expect(state.allStatuses.length).to.eql(3)
diff --git a/test/unit/specs/modules/users.spec.js b/test/unit/specs/modules/users.spec.js
index dfa5684d1..e43265b50 100644
--- a/test/unit/specs/modules/users.spec.js
+++ b/test/unit/specs/modules/users.spec.js
@@ -1,6 +1,10 @@
 import { cloneDeep } from 'lodash'
 
-import { defaultState, mutations, getters } from '../../../../src/modules/users.js'
+import {
+  defaultState,
+  mutations,
+  getters
+} from '../../../../src/modules/users.js'
 
 describe('The users module', () => {
   describe('mutations', () => {
@@ -23,9 +27,7 @@ describe('The users module', () => {
       const state = cloneDeep(defaultState)
       const user = {
         id: '1',
-        fields: [
-          { name: 'Label 1', value: 'Content 1' }
-        ]
+        fields: [{ name: 'Label 1', value: 'Content 1' }]
       }
       const firstModUser = {
         id: '1',
@@ -36,9 +38,7 @@ describe('The users module', () => {
       }
       const secondModUser = {
         id: '1',
-        fields: [
-          { name: 'Label 4', value: 'Content 4' }
-        ]
+        fields: [{ name: 'Label 4', value: 'Content 4' }]
       }
 
       mutations.addNewUsers(state, [user])
diff --git a/test/unit/specs/services/completion/completion.spec.js b/test/unit/specs/services/completion/completion.spec.js
index 81d3a26a2..ab904db70 100644
--- a/test/unit/specs/services/completion/completion.spec.js
+++ b/test/unit/specs/services/completion/completion.spec.js
@@ -1,4 +1,9 @@
-import { replaceWord, addPositionToWords, wordAtPosition, splitByWhitespaceBoundary } from '../../../../../src/services/completion/completion.js'
+import {
+  replaceWord,
+  addPositionToWords,
+  wordAtPosition,
+  splitByWhitespaceBoundary
+} from '../../../../../src/services/completion/completion.js'
 
 describe('addPositiontoWords', () => {
   it('adds the position to a word list', () => {
@@ -51,7 +56,23 @@ describe('addPositiontoWords', () => {
 describe('splitByWhitespaceBoundary', () => {
   it('splits at whitespace boundaries', () => {
     const str = 'This is a #nice @test for you,    @idiot@idiot.com'
-    const expected = ['This', ' ', 'is', ' ', 'a', ' ', '#nice', ' ', '@test', ' ', 'for', ' ', 'you,', '    ', '@idiot@idiot.com']
+    const expected = [
+      'This',
+      ' ',
+      'is',
+      ' ',
+      'a',
+      ' ',
+      '#nice',
+      ' ',
+      '@test',
+      ' ',
+      'for',
+      ' ',
+      'you,',
+      '    ',
+      '@idiot@idiot.com'
+    ]
     const res = splitByWhitespaceBoundary(str)
 
     expect(res).to.eql(expected)
diff --git a/test/unit/specs/services/date_utils/date_utils.spec.js b/test/unit/specs/services/date_utils/date_utils.spec.js
index a3beaf23b..db4158f29 100644
--- a/test/unit/specs/services/date_utils/date_utils.spec.js
+++ b/test/unit/specs/services/date_utils/date_utils.spec.js
@@ -5,36 +5,64 @@ describe('DateUtils', () => {
     it('returns now with low enough amount of seconds', () => {
       const futureTime = Date.now() + 20 * DateUtils.SECOND
       const pastTime = Date.now() - 20 * DateUtils.SECOND
-      expect(DateUtils.relativeTime(futureTime, 30)).to.eql({ num: 0, key: 'time.now', direction: '' })
-      expect(DateUtils.relativeTime(pastTime, 30)).to.eql({ num: 0, key: 'time.now', direction: '' })
+      expect(DateUtils.relativeTime(futureTime, 30)).to.eql({
+        num: 0,
+        key: 'time.now',
+        direction: ''
+      })
+      expect(DateUtils.relativeTime(pastTime, 30)).to.eql({
+        num: 0,
+        key: 'time.now',
+        direction: ''
+      })
     })
 
     it('rounds down for past', () => {
       const time = Date.now() - 1.8 * DateUtils.HOUR
-      expect(DateUtils.relativeTime(time)).to.eql({ num: 1, key: 'time.unit.hours', direction: 'time.in_past' })
+      expect(DateUtils.relativeTime(time)).to.eql({
+        num: 1,
+        key: 'time.unit.hours',
+        direction: 'time.in_past'
+      })
     })
 
     it('rounds up for future', () => {
       const time = Date.now() + 1.8 * DateUtils.HOUR
-      expect(DateUtils.relativeTime(time)).to.eql({ num: 2, key: 'time.unit.hours', direction: 'time.in_future' })
+      expect(DateUtils.relativeTime(time)).to.eql({
+        num: 2,
+        key: 'time.unit.hours',
+        direction: 'time.in_future'
+      })
     })
 
     it('uses plural when necessary', () => {
       const time = Date.now() - 3.8 * DateUtils.WEEK
-      expect(DateUtils.relativeTime(time)).to.eql({ num: 3, key: 'time.unit.weeks', direction: 'time.in_past' })
+      expect(DateUtils.relativeTime(time)).to.eql({
+        num: 3,
+        key: 'time.unit.weeks',
+        direction: 'time.in_past'
+      })
     })
 
     it('works with date string', () => {
       const time = Date.now() - 4 * DateUtils.MONTH
       const dateString = new Date(time).toISOString()
-      expect(DateUtils.relativeTime(dateString)).to.eql({ num: 4, key: 'time.unit.months', direction: 'time.in_past' })
+      expect(DateUtils.relativeTime(dateString)).to.eql({
+        num: 4,
+        key: 'time.unit.months',
+        direction: 'time.in_past'
+      })
     })
   })
 
   describe('relativeTimeShort', () => {
     it('returns the short version of the same relative time', () => {
       const time = Date.now() + 2 * DateUtils.YEAR
-      expect(DateUtils.relativeTimeShort(time)).to.eql({ num: 2, key: 'time.unit.years_short', direction: 'time.in_future' })
+      expect(DateUtils.relativeTimeShort(time)).to.eql({
+        num: 2,
+        key: 'time.unit.years_short',
+        direction: 'time.in_future'
+      })
     })
   })
 })
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index aa314b95c..abeac36fa 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -1,171 +1,196 @@
-import { parseStatus, parseUser, parseNotification, parseLinkHeaderPagination } from '../../../../../src/services/entity_normalizer/entity_normalizer.service.js'
+import {
+  parseStatus,
+  parseUser,
+  parseNotification,
+  parseLinkHeaderPagination
+} from '../../../../../src/services/entity_normalizer/entity_normalizer.service.js'
 import mastoapidata from '../../../../fixtures/mastoapi.json'
 import qvitterapidata from '../../../../fixtures/statuses.json'
 
 const makeMockStatusQvitter = (overrides = {}) => {
-  return Object.assign({
-    activity_type: 'post',
-    attachments: [],
-    attentions: [],
-    created_at: 'Tue Jan 15 13:57:56 +0000 2019',
-    external_url: 'https://ap.example/whatever',
-    fave_num: 1,
-    favorited: false,
-    id: '10335970',
-    in_reply_to_ostatus_uri: null,
-    in_reply_to_profileurl: null,
-    in_reply_to_screen_name: null,
-    in_reply_to_status_id: null,
-    in_reply_to_user_id: null,
-    is_local: false,
-    is_post_verb: true,
-    possibly_sensitive: false,
-    repeat_num: 0,
-    repeated: false,
-    statusnet_conversation_id: '16300488',
-    summary: null,
-    tags: [],
-    text: 'haha benis',
-    uri: 'https://ap.example/whatever',
-    user: makeMockUserQvitter(),
-    visibility: 'public'
-  }, overrides)
+  return Object.assign(
+    {
+      activity_type: 'post',
+      attachments: [],
+      attentions: [],
+      created_at: 'Tue Jan 15 13:57:56 +0000 2019',
+      external_url: 'https://ap.example/whatever',
+      fave_num: 1,
+      favorited: false,
+      id: '10335970',
+      in_reply_to_ostatus_uri: null,
+      in_reply_to_profileurl: null,
+      in_reply_to_screen_name: null,
+      in_reply_to_status_id: null,
+      in_reply_to_user_id: null,
+      is_local: false,
+      is_post_verb: true,
+      possibly_sensitive: false,
+      repeat_num: 0,
+      repeated: false,
+      statusnet_conversation_id: '16300488',
+      summary: null,
+      tags: [],
+      text: 'haha benis',
+      uri: 'https://ap.example/whatever',
+      user: makeMockUserQvitter(),
+      visibility: 'public'
+    },
+    overrides
+  )
 }
 
 const makeMockUserQvitter = (overrides = {}) => {
-  return Object.assign({
-    background_image: null,
-    cover_photo: '',
-    created_at: 'Mon Jan 14 13:56:51 +0000 2019',
-    default_scope: 'public',
-    description: 'ebin',
-    description_html: '<p>ebin</p>',
-    favourites_count: 0,
-    fields: [],
-    followers_count: 1,
-    following: true,
-    follows_you: true,
-    friends_count: 1,
-    id: '60717',
-    is_local: false,
-    locked: false,
-    name: 'Spurdo :ebin:',
-    name_html: 'Spurdo <img src="whatever">',
-    no_rich_text: false,
-    pleroma: { confirmation_pending: false, tags: [] },
-    profile_image_url: 'https://ap.example/whatever',
-    profile_image_url_https: 'https://ap.example/whatever',
-    profile_image_url_original: 'https://ap.example/whatever',
-    profile_image_url_profile_size: 'https://ap.example/whatever',
-    rights: { delete_others_notice: false },
-    screen_name: 'spurdo@ap.example',
-    statuses_count: 46,
-    statusnet_blocking: false,
-    statusnet_profile_url: ''
-  }, overrides)
+  return Object.assign(
+    {
+      background_image: null,
+      cover_photo: '',
+      created_at: 'Mon Jan 14 13:56:51 +0000 2019',
+      default_scope: 'public',
+      description: 'ebin',
+      description_html: '<p>ebin</p>',
+      favourites_count: 0,
+      fields: [],
+      followers_count: 1,
+      following: true,
+      follows_you: true,
+      friends_count: 1,
+      id: '60717',
+      is_local: false,
+      locked: false,
+      name: 'Spurdo :ebin:',
+      name_html: 'Spurdo <img src="whatever">',
+      no_rich_text: false,
+      pleroma: { confirmation_pending: false, tags: [] },
+      profile_image_url: 'https://ap.example/whatever',
+      profile_image_url_https: 'https://ap.example/whatever',
+      profile_image_url_original: 'https://ap.example/whatever',
+      profile_image_url_profile_size: 'https://ap.example/whatever',
+      rights: { delete_others_notice: false },
+      screen_name: 'spurdo@ap.example',
+      statuses_count: 46,
+      statusnet_blocking: false,
+      statusnet_profile_url: ''
+    },
+    overrides
+  )
 }
 
 const makeMockUserMasto = (overrides = {}) => {
-  return Object.assign({
-    acct: 'hj',
-    avatar:
-    'https://shigusegubu.club/media/1657b945-8d5b-4ce6-aafb-4c3fc5772120/8ce851029af84d55de9164e30cc7f46d60cbf12eee7e96c5c0d35d9038ddade1.png',
-    avatar_static:
-    'https://shigusegubu.club/media/1657b945-8d5b-4ce6-aafb-4c3fc5772120/8ce851029af84d55de9164e30cc7f46d60cbf12eee7e96c5c0d35d9038ddade1.png',
-    bot: false,
-    created_at: '2017-12-17T21:54:14.000Z',
-    display_name: 'whatever whatever whatever witch',
-    emojis: [],
-    fields: [],
-    followers_count: 705,
-    following_count: 326,
-    header:
-    'https://shigusegubu.club/media/7ab024d9-2a8a-4fbc-9ce8-da06756ae2db/6aadefe4e264133bc377ab450e6b045b6f5458542a5c59e6c741f86107f0388b.png',
-    header_static:
-    'https://shigusegubu.club/media/7ab024d9-2a8a-4fbc-9ce8-da06756ae2db/6aadefe4e264133bc377ab450e6b045b6f5458542a5c59e6c741f86107f0388b.png',
-    id: '1',
-    locked: false,
-    note:
-    'Volatile Internet Weirdo. Name pronounced as Hee Jay. JS and Java dark arts mage, Elixir trainee. I love sampo and lain. Matrix is <span><a data-user="1" href="https://shigusegubu.club/users/hj">@<span>hj</span></a></span>:matrix.heldscal.la Pronouns are whatever. Do not DM me unless it\'s truly private matter and you\'re instance\'s admin or you risk your DM to be reposted publicly.Wish i was Finnish girl.',
-    pleroma: { confirmation_pending: false, tags: null },
-    source: { note: '', privacy: 'public', sensitive: false },
-    statuses_count: 41775,
-    url: 'https://shigusegubu.club/users/hj',
-    username: 'hj'
-  }, overrides)
+  return Object.assign(
+    {
+      acct: 'hj',
+      avatar:
+        'https://shigusegubu.club/media/1657b945-8d5b-4ce6-aafb-4c3fc5772120/8ce851029af84d55de9164e30cc7f46d60cbf12eee7e96c5c0d35d9038ddade1.png',
+      avatar_static:
+        'https://shigusegubu.club/media/1657b945-8d5b-4ce6-aafb-4c3fc5772120/8ce851029af84d55de9164e30cc7f46d60cbf12eee7e96c5c0d35d9038ddade1.png',
+      bot: false,
+      created_at: '2017-12-17T21:54:14.000Z',
+      display_name: 'whatever whatever whatever witch',
+      emojis: [],
+      fields: [],
+      followers_count: 705,
+      following_count: 326,
+      header:
+        'https://shigusegubu.club/media/7ab024d9-2a8a-4fbc-9ce8-da06756ae2db/6aadefe4e264133bc377ab450e6b045b6f5458542a5c59e6c741f86107f0388b.png',
+      header_static:
+        'https://shigusegubu.club/media/7ab024d9-2a8a-4fbc-9ce8-da06756ae2db/6aadefe4e264133bc377ab450e6b045b6f5458542a5c59e6c741f86107f0388b.png',
+      id: '1',
+      locked: false,
+      note: 'Volatile Internet Weirdo. Name pronounced as Hee Jay. JS and Java dark arts mage, Elixir trainee. I love sampo and lain. Matrix is <span><a data-user="1" href="https://shigusegubu.club/users/hj">@<span>hj</span></a></span>:matrix.heldscal.la Pronouns are whatever. Do not DM me unless it\'s truly private matter and you\'re instance\'s admin or you risk your DM to be reposted publicly.Wish i was Finnish girl.',
+      pleroma: { confirmation_pending: false, tags: null },
+      source: { note: '', privacy: 'public', sensitive: false },
+      statuses_count: 41775,
+      url: 'https://shigusegubu.club/users/hj',
+      username: 'hj'
+    },
+    overrides
+  )
 }
 
 const makeMockStatusMasto = (overrides = {}) => {
-  return Object.assign({
-    account: makeMockUserMasto(),
-    application: { name: 'Web', website: null },
-    content:
-    '<span><a data-user="14660" href="https://pleroma.soykaf.com/users/sampo">@<span>sampo</span></a></span> god i wish i was there',
-    created_at: '2019-01-17T16:29:23.000Z',
-    emojis: [],
-    favourited: false,
-    favourites_count: 1,
-    id: '10423476',
-    in_reply_to_account_id: '14660',
-    in_reply_to_id: '10423197',
-    language: null,
-    media_attachments: [],
-    mentions: [
-      {
-        acct: 'sampo@pleroma.soykaf.com',
-        id: '14660',
-        url: 'https://pleroma.soykaf.com/users/sampo',
-        username: 'sampo'
+  return Object.assign(
+    {
+      account: makeMockUserMasto(),
+      application: { name: 'Web', website: null },
+      content:
+        '<span><a data-user="14660" href="https://pleroma.soykaf.com/users/sampo">@<span>sampo</span></a></span> god i wish i was there',
+      created_at: '2019-01-17T16:29:23.000Z',
+      emojis: [],
+      favourited: false,
+      favourites_count: 1,
+      id: '10423476',
+      in_reply_to_account_id: '14660',
+      in_reply_to_id: '10423197',
+      language: null,
+      media_attachments: [],
+      mentions: [
+        {
+          acct: 'sampo@pleroma.soykaf.com',
+          id: '14660',
+          url: 'https://pleroma.soykaf.com/users/sampo',
+          username: 'sampo'
+        }
+      ],
+      muted: false,
+      reblog: null,
+      reblogged: false,
+      reblogs_count: 0,
+      replies_count: 0,
+      sensitive: false,
+      spoiler_text: '',
+      tags: [],
+      uri: 'https://shigusegubu.club/objects/16033fbb-97c0-4f0e-b834-7abb92fb8639',
+      url: 'https://shigusegubu.club/objects/16033fbb-97c0-4f0e-b834-7abb92fb8639',
+      visibility: 'public',
+      pleroma: {
+        local: true
       }
-    ],
-    muted: false,
-    reblog: null,
-    reblogged: false,
-    reblogs_count: 0,
-    replies_count: 0,
-    sensitive: false,
-    spoiler_text: '',
-    tags: [],
-    uri: 'https://shigusegubu.club/objects/16033fbb-97c0-4f0e-b834-7abb92fb8639',
-    url: 'https://shigusegubu.club/objects/16033fbb-97c0-4f0e-b834-7abb92fb8639',
-    visibility: 'public',
-    pleroma: {
-      local: true
-    }
-  }, overrides)
+    },
+    overrides
+  )
 }
 
 const makeMockNotificationQvitter = (overrides = {}) => {
-  return Object.assign({
-    notice: makeMockStatusQvitter(),
-    ntype: 'follow',
-    from_profile: makeMockUserQvitter(),
-    is_seen: 0,
-    id: 123
-  }, overrides)
+  return Object.assign(
+    {
+      notice: makeMockStatusQvitter(),
+      ntype: 'follow',
+      from_profile: makeMockUserQvitter(),
+      is_seen: 0,
+      id: 123
+    },
+    overrides
+  )
 }
 
 const makeMockEmojiMasto = (overrides = [{}]) => {
   return [
-    Object.assign({
-      shortcode: 'image',
-      static_url: 'https://example.com/image.png',
-      url: 'https://example.com/image.png',
-      visible_in_picker: false
-    }, overrides[0]),
-    Object.assign({
-      shortcode: 'thinking',
-      static_url: 'https://example.com/think.png',
-      url: 'https://example.com/think.png',
-      visible_in_picker: false
-    }, overrides[1])
+    Object.assign(
+      {
+        shortcode: 'image',
+        static_url: 'https://example.com/image.png',
+        url: 'https://example.com/image.png',
+        visible_in_picker: false
+      },
+      overrides[0]
+    ),
+    Object.assign(
+      {
+        shortcode: 'thinking',
+        static_url: 'https://example.com/think.png',
+        url: 'https://example.com/think.png',
+        visible_in_picker: false
+      },
+      overrides[1]
+    )
   ]
 }
 
 describe('API Entities normalizer', () => {
   describe('parseStatus', () => {
     describe('QVitter preprocessing', () => {
-      it('doesn\'t blow up', () => {
+      it("doesn't blow up", () => {
         const parsed = qvitterapidata.map(parseStatus)
         expect(parsed.length).to.eq(qvitterapidata.length)
       })
@@ -181,13 +206,26 @@ describe('API Entities normalizer', () => {
           is_post_verb: false
         }
 
-        expect(parseStatus(makeMockStatusQvitter(fav))).to.have.property('type', 'favorite')
-        expect(parseStatus(makeMockStatusQvitter(mastoFav))).to.have.property('type', 'favorite')
+        expect(parseStatus(makeMockStatusQvitter(fav))).to.have.property(
+          'type',
+          'favorite'
+        )
+        expect(parseStatus(makeMockStatusQvitter(mastoFav))).to.have.property(
+          'type',
+          'favorite'
+        )
       })
 
       it('processes repeats correctly', () => {
-        const post = makeMockStatusQvitter({ retweeted_status: null, id: 'deadbeef' })
-        const repeat = makeMockStatusQvitter({ retweeted_status: post, is_post_verb: false, id: 'foobar' })
+        const post = makeMockStatusQvitter({
+          retweeted_status: null,
+          id: 'deadbeef'
+        })
+        const repeat = makeMockStatusQvitter({
+          retweeted_status: post,
+          is_post_verb: false,
+          id: 'foobar'
+        })
 
         const parsedPost = parseStatus(post)
         const parsedRepeat = parseStatus(repeat)
@@ -196,26 +234,36 @@ describe('API Entities normalizer', () => {
         expect(parsedRepeat).to.have.property('type', 'retweet')
         console.log(parsedRepeat)
         expect(parsedRepeat).to.have.property('retweeted_status')
-        expect(parsedRepeat).to.have.nested.property('retweeted_status.id', 'deadbeef')
+        expect(parsedRepeat).to.have.nested.property(
+          'retweeted_status.id',
+          'deadbeef'
+        )
       })
 
       it('sets nsfw for statuses with the #nsfw tag', () => {
         const safe = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan' })
-        const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw' })
+        const nsfw = makeMockStatusQvitter({
+          id: '1',
+          text: 'Hello oniichan #nsfw'
+        })
 
         expect(parseStatus(safe).nsfw).to.eq(false)
         expect(parseStatus(nsfw).nsfw).to.eq(true)
       })
 
       it('leaves existing nsfw settings alone', () => {
-        const nsfw = makeMockStatusQvitter({ id: '1', text: 'Hello oniichan #nsfw', nsfw: false })
+        const nsfw = makeMockStatusQvitter({
+          id: '1',
+          text: 'Hello oniichan #nsfw',
+          nsfw: false
+        })
 
         expect(parseStatus(nsfw).nsfw).to.eq(false)
       })
     })
 
     describe('Mastoapi preprocessing and converting', () => {
-      it('doesn\'t blow up', () => {
+      it("doesn't blow up", () => {
         const parsed = mastoapidata.map(parseStatus)
         expect(parsed.length).to.eq(mastoapidata.length)
       })
@@ -230,7 +278,10 @@ describe('API Entities normalizer', () => {
         expect(parsedPost).to.have.property('type', 'status')
         expect(parsedRepeat).to.have.property('type', 'retweet')
         expect(parsedRepeat).to.have.property('retweeted_status')
-        expect(parsedRepeat).to.have.nested.property('retweeted_status.id', 'deadbeef')
+        expect(parsedRepeat).to.have.nested.property(
+          'retweeted_status.id',
+          'deadbeef'
+        )
       })
     })
   })
@@ -246,7 +297,15 @@ describe('API Entities normalizer', () => {
     })
 
     it('removes html tags from user profile fields', () => {
-      const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), fields: [{ name: 'user', value: '<a rel="me" href="https://example.com/@user">@user</a>' }] })
+      const user = makeMockUserMasto({
+        emojis: makeMockEmojiMasto(),
+        fields: [
+          {
+            name: 'user',
+            value: '<a rel="me" href="https://example.com/@user">@user</a>'
+          }
+        ]
+      })
 
       const parsedUser = parseUser(user)
 
@@ -259,7 +318,14 @@ describe('API Entities normalizer', () => {
     })
 
     it('adds hide_follows and hide_followers user settings', () => {
-      const user = makeMockUserMasto({ pleroma: { hide_followers: true, hide_follows: false, hide_followers_count: false, hide_follows_count: true } })
+      const user = makeMockUserMasto({
+        pleroma: {
+          hide_followers: true,
+          hide_follows: false,
+          hide_followers_count: false,
+          hide_follows_count: true
+        }
+      })
 
       expect(parseUser(user)).to.have.property('hide_followers', true)
       expect(parseUser(user)).to.have.property('hide_follows', false)
@@ -270,14 +336,16 @@ describe('API Entities normalizer', () => {
     it('converts IDN to unicode and marks it as internatonal', () => {
       const user = makeMockUserMasto({ acct: 'lain@xn--lin-6cd.com' })
 
-      expect(parseUser(user)).to.have.property('screen_name_ui').that.equal('lain@🌏lаin.com')
+      expect(parseUser(user))
+        .to.have.property('screen_name_ui')
+        .that.equal('lain@🌏lаin.com')
     })
   })
 
   // We currently use QvitterAPI notifications only, and especially due to MastoAPI lacking is_seen, support for MastoAPI
   // is more of an afterthought
   describe('parseNotifications (QvitterAPI)', () => {
-    it('correctly normalizes data to FE\'s format', () => {
+    it("correctly normalizes data to FE's format", () => {
       const notif = makeMockNotificationQvitter({
         id: 123,
         notice: makeMockStatusQvitter({ id: 444 }),
@@ -285,9 +353,18 @@ describe('API Entities normalizer', () => {
       })
       expect(parseNotification(notif)).to.have.property('id', 123)
       expect(parseNotification(notif)).to.have.property('seen', false)
-      expect(parseNotification(notif)).to.have.nested.property('status.id', '444')
-      expect(parseNotification(notif)).to.have.nested.property('action.id', '444')
-      expect(parseNotification(notif)).to.have.nested.property('from_profile.id', 'spurdo')
+      expect(parseNotification(notif)).to.have.nested.property(
+        'status.id',
+        '444'
+      )
+      expect(parseNotification(notif)).to.have.nested.property(
+        'action.id',
+        '444'
+      )
+      expect(parseNotification(notif)).to.have.nested.property(
+        'from_profile.id',
+        'spurdo'
+      )
     })
 
     it('correctly normalizes favorite notifications', () => {
@@ -304,28 +381,39 @@ describe('API Entities normalizer', () => {
       expect(parseNotification(notif)).to.have.property('id', 123)
       expect(parseNotification(notif)).to.have.property('type', 'like')
       expect(parseNotification(notif)).to.have.property('seen', true)
-      expect(parseNotification(notif)).to.have.nested.property('status.id', '4412')
-      expect(parseNotification(notif)).to.have.nested.property('action.id', '444')
-      expect(parseNotification(notif)).to.have.nested.property('from_profile.id', 'spurdo')
+      expect(parseNotification(notif)).to.have.nested.property(
+        'status.id',
+        '4412'
+      )
+      expect(parseNotification(notif)).to.have.nested.property(
+        'action.id',
+        '444'
+      )
+      expect(parseNotification(notif)).to.have.nested.property(
+        'from_profile.id',
+        'spurdo'
+      )
     })
   })
 
   describe('Link header pagination', () => {
     it('Parses min and max ids as integers', () => {
-      const linkHeader = '<https://example.com/api/v1/notifications?max_id=861676>; rel="next", <https://example.com/api/v1/notifications?min_id=861741>; rel="prev"'
+      const linkHeader =
+        '<https://example.com/api/v1/notifications?max_id=861676>; rel="next", <https://example.com/api/v1/notifications?min_id=861741>; rel="prev"'
       const result = parseLinkHeaderPagination(linkHeader)
       expect(result).to.eql({
-        'maxId': 861676,
-        'minId': 861741
+        maxId: 861676,
+        minId: 861741
       })
     })
 
     it('Parses min and max ids as flakes', () => {
-      const linkHeader = '<http://example.com/api/v1/timelines/home?max_id=9waQx5IIS48qVue2Ai>; rel="next", <http://example.com/api/v1/timelines/home?min_id=9wi61nIPnfn674xgie>; rel="prev"'
+      const linkHeader =
+        '<http://example.com/api/v1/timelines/home?max_id=9waQx5IIS48qVue2Ai>; rel="next", <http://example.com/api/v1/timelines/home?min_id=9wi61nIPnfn674xgie>; rel="prev"'
       const result = parseLinkHeaderPagination(linkHeader, { flakeId: true })
       expect(result).to.eql({
-        'maxId': '9waQx5IIS48qVue2Ai',
-        'minId': '9wi61nIPnfn674xgie'
+        maxId: '9waQx5IIS48qVue2Ai',
+        minId: '9wi61nIPnfn674xgie'
       })
     })
   })
diff --git a/test/unit/specs/services/gesture_service/gesture_service.spec.js b/test/unit/specs/services/gesture_service/gesture_service.spec.js
index a91f95db6..4a285fe60 100644
--- a/test/unit/specs/services/gesture_service/gesture_service.spec.js
+++ b/test/unit/specs/services/gesture_service/gesture_service.spec.js
@@ -13,7 +13,9 @@ describe('GestureService', () => {
   describe('swipeGesture', () => {
     it('calls the callback on a successful swipe', () => {
       let swiped = false
-      const callback = () => { swiped = true }
+      const callback = () => {
+        swiped = true
+      }
       const gesture = GestureService.swipeGesture(
         GestureService.DIRECTION_RIGHT,
         callback
@@ -27,7 +29,9 @@ describe('GestureService', () => {
 
     it('calls the callback only once per begin', () => {
       let hits = 0
-      const callback = () => { hits += 1 }
+      const callback = () => {
+        hits += 1
+      }
       const gesture = GestureService.swipeGesture(
         GestureService.DIRECTION_RIGHT,
         callback
@@ -40,9 +44,11 @@ describe('GestureService', () => {
       expect(hits).to.eql(1)
     })
 
-    it('doesn\'t call the callback on an opposite swipe', () => {
+    it("doesn't call the callback on an opposite swipe", () => {
       let swiped = false
-      const callback = () => { swiped = true }
+      const callback = () => {
+        swiped = true
+      }
       const gesture = GestureService.swipeGesture(
         GestureService.DIRECTION_RIGHT,
         callback
@@ -54,9 +60,11 @@ describe('GestureService', () => {
       expect(swiped).to.eql(false)
     })
 
-    it('doesn\'t call the callback on a swipe below threshold', () => {
+    it("doesn't call the callback on a swipe below threshold", () => {
       let swiped = false
-      const callback = () => { swiped = true }
+      const callback = () => {
+        swiped = true
+      }
       const gesture = GestureService.swipeGesture(
         GestureService.DIRECTION_RIGHT,
         callback,
@@ -69,9 +77,11 @@ describe('GestureService', () => {
       expect(swiped).to.eql(false)
     })
 
-    it('doesn\'t call the callback on a perpendicular swipe', () => {
+    it("doesn't call the callback on a perpendicular swipe", () => {
       let swiped = false
-      const callback = () => { swiped = true }
+      const callback = () => {
+        swiped = true
+      }
       const gesture = GestureService.swipeGesture(
         GestureService.DIRECTION_RIGHT,
         callback,
@@ -87,7 +97,9 @@ describe('GestureService', () => {
 
     it('calls the callback on perpendicular swipe if within tolerance', () => {
       let swiped = false
-      const callback = () => { swiped = true }
+      const callback = () => {
+        swiped = true
+      }
       const gesture = GestureService.swipeGesture(
         GestureService.DIRECTION_RIGHT,
         callback,
@@ -103,13 +115,10 @@ describe('GestureService', () => {
 
     it('works with any arbitrary 2d directions', () => {
       let swiped = false
-      const callback = () => { swiped = true }
-      const gesture = GestureService.swipeGesture(
-        [-1, -1],
-        callback,
-        30,
-        0.1
-      )
+      const callback = () => {
+        swiped = true
+      }
+      const gesture = GestureService.swipeGesture([-1, -1], callback, 30, 0.1)
 
       GestureService.beginSwipe(mockTouchEvent(100, 100), gesture)
       GestureService.updateSwipe(mockTouchEvent(60, 60), gesture)
diff --git a/test/unit/specs/services/html_converter/html_line_converter.spec.js b/test/unit/specs/services/html_converter/html_line_converter.spec.js
index 86bd7e8b0..47d3f94a8 100644
--- a/test/unit/specs/services/html_converter/html_line_converter.spec.js
+++ b/test/unit/specs/services/html_converter/html_line_converter.spec.js
@@ -2,7 +2,7 @@ import { convertHtmlToLines } from 'src/services/html_converter/html_line_conver
 
 const greentextHandle = new Set(['p', 'div'])
 const mapOnlyText = (processor) => (input) => {
-  if (input.text && input.level.every(l => greentextHandle.has(l))) {
+  if (input.text && input.level.every((l) => greentextHandle.has(l))) {
     return processor(input.text)
   } else if (input.text) {
     return input.text
@@ -15,7 +15,8 @@ describe('html_line_converter', () => {
   describe('with processor that keeps original line should not make any changes to HTML when', () => {
     const processorKeep = (line) => line
     it('fed with regular HTML with newlines', () => {
-      const inputOutput = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
+      const inputOutput =
+        '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
       const result = convertHtmlToLines(inputOutput)
       const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
       expect(comparableResult).to.eql(inputOutput)
@@ -35,14 +36,14 @@ describe('html_line_converter', () => {
       expect(comparableResult).to.eql(inputOutput)
     })
 
-    it('fed with sorta valid HTML but tags aren\'t closed', () => {
+    it("fed with sorta valid HTML but tags aren't closed", () => {
       const inputOutput = 'just leaving a <div> hanging'
       const result = convertHtmlToLines(inputOutput)
       const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
       expect(comparableResult).to.eql(inputOutput)
     })
 
-    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
+    it("fed with not really HTML at this point... tags that aren't finished", () => {
       const inputOutput = 'do you expect me to finish this <div class='
       const result = convertHtmlToLines(inputOutput)
       const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
@@ -50,14 +51,16 @@ describe('html_line_converter', () => {
     })
 
     it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
-      const inputOutput = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
+      const inputOutput =
+        'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
       const result = convertHtmlToLines(inputOutput)
       const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
       expect(comparableResult).to.eql(inputOutput)
     })
 
     it('fed with maybe valid HTML? self-closing divs and ps', () => {
-      const inputOutput = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
+      const inputOutput =
+        'a <div class="what"/> what now <p aria-label="wtf"/> ?'
       const result = convertHtmlToLines(inputOutput)
       const comparableResult = result.map(mapOnlyText(processorKeep)).join('')
       expect(comparableResult).to.eql(inputOutput)
@@ -80,10 +83,13 @@ describe('html_line_converter', () => {
   describe('with processor that replaces lines with word "_" should match expected line when', () => {
     const processorReplace = (line) => '_'
     it('fed with regular HTML with newlines', () => {
-      const input = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
+      const input =
+        '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
       const output = '_<br/>_<p class="lol">_</p>_\n_<p >_<br>_</p> <br>\n<br/>'
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
 
@@ -91,7 +97,9 @@ describe('html_line_converter', () => {
       const input = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
       const output = '_'
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
 
@@ -99,31 +107,40 @@ describe('html_line_converter', () => {
       const input = '</p> lmao what </div> whats going on <div> wha <p>'
       const output = '_<div>_<p>'
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
 
-    it('fed with sorta valid HTML but tags aren\'t closed', () => {
+    it("fed with sorta valid HTML but tags aren't closed", () => {
       const input = 'just leaving a <div> hanging'
       const output = '_<div>_'
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
 
-    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
+    it("fed with not really HTML at this point... tags that aren't finished", () => {
       const input = 'do you expect me to finish this <div class='
       const output = '_'
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
 
     it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
-      const input = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
+      const input =
+        'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
       const output = '_<p>_\n_<p>_</p>_<br/><div>_</div></p>'
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
 
@@ -131,7 +148,9 @@ describe('html_line_converter', () => {
       const input = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
       const output = '_<div class="what"/>_<p aria-label="wtf"/>_'
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
 
@@ -139,7 +158,9 @@ describe('html_line_converter', () => {
       const input = 'Yes, it is me, <![CDATA[DIO]]>'
       const output = '_'
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
 
@@ -153,7 +174,9 @@ describe('html_line_converter', () => {
       false</code></pre><blockquote>That, christian-like JS diagram but it’s evangelion instead.</blockquote>
       `
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(input)
     })
     it('Testing handling ignored blocks 2', () => {
@@ -164,7 +187,9 @@ describe('html_line_converter', () => {
       <blockquote>An SSL error has happened.</blockquote><p>_</p>
       `
       const result = convertHtmlToLines(input)
-      const comparableResult = result.map(mapOnlyText(processorReplace)).join('')
+      const comparableResult = result
+        .map(mapOnlyText(processorReplace))
+        .join('')
       expect(comparableResult).to.eql(output)
     })
   })
diff --git a/test/unit/specs/services/html_converter/html_tree_converter.spec.js b/test/unit/specs/services/html_converter/html_tree_converter.spec.js
index 7283021b2..1a4a89451 100644
--- a/test/unit/specs/services/html_converter/html_tree_converter.spec.js
+++ b/test/unit/specs/services/html_converter/html_tree_converter.spec.js
@@ -6,21 +6,9 @@ describe('html_tree_converter', () => {
       const input = '1 <p>2</p> <b>3<img src="a">4</b>5'
       expect(convertHtmlToTree(input)).to.eql([
         '1 ',
-        [
-          '<p>',
-          ['2'],
-          '</p>'
-        ],
+        ['<p>', ['2'], '</p>'],
         ' ',
-        [
-          '<b>',
-          [
-            '3',
-            ['<img src="a">'],
-            '4'
-          ],
-          '</b>'
-        ],
+        ['<b>', ['3', ['<img src="a">'], '4'], '</b>'],
         '5'
       ])
     })
@@ -28,20 +16,8 @@ describe('html_tree_converter', () => {
       const input = '1 <p >2</p><b >3<img   src="a">4</b>5'
       expect(convertHtmlToTree(input)).to.eql([
         '1 ',
-        [
-          '<p >',
-          ['2'],
-          '</p>'
-        ],
-        [
-          '<b >',
-          [
-            '3',
-            ['<img   src="a">'],
-            '4'
-          ],
-          '</b>'
-        ],
+        ['<p >', ['2'], '</p>'],
+        ['<b >', ['3', ['<img   src="a">'], '4'], '</b>'],
         '5'
       ])
     })
@@ -51,14 +27,12 @@ describe('html_tree_converter', () => {
         '1 ',
         ['<br>'],
         ' 2 ',
-        [
-          '<p>',
-          [' 42']
-        ]
+        ['<p>', [' 42']]
       ])
     })
     it('realistic case 1', () => {
-      const input = '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
+      const input =
+        '<p><span class="h-card"><a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">@<span>benis</span></a></span> <span class="h-card"><a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">@<span>hj</span></a></span> nice</p>'
       expect(convertHtmlToTree(input)).to.eql([
         [
           '<p>',
@@ -68,16 +42,7 @@ describe('html_tree_converter', () => {
               [
                 [
                   '<a class="u-url mention" data-user="9wRC6T2ZZiKWJ0vUi8" href="https://cawfee.club/users/benis" rel="ugc">',
-                  [
-                    '@',
-                    [
-                      '<span>',
-                      [
-                        'benis'
-                      ],
-                      '</span>'
-                    ]
-                  ],
+                  ['@', ['<span>', ['benis'], '</span>']],
                   '</a>'
                 ]
               ],
@@ -89,16 +54,7 @@ describe('html_tree_converter', () => {
               [
                 [
                   '<a class="u-url mention" data-user="194" href="https://shigusegubu.club/users/hj" rel="ugc">',
-                  [
-                    '@',
-                    [
-                      '<span>',
-                      [
-                        'hj'
-                      ],
-                      '</span>'
-                    ]
-                  ],
+                  ['@', ['<span>', ['hj'], '</span>']],
                   '</a>'
                 ]
               ],
@@ -111,20 +67,15 @@ describe('html_tree_converter', () => {
       ])
     })
     it('realistic case 2', () => {
-      const inputOutput = 'Country improv: give me a city<br/>Audience: Memphis<br/>Improv troupe: come on, a better one<br/>Audience: el paso'
+      const inputOutput =
+        'Country improv: give me a city<br/>Audience: Memphis<br/>Improv troupe: come on, a better one<br/>Audience: el paso'
       expect(convertHtmlToTree(inputOutput)).to.eql([
         'Country improv: give me a city',
-        [
-          '<br/>'
-        ],
+        ['<br/>'],
         'Audience: Memphis',
-        [
-          '<br/>'
-        ],
+        ['<br/>'],
         'Improv troupe: come on, a better one',
-        [
-          '<br/>'
-        ],
+        ['<br/>'],
         'Audience: el paso'
       ])
     })
diff --git a/test/unit/specs/services/html_converter/utility.spec.js b/test/unit/specs/services/html_converter/utility.spec.js
index cf6fd99b4..8b6780694 100644
--- a/test/unit/specs/services/html_converter/utility.spec.js
+++ b/test/unit/specs/services/html_converter/utility.spec.js
@@ -1,4 +1,7 @@
-import { processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
+import {
+  processTextForEmoji,
+  getAttrs
+} from 'src/services/html_converter/utility.service.js'
 
 describe('html_converter utility', () => {
   describe('processTextForEmoji', () => {
@@ -17,11 +20,11 @@ describe('html_converter utility', () => {
       ])
     })
     it('leaves text as is', () => {
-      const input = 'Number one: that\'s terror'
+      const input = "Number one: that's terror"
       const emojis = []
       const processor = ({ shortcode, src }) => ({ shortcode, src })
       expect(processTextForEmoji(input, emojis, processor)).to.eql([
-        'Number one: that\'s terror'
+        "Number one: that's terror"
       ])
     })
   })
diff --git a/test/unit/specs/services/notification_utils/notification_utils.spec.js b/test/unit/specs/services/notification_utils/notification_utils.spec.js
index 00628d833..3890c8f1f 100644
--- a/test/unit/specs/services/notification_utils/notification_utils.spec.js
+++ b/test/unit/specs/services/notification_utils/notification_utils.spec.js
@@ -47,7 +47,9 @@ describe('NotificationUtils', () => {
           type: 'like'
         }
       ]
-      expect(NotificationUtils.filteredNotificationsFromStore(store)).to.eql(expected)
+      expect(NotificationUtils.filteredNotificationsFromStore(store)).to.eql(
+        expected
+      )
     })
   })
 
@@ -87,7 +89,9 @@ describe('NotificationUtils', () => {
           seen: false
         }
       ]
-      expect(NotificationUtils.unseenNotificationsFromStore(store)).to.eql(expected)
+      expect(NotificationUtils.unseenNotificationsFromStore(store)).to.eql(
+        expected
+      )
     })
   })
 })
diff --git a/test/unit/specs/services/theme_data/sanity_checks.spec.js b/test/unit/specs/services/theme_data/sanity_checks.spec.js
index f0072e7d5..ba0796e28 100644
--- a/test/unit/specs/services/theme_data/sanity_checks.spec.js
+++ b/test/unit/specs/services/theme_data/sanity_checks.spec.js
@@ -5,7 +5,7 @@ const checkColors = (output) => {
   Object.entries(output.colors).forEach(([key, v]) => {
     expect(v, key).to.be.an('object')
     expect(v, key).to.include.all.keys('r', 'g', 'b')
-    'rgba'.split('').forEach(k => {
+    'rgba'.split('').forEach((k) => {
       if ((k === 'a' && v.hasOwnProperty('a')) || k !== 'a') {
         expect(v[k], key + '.' + k).to.be.a('number')
         expect(v[k], key + '.' + k).to.be.least(0)
diff --git a/test/unit/specs/services/theme_data/theme_data.spec.js b/test/unit/specs/services/theme_data/theme_data.spec.js
index c634cade9..913bf0d4b 100644
--- a/test/unit/specs/services/theme_data/theme_data.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data.spec.js
@@ -1,4 +1,7 @@
-import { getLayersArray, topoSort } from 'src/services/theme_data/theme_data.service.js'
+import {
+  getLayersArray,
+  topoSort
+} from 'src/services/theme_data/theme_data.service.js'
 
 describe('Theme Data utility functions', () => {
   describe('getLayersArray', () => {
@@ -63,7 +66,7 @@ describe('Theme Data utility functions', () => {
       expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB'))
     })
 
-    it('order in object shouldn\'t matter', () => {
+    it("order in object shouldn't matter", () => {
       const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
       // This basically checks all ordering that matters
       expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A'))
@@ -82,7 +85,9 @@ describe('Theme Data utility functions', () => {
     })
 
     it('ignores cyclic dependencies', () => {
-      const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => [inheritance[node]])
+      const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => [
+        inheritance[node]
+      ])
       expect(out.indexOf('a')).to.be.below(out.indexOf('c'))
     })
   })
diff --git a/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js b/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js
index 8c7a28950..1ba8c6651 100644
--- a/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js
+++ b/test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js
@@ -3,19 +3,22 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p
 describe('generateProfileLink', () => {
   it('returns obj for local user', () => {
     expect(generateProfileLink(1, 'jack')).to.eql({
-      name: 'user-profile', params: { name: 'jack' }
+      name: 'user-profile',
+      params: { name: 'jack' }
     })
   })
 
   it('returns obj for external user', () => {
     expect(generateProfileLink(1, 'john@domain')).to.eql({
-      name: 'external-user-profile', params: { id: 1 }
+      name: 'external-user-profile',
+      params: { id: 1 }
     })
   })
 
   it('returns obj for restricted user', () => {
     expect(generateProfileLink(1, 'lain', ['lain'])).to.eql({
-      name: 'external-user-profile', params: { id: 1 }
+      name: 'external-user-profile',
+      params: { id: 1 }
     })
   })
 })