From 8e0a988399bb840feded8d5dd101d4a29eadbecf Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Wed, 24 Aug 2022 09:09:22 +0000
Subject: [PATCH 1/4] Update dependency eslint-plugin-vue to v9.4.0

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index dfc9c4b1a..1041fa94f 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-n": "15.2.5",
     "eslint-plugin-promise": "6.0.0",
-    "eslint-plugin-vue": "9.3.0",
+    "eslint-plugin-vue": "9.4.0",
     "eslint-webpack-plugin": "3.2.0",
     "eventsource-polyfill": "0.9.6",
     "express": "4.18.1",
diff --git a/yarn.lock b/yarn.lock
index d8215d9de..6075837bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3893,10 +3893,10 @@ eslint-plugin-promise@6.0.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.0.0.tgz#017652c07c9816413a41e11c30adc42c3d55ff18"
   integrity sha512-7GPezalm5Bfi/E22PnQxDWH2iW9GTvAlUNTztemeHb6c1BniSyoeTrM87JkC0wYdi6aQrZX9p2qEiAno8aTcbw==
 
-eslint-plugin-vue@9.3.0:
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.3.0.tgz#c3f5ce515dae387e062428725c5cf96098d9da0b"
-  integrity sha512-iscKKkBZgm6fGZwFt6poRoWC0Wy2dQOlwUPW++CiPoQiw1enctV2Hj5DBzzjJZfyqs+FAXhgzL4q0Ww03AgSmQ==
+eslint-plugin-vue@9.4.0:
+  version "9.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.4.0.tgz#31c2d9002b5bb437b351a5feffdf37c4397e5cb9"
+  integrity sha512-Nzz2QIJ8FG+rtJaqT/7/ru5ie2XgT9KCudkbN0y3uFYhQ41nuHEaboLAiqwMcK006hZPQv/rVMRhUIwEGhIvfQ==
   dependencies:
     eslint-utils "^3.0.0"
     natural-compare "^1.4.0"

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 2/4] 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 7a3d6759b..058d26691 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 d57166eb1..7577164db 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 6fca869f4..4eb63f844 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 9e009fd33..9d442a952 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 a6bfeed13..f9f5bf92d 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 3/4] 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 058d26691..2682912af 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 4/4] 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 877d52a93..3b41d2cea 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 949cf17ef..e3459681b 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"