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 1/6] 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 982238e77..554c6bde8 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 99b14a66a..5fdfd6082 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 900bdad31..c38ecfea3 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 cffd4b68d..c8aeaf1e6 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 2/6] 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 c8aeaf1e6..fe5d4822b 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 3/6] 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 2682912af..c3acd9e07 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 4/6] 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 88cbe1be5..fb8ffa30f 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 c38be75b0..264bc7137 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 5/6] 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 554c6bde8..54ea037e3 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 5fdfd6082..b0413cac1 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 6/6] 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 b02131675..1315b51ad 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 f71f9b761..f4a3e0992 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 08d65439b..22f67e654 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