From efc6b6b703971acd9cff7bb452a1fad40b801f87 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Aug 2022 20:49:20 +0300
Subject: [PATCH 01/23] add "scroll to top" button to timelines and
 notifications

---
 src/components/notifications/notifications.js | 22 +++++++++++++++++--
 .../notifications/notifications.vue           | 12 +++++++++-
 src/components/timeline/timeline.js           |  5 +++++
 src/components/timeline/timeline.vue          |  8 +++++++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 0851f407..7a3d6759 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -10,10 +10,11 @@ import {
 } from '../../services/notification_utils/notification_utils.js'
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faCircleUp } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faCircleNotch
+  faCircleNotch,
+  faCircleUp
 )
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
@@ -34,6 +35,7 @@ const Notifications = {
   },
   data () {
     return {
+      showScrollTop: false,
       bottomedOut: false,
       // How many seen notifications to display in the list. The more there are,
       // the heavier the page becomes. This count is increased when loading
@@ -90,8 +92,16 @@ const Notifications = {
     notificationsToDisplay () {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
+    noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
     ...mapGetters(['unreadChatCount'])
   },
+  mounted () {
+    this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
+    this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
+  },
+  unmounted () {
+    this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
+  },
   watch: {
     unseenCountTitle (count) {
       if (count > 0) {
@@ -104,6 +114,14 @@ const Notifications = {
     }
   },
   methods: {
+    scrollToTop () {
+      const scrollable = this.scrollerRef
+      scrollable.scrollTo({ top: this.$refs.root.offsetTop })
+      // this.$refs.root.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    },
+    updateScrollPosition () {
+      this.showScrollTop = this.$refs.root.offsetTop < this.scrollerRef.scrollTop
+    },
     markAsSeen () {
       this.$store.dispatch('markNotificationsAsSeen')
       this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index e778e27b..16b5e8f6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -6,6 +6,7 @@
     <div
       :class="{ minimal: minimalMode }"
       class="Notifications"
+      ref="root"
     >
       <div :class="mainClass">
         <div
@@ -19,12 +20,21 @@
               class="badge badge-notification unseen-count"
             >{{ unseenCount }}</span>
           </div>
+          <button
+            v-if="showScrollTop"
+            class="button-unstyled scroll-to-top-button"
+            type="button"
+            @click="scrollToTop"
+          >
+            <FAIcon icon="circle-up" />
+          </button>
           <button
             v-if="unseenCount"
             class="button-default read-button"
+            type="button"
             @click.prevent="markAsSeen"
           >
-            {{ $t('notifications.read') }}
+        <FAIcon icon="filter" />
           </button>
           <NotificationFilters />
         </div>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 8f6cae66..6fca869f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -29,6 +29,7 @@ const Timeline = {
   ],
   data () {
     return {
+      showScrollTop: false,
       paused: false,
       unfocused: false,
       bottomedOut: false,
@@ -123,6 +124,9 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
+    scrollToTop () {
+      window.scrollTo({ top: this.$el.offsetTop })
+    },
     stopBlockingClicks: debounce(function () {
       this.blockingClicks = false
     }, 1000),
@@ -222,6 +226,7 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
+      this.showScrollTop = this.$el.offsetTop < window.scrollY
       this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 627cafbb..a6bfeed1 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -2,6 +2,14 @@
   <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
+      <button
+        v-if="showScrollTop"
+        class="button-unstyled scroll-to-top-button"
+        type="button"
+        @click="scrollToTop"
+      >
+        <FAIcon icon="circle-up" />
+      </button>
       <button
         v-if="showLoadButton"
         class="button-default loadmore-button"

From e9ad922eeb3419185e30eaf99f11eadd0a7dee44 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Aug 2022 21:34:56 +0300
Subject: [PATCH 02/23] oops

---
 src/components/notifications/notifications.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 16b5e8f6..d57166eb 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -34,7 +34,7 @@
             type="button"
             @click.prevent="markAsSeen"
           >
-        <FAIcon icon="filter" />
+            {{ $t('notifications.read') }}
           </button>
           <NotificationFilters />
         </div>

From 986c4537021842e9b21c89c0ffb84033169cafe6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 22:31:48 +0300
Subject: [PATCH 03/23] use a bit more compact layout on mobile

---
 src/components/notifications/notifications.js |  5 +-
 .../notifications/notifications.vue           |  8 ++-
 src/components/timeline/timeline.js           | 14 ++++-
 src/components/timeline/timeline.scss         | 16 +++++
 src/components/timeline/timeline.vue          | 61 ++++++++++++++-----
 5 files changed, 83 insertions(+), 21 deletions(-)

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 7a3d6759..058d2669 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -10,11 +10,12 @@ import {
 } from '../../services/notification_utils/notification_utils.js'
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch, faCircleUp } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faCircleNotch,
-  faCircleUp
+  faArrowUp,
+  faMinus
 )
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d57166eb..7577164d 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -26,7 +26,13 @@
             type="button"
             @click="scrollToTop"
           >
-            <FAIcon icon="circle-up" />
+          <FALayers class="fa-scale-110 fa-old-padding-layer">
+            <FAIcon icon="arrow-up" />
+            <FAIcon
+              icon="minus"
+              transform="up-7"
+            />
+          </FALayers>
           </button>
           <button
             v-if="unseenCount"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 6fca869f..4eb63f84 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,4 +1,5 @@
 import Status from '../status/status.vue'
+import { mapState } from 'vuex'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
@@ -6,11 +7,15 @@ import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faCircleNotch,
-  faCog
+  faCog,
+  faMinus,
+  faArrowUp,
+  faCirclePlus,
+  faCheck
 )
 
 const Timeline = {
@@ -88,7 +93,10 @@ const Timeline = {
     },
     virtualScrollingEnabled () {
       return this.$store.getters.mergedConfig.virtualScrolling
-    }
+    },
+    ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile',
+    })
   },
   created () {
     const store = this.$store
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9e009fd3..9d442a95 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,10 +1,26 @@
 @import '../../_variables.scss';
 
 .Timeline {
+  .alert-dot {
+    border-radius: 100%;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
+    background-color: var(--cBlue);
+  }
+
   .loadmore-text {
     opacity: 1;
   }
 
+  .loadmore-button {
+    position: relative
+  }
+
   &.-blocked {
     cursor: progress;
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index a6bfeed1..f9f5bf92 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -8,22 +8,53 @@
         type="button"
         @click="scrollToTop"
       >
-        <FAIcon icon="circle-up" />
+        <FALayers class="fa-scale-110 fa-old-padding-layer">
+          <FAIcon icon="arrow-up" />
+          <FAIcon
+            icon="minus"
+            transform="up-7"
+          />
+        </FALayers>
       </button>
-      <button
-        v-if="showLoadButton"
-        class="button-default loadmore-button"
-        @click.prevent="showNewStatuses"
-      >
-        {{ loadButtonString }}
-      </button>
-      <div
-        v-else-if="!embedded"
-        class="loadmore-text faint"
-        @click.prevent
-      >
-        {{ $t('timeline.up_to_date') }}
-      </div>
+      <template v-if="mobileLayout">
+        <button
+          v-if="showLoadButton"
+          class="button-unstyled loadmore-button"
+          @click.prevent="showNewStatuses"
+        >
+          <FAIcon
+            fixed-width
+            icon="circle-plus"
+          />
+          <div class="alert-dot" />
+        </button>
+        <div
+          v-else-if="!embedded"
+          class="loadmore-text faint"
+          @click.prevent
+        >
+          <FAIcon
+            fixed-width
+            icon="check"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <button
+          v-if="showLoadButton"
+          class="button-default loadmore-button"
+          @click.prevent="showNewStatuses"
+        >
+          {{ loadButtonString }}
+        </button>
+        <div
+          v-else-if="!embedded"
+          class="loadmore-text faint"
+          @click.prevent
+        >
+          {{ $t('timeline.up_to_date') }}
+        </div>
+      </template>
       <QuickFilterSettings v-if="!embedded" />
       <QuickViewSettings v-if="!embedded" />
     </div>

From 09a4d963d4dd336c0d46f5abed0d9a47bbd0de6e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 22:37:07 +0300
Subject: [PATCH 04/23] fix notifications

---
 src/components/notifications/notifications.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 058d2669..2682912a 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -98,9 +98,13 @@ const Notifications = {
   },
   mounted () {
     this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
+    if (!this.scrollerRef) {
+      this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
+    }
     this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
   },
   unmounted () {
+    if (!this.scrollerRef) return
     this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
   },
   watch: {
@@ -112,6 +116,16 @@ const Notifications = {
         FaviconService.clearFaviconBadge()
         this.$store.dispatch('setPageTitle', '')
       }
+    },
+    teleportTarget () {
+      // handle scroller change
+      this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
+      this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
+      if (!this.scrollerRef) {
+        this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
+      }
+      this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
+      this.updateScrollPosition()
     }
   },
   methods: {

From f31bec7ef8bbe1659870d3f771f6b6bb1e689585 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 22:42:58 +0300
Subject: [PATCH 05/23] only mark as read if closed intentionally

---
 src/components/mobile_nav/mobile_nav.js  | 8 +++++---
 src/components/mobile_nav/mobile_nav.vue | 8 ++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 877d52a9..3b41d2ce 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -28,7 +28,7 @@ const MobileNav = {
   created () {
     this.notificationsCloseGesture = GestureService.swipeGesture(
       GestureService.DIRECTION_RIGHT,
-      this.closeMobileNotifications,
+      () => this.closeMobileNotifications(true),
       50
     )
   },
@@ -56,12 +56,14 @@ const MobileNav = {
     openMobileNotifications () {
       this.notificationsOpen = true
     },
-    closeMobileNotifications () {
+    closeMobileNotifications (markRead) {
       if (this.notificationsOpen) {
         // make sure to mark notifs seen only when the notifs were open and not
         // from close-calls.
         this.notificationsOpen = false
-        this.markNotificationsAsSeen()
+        if (markRead) {
+          this.markNotificationsAsSeen()
+        }
       }
     },
     notificationsTouchStart (e) {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 949cf17e..e3459681 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -56,15 +56,15 @@
     >
       <div class="mobile-notifications-header">
         <span class="title">{{ $t('notifications.notifications') }}</span>
-        <a
-          class="mobile-nav-button"
-          @click.stop.prevent="closeMobileNotifications()"
+        <button
+          class="button-unstyled mobile-nav-button"
+          @click.stop.prevent="closeMobileNotifications(true)"
         >
           <FAIcon
             class="fa-scale-110 fa-old-padding"
             icon="times"
           />
-        </a>
+        </button>
       </div>
       <div
         id="mobile-notifications"

From af734afe3694ff3c77d4457b93b02309c4f55d6d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 22:46:41 +0300
Subject: [PATCH 06/23] lint

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

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 7577164d..08d65439 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,9 +4,9 @@
     :to="teleportTarget"
   >
     <div
+      ref="root"
       :class="{ minimal: minimalMode }"
       class="Notifications"
-      ref="root"
     >
       <div :class="mainClass">
         <div
@@ -26,13 +26,13 @@
             type="button"
             @click="scrollToTop"
           >
-          <FALayers class="fa-scale-110 fa-old-padding-layer">
-            <FAIcon icon="arrow-up" />
-            <FAIcon
-              icon="minus"
-              transform="up-7"
-            />
-          </FALayers>
+            <FALayers class="fa-scale-110 fa-old-padding-layer">
+              <FAIcon icon="arrow-up" />
+              <FAIcon
+                icon="minus"
+                transform="up-7"
+              />
+            </FALayers>
           </button>
           <button
             v-if="unseenCount"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 4eb63f84..f4efc5e8 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -95,7 +95,7 @@ const Timeline = {
       return this.$store.getters.mergedConfig.virtualScrolling
     },
     ...mapState({
-      mobileLayout: state => state.interface.layoutType === 'mobile',
+      mobileLayout: state => state.interface.layoutType === 'mobile'
     })
   },
   created () {

From 3ffe62acdccb8b556fcaec9bfa772ffb8196ad84 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Aug 2022 23:55:35 +0300
Subject: [PATCH 07/23] make "up to date" icon even more faint to distinguish
 it from actual interactive elements

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

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9d442a95..ede60a5d 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,7 +10,7 @@
     top: calc(50% - 4px);
     margin-left: 6px;
     margin-top: -6px;
-    background-color: var(--cBlue);
+    background-color: var(--cGreen);
   }
 
   .loadmore-text {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index a196d65e..cffd4b68 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -33,7 +33,7 @@
         </button>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint"
+          class="loadmore-text faint veryfaint"
           @click.prevent
         >
           <FAIcon

From 2ab51a4ccbf5a247d7eb110fe8a07130bd9afe3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Aug 2022 01:19:18 +0300
Subject: [PATCH 08/23] fix veryfaint not applying

---
 src/components/timeline/timeline.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index ede60a5d..900bdad3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,10 +13,6 @@
     background-color: var(--cGreen);
   }
 
-  .loadmore-text {
-    opacity: 1;
-  }
-
   .loadmore-button {
     position: relative
   }

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: [PATCH 09/23] refactor css for timeline buttons, make it a bit easier
 to tap them

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

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

From 8c4de692f462552a7416540392df0f2a260fe817 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:17:44 +0300
Subject: [PATCH 10/23] apply same for scrolltop button

---
 src/components/timeline/timeline.vue | 30 +++++++++++++++-------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c8aeaf1e..fe5d4822 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -5,20 +5,22 @@
         v-if="!embedded"
         :timeline-name="timelineName"
       />
-      <button
-        v-if="showScrollTop"
-        class="button-unstyled scroll-to-top-button"
-        type="button"
-        @click="scrollToTop"
-      >
-        <FALayers class="fa-scale-110 fa-old-padding-layer">
-          <FAIcon icon="arrow-up" />
-          <FAIcon
-            icon="minus"
-            transform="up-7"
-          />
-        </FALayers>
-      </button>
+      <div class="timeline-header-button">
+        <button
+          v-if="showScrollTop"
+          class="button-unstyled scroll-to-top-button"
+          type="button"
+          @click="scrollToTop"
+        >
+          <FALayers class="fa-scale-110 fa-old-padding-layer">
+            <FAIcon icon="arrow-up" />
+            <FAIcon
+              icon="minus"
+              transform="up-7"
+            />
+          </FALayers>
+        </button>
+      </div>
       <template v-if="mobileLayout && !embedded">
         <div
           class="timeline-header-button"

From 1c459028cc8670e1644c314279097fe20d0d9341 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:23:27 +0300
Subject: [PATCH 11/23] fix scrollerref not setting properly

---
 src/components/notifications/notifications.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 2682912a..c3acd9e0 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -119,13 +119,15 @@ const Notifications = {
     },
     teleportTarget () {
       // handle scroller change
-      this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
-      this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
-      if (!this.scrollerRef) {
-        this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
-      }
-      this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
-      this.updateScrollPosition()
+      this.$nextTick(() => {
+        this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
+        this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
+        if (!this.scrollerRef) {
+          this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
+        }
+        this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
+        this.updateScrollPosition()
+      })
     }
   },
   methods: {

From d3b5ba48646d7ff1c6a840a51d530ed617207ceb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:30:09 +0300
Subject: [PATCH 12/23] added scrolltotop for mobile notifications

---
 src/components/mobile_nav/mobile_nav.js  | 15 ++++++++++++---
 src/components/mobile_nav/mobile_nav.vue | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 88cbe1be..fb8ffa30 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -8,13 +8,17 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
   faBell,
-  faBars
+  faBars,
+  faArrowUp,
+  faMinus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faTimes,
   faBell,
-  faBars
+  faBars,
+  faArrowUp,
+  faMinus
 )
 
 const MobileNav = {
@@ -25,7 +29,8 @@ const MobileNav = {
   },
   data: () => ({
     notificationsCloseGesture: undefined,
-    notificationsOpen: false
+    notificationsOpen: false,
+    notificationsAtTop: true
   }),
   created () {
     this.notificationsCloseGesture = GestureService.swipeGesture(
@@ -80,6 +85,9 @@ const MobileNav = {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
+    scrollMobileNotificationsToTop () {
+      this.$refs.mobileNotifications.scrollTo(0, 0)
+    },
     logout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
@@ -89,6 +97,7 @@ const MobileNav = {
       this.$store.dispatch('markNotificationsAsSeen')
     },
     onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
+      this.notificationsAtTop = scrollTop > 0
       if (scrollTop + clientHeight >= scrollHeight) {
         this.$refs.notifications.fetchOlderNotifications()
       }
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index c38be75b..264bc713 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -48,6 +48,20 @@
     >
       <div class="mobile-notifications-header">
         <span class="title">{{ $t('notifications.notifications') }}</span>
+        <span class="spacer"/>
+        <button
+          v-if="notificationsAtTop"
+          class="button-unstyled mobile-nav-button"
+          @click.stop.prevent="scrollMobileNotificationsToTop"
+        >
+          <FALayers class="fa-scale-110 fa-old-padding-layer">
+            <FAIcon icon="arrow-up" />
+            <FAIcon
+              icon="minus"
+              transform="up-7"
+            />
+          </FALayers>
+        </button>
         <button
           class="button-unstyled mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications(true)"
@@ -61,6 +75,7 @@
       <div
         id="mobile-notifications"
         class="mobile-notifications"
+        ref="mobileNotifications"
         @scroll="onScroll"
       />
     </div>
@@ -165,6 +180,10 @@
     box-shadow: 0px 0px 4px rgba(0,0,0,.6);
     box-shadow: var(--topBarShadow);
 
+    .spacer {
+      flex: 1;
+    }
+
     .title {
       font-size: 1.3em;
       margin-left: 0.6em;

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: [PATCH 13/23] 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(-)

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>

From 66014fcfcb386f4110ff0a6056e45e61af434ea3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:34:53 +0300
Subject: [PATCH 14/23] port changes to notifications

---
 .../notifications/notification_filters.vue    | 19 ------------
 .../notifications/notifications.scss          | 20 +++++++++++++
 .../notifications/notifications.vue           | 30 +++++++++++--------
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index b0213167..1315b51a 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -109,22 +109,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-
-.NotificationFilters {
-  align-self: stretch;
-
-  > 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/notifications/notifications.scss b/src/components/notifications/notifications.scss
index f71f9b76..f4a3e099 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -29,6 +29,26 @@
       }
     }
   }
+
+  .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;
+      }
+    }
+  }
 }
 
 .notification {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 08d65439..22f67e65 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -20,20 +20,24 @@
               class="badge badge-notification unseen-count"
             >{{ unseenCount }}</span>
           </div>
-          <button
+          <div
+            class="timeline-header-button"
             v-if="showScrollTop"
-            class="button-unstyled scroll-to-top-button"
-            type="button"
-            @click="scrollToTop"
           >
-            <FALayers class="fa-scale-110 fa-old-padding-layer">
-              <FAIcon icon="arrow-up" />
-              <FAIcon
-                icon="minus"
-                transform="up-7"
-              />
-            </FALayers>
-          </button>
+            <button
+              class="button-unstyled scroll-to-top-button"
+              type="button"
+              @click="scrollToTop"
+            >
+              <FALayers class="fa-scale-110 fa-old-padding-layer">
+                <FAIcon icon="arrow-up" />
+                <FAIcon
+                  icon="minus"
+                  transform="up-7"
+                />
+              </FALayers>
+            </button>
+          </div>
           <button
             v-if="unseenCount"
             class="button-default read-button"
@@ -42,7 +46,7 @@
           >
             {{ $t('notifications.read') }}
           </button>
-          <NotificationFilters />
+          <NotificationFilters class="timeline-header-button" />
         </div>
         <div class="panel-body">
           <div

From a4e0eeea7a6784d8d96ce40be2921e41c5df8b0a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Sep 2022 11:49:19 +0300
Subject: [PATCH 15/23] fix buttons overlapping

---
 src/components/notifications/notifications.scss | 5 +++--
 src/components/timeline/timeline.scss           | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index f4a3e099..b57dfb3a 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -35,11 +35,12 @@
     text-align: center;
     width: var(--__panel-heading-height);
     height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding));
+    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
+    margin-right: -0.5em;
 
     > button {
       box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding));
+      padding: calc(1 * var(--panel-heading-height-padding)) 0;
       height: 100%;
       width: 100%;
       text-align: center;
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index c38ecfea..18a80a63 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -18,11 +18,12 @@
     text-align: center;
     width: var(--__panel-heading-height);
     height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding));
+    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
+    margin-right: -0.5em;
 
     > button {
       box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding));
+      padding: calc(1 * var(--panel-heading-height-padding)) 0;
       height: 100%;
       width: 100%;
       text-align: center;
@@ -37,6 +38,7 @@
     align-self: stretch;
     text-align: center;
     width: var(--__panel-heading-height);
+    margin-right: -0.5em;
 
     svg {
       font-size: 1.2em;

From ce6ce4b6cdd3aea2712ce73c0b0fd9d64372ac8e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Sep 2022 11:52:48 +0300
Subject: [PATCH 16/23] minor improvements

---
 src/components/notifications/notifications.scss | 2 +-
 src/components/timeline/timeline.scss           | 4 ++--
 src/components/timeline/timeline.vue            | 6 ++++--
 src/panel.scss                                  | 3 ++-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index b57dfb3a..245e3f47 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -36,7 +36,7 @@
     width: var(--__panel-heading-height);
     height: var(--__panel-heading-height);
     margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: -0.5em;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
 
     > button {
       box-sizing: border-box;
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 18a80a63..f5dbb639 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -19,7 +19,7 @@
     width: var(--__panel-heading-height);
     height: var(--__panel-heading-height);
     margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: -0.5em;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
 
     > button {
       box-sizing: border-box;
@@ -38,7 +38,7 @@
     align-self: stretch;
     text-align: center;
     width: var(--__panel-heading-height);
-    margin-right: -0.5em;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
 
     svg {
       font-size: 1.2em;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index fe5d4822..15d097e8 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -5,9 +5,11 @@
         v-if="!embedded"
         :timeline-name="timelineName"
       />
-      <div class="timeline-header-button">
+      <div
+        class="timeline-header-button"
+        v-if="showScrollTop && !embedded"
+      >
         <button
-          v-if="showScrollTop"
           class="button-unstyled scroll-to-top-button"
           type="button"
           @click="scrollToTop"
diff --git a/src/panel.scss b/src/panel.scss
index 2e769e27..b5ef67e9 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -45,6 +45,7 @@
 .panel-heading,
 .panel-footer {
   --panel-heading-height-padding: 0.6em;
+  --__panel-heading-gap: 0.5em;
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
@@ -54,7 +55,7 @@
   grid-auto-flow: column;
   grid-template-columns: minmax(50%, 1fr);
   grid-auto-columns: auto;
-  grid-column-gap: 0.5em;
+  grid-column-gap: var(--__panel-heading-gap);
   flex: none;
   background-size: cover;
   padding: var(--panel-heading-height-padding);

From 0331e42ee8576893dab2c6319ee5c0d62895b8d8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 9 Oct 2022 18:50:13 +0300
Subject: [PATCH 17/23] move definitions for timeline header buttons to
 Panel.scss, now called rightside buttons

---
 src/components/conversation/conversation.vue  |  2 ++
 .../notifications/notifications.scss          | 21 ------------
 .../notifications/notifications.vue           |  4 +--
 src/components/timeline/timeline.scss         | 32 -------------------
 src/components/timeline/timeline.vue          | 10 +++---
 src/panel.scss                                | 32 +++++++++++++++++++
 6 files changed, 41 insertions(+), 60 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 61832566..3752e3c1 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -20,10 +20,12 @@
       <QuickFilterSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
       <QuickViewSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
     </div>
     <div class="conversation-body panel-body">
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 245e3f47..f71f9b76 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -29,27 +29,6 @@
       }
     }
   }
-
-  .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)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
 }
 
 .notification {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 22f67e65..3f4b1b42 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -21,7 +21,7 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="timeline-header-button"
+            class="rightside-button"
             v-if="showScrollTop"
           >
             <button
@@ -46,7 +46,7 @@
           >
             {{ $t('notifications.read') }}
           </button>
-          <NotificationFilters class="timeline-header-button" />
+          <NotificationFilters class="rightside-button" />
         </div>
         <div class="panel-body">
           <div
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index f5dbb639..900bdad3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,38 +13,6 @@
     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)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      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);
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-
   .loadmore-button {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 15d097e8..77480345 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -6,7 +6,7 @@
         :timeline-name="timelineName"
       />
       <div
-        class="timeline-header-button"
+        class="rightside-button"
         v-if="showScrollTop && !embedded"
       >
         <button
@@ -25,7 +25,7 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="timeline-header-button"
+          class="rightside-button"
           v-if="showLoadButton"
         >
           <button
@@ -41,7 +41,7 @@
         </div>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint veryfaint timeline-header-icon"
+          class="loadmore-text faint veryfaint rightside-icon"
           @click.prevent
         >
           <FAIcon
@@ -66,8 +66,8 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
-      <QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
+      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
+      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
     </div>
     <div :class="classes.body">
       <div
diff --git a/src/panel.scss b/src/panel.scss
index b5ef67e9..a53e47c6 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -196,6 +196,38 @@
       }
     }
   }
+
+  .rightside-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)) 0;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding)) 0;
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  .rightside-icon {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
 }
 
 .panel-footer {

From cf9957c7332f30db12fce8a2b1d21d9ba508537b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 9 Oct 2022 19:00:25 +0300
Subject: [PATCH 18/23] fix alert dot

---
 src/components/navigation/navigation_pins.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 5b3fa6f4..9cb4b536 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -39,10 +39,8 @@
     height: 0.5em;
     width: 0.5em;
     position: absolute;
-    right: calc(50% - 0.25em);
-    top: calc(50% - 0.25em);
-    margin-left: 6px;
-    margin-top: -6px;
+    right: calc(50% - 0.75em);
+    top: calc(50% - 0.5em);
     background-color: $fallback--cRed;
     background-color: var(--badgeNotification, $fallback--cRed);
   }

From 8b957fb85e6668d9c1cf771c788bb619f5cedf93 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 9 Oct 2022 19:04:45 +0300
Subject: [PATCH 19/23] fix chevrons alignment

---
 src/components/nav_panel/nav_panel.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 7373ca63..d628c380 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -12,7 +12,7 @@
           @click="toggleCollapse"
         >
           <FAIcon
-            class="timelines-chevron"
+            class="navigation-chevron"
             fixed-width
             :icon="collapsed ? 'chevron-down' : 'chevron-up'"
           />
@@ -143,12 +143,17 @@
     border: none;
   }
 
-  .timelines-chevron {
+  .navigation-chevron {
     margin-left: 0.8em;
     margin-right: 0.8em;
     font-size: 1.1em;
   }
 
+  .timelines-chevron {
+    margin-left: 0.8em;
+    font-size: 1.1em;
+  }
+
   .timelines-background {
     padding: 0 0 0 0.6em;
     background-color: $fallback--lightBg;

From 1435b65e36a21dd3a05a9393803beb7e06bcd4ae Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Oct 2022 21:50:37 +0300
Subject: [PATCH 20/23] add titles to mobile buttons

---
 src/components/notifications/notifications.vue | 1 +
 src/components/timeline/timeline.vue           | 3 +++
 src/i18n/en.json                               | 1 +
 3 files changed, 5 insertions(+)

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 3f4b1b42..f9c90a7e 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -27,6 +27,7 @@
             <button
               class="button-unstyled scroll-to-top-button"
               type="button"
+              :title="$t('general.scroll_to_top')"
               @click="scrollToTop"
             >
               <FALayers class="fa-scale-110 fa-old-padding-layer">
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 77480345..e6038830 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -12,6 +12,7 @@
         <button
           class="button-unstyled scroll-to-top-button"
           type="button"
+          :title="$t('general.scroll_to_top')"
           @click="scrollToTop"
         >
           <FALayers class="fa-scale-110 fa-old-padding-layer">
@@ -30,6 +31,7 @@
         >
           <button
             class="button-unstyled loadmore-button"
+            :title="loadButtonString"
             @click.prevent="showNewStatuses"
           >
             <FAIcon
@@ -42,6 +44,7 @@
         <div
           v-else-if="!embedded"
           class="loadmore-text faint veryfaint rightside-icon"
+          :title="$t('timeline.up_to_date')"
           @click.prevent
         >
           <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 30b59e82..246e22cf 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -84,6 +84,7 @@
     "yes": "Yes",
     "no": "No",
     "peek": "Peek",
+    "scroll_to_top": "Scroll to top",
     "role": {
       "admin": "Admin",
       "moderator": "Moderator"

From 373fb077a820deae28f494e7d2dc8c19370a54bf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Oct 2022 21:50:49 +0300
Subject: [PATCH 21/23] use new color slot for badges

---
 src/components/timeline/timeline.scss | 2 +-
 src/services/theme_data/pleromafe.js  | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 900bdad3..9fc2aeab 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,7 +10,7 @@
     top: calc(50% - 4px);
     margin-left: 6px;
     margin-top: -6px;
-    background-color: var(--cGreen);
+    background-color: var(--badgeNeutral);
   }
 
   .loadmore-button {
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index c2983be7..dc7a5d89 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -709,6 +709,14 @@ export const SLOT_INHERITANCE = {
     textColor: 'bw'
   },
 
+  badgeNeutral: '--cGreen',
+  badgeNeutralText: {
+    depends: ['text', 'badgeNeutral'],
+    layer: 'badge',
+    variant: 'badgeNeutral',
+    textColor: 'bw'
+  },
+
   chatBg: {
     depends: ['bg']
   },

From 3aadad30133928bdac3067dfc1fd7f94dbf70b52 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 1 Nov 2022 22:26:04 +0200
Subject: [PATCH 22/23] show counter in show new button on mobile

---
 src/components/timeline/timeline.js   |  7 +++++++
 src/components/timeline/timeline.scss | 15 +++++++++++++++
 src/components/timeline/timeline.vue  |  4 +++-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index f4efc5e8..b7414610 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -69,6 +69,13 @@ const Timeline = {
         return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
       }
     },
+    mobileLoadButtonString () {
+      if (this.timeline.flushMarker !== 0) {
+        return '+'
+      } else {
+        return this.newStatusCount > 99 ? '∞' : this.newStatusCount
+      }
+    },
     classes () {
       let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9fc2aeab..24a45070 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,6 +13,21 @@
     background-color: var(--badgeNeutral);
   }
 
+  .alert-badge {
+    font-size: 0.75em;
+    line-height: 1;
+    text-align: right;
+    border-radius: var(--tooltipRadius);
+    position: absolute;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.4em);
+    padding: 0.2em;
+    margin-left: 0.7em;
+    margin-top: -1em;
+    background-color: var(--badgeNeutral);
+    color: var(--badgeNeutralText);
+  }
+
   .loadmore-button {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index e6038830..8a036fd0 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -38,7 +38,9 @@
               fixed-width
               icon="circle-plus"
             />
-            <div class="alert-dot" />
+            <div class="alert-badge">
+              {{ mobileLoadButtonString }}
+            </div>
           </button>
         </div>
         <div

From e80bf50a363f3dea5a4b55bce03e1f1b510ae8cc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 1 Nov 2022 23:05:17 +0200
Subject: [PATCH 23/23] lint

---
 src/components/timeline/timeline.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 24a45070..c6fb1ca7 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -29,7 +29,7 @@
   }
 
   .loadmore-button {
-    position: relative
+    position: relative;
   }
 
   &.-blocked {