From 51a78e8b8a89065062d5b4c1b72d5bdd457d9663 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 25 Feb 2021 10:56:16 +0200
Subject: add a quick settings menu for timeline headers

---
 .../timeline/timeline_quick_settings.vue           | 105 +++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/components/timeline/timeline_quick_settings.vue

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

diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
new file mode 100644
index 00000000..51edff71
--- /dev/null
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -0,0 +1,105 @@
+<template>
+  <Popover
+    trigger="click"
+    class="TimelineQuickSettings"
+    :bound-to="{ x: 'container' }"
+  >
+    <div
+      slot="content"
+      class="timeline-settings-menu dropdown-menu"
+    >
+      <button
+        class="button-default dropdown-item"
+        @click="replyVisibilityAll = true"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+        />{{ $t('settings.reply_visibility_all') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="replyVisibilityFollowing = true"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+        />{{ $t('settings.reply_visibility_following_short') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="replyVisibilitySelf = true"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+        />{{ $t('settings.reply_visibility_self_short') }}
+      </button>
+      <div
+        role="separator"
+        class="dropdown-divider"
+      />
+      <button
+        class="button-default dropdown-item"
+        @click="hideMedia = !hideMedia"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-checked': hideMedia }"
+        />{{ $t('settings.hide_media_previews') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="hideMutedPosts = !hideMutedPosts"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-checked': hideMutedPosts }"
+        />{{ $t('settings.hide_all_muted_posts') }}
+      </button>
+      <button
+        class="button-default dropdown-item dropdown-item-icon"
+        @click="openTab('filtering')"
+      >
+        <FAIcon icon="filter" />{{ $t('settings.word_filter') }}
+      </button>
+      <button
+        class="button-default dropdown-item dropdown-item-icon"
+        @click="openTab('general')"
+      >
+        <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
+      </button>
+    </div>
+    <div slot="trigger">
+      <FAIcon icon="cog" />
+    </div>
+  </Popover>
+</template>
+
+<script src="./timeline_quick_settings.js"></script>
+
+<style lang="scss">
+
+.TimelineQuickSettings {
+  align-self: stretch;
+
+  > button {
+    font-size: 1.2em;
+    padding-left: 0.7em;
+    padding-right: 0.2em;
+    line-height: 100%;
+    height: 100%;
+  }
+
+  .dropdown-item {
+    margin: 0;
+  }
+
+  .timeline-settings-menu {
+    display: flex;
+    min-width: 12em;
+    flex-direction: column;
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2


From 93785634a72420338911d8a8a7fc7eef3eb478e4 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 25 Feb 2021 11:01:11 +0200
Subject: basic loggedin check for reply filtering

---
 src/components/timeline/timeline_quick_settings.js |  3 +
 .../timeline/timeline_quick_settings.vue           | 64 +++++++++++-----------
 2 files changed, 36 insertions(+), 31 deletions(-)

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

diff --git a/src/components/timeline/timeline_quick_settings.js b/src/components/timeline/timeline_quick_settings.js
index eb1eb8fb..ecac06e9 100644
--- a/src/components/timeline/timeline_quick_settings.js
+++ b/src/components/timeline/timeline_quick_settings.js
@@ -26,6 +26,9 @@ const TimelineQuickSettings = {
   },
   computed: {
     ...mapGetters(['mergedConfig']),
+    loggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
     replyVisibilitySelf: {
       get () { return this.mergedConfig.replyVisibility === 'self' },
       set () { this.setReplyVisibility('self') }
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 51edff71..67f6be53 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -8,37 +8,39 @@
       slot="content"
       class="timeline-settings-menu dropdown-menu"
     >
-      <button
-        class="button-default dropdown-item"
-        @click="replyVisibilityAll = true"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
-        />{{ $t('settings.reply_visibility_all') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="replyVisibilityFollowing = true"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
-        />{{ $t('settings.reply_visibility_following_short') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="replyVisibilitySelf = true"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
-        />{{ $t('settings.reply_visibility_self_short') }}
-      </button>
-      <div
-        role="separator"
-        class="dropdown-divider"
-      />
+      <div v-if="loggedIn">
+        <button
+          class="button-default dropdown-item"
+          @click="replyVisibilityAll = true"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+          />{{ $t('settings.reply_visibility_all') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="replyVisibilityFollowing = true"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+          />{{ $t('settings.reply_visibility_following_short') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="replyVisibilitySelf = true"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+          />{{ $t('settings.reply_visibility_self_short') }}
+        </button>
+        <div
+          role="separator"
+          class="dropdown-divider"
+        />
+      </div>
       <button
         class="button-default dropdown-item"
         @click="hideMedia = !hideMedia"
-- 
cgit v1.2.3-70-g09d2


From fc5483f7641f3aa6866fbbd9beaca0139083ee86 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 1 Mar 2021 10:14:17 +0200
Subject: change icons around

---
 src/components/timeline/timeline_quick_settings.js  | 3 ++-
 src/components/timeline/timeline_quick_settings.vue | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

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

diff --git a/src/components/timeline/timeline_quick_settings.js b/src/components/timeline/timeline_quick_settings.js
index 2c1a3df8..9ec1a007 100644
--- a/src/components/timeline/timeline_quick_settings.js
+++ b/src/components/timeline/timeline_quick_settings.js
@@ -2,10 +2,11 @@ import Popover from '../popover/popover.vue'
 import BooleanSetting from '../settings_modal/helpers/boolean_setting.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faFilter, faWrench } from '@fortawesome/free-solid-svg-icons'
+import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faFilter,
+  faFont,
   faWrench
 )
 
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 67f6be53..4ad2842b 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -63,7 +63,7 @@
         class="button-default dropdown-item dropdown-item-icon"
         @click="openTab('filtering')"
       >
-        <FAIcon icon="filter" />{{ $t('settings.word_filter') }}
+        <FAIcon icon="font" />{{ $t('settings.word_filter') }}
       </button>
       <button
         class="button-default dropdown-item dropdown-item-icon"
@@ -73,7 +73,7 @@
       </button>
     </div>
     <div slot="trigger">
-      <FAIcon icon="cog" />
+      <FAIcon icon="filter" />
     </div>
   </Popover>
 </template>
-- 
cgit v1.2.3-70-g09d2


From f6af4c43f656d1990da00bc773c15ebbbc57e71d Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 1 Mar 2021 16:21:35 +0200
Subject: add quick filters for notifications2

---
 .../notifications/notification_filters.vue         | 121 +++++++++++++++++++++
 src/components/notifications/notifications.js      |   8 +-
 src/components/notifications/notifications.vue     |   1 +
 src/components/timeline/timeline_quick_settings.js |   4 +-
 .../timeline/timeline_quick_settings.vue           |   8 +-
 src/modules/config.js                              |   2 +-
 6 files changed, 130 insertions(+), 14 deletions(-)
 create mode 100644 src/components/notifications/notification_filters.vue

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

diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
new file mode 100644
index 00000000..95b2513b
--- /dev/null
+++ b/src/components/notifications/notification_filters.vue
@@ -0,0 +1,121 @@
+<template>
+  <Popover
+    trigger="click"
+    class="NotificationFilters"
+    placement="bottom"
+    :bound-to="{ x: 'container' }"
+  >
+    <div
+      slot="content"
+      class="dropdown-menu"
+    >
+      <button
+        class="button-default dropdown-item"
+        @click="toggleNotificationFilter('likes')"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-checked': filters.likes }"
+        />{{ $t('settings.notification_visibility_likes') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="toggleNotificationFilter('repeats')"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-checked': filters.repeats }"
+        />{{ $t('settings.notification_visibility_repeats') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="toggleNotificationFilter('follows')"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-checked': filters.follows }"
+        />{{ $t('settings.notification_visibility_follows') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="toggleNotificationFilter('mentions')"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-checked': filters.mentions }"
+        />{{ $t('settings.notification_visibility_mentions') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="toggleNotificationFilter('emojiReactions')"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+        />{{ $t('settings.notification_visibility_emoji_reactions') }}
+      </button>
+      <button
+        class="button-default dropdown-item"
+        @click="toggleNotificationFilter('moves')"
+      >
+        <span
+          class="menu-checkbox"
+          :class="{ 'menu-checkbox-checked': filters.moves }"
+        />{{ $t('settings.notification_visibility_moves') }}
+      </button>
+    </div>
+    <div slot="trigger">
+      <FAIcon icon="filter" />
+    </div>
+  </Popover>
+</template>
+
+<script>
+import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFilter
+)
+
+export default {
+  components: { Popover },
+  computed: {
+    filters () {
+      return this.$store.getters.mergedConfig.notificationVisibility
+    }
+  },
+  methods: {
+    toggleNotificationFilter (type) {
+      this.$store.dispatch('setOption', {
+        name: 'notificationVisibility',
+        value: {
+          ...this.filters,
+          [type]: !this.filters[type]
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.NotificationFilters {
+  align-self: stretch;
+
+  > button {
+    font-size: 1.2em;
+    padding-left: 0.7em;
+    padding-right: 0.2em;
+    line-height: 100%;
+    height: 100%;
+  }
+
+  .dropdown-item {
+    margin: 0;
+  }
+}
+
+</style>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 49258563..a9bf2931 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,5 +1,6 @@
 import { mapGetters } from 'vuex'
 import Notification from '../notification/notification.vue'
+import NotificationFilters from './notification_filters.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
   notificationsFromStore,
@@ -17,6 +18,10 @@ library.add(
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 
 const Notifications = {
+  components: {
+    Notification,
+    NotificationFilters
+  },
   props: {
     // Disables display of panel header
     noHeading: Boolean,
@@ -70,9 +75,6 @@ const Notifications = {
     },
     ...mapGetters(['unreadChatCount'])
   },
-  components: {
-    Notification
-  },
   watch: {
     unseenCountTitle (count) {
       if (count > 0) {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 725d1ad4..12097b85 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -22,6 +22,7 @@
         >
           {{ $t('notifications.read') }}
         </button>
+        <NotificationFilters />
       </div>
       <div class="panel-body">
         <div
diff --git a/src/components/timeline/timeline_quick_settings.js b/src/components/timeline/timeline_quick_settings.js
index 9ec1a007..eae65a55 100644
--- a/src/components/timeline/timeline_quick_settings.js
+++ b/src/components/timeline/timeline_quick_settings.js
@@ -1,5 +1,4 @@
 import Popover from '../popover/popover.vue'
-import BooleanSetting from '../settings_modal/helpers/boolean_setting.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
@@ -12,8 +11,7 @@ library.add(
 
 const TimelineQuickSettings = {
   components: {
-    Popover,
-    BooleanSetting
+    Popover
   },
   methods: {
     setReplyVisibility (visibility) {
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 4ad2842b..94997c0d 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -6,7 +6,7 @@
   >
     <div
       slot="content"
-      class="timeline-settings-menu dropdown-menu"
+      class="dropdown-menu"
     >
       <div v-if="loggedIn">
         <button
@@ -96,12 +96,6 @@
   .dropdown-item {
     margin: 0;
   }
-
-  .timeline-settings-menu {
-    display: flex;
-    min-width: 12em;
-    flex-direction: column;
-  }
 }
 
 </style>
diff --git a/src/modules/config.js b/src/modules/config.js
index eca58c12..f98e6649 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -44,7 +44,7 @@ export const defaultState = {
     likes: true,
     repeats: true,
     moves: true,
-    emojiReactions: false,
+    emojiReactions: true,
     followRequest: true,
     chatMention: true
   },
-- 
cgit v1.2.3-70-g09d2


From 61dcdbf99293de8c8b813ccec2833b190d3f97b2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Apr 2021 22:42:34 +0300
Subject: migrate to v-slot

---
 src/components/account_actions/account_actions.vue |  25 ++---
 src/components/chat_list/chat_list.vue             |   5 +-
 src/components/chat_message/chat_message.vue       |  32 +++---
 .../domain_mute_card/domain_mute_card.vue          |   4 +-
 src/components/extra_buttons/extra_buttons.vue     |  24 ++---
 .../moderation_tools/moderation_tools.vue          |  25 ++---
 .../notifications/notification_filters.vue         |   8 +-
 src/components/popover/popover.js                  |   2 +-
 src/components/react_button/react_button.vue       |  28 +++---
 src/components/selectable_list/selectable_list.vue |   7 +-
 .../settings_modal/helpers/modified_indicator.vue  |  16 +--
 src/components/settings_modal/settings_modal.vue   |  28 +++---
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   |  73 ++++++--------
 src/components/status_popover/status_popover.vue   |   8 +-
 .../timeline/timeline_quick_settings.vue           | 109 +++++++++++----------
 src/components/timeline_menu/timeline_menu.vue     |  43 ++++----
 src/components/user_card/user_card.vue             |   6 +-
 .../user_list_popover/user_list_popover.vue        |  59 ++++++-----
 src/components/user_profile/user_profile.vue       |  10 +-
 .../user_reporting_modal/user_reporting_modal.vue  |   5 +-
 20 files changed, 238 insertions(+), 279 deletions(-)

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

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index ab5d1d29..1e31151c 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -6,10 +6,7 @@
       :bound-to="{ x: 'container' }"
       remove-padding
     >
-      <div
-        slot="content"
-        class="account-tools-popover"
-      >
+      <template v-slot:content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
@@ -59,16 +56,15 @@
             {{ $t('user_card.message') }}
           </button>
         </div>
-      </div>
-      <div
-        slot="trigger"
-        class="ellipsis-button"
-      >
-        <FAIcon
-          class="icon"
-          icon="ellipsis-v"
-        />
-      </div>
+      </template>
+      <template v-slot:trigger>
+        <button class="button-unstyled ellipsis-button">
+          <FAIcon
+            class="icon"
+            icon="ellipsis-v"
+          />
+        </button>
+      </template>
     </Popover>
   </div>
 </template>
@@ -83,7 +79,6 @@
   }
 
   .ellipsis-button {
-    cursor: pointer;
     width: 2.5em;
     margin: -0.5em 0;
     padding: 0.5em 0;
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index e23eec13..f98b7ed2 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -23,10 +23,7 @@
         class="timeline"
       >
         <List :items="sortedChatList">
-          <template
-            slot="item"
-            slot-scope="{item}"
-          >
+          <template v-slot:item="{item}">
             <ChatListItem
               :key="item.id"
               :compact="false"
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 0777f880..0f3fc97d 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -50,7 +50,7 @@
                 @show="menuOpened = true"
                 @close="menuOpened = false"
               >
-                <div slot="content">
+                <template v-slot:content>
                   <div class="dropdown-menu">
                     <button
                       class="button-default dropdown-item dropdown-item-icon"
@@ -59,26 +59,28 @@
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
                     </button>
                   </div>
-                </div>
-                <button
-                  slot="trigger"
-                  class="button-default menu-icon"
-                  :title="$t('chats.more')"
-                >
-                  <FAIcon icon="ellipsis-h" />
-                </button>
+                </template>
+                <template v-slot:trigger>
+                  <button
+                    class="button-default menu-icon"
+                    :title="$t('chats.more')"
+                  >
+                    <FAIcon icon="ellipsis-h" />
+                  </button>
+                </template>
               </Popover>
             </div>
             <StatusContent
               :status="messageForStatusContent"
               :full-content="true"
             >
-              <span
-                slot="footer"
-                class="created-at"
-              >
-                {{ createdAt }}
-              </span>
+              <template v-slot:footer>
+                <span
+                  class="created-at"
+                >
+                  {{ createdAt }}
+                </span>
+              </template>
             </StatusContent>
           </div>
         </div>
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
index 3b5aec14..836688aa 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 slot="progress">
+      <template v-slot:progress>
         {{ $t('domain_mute_card.unmute_progress') }}
       </template>
     </ProgressButton>
@@ -19,7 +19,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.mute') }}
-      <template slot="progress">
+      <template v-slot:progress>
         {{ $t('domain_mute_card.mute_progress') }}
       </template>
     </ProgressButton>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index c6cb9fbe..a3c3c767 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -7,10 +7,7 @@
     :bound-to="{ x: 'container' }"
     remove-padding
   >
-    <div
-      slot="content"
-      slot-scope="{close}"
-    >
+    <template v-slot:content="{close}">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -120,16 +117,15 @@
           /><span>{{ $t("user_card.report") }}</span>
         </button>
       </div>
-    </div>
-    <span
-      slot="trigger"
-      class="popover-trigger"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="ellipsis-h"
-      />
-    </span>
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled popover-trigger">
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="ellipsis-h"
+        />
+      </button>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index c4c6ee46..96476abe 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -8,7 +8,7 @@
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
-      <div slot="content">
+      <template v-slot:content>
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -121,26 +121,27 @@
             </button>
           </span>
         </div>
-      </div>
-      <button
-        slot="trigger"
-        class="btn button-default btn-block moderation-tools-button"
-        :class="{ toggled }"
-      >
-        {{ $t('user_card.admin_menu.moderation') }}
-        <FAIcon icon="chevron-down" />
-      </button>
+      </template>
+      <template v-slot:trigger>
+        <button
+          class="btn button-default btn-block moderation-tools-button"
+          :class="{ toggled }"
+        >
+          {{ $t('user_card.admin_menu.moderation') }}
+          <FAIcon icon="chevron-down" />
+        </button>
+      </template>
     </Popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"
         :on-cancel="deleteUserDialog.bind(this, false)"
       >
-        <template slot="header">
+        <template v-slot:header>
           {{ $t('user_card.admin_menu.delete_user') }}
         </template>
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template slot="footer">
+        <template v-slot:footer>
           <button
             class="btn button-default"
             @click="deleteUserDialog(false)"
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index e86a0fcc..ba0e90a0 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -5,9 +5,7 @@
     placement="bottom"
     :bound-to="{ x: 'container' }"
   >
-    <template
-      v-slot:content
-    >
+    <template v-slot:content>
       <div class="dropdown-menu">
         <button
           class="button-default dropdown-item"
@@ -66,7 +64,9 @@
       </div>
     </template>
     <template v-slot:trigger>
-      <FAIcon icon="filter" />
+      <button class="button-unstyled">
+        <FAIcon icon="filter" />
+      </button>
     </template>
   </Popover>
 </template>
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index bc6cd8e7..6ccf32f0 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -54,7 +54,7 @@ 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 slot="trigger".
+      // 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
       // SVGs don't have offsetWidth/Height, use fallback
       const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 4839024c..c69c315b 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -8,10 +8,7 @@
     remove-padding
     @show="focusInput"
   >
-    <div
-      slot="content"
-      slot-scope="{close}"
-    >
+    <template v-slot:content="{close}">
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
@@ -41,17 +38,18 @@
         </span>
         <div class="reaction-bottom-fader" />
       </div>
-    </div>
-    <span
-      slot="trigger"
-      class="popover-trigger"
-      :title="$t('tool_tip.add_reaction')"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        :icon="['far', 'smile-beam']"
-      />
-    </span>
+    </template>
+    <template v-slot:trigger>
+      <button
+        class="button-unstyled popover-trigger"
+        :title="$t('tool_tip.add_reaction')"
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          :icon="['far', 'smile-beam']"
+        />
+      </button>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index a9bb12a1..3f885881 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -24,10 +24,7 @@
       :items="items"
       :get-key="getKey"
     >
-      <template
-        slot="item"
-        slot-scope="{item}"
-      >
+      <template v-slot:item="{item}">
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@@ -44,7 +41,7 @@
           />
         </div>
       </template>
-      <template slot="empty">
+      <template v-slot:empty>
         <slot name="empty" />
       </template>
     </List>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 9f4e81fe..ad212db9 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -6,18 +6,18 @@
     <Popover
       trigger="hover"
     >
-      <span slot="trigger">
+      <template v-slot:trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
+          :aria-label="$t('settings.setting_changed')"
         />
-      </span>
-      <div
-        slot="content"
-        class="modified-tooltip"
-      >
-        {{ $t('settings.setting_changed') }}
-      </div>
+      </template>
+      <template v-slot:content>
+        <div class="modified-tooltip">
+          {{ $t('settings.setting_changed') }}
+        </div>
+      </template>
     </Popover>
   </span>
 </template>
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index c7da5433..a98cec27 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -62,20 +62,18 @@
           :bound-to="{ x: 'container' }"
           remove-padding
         >
-          <button
-            slot="trigger"
-            class="btn button-default"
-            :title="$t('general.close')"
-          >
-            <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
-            <FAIcon
-              icon="chevron-down"
-            />
-          </button>
-          <div
-            slot="content"
-            slot-scope="{close}"
-          >
+          <template v-slot:trigger>
+            <button
+              class="btn button-default"
+              :title="$t('general.close')"
+            >
+              <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
+              <FAIcon
+                icon="chevron-down"
+              />
+            </button>
+          </template>
+          <template v-slot:content ="{close}">
             <div class="dropdown-menu">
               <button
                 class="button-default dropdown-item dropdown-item-icon"
@@ -108,7 +106,7 @@
                 /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
               </button>
             </div>
-          </div>
+          </template>
         </Popover>
       </div>
     </div>
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 63d36bf9..32a21415 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -10,20 +10,18 @@
           :query="queryUserIds"
           :placeholder="$t('settings.search_user_to_block')"
         >
-          <BlockCard
-            slot-scope="row"
-            :user-id="row.item"
-          />
+          <template v-slot="row">
+            <BlockCard
+              :user-id="row.item"
+            />
+          </template>
         </Autosuggest>
       </div>
       <BlockList
         :refresh="true"
         :get-key="i => i"
       >
-        <template
-          slot="header"
-          slot-scope="{selected}"
-        >
+        <template v-slot:header="{selected}">
           <div class="bulk-actions">
             <ProgressButton
               v-if="selected.length > 0"
@@ -31,7 +29,7 @@
               :click="() => blockUsers(selected)"
             >
               {{ $t('user_card.block') }}
-              <template slot="progress">
+              <template v-slot:progress>
                 {{ $t('user_card.block_progress') }}
               </template>
             </ProgressButton>
@@ -41,19 +39,16 @@
               :click="() => unblockUsers(selected)"
             >
               {{ $t('user_card.unblock') }}
-              <template slot="progress">
+              <template v-slot:progress>
                 {{ $t('user_card.unblock_progress') }}
               </template>
             </ProgressButton>
           </div>
         </template>
-        <template
-          slot="item"
-          slot-scope="{item}"
-        >
+        <template v-slot:item="{item}">
           <BlockCard :user-id="item" />
         </template>
-        <template slot="empty">
+        <template v-slot:empty>
           {{ $t('settings.no_blocks') }}
         </template>
       </BlockList>
@@ -68,20 +63,18 @@
               :query="queryUserIds"
               :placeholder="$t('settings.search_user_to_mute')"
             >
-              <MuteCard
-                slot-scope="row"
-                :user-id="row.item"
-              />
+              <template v-slot="row">
+                <MuteCard
+                  :user-id="row.item"
+                />
+              </template>
             </Autosuggest>
           </div>
           <MuteList
             :refresh="true"
             :get-key="i => i"
           >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
+            <template v-slot:header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -89,7 +82,7 @@
                   :click="() => muteUsers(selected)"
                 >
                   {{ $t('user_card.mute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.mute_progress') }}
                   </template>
                 </ProgressButton>
@@ -99,19 +92,16 @@
                   :click="() => unmuteUsers(selected)"
                 >
                   {{ $t('user_card.unmute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <MuteCard :user-id="item" />
             </template>
-            <template slot="empty">
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </MuteList>
@@ -124,20 +114,18 @@
               :query="queryKnownDomains"
               :placeholder="$t('settings.type_domains_to_mute')"
             >
-              <DomainMuteCard
-                slot-scope="row"
-                :domain="row.item"
-              />
+              <template v-slot="row">
+                <DomainMuteCard
+                  :domain="row.item"
+                />
+              </template>
             </Autosuggest>
           </div>
           <DomainMuteList
             :refresh="true"
             :get-key="i => i"
           >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
+            <template v-slot:header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -145,19 +133,16 @@
                   :click="() => unmuteDomains(selected)"
                 >
                   {{ $t('domain_mute_card.unmute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('domain_mute_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <DomainMuteCard :domain="item" />
             </template>
-            <template slot="empty">
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </DomainMuteList>
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 8237ce00..fdca8c9c 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -5,12 +5,10 @@
     :bound-to="{ x: 'container' }"
     @show="enter"
   >
-    <template slot="trigger">
+    <template v-slot:trigger>
       <slot />
     </template>
-    <div
-      slot="content"
-    >
+    <template v-slot:content>
       <Status
         v-if="status"
         :is-preview="true"
@@ -33,7 +31,7 @@
           size="2x"
         />
       </div>
-    </div>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 94997c0d..98996ebd 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -4,77 +4,78 @@
     class="TimelineQuickSettings"
     :bound-to="{ x: 'container' }"
   >
-    <div
-      slot="content"
-      class="dropdown-menu"
-    >
-      <div v-if="loggedIn">
+    <template v-slot:content>
+      <div class="dropdown-menu">
+        <div v-if="loggedIn">
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilityAll = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+            />{{ $t('settings.reply_visibility_all') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilityFollowing = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+            />{{ $t('settings.reply_visibility_following_short') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilitySelf = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+            />{{ $t('settings.reply_visibility_self_short') }}
+          </button>
+          <div
+            role="separator"
+            class="dropdown-divider"
+          />
+        </div>
         <button
           class="button-default dropdown-item"
-          @click="replyVisibilityAll = true"
+          @click="hideMedia = !hideMedia"
         >
           <span
             class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
-          />{{ $t('settings.reply_visibility_all') }}
+            :class="{ 'menu-checkbox-checked': hideMedia }"
+          />{{ $t('settings.hide_media_previews') }}
         </button>
         <button
           class="button-default dropdown-item"
-          @click="replyVisibilityFollowing = true"
+          @click="hideMutedPosts = !hideMutedPosts"
         >
           <span
             class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
-          />{{ $t('settings.reply_visibility_following_short') }}
+            :class="{ 'menu-checkbox-checked': hideMutedPosts }"
+          />{{ $t('settings.hide_all_muted_posts') }}
         </button>
         <button
-          class="button-default dropdown-item"
-          @click="replyVisibilitySelf = true"
+          class="button-default dropdown-item dropdown-item-icon"
+          @click="openTab('filtering')"
         >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
-          />{{ $t('settings.reply_visibility_self_short') }}
+          <FAIcon icon="font" />{{ $t('settings.word_filter') }}
+        </button>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click="openTab('general')"
+        >
+          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
         </button>
-        <div
-          role="separator"
-          class="dropdown-divider"
-        />
       </div>
-      <button
-        class="button-default dropdown-item"
-        @click="hideMedia = !hideMedia"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': hideMedia }"
-        />{{ $t('settings.hide_media_previews') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="hideMutedPosts = !hideMutedPosts"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': hideMutedPosts }"
-        />{{ $t('settings.hide_all_muted_posts') }}
-      </button>
-      <button
-        class="button-default dropdown-item dropdown-item-icon"
-        @click="openTab('filtering')"
-      >
-        <FAIcon icon="font" />{{ $t('settings.word_filter') }}
-      </button>
-      <button
-        class="button-default dropdown-item dropdown-item-icon"
-        @click="openTab('general')"
-      >
-        <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled">
+        <FAIcon icon="filter" />
       </button>
-    </div>
-    <div slot="trigger">
-      <FAIcon icon="filter" />
-    </div>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 22dc3432..4f6681b8 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -9,28 +9,29 @@
     @show="openMenu"
     @close="() => isOpen = false"
   >
-    <div
-      slot="content"
-      class="timeline-menu-popover panel panel-default"
-    >
-      <TimelineMenuContent />
-    </div>
-    <div
-      slot="trigger"
-      class="title timeline-menu-title"
-    >
-      <span class="timeline-title">{{ timelineName() }}</span>
-      <span>
-        <FAIcon
-          size="sm"
-          icon="chevron-down"
+    <template v-slot:content>
+      <div
+        slot="content"
+        class="timeline-menu-popover popover-default"
+        >
+        <TimelineMenuContent />
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled title timeline-menu-title">
+        <span class="timeline-title">{{ timelineName() }}</span>
+        <span>
+          <FAIcon
+            size="sm"
+            icon="chevron-down"
+          />
+        </span>
+        <span
+          class="click-blocker"
+          @click="blockOpen"
         />
-      </span>
-      <span
-        class="click-blocker"
-        @click="blockOpen"
-      />
-    </div>
+      </button>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4b7ee7d5..78b0813f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -53,17 +53,17 @@
               >
                 {{ user.name }}
               </div>
-              <a
+              <button
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
                 target="_blank"
-                class="external-link-button"
+                class="button-unstyled external-link-button"
               >
                 <FAIcon
                   class="icon"
                   icon="external-link-alt"
                 />
-              </a>
+              </button>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
                 :user="user"
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index d0aa315e..f4b93c9a 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -4,40 +4,39 @@
     placement="top"
     :offset="{ y: 5 }"
   >
-    <template slot="trigger">
+    <template v-slot:trigger>
       <slot />
     </template>
-    <div
-      slot="content"
-      class="user-list-popover"
-    >
-      <div v-if="users.length">
-        <div
-          v-for="(user) in usersCapped"
-          :key="user.id"
-          class="user-list-row"
-        >
-          <UserAvatar
-            :user="user"
-            class="avatar-small"
-            :compact="true"
-          />
-          <div class="user-list-names">
-            <!-- eslint-disable vue/no-v-html -->
-            <span v-html="user.name_html" />
-            <!-- eslint-enable vue/no-v-html -->
-            <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
+    <template v-slot:content>
+      <div class="user-list-popover">
+        <template v-if="users.length">
+          <div
+            v-for="(user) in usersCapped"
+            :key="user.id"
+            class="user-list-row"
+          >
+            <UserAvatar
+              :user="user"
+              class="avatar-small"
+              :compact="true"
+            />
+            <div class="user-list-names">
+              <!-- eslint-disable vue/no-v-html -->
+              <span v-html="user.name_html" />
+              <!-- eslint-enable vue/no-v-html -->
+              <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
+            </div>
           </div>
-        </div>
-      </div>
-      <div v-else>
-        <FAIcon
-          icon="circle-notch"
-          spin
-          size="3x"
-        />
+        </template>
+        <template v-else>
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="3x"
+          />
+        </template>
       </div>
-    </div>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 745e795d..aef897ae 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -60,10 +60,7 @@
           :disabled="!user.friends_count"
         >
           <FriendList :user-id="userId">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <FollowCard :user="item" />
             </template>
           </FriendList>
@@ -75,10 +72,7 @@
           :disabled="!user.followers_count"
         >
           <FollowerList :user-id="userId">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <FollowCard
                 :user="item"
                 :no-follows-you="isUs"
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index a71c02c1..1f67a5cc 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -45,10 +45,7 @@
         </div>
         <div class="user-reporting-panel-right">
           <List :items="statuses">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <div class="status-fadein user-reporting-panel-sitem">
                 <Status
                   :in-conversation="false"
-- 
cgit v1.2.3-70-g09d2