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: add "scroll to top" button to timelines and notifications

---
 src/components/notifications/notifications.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

(limited to 'src/components/notifications/notifications.js')

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
-- 
cgit v1.2.3-70-g09d2


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: use a bit more compact layout on mobile

---
 src/components/notifications/notifications.js  |  5 ++-
 src/components/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(-)

(limited to 'src/components/notifications/notifications.js')

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" />
-      </button>
-      <button
-        v-if="showLoadButton"
-        class="button-default loadmore-button"
-        @click.prevent="showNewStatuses"
-      >
-        {{ loadButtonString }}
+        <FALayers class="fa-scale-110 fa-old-padding-layer">
+          <FAIcon icon="arrow-up" />
+          <FAIcon
+            icon="minus"
+            transform="up-7"
+          />
+        </FALayers>
       </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>
-- 
cgit v1.2.3-70-g09d2


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: fix notifications

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

(limited to 'src/components/notifications/notifications.js')

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: {
-- 
cgit v1.2.3-70-g09d2


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: fix scrollerref not setting properly

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

(limited to 'src/components/notifications/notifications.js')

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: {
-- 
cgit v1.2.3-70-g09d2


From b4a7e58bec86205e23adda2b0625d237acd5aa91 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 17 Mar 2022 17:51:39 -0400
Subject: Show badges for unread announcements

---
 src/components/mobile_nav/mobile_nav.js       | 2 +-
 src/components/mobile_nav/mobile_nav.vue      | 2 +-
 src/components/nav_panel/nav_panel.js         | 2 +-
 src/components/navigation/navigation.js       | 3 ++-
 src/components/notifications/notifications.js | 4 ++--
 src/components/side_drawer/side_drawer.js     | 2 +-
 src/components/side_drawer/side_drawer.vue    | 6 ++++++
 src/modules/announcements.js                  | 9 +++++++++
 8 files changed, 23 insertions(+), 7 deletions(-)

(limited to 'src/components/notifications/notifications.js')

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index fb8ffa30..cdbbb812 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -54,7 +54,7 @@ const MobileNav = {
     isChat () {
       return this.$route.name === 'chat'
     },
-    ...mapGetters(['unreadChatCount']),
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount']),
     chatsPinned () {
       return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
     }
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d642008b..0f1fe621 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -19,7 +19,7 @@
             icon="bars"
           />
           <div
-            v-if="unreadChatCount && !chatsPinned"
+            v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
             class="alert-dot"
           />
         </button>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 66c8a4cd..438615da 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -117,7 +117,7 @@ const NavPanel = {
         }
       )
     },
-    ...mapGetters(['unreadChatCount'])
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   }
 }
 
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index 4541e60b..40100f97 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -75,6 +75,7 @@ export const ROOT_ITEMS = {
   announcements: {
     route: 'announcements',
     icon: 'bullhorn',
-    label: 'nav.announcements'
+    label: 'nav.announcements',
+    badgeGetter: 'unreadAnnouncementCount'
   }
 }
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c3acd9e0..dde9c93e 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -69,7 +69,7 @@ const Notifications = {
       return this.unseenNotifications.length
     },
     unseenCountTitle () {
-      return this.unseenCount + (this.unreadChatCount)
+      return this.unseenCount + (this.unreadChatCount) + this.unreadAnnouncementCount
     },
     loading () {
       return this.$store.state.statuses.notifications.loading
@@ -94,7 +94,7 @@ const Notifications = {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
-    ...mapGetters(['unreadChatCount'])
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   },
   mounted () {
     this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index bb22446b..680216dd 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -97,7 +97,7 @@ const SideDrawer = {
     ...mapState({
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     }),
-    ...mapGetters(['unreadChatCount'])
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   },
   methods: {
     toggleDrawer () {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index dccb8ab7..4101cb03 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -202,6 +202,12 @@
               class="fa-scale-110 fa-old-padding"
               icon="bullhorn"
             /> {{ $t("nav.announcements") }}
+            <span
+              v-if="unreadAnnouncementCount"
+              class="badge badge-notification"
+            >
+              {{ unreadAnnouncementCount }}
+            </span>
           </router-link>
         </li>
         <li
diff --git a/src/modules/announcements.js b/src/modules/announcements.js
index 8470fb2a..f04ba50e 100644
--- a/src/modules/announcements.js
+++ b/src/modules/announcements.js
@@ -25,9 +25,18 @@ export const mutations = {
   }
 }
 
+export const getters = {
+  unreadAnnouncementCount (state) {
+    return state.announcements.reduce((acc, cur) => {
+      return (!cur.inactive && !cur.read) ? acc + 1 : acc
+    }, 0)
+  }
+}
+
 const announcements = {
   state: defaultState,
   mutations,
+  getters,
   actions: {
     fetchAnnouncements (store) {
       const currentUser = store.rootState.users.currentUser
-- 
cgit v1.2.3-70-g09d2


From 48be4e9cb6a730cdcecbd1d2db294406315f1d87 Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Sun, 11 Dec 2022 18:50:34 +0300
Subject: Fix notifications/interactions null dereference

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

(limited to 'src/components/notifications/notifications.js')

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index dde9c93e..d499d3d6 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -101,6 +101,9 @@ const Notifications = {
     if (!this.scrollerRef) {
       this.scrollerRef = this.$refs.root.closest('.mobile-notifications')
     }
+    if (!this.scrollerRef) {
+      this.scrollerRef = this.$refs.root.closest('.column.main')
+    }
     this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
   },
   unmounted () {
-- 
cgit v1.2.3-70-g09d2