From f4276f72416ab0eb8171b843d475d31f13533a44 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 1 Aug 2022 23:20:27 +0300
Subject: made quick settings into their own component, added quick view
 settings, added both to conversation view

---
 .../quick_view_settings/quick_view_settings.vue    | 96 ++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/components/quick_view_settings/quick_view_settings.vue

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

diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
new file mode 100644
index 00000000..78f315f3
--- /dev/null
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -0,0 +1,96 @@
+<template>
+  <Popover
+    trigger="click"
+    class="QuickViewSettings"
+    :bound-to="{ x: 'container' }"
+  >
+    <template #content>
+      <div class="dropdown-menu">
+        <div v-if="loggedIn">
+          <button
+            class="button-default dropdown-item"
+            @click="conversationDisplay = 'tree'"
+          >
+            <span
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+            /><FAIcon icon="folder-tree"/> {{ $t('settings.conversation_display_tree_quick') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            @click="conversationDisplay = 'linear'"
+          >
+            <span
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
+            /><FAIcon icon="bars"/> {{ $t('settings.conversation_display_linear_quick') }}
+          </button>
+          <div
+            role="separator"
+            class="dropdown-divider"
+          />
+        </div>
+        <button
+          class="button-default dropdown-item"
+          @click="showUserAvatars = !showUserAvatars"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': showUserAvatars }"
+          />{{ $t('settings.mention_link_show_avatar_quick') }}
+        </button>
+        <button
+          v-if="!conversation"
+          class="button-default dropdown-item"
+          @click="autoUpdate = !autoUpdate"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': autoUpdate }"
+          />{{ $t('settings.auto_update') }}
+        </button>
+        <button
+          v-if="!conversation"
+          class="button-default dropdown-item"
+          @click="collapseWithSubjects = !collapseWithSubjects"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
+          />{{ $t('settings.collapse_subject') }}
+        </button>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click="openTab('general')"
+        >
+          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
+        </button>
+      </div>
+    </template>
+    <template #trigger>
+      <button class="button-unstyled">
+        <FAIcon icon="table-list" />
+      </button>
+    </template>
+  </Popover>
+</template>
+
+<script src="./quick_view_settings.js"></script>
+
+<style lang="scss">
+
+.QuickViewSettings {
+
+  > button {
+    line-height: 100%;
+    height: 100%;
+    width: var(--__panel-heading-height-inner);
+    text-align: center;
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2


From 4903069481508221ed047761be20a558799e712d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 2 Aug 2022 23:54:06 +0300
Subject: change icons

---
 src/components/quick_view_settings/quick_view_settings.js  | 6 +++---
 src/components/quick_view_settings/quick_view_settings.vue | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

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

diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
index bb39eb13..ad9e166c 100644
--- a/src/components/quick_view_settings/quick_view_settings.js
+++ b/src/components/quick_view_settings/quick_view_settings.js
@@ -1,12 +1,12 @@
 import Popover from '../popover/popover.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faTableList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
+import { faList, faFolderTree, faBarsStaggered, faWrench } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTableList,
+  faList,
   faFolderTree,
-  faBars,
+  faBarsStaggered,
   faWrench
 )
 
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 78f315f3..31ff3c6b 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -23,7 +23,7 @@
             <span
               class="menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
-            /><FAIcon icon="bars"/> {{ $t('settings.conversation_display_linear_quick') }}
+            /><FAIcon icon="list"/> {{ $t('settings.conversation_display_linear_quick') }}
           </button>
           <div
             role="separator"
@@ -69,7 +69,7 @@
     </template>
     <template #trigger>
       <button class="button-unstyled">
-        <FAIcon icon="table-list" />
+        <FAIcon icon="bars-staggered" />
       </button>
     </template>
   </Popover>
-- 
cgit v1.2.3-70-g09d2


From 44d6d36ed19f58800800cd9c394464658b688889 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Aug 2022 23:32:06 +0300
Subject: fix bugs

---
 .../quick_view_settings/quick_view_settings.js     |  7 ++--
 .../quick_view_settings/quick_view_settings.vue    | 48 +++++++++++-----------
 2 files changed, 27 insertions(+), 28 deletions(-)

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

diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
index d1135f01..2798f37a 100644
--- a/src/components/quick_view_settings/quick_view_settings.js
+++ b/src/components/quick_view_settings/quick_view_settings.js
@@ -1,12 +1,12 @@
 import Popover from '../popover/popover.vue'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faList, faFolderTree, faBarsStaggered, faWrench } from '@fortawesome/free-solid-svg-icons'
+import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faList,
   faFolderTree,
-  faBarsStaggered,
+  faBars,
   faWrench
 )
 
@@ -51,7 +51,8 @@ const QuickViewSettings = {
     showUserAvatars: {
       get () { return this.mergedConfig.mentionLinkShowAvatar },
       set () {
-        const value = !this.mentionLinkShowAvatar
+        const value = !this.showUserAvatars
+        console.log(value)
         this.$store.dispatch('setOption', { name: 'mentionLinkShowAvatar', value })
       }
     },
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 31ff3c6b..4dc8a060 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -6,30 +6,28 @@
   >
     <template #content>
       <div class="dropdown-menu">
-        <div v-if="loggedIn">
-          <button
-            class="button-default dropdown-item"
-            @click="conversationDisplay = 'tree'"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
-            /><FAIcon icon="folder-tree"/> {{ $t('settings.conversation_display_tree_quick') }}
-          </button>
-          <button
-            class="button-default dropdown-item"
-            @click="conversationDisplay = 'linear'"
-          >
-            <span
-              class="menu-checkbox -radio"
-              :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
-            /><FAIcon icon="list"/> {{ $t('settings.conversation_display_linear_quick') }}
-          </button>
-          <div
-            role="separator"
-            class="dropdown-divider"
-          />
-        </div>
+        <button
+          class="button-default dropdown-item"
+          @click="conversationDisplay = 'tree'"
+        >
+          <span
+            class="menu-checkbox -radio"
+            :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
+          /><FAIcon icon="folder-tree"/> {{ $t('settings.conversation_display_tree_quick') }}
+        </button>
+        <button
+          class="button-default dropdown-item"
+          @click="conversationDisplay = 'linear'"
+        >
+          <span
+            class="menu-checkbox -radio"
+            :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
+          /><FAIcon icon="list"/> {{ $t('settings.conversation_display_linear_quick') }}
+        </button>
+        <div
+          role="separator"
+          class="dropdown-divider"
+        />
         <button
           class="button-default dropdown-item"
           @click="showUserAvatars = !showUserAvatars"
@@ -69,7 +67,7 @@
     </template>
     <template #trigger>
       <button class="button-unstyled">
-        <FAIcon icon="bars-staggered" />
+        <FAIcon icon="bars" />
       </button>
     </template>
   </Popover>
-- 
cgit v1.2.3-70-g09d2


From 09f3783647ff9e0c194e0e0c71b78e98109635b6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Aug 2022 23:44:56 +0300
Subject: lint

---
 src/components/conversation/conversation.vue               | 4 ++--
 src/components/quick_view_settings/quick_view_settings.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

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

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index c7dacdf9..61832566 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -20,11 +20,11 @@
       <QuickFilterSettings
         v-if="!collapsable"
         :conversation="true"
-        />
+      />
       <QuickViewSettings
         v-if="!collapsable"
         :conversation="true"
-        />
+      />
     </div>
     <div class="conversation-body panel-body">
       <div
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 4dc8a060..99b14a66 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -13,7 +13,7 @@
           <span
             class="menu-checkbox -radio"
             :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
-          /><FAIcon icon="folder-tree"/> {{ $t('settings.conversation_display_tree_quick') }}
+          /><FAIcon icon="folder-tree" /> {{ $t('settings.conversation_display_tree_quick') }}
         </button>
         <button
           class="button-default dropdown-item"
@@ -22,7 +22,7 @@
           <span
             class="menu-checkbox -radio"
             :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
-          /><FAIcon icon="list"/> {{ $t('settings.conversation_display_linear_quick') }}
+          /><FAIcon icon="list" /> {{ $t('settings.conversation_display_linear_quick') }}
         </button>
         <div
           role="separator"
-- 
cgit v1.2.3-70-g09d2


From c041d7aa9b148e829a7539c2c2bd47814f4b10ce Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:16:05 +0300
Subject: refactor css for timeline buttons, make it a bit easier to tap them

---
 .../quick_filter_settings.vue                      | 15 -----------
 .../quick_view_settings/quick_view_settings.vue    | 15 -----------
 src/components/timeline/timeline.scss              | 30 ++++++++++++++++++++++
 src/components/timeline/timeline.vue               | 30 ++++++++++++----------
 4 files changed, 47 insertions(+), 43 deletions(-)

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

diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 982238e7..554c6bde 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -89,19 +89,4 @@
 <script src="./quick_filter_settings.js"></script>
 
 <style lang="scss">
-
-.QuickFilterSettings {
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
 </style>
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 99b14a66..5fdfd608 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -76,19 +76,4 @@
 <script src="./quick_view_settings.js"></script>
 
 <style lang="scss">
-
-.QuickViewSettings {
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
 </style>
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 900bdad3..c38ecfea 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,6 +13,36 @@
     background-color: var(--cGreen);
   }
 
+  .timeline-header-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding));
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  .timeline-header-icon {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
+
   .loadmore-button {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index cffd4b68..c8aeaf1e 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -19,21 +19,25 @@
           />
         </FALayers>
       </button>
-      <template v-if="mobileLayout">
-        <button
+      <template v-if="mobileLayout && !embedded">
+        <div
+          class="timeline-header-button"
           v-if="showLoadButton"
-          class="button-unstyled loadmore-button"
-          @click.prevent="showNewStatuses"
         >
-          <FAIcon
-            fixed-width
-            icon="circle-plus"
-          />
-          <div class="alert-dot" />
-        </button>
+          <button
+            class="button-unstyled loadmore-button"
+            @click.prevent="showNewStatuses"
+          >
+            <FAIcon
+              fixed-width
+              icon="circle-plus"
+            />
+            <div class="alert-dot" />
+          </button>
+        </div>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint veryfaint"
+          class="loadmore-text faint veryfaint timeline-header-icon"
           @click.prevent
         >
           <FAIcon
@@ -58,8 +62,8 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" />
-      <QuickViewSettings v-if="!embedded" />
+      <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
+      <QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
     </div>
     <div :class="classes.body">
       <div
-- 
cgit v1.2.3-70-g09d2


From 7519c7f5d5833a2ab9df7802f0b6234447cea672 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:34:41 +0300
Subject: cleanup

---
 src/components/quick_filter_settings/quick_filter_settings.vue | 3 ---
 src/components/quick_view_settings/quick_view_settings.vue     | 3 ---
 2 files changed, 6 deletions(-)

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

diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 554c6bde..54ea037e 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -87,6 +87,3 @@
 </template>
 
 <script src="./quick_filter_settings.js"></script>
-
-<style lang="scss">
-</style>
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 5fdfd608..b0413cac 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -74,6 +74,3 @@
 </template>
 
 <script src="./quick_view_settings.js"></script>
-
-<style lang="scss">
-</style>
-- 
cgit v1.2.3-70-g09d2


From f715de43f2bae1593128f34f7362c1963a54e3a1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 7 Nov 2022 13:22:40 -0500
Subject: Add labels for timeline header

---
 src/components/popover/popover.js                              | 7 ++++++-
 src/components/popover/popover.vue                             | 1 +
 src/components/quick_filter_settings/quick_filter_settings.vue | 5 ++---
 src/components/quick_view_settings/quick_view_settings.vue     | 5 ++---
 src/components/timeline/timeline.vue                           | 1 +
 src/i18n/en.json                                               | 4 +++-
 6 files changed, 15 insertions(+), 8 deletions(-)

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

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index dd332c35..72b7c511 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -43,7 +43,12 @@ const Popover = {
     overlayCentersSelector: String,
 
     // Lets hover popover stay when clicking inside of it
-    stayOnClick: Boolean
+    stayOnClick: Boolean,
+
+    triggerAttrs: {
+      type: Object,
+      default: {}
+    }
   },
   inject: ['popoversZLayer'], // override popover z layer
   data () {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 623af8d2..9506728e 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -7,6 +7,7 @@
       ref="trigger"
       class="button-unstyled popover-trigger-button"
       type="button"
+      v-bind="triggerAttrs"
       @click="onClick"
     >
       <slot name="trigger" />
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 54ea037e..87fcd716 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -3,6 +3,7 @@
     trigger="click"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
+    :triggerAttrs="{ title: $t('timeline.quick_filter_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
@@ -79,9 +80,7 @@
       </div>
     </template>
     <template #trigger>
-      <button class="button-unstyled">
-        <FAIcon icon="filter" />
-      </button>
+      <FAIcon icon="filter" />
     </template>
   </Popover>
 </template>
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index b0413cac..d7c9bf3b 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -3,6 +3,7 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
+    :triggerAttrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
@@ -66,9 +67,7 @@
       </div>
     </template>
     <template #trigger>
-      <button class="button-unstyled">
-        <FAIcon icon="bars" />
-      </button>
+      <FAIcon icon="bars" />
     </template>
   </Popover>
 </template>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8a036fd0..15cf043e 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -47,6 +47,7 @@
           v-else-if="!embedded"
           class="loadmore-text faint veryfaint rightside-icon"
           :title="$t('timeline.up_to_date')"
+          :aria-disabled="true"
           @click.prevent
         >
           <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 246e22cf..f16f6380 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -807,7 +807,9 @@
     "no_more_statuses": "No more statuses",
     "no_statuses": "No statuses",
     "socket_reconnected": "Realtime connection established",
-    "socket_broke": "Realtime connection lost: CloseEvent code {0}"
+    "socket_broke": "Realtime connection lost: CloseEvent code {0}",
+    "quick_view_settings": "Quick view settings",
+    "quick_filter_settings": "Quick filter settings"
   },
   "status": {
     "favorites": "Favorites",
-- 
cgit v1.2.3-70-g09d2


From 3c0e7882b10989424c3ec98413b555373efa1719 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 21 Nov 2022 22:17:33 +0200
Subject: lint

---
 src/components/emoji_input/emoji_input.vue                 | 13 ++++++++++---
 src/components/emoji_picker/emoji_picker.vue               |  4 ++--
 src/components/mobile_nav/mobile_nav.vue                   |  6 +++---
 src/components/notifications/notifications.vue             |  2 +-
 src/components/popover/popover.vue                         |  5 ++++-
 .../quick_filter_settings/quick_filter_settings.vue        |  2 +-
 src/components/quick_view_settings/quick_view_settings.vue |  2 +-
 src/components/search/search.js                            |  4 ++--
 src/components/timeline/timeline.vue                       | 14 ++++++++++----
 9 files changed, 34 insertions(+), 18 deletions(-)

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

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 63bf856e..c9bbc18f 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -6,9 +6,16 @@
   >
     <slot />
     <!-- TODO: make the 'x' disappear if at the end maybe? -->
-    <div class="hidden-overlay" :style="overlayStyle" ref="hiddenOverlay">
+    <div
+      ref="hiddenOverlay"
+      class="hidden-overlay"
+      :style="overlayStyle"
+    >
       <span>{{ preText }}</span>
-      <span class="caret" ref="hiddenOverlayCaret">x</span>
+      <span
+        ref="hiddenOverlayCaret"
+        class="caret"
+      >x</span>
       <span>{{ postText }}</span>
     </div>
     <template v-if="enableEmojiPicker">
@@ -33,9 +40,9 @@
       />
     </template>
     <Popover
+      ref="suggestorPopover"
       class="autocomplete-panel"
       placement="bottom"
-      ref="suggestorPopover"
     >
       <template #content>
         <div
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a2c99c16..ff56d637 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,8 +1,8 @@
 <template>
   <Popover
+    ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    ref="popover"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
@@ -66,12 +66,12 @@
         >
           <div class="emoji-search">
             <input
+              ref="search"
               v-model="keyword"
               type="text"
               class="form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
-              ref="search"
             >
           </div>
           <div
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6e732d1f..d642008b 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -11,7 +11,7 @@
         <button
           class="button-unstyled mobile-nav-button"
           :title="$t('nav.mobile_sidebar')"
-          :aria-expanaded="this.$refs.sideDrawer && !this.$refs.sideDrawer.closed"
+          :aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
           @click.stop.prevent="toggleMobileSidebar()"
         >
           <FAIcon
@@ -51,7 +51,7 @@
     >
       <div class="mobile-notifications-header">
         <span class="title">{{ $t('notifications.notifications') }}</span>
-        <span class="spacer"/>
+        <span class="spacer" />
         <button
           v-if="notificationsAtTop"
           class="button-unstyled mobile-nav-button"
@@ -79,8 +79,8 @@
       </div>
       <div
         id="mobile-notifications"
-        class="mobile-notifications"
         ref="mobileNotifications"
+        class="mobile-notifications"
         @scroll="onScroll"
       />
     </aside>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 3d5878d4..633efca6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -22,8 +22,8 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="rightside-button"
             v-if="showScrollTop"
+            class="rightside-button"
           >
             <button
               class="button-unstyled scroll-to-top-button"
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index c2cf2327..2869d736 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -12,7 +12,10 @@
     >
       <slot name="trigger" />
     </button>
-    <teleport :disabled="!teleport" to="#popovers">
+    <teleport
+      :disabled="!teleport"
+      to="#popovers"
+    >
       <transition name="fade">
         <div
           v-if="!hidden"
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 87fcd716..f2aa61ee 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -3,7 +3,7 @@
     trigger="click"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
-    :triggerAttrs="{ title: $t('timeline.quick_filter_settings') }"
+    :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index d7c9bf3b..4bd81c5b 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -3,7 +3,7 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
-    :triggerAttrs="{ title: $t('timeline.quick_view_settings') }"
+    :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 8d4212cd..877d6f30 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -83,11 +83,11 @@ const Search = {
         this.lastStatusFetchCount = 0
       }
 
-      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, 'type': searchType })
+      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, type: searchType })
         .then(data => {
           this.loading = false
 
-          let oldLength = this.statuses.length
+          const oldLength = this.statuses.length
 
           // Always append to old results. If new results are empty, this doesn't change anything
           this.userIds = this.userIds.concat(map(data.accounts, 'id'))
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 877a0cc0..2279f21a 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -6,8 +6,8 @@
         :timeline-name="timelineName"
       />
       <div
-        class="rightside-button"
         v-if="showScrollTop && !embedded"
+        class="rightside-button"
       >
         <button
           class="button-unstyled scroll-to-top-button"
@@ -26,8 +26,8 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="rightside-button"
           v-if="showLoadButton"
+          class="rightside-button"
         >
           <button
             class="button-unstyled loadmore-button"
@@ -72,8 +72,14 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
-      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
+      <QuickFilterSettings
+        v-if="!embedded"
+        class="rightside-button"
+      />
+      <QuickViewSettings
+        v-if="!embedded"
+        class="rightside-button"
+      />
     </div>
     <div :class="classes.body">
       <div
-- 
cgit v1.2.3-70-g09d2