Fix notification & follow list sorting, Add notification badge + loading animation (#206)

* Order notifications and followed mods

Fixes modrinth/knossos#195

* Add user notification badge on avatar

Closes modrinth/knossos#145

* Add loading animation

* Chain calls, remove console.log

* Chain calls

* Fix formatting to match prettier

* Remove unused userFollows

* Create user vuex store

* Add notification count indication on dashboard

* Fix background for light mode

* Move delay check to action, add force parameter

* Slightly decrease notification badge opacity on dashboard

* Remove SVG for image masking, use border around bubble

Also adds CSS for when the dropdown is opened/hovered

* Fix merge conflicts

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

pages/dashboard.vue

@@ -10,6 +10,9 @@
           <nuxt-link :to="'/dashboard/notifications'" class="tab last">
             <NotificationsIcon />
             Notifications
+            <div v-if="this.$user.notifications.count > 0" class="notif-count">
+              {{ this.$user.notifications.count }}
+            </div>
           </nuxt-link>
           <nuxt-link :to="'/dashboard/follows'" class="tab last">
             <FollowIcon />
@@ -88,4 +91,17 @@ export default {
 .hideSmall {
   padding-top: 0;
 }
+
+.notif-count {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: rgba(180, 180, 180, 0.4);
+  border-radius: 2rem;
+  padding: 0.1rem 0.35rem;
+  margin: 0 0.2rem 0 auto;
+
+  font-size: 0.9rem;
+}
 </style>

pages/dashboard/follows.vue

@@ -68,7 +68,8 @@ export default {
       await axios.get(
         `https://api.modrinth.com/api/v1/mods?ids=${JSON.stringify(res.data)}`
       )
-    ).data
+    ).data.sort((a, b) => a.title > b.title)
+
     return {
       mods,
     }

pages/dashboard/notifications.vue

@@ -65,7 +65,7 @@ export default {
         `https://api.modrinth.com/api/v1/user/${data.$auth.user.id}/notifications`,
         data.$auth.headers
       )
-    ).data
+    ).data.sort((a, b) => new Date(b.created) - new Date(a.created))
 
     return {
       notifications,
@@ -94,6 +94,7 @@ export default {
         )
 
         this.notifications.splice(index, 1)
+        this.$store.dispatch('user/fetchNotifications', { force: true })
       } catch (err) {
         this.$notify({
           group: 'main',

pages/mods.vue

@@ -71,6 +71,7 @@
             ethical-ads-big
           />
           <div v-if="results === null" class="no-results">
+            <LogoAnimated />
             <p>Loading...</p>
           </div>
           <div v-else>
@@ -318,6 +319,7 @@ import axios from 'axios'
 import SearchResult from '~/components/ui/ProjectCard'
 import Pagination from '~/components/ui/Pagination'
 import SearchFilter from '~/components/ui/search/SearchFilter'
+import LogoAnimated from '~/components/ui/search/LogoAnimated'
 import Checkbox from '~/components/ui/Checkbox'
 
 import MFooter from '~/components/layout/MFooter'
@@ -373,6 +375,7 @@ export default {
     ServerSide,
     SearchIcon,
     ExitIcon,
+    LogoAnimated,
   },
   async fetch() {
     if (this.$route.query.q) this.query = this.$route.query.q